3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-27 05:19:04 +02:00
Code Issues Projects Releases Packages Wiki Activity

Style select

Browse source
This commit is contained in:
Florian Schroedl 2024-05-17 09:05:18 +02:00
parent 8dd2ba7d78
commit e69bfb8c54
2 changed files with 40 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
View file

@ -185,19 +185,21 @@
[:& dropdown {:show (or is-open? false) [:& dropdown {:show (or is-open? false)
:on-close close-dropdown} :on-close close-dropdown}
[:ul {:class (stl/css :custom-select-dropdown) [:div {:class (stl/css :custom-select-dropdown)
:ref font-size-wrapper-ref} :ref select-wrapper-ref}
(for [[index item] (map-indexed vector options)] [:ul {:class (stl/css :custom-select-dropdown-list)}
(if (= :separator item) (for [[index item] (map-indexed vector options)]
[:li {:class (stl/css :separator) (if (= :separator item)
:key (dm/str element-id "-" index)}] [:li {:class (stl/css :separator)
(let [[value label] (as-key-value item)] :key (dm/str element-id "-" index)}]
[:li (let [[value label] (as-key-value item)]
{:key (str element-id "-" index) [:li
:class (stl/css-case :dropdown-element true {:key (str element-id "-" index)
:is-selected (= (dm/str value) current-value)) :class (stl/css-case :dropdown-element true
:data-value value :is-selected (= (dm/str value) current-value))
:on-click select-item} :data-value value
[:span {:class (stl/css :label)} label] :on-click select-item}
[:span {:class (stl/css :check-icon)} [:span {:class (stl/css :label)} label]
i/tick]])))]]])) [:span {:class (stl/css :value)} value]
[:span {:class (stl/css :check-icon)}
i/tick]])))]]]]))

25
frontend/src/app/main/ui/workspace/tokens/editable_select.scss
View file

@ -31,25 +31,44 @@
} }
} }
.custom-select-dropdown-list {
width: 100%;
max-width: 180px;
margin-bottom: 0;
}
.custom-select-dropdown { .custom-select-dropdown {
@extend .dropdown-wrapper; @extend .dropdown-wrapper;
max-height: $s-320; max-height: $s-320;
width: auto; width: auto;
margin-top: $s-4; margin-top: $s-4;
right: 0; right: 0;
left: auto; left: unset;
.separator { .separator {
margin: 0; margin: 0;
height: $s-12; height: $s-12;
} }
.dropdown-element { .dropdown-element {
@extend .dropdown-element-base; @extend .dropdown-element-base;
color: var(--menu-foreground-color-rest); color: var(--menu-foreground-color-rest);
padding: 0;
display: flex;
.label,
.value {
width: fit-content;
}
.label { .label {
flex-grow: 1;
width: 100%;
text-transform: unset; text-transform: unset;
flex: 1;
}
.value {
flex: 0.2;
text-align: right;
} }
.check-icon { .check-icon {