3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 12:36:13 +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

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

@ -81,14 +81,15 @@
(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
:class (dm/str class " " (stl/css-case :custom-select true
:disabled disabled))}
(let [selected-option (first (filter #(= (:value %) default-value) options)) (let [selected-option (first (filter #(= (:value %) default-value) options))
current-icon (:icon selected-option) current-icon (:icon selected-option)
current-icon-ref (i/key->icon current-icon)] 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) (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}
@ -108,6 +109,6 @@
: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;