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

🐛 Fix problem with icons in select

Browse source
This commit is contained in:
alonso.torres 2024-01-05 11:27:03 +01:00 • committed by Andrey Antukh
parent 3702c054a8
commit 1f712c82bf
2 changed files with 34 additions and 29 deletions
frontend/src/app/main/ui/components
select.cljsselect.scss

59
frontend/src/app/main/ui/components/select.cljs
View file

@ -81,33 +81,34 @@
(mf/with-effect [default-value]
(swap! state* assoc :current-value default-value))
[:div {:on-click open-dropdown
:class (dm/str class " " (stl/css-case :custom-select true
:disabled disabled))}
(let [selected-option (first (filter #(= (:value %) default-value) options))
current-icon (:icon selected-option)
current-icon-ref (i/key->icon current-icon)]
(let [selected-option (first (filter #(= (:value %) default-value) options))
current-icon (:icon selected-option)
current-icon-ref (i/key->icon current-icon)]
[:div {:on-click open-dropdown
:class (dm/str class " " (stl/css-case :custom-select true
:disabled disabled
:icon (some? current-icon-ref)))}
(when (and current-icon current-icon-ref)
[:span {:class (stl/css :current-icon)} @current-icon-ref]))
[:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
(for [[index item] (d/enumerate options)]
(if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true)
:key (dm/str current-id "-" index)}]
(let [[value label icon] (as-key-value item)
icon-ref (i/key->icon icon)]
[:li
{:key (dm/str current-id "-" index)
:class (dom/classnames
(stl/css :checked-element) true
(stl/css :is-selected) (= value current-value))
:data-value (pr-str value)
:on-pointer-enter highlight-item
:on-pointer-leave unhighlight-item
:on-click select-item}
(when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref])
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]]))
[:span {:class (stl/css :current-icon)} current-icon-ref])
[:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
(for [[index item] (d/enumerate options)]
(if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true)
:key (dm/str current-id "-" index)}]
(let [[value label icon] (as-key-value item)
icon-ref (i/key->icon icon)]
[:li
{:key (dm/str current-id "-" index)
:class (dom/classnames
(stl/css :checked-element) true
(stl/css :is-selected) (= value current-value))
:data-value (pr-str value)
:on-pointer-enter highlight-item
:on-pointer-leave unhighlight-item
:on-click select-item}
(when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref])
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]])))

4
frontend/src/app/main/ui/components/select.scss
View file

@ -22,6 +22,10 @@
color: var(--menu-foreground-color);
cursor: pointer;
&.icon {
grid-template-columns: auto 1fr auto;
}
.current-icon {
@include flexCenter;
height: $s-24;