Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-09 00:28:20 -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) - 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) - 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 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 ## 1.19.5

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

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

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

@ -21,14 +21,17 @@
cursor: pointer; cursor: pointer;
font-size: $fs-12; font-size: $fs-12;
height: 100%; height: 100%;
.tab-container-tab-wrapper { }
@include flexCenter;
flex-direction: row; .tab-container-tab-wrapper {
display: grid;
grid-auto-flow: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
.tab-container-tab-title { }
.tab-container-tab-title {
@include flexCenter; @include flexCenter;
@include headlineSmallTypography;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 0 $s-8; padding: 0 $s-8;
@ -36,13 +39,20 @@
border-radius: $br-8; border-radius: $br-8;
background-color: transparent; background-color: transparent;
color: var(--tab-foreground-color); color: var(--tab-foreground-color);
white-space: nowrap;
border: $s-2 solid var(--tab-border-color); border: $s-2 solid var(--tab-border-color);
min-width: 0;
svg { svg {
@extend .button-icon; @extend .button-icon;
stroke: var(--tab-foreground-color); stroke: var(--tab-foreground-color);
} }
.content {
@include headlineSmallTypography;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.current, &.current,
&.current:hover { &.current:hover {
background: var(--tab-background-color-selected); background: var(--tab-background-color-selected);
@ -58,10 +68,9 @@
stroke: var(--tab-foreground-color-hover); stroke: var(--tab-foreground-color-hover);
} }
} }
} }
}
.collapse-sidebar { .collapse-sidebar {
@include flexCenter; @include flexCenter;
@include buttonStyle; @include buttonStyle;
height: 100%; height: 100%;
@ -90,7 +99,6 @@
padding: 0 0 0 $s-6; padding: 0 0 0 $s-6;
} }
} }
}
} }
.tab-container-content { .tab-container-content {

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

@ -167,7 +167,7 @@
:id "right-sidebar-aside" :id "right-sidebar-aside"
:data-size (str size) :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? (when can-be-expanded?
[:div {:class (stl/css :resize-area) [:div {:class (stl/css :resize-area)
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down