3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 01:36:10 +02:00
Code Issues Projects Releases Packages Wiki 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
Download patch file Download diff file Expand all files Collapse all files

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

@ -81,33 +81,34 @@
(mf/with-effect [default-value] (mf/with-effect [default-value]
(swap! state* assoc :current-value default-value)) (swap! state* assoc :current-value default-value))
[:div {:on-click open-dropdown (let [selected-option (first (filter #(= (:value %) default-value) options))
:class (dm/str class " " (stl/css-case :custom-select true current-icon (:icon selected-option)
:disabled disabled))} current-icon-ref (i/key->icon current-icon)]
(let [selected-option (first (filter #(= (:value %) default-value) options)) [:div {:on-click open-dropdown
current-icon (:icon selected-option) :class (dm/str class " " (stl/css-case :custom-select true
current-icon-ref (i/key->icon current-icon)] :disabled disabled
:icon (some? current-icon-ref)))}
(when (and current-icon current-icon-ref) (when (and current-icon current-icon-ref)
[:span {:class (stl/css :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 :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor] [:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown} [:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
(for [[index item] (d/enumerate options)] (for [[index item] (d/enumerate options)]
(if (= :separator item) (if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true) [:li {:class (dom/classnames (stl/css :separator) true)
:key (dm/str current-id "-" index)}] :key (dm/str current-id "-" index)}]
(let [[value label icon] (as-key-value item) (let [[value label icon] (as-key-value item)
icon-ref (i/key->icon icon)] icon-ref (i/key->icon icon)]
[:li [:li
{:key (dm/str current-id "-" index) {:key (dm/str current-id "-" index)
:class (dom/classnames :class (dom/classnames
(stl/css :checked-element) true (stl/css :checked-element) true
(stl/css :is-selected) (= value current-value)) (stl/css :is-selected) (= value current-value))
:data-value (pr-str value) :data-value (pr-str value)
:on-pointer-enter highlight-item :on-pointer-enter highlight-item
:on-pointer-leave unhighlight-item :on-pointer-leave unhighlight-item
:on-click select-item} :on-click select-item}
(when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref]) (when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref])
[:span {:class (stl/css :label)} label] [:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]])) [: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); color: var(--menu-foreground-color);
cursor: pointer; cursor: pointer;
&.icon {
grid-template-columns: auto 1fr auto;
}
.current-icon { .current-icon {
@include flexCenter; @include flexCenter;
height: $s-24; height: $s-24;