Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

🐛 Fix text length on tabs

Browse source
This commit is contained in:
Eva Marco 2024-04-10 17:21:26 +02:00 • committed by AzazelN28
parent 87d0c2ac30
commit f1685f6e75
4 changed files with 76 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -132,6 +132,7 @@
- Fix problem when changing typography assets [Github #3683](https://github.com/penpot/penpot/issues/3683)
- Internal error when you copy and paste some main components between files [Taiga #7397](https://tree.taiga.io/project/penpot/issue/7397)
- Fix toolbar disappearing [Taiga #7411](https://tree.taiga.io/project/penpot/issue/7411)
- Fix long text on tab breaks UI [Taiga Issue #7421](https://tree.taiga.io/project/penpot/issue/7421)
## 1.19.5

4
frontend/src/app/main/ui/components/tab_container.cljs
View file

@ -56,12 +56,14 @@
title (.-title props)
sid (d/name id)]
[:div {:key (str/concat "tab-" sid)
:title title
:data-id sid
:on-click on-click
:class (stl/css-case
:tab-container-tab-title true
:current (= selected id))}
title]))]]
[:span {:class (stl/css :content)}
title]]))]]
[:div {:class (dm/str content-class " " (stl/css :tab-container-content))}
(d/seek #(= selected (-> % .-props .-id))

134
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -21,74 +21,82 @@
cursor: pointer;
font-size: $fs-12;
height: 100%;
.tab-container-tab-wrapper {
@include flexCenter;
flex-direction: row;
height: 100%;
width: 100%;
.tab-container-tab-title {
@include flexCenter;
@include headlineSmallTypography;
height: 100%;
width: 100%;
padding: 0 $s-8;
margin: 0;
border-radius: $br-8;
background-color: transparent;
color: var(--tab-foreground-color);
white-space: nowrap;
border: $s-2 solid var(--tab-border-color);
svg {
@extend .button-icon;
stroke: var(--tab-foreground-color);
}
}
&.current,
&.current:hover {
background: var(--tab-background-color-selected);
border-color: var(--tab-border-color-selected);
color: var(--tab-foreground-color-selected);
svg {
stroke: var(--tab-foreground-color-selected);
}
}
&:hover {
color: var(--tab-foreground-color-hover);
svg {
stroke: var(--tab-foreground-color-hover);
}
}
.tab-container-tab-wrapper {
display: grid;
grid-auto-flow: column;
height: 100%;
width: 100%;
}
.tab-container-tab-title {
@include flexCenter;
height: 100%;
width: 100%;
padding: 0 $s-8;
margin: 0;
border-radius: $br-8;
background-color: transparent;
color: var(--tab-foreground-color);
border: $s-2 solid var(--tab-border-color);
min-width: 0;
svg {
@extend .button-icon;
stroke: var(--tab-foreground-color);
}
.content {
@include headlineSmallTypography;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.current,
&.current:hover {
background: var(--tab-background-color-selected);
border-color: var(--tab-border-color-selected);
color: var(--tab-foreground-color-selected);
svg {
stroke: var(--tab-foreground-color-selected);
}
}
&:hover {
color: var(--tab-foreground-color-hover);
svg {
stroke: var(--tab-foreground-color-hover);
}
}
}
.collapse-sidebar {
@include flexCenter;
@include buttonStyle;
height: 100%;
width: $s-24;
min-width: $s-24;
padding: 0 $s-6;
border-radius: $br-5;
svg {
@include flexCenter;
height: $s-16;
width: $s-16;
stroke: var(--icon-foreground);
transform: rotate(180deg);
fill: none;
color: transparent;
}
&:hover {
svg {
stroke: var(--icon-foreground-hover);
}
}
.collapse-sidebar {
@include flexCenter;
@include buttonStyle;
height: 100%;
width: $s-24;
min-width: $s-24;
padding: 0 $s-6;
border-radius: $br-5;
&.collapsed {
svg {
@include flexCenter;
height: $s-16;
width: $s-16;
stroke: var(--icon-foreground);
transform: rotate(180deg);
fill: none;
color: transparent;
}
&:hover {
svg {
stroke: var(--icon-foreground-hover);
}
}
&.collapsed {
svg {
transform: rotate(0deg);
padding: 0 0 0 $s-6;
}
transform: rotate(0deg);
padding: 0 0 0 $s-6;
}
}
}

2
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -167,7 +167,7 @@
:id "right-sidebar-aside"
:data-size (str size)
:style #js {"--width" (when can-be-expanded? (dm/str size "px"))}}
:style #js {"--width" (if can-be-expanded? (dm/str size "px") 276)}}
(when can-be-expanded?
[:div {:class (stl/css :resize-area)
:on-pointer-down on-pointer-down