Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-07 23:08:24 -05:00
Code Issues 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
Show stats 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)
:on-close close-dropdown}
[:ul {:class (stl/css :custom-select-dropdown)
:ref font-size-wrapper-ref}
(for [[index item] (map-indexed vector options)]
(if (= :separator item)
[:li {:class (stl/css :separator)
:key (dm/str element-id "-" index)}]
(let [[value label] (as-key-value item)]
[:li
{:key (str element-id "-" index)
:class (stl/css-case :dropdown-element true
:is-selected (= (dm/str value) current-value))
:data-value value
:on-click select-item}
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)}
i/tick]])))]]]))
[:div {:class (stl/css :custom-select-dropdown)
:ref select-wrapper-ref}
[:ul {:class (stl/css :custom-select-dropdown-list)}
(for [[index item] (map-indexed vector options)]
(if (= :separator item)
[:li {:class (stl/css :separator)
:key (dm/str element-id "-" index)}]
(let [[value label] (as-key-value item)]
[:li
{:key (str element-id "-" index)
:class (stl/css-case :dropdown-element true
:is-selected (= (dm/str value) current-value))
:data-value value
:on-click select-item}
[:span {:class (stl/css :label)} label]
[: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 {
@extend .dropdown-wrapper;
max-height: $s-320;
width: auto;
margin-top: $s-4;
right: 0;
left: auto;
left: unset;
.separator {
margin: 0;
height: $s-12;
}
.dropdown-element {
@extend .dropdown-element-base;
color: var(--menu-foreground-color-rest);
padding: 0;
display: flex;
.label,
.value {
width: fit-content;
}
.label {
flex-grow: 1;
width: 100%;
text-transform: unset;
flex: 1;
}
.value {
flex: 0.2;
text-align: right;
}
.check-icon {