Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-09 21:41:23 -05:00
Code Issues Activity

🐛 Fix overflow on tokens sidebar

Browse source
This commit is contained in:
Xavier Julian 2025-03-26 22:53:35 +01:00 • committed by Xaviju
parent b1df0ac194
commit c259b8ed46
8 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -106,9 +106,9 @@
[:> heading* {:level 3
:class (stl/css :theme-group-label)
:typography "body-large"}
[:span {:class (stl/css :group-title) :title (tr "workspace.token.group-name")}
[:> icon* {:icon-id "group"}]
group]])
[:div {:class (stl/css :group-title) :title (str (tr "workspace.token.group-name") ": " group)}
[:> icon* {:icon-id "group" :class (stl/css :group-title-icon)}]
[:> text* {:as "span" :typography "body-medium" :class (stl/css :group-title-name)} group]]])
[:ul {:class (stl/css :theme-group-rows-wrapper)}
(for [[_ {:keys [group name] :as theme}] themes
:let [theme-id (ctob/theme-path theme)
@ -126,7 +126,7 @@
:theme-path [(:id theme) (:group theme) (:name theme)]})))]]
[:li {:key theme-id
:class (stl/css :theme-row)}
[:div {:class (stl/css :theme-row-left)}
[:div {:class (stl/css :theme-switch-row)}
;; FIXME: FIREEEEEEEEEE THIS
[:div {:on-click (fn [e]
@ -135,11 +135,12 @@
(st/emit! (wdt/toggle-token-theme-active? group name)))}
[:& switch {:name (tr "workspace.token.theme-name" name)
:on-change (constantly nil)
:selected? selected?}]]
[:> text* {:as "span" :typography "body-medium" :class (stl/css :theme-name)} name]]
:selected? selected?}]]]
[:div {:class (stl/css :theme-name-row)}
[:> text* {:as "span" :typography "body-medium" :class (stl/css :theme-name) :title name} name]]
[:div {:class (stl/css :theme-row-right)}
[:div {:class (stl/css :theme-actions-row)}
(let [sets-count (some-> theme :sets seq count)]
[:> button* {:class (stl/css-case :sets-count-button sets-count
:sets-count-empty-button (not sets-count))

29
frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
View file

@ -32,8 +32,8 @@
}
.themes-modal-wrapper {
display: grid;
grid-template-rows: 0fr minmax(0, 1fr);
display: flex;
flex-direction: column;
gap: $s-16;
max-height: $s-688;
}
@ -120,6 +120,15 @@
gap: $s-4;
}
.group-title-icon {
flex-shrink: 0;
}
.group-title-name {
flex-grow: 1;
@include textEllipsis;
}
.theme-group-rows-wrapper {
display: flex;
flex-direction: column;
@ -136,26 +145,26 @@
}
.theme-row {
display: flex;
align-items: center;
gap: $s-12;
display: flex;
justify-content: space-between;
gap: $s-16;
}
.theme-row-left {
display: flex;
align-items: center;
gap: $s-16;
.theme-name-row {
@include textEllipsis;
flex-grow: 1;
}
.theme-name {
color: var(--color-foreground-primary);
}
.theme-row-right {
display: flex;
.theme-actions-row {
align-items: center;
display: flex;
gap: $s-6;
flex-shrink: 0;
}
.sets-count-button {

3
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -227,6 +227,7 @@
:on-submit on-edit-submit'}]
[:*
[:div {:class (stl/css :set-name)
:title label
:on-double-click on-double-click
:id label-id}
label]
@ -499,7 +500,7 @@
(when (fn? on-start-edition)
(on-start-edition v))))]
[:fieldset {:class (stl/css :sets-list)}
[:div {:class (stl/css :sets-list)}
(if ^boolean empty-state?
[:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message-sets)}
(tr "workspace.token.no-sets-create")]

2
frontend/src/app/main/ui/workspace/tokens/sets.scss
View file

@ -70,6 +70,7 @@
}
.icon {
flex-shrink: 0;
display: flex;
align-items: center;
width: $s-20;
@ -82,6 +83,7 @@
}
.checkbox-style {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;

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

@ -319,8 +319,7 @@
[:*
[:& token-context-menu]
[:& title-bar {:all-clickable true
:title (tr "workspace.token.tokens-section-title" selected-token-set-name)}]
[:span {:class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)]
(for [type filled-group]
(let [tokens (get tokens-by-type type)]

6
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -38,11 +38,11 @@
padding-block-end: $s-16;
}
.themes-header {
.themes-header,
.sets-header {
@include use-typography("headline-small");
display: block;
margin-bottom: $s-8;
padding-left: $s-8;
padding: $s-8;
color: var(--title-foreground-color);
word-break: break-word;
}

4
frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
View file

@ -41,7 +41,7 @@
:sub-item grouped?
:is-selected selected?)
:on-click select-theme}
[:> text* {:as "span" :typography "body-small" :class (stl/css :label)} name]
[:> text* {:as "span" :typography "body-small" :class (stl/css :label) :title name} name]
[:> icon* {:icon-id i/tick
:aria-hidden true
:class (stl/css-case :check-icon true
@ -58,7 +58,7 @@
:aria-labelledby (dm/str group "-label")
:role "group"}
(when (seq group)
[:> text* {:as "span" :typography "headline-small" :class (stl/css :group) :id (dm/str group "-label")} group])
[:> text* {:as "span" :typography "headline-small" :class (stl/css :group) :id (dm/str (str/kebab group) "-label") :title group} group])
[:& themes-list {:themes themes
:active-theme-paths active-theme-paths
:on-close on-close

1
frontend/src/app/main/ui/workspace/tokens/theme_select.scss
View file

@ -41,6 +41,7 @@
}
.group {
@include textEllipsis;
display: block;
padding: $s-8;
color: var(--color-foreground-secondary);