3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-06 13:08:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update prototype tab desgin with new UI

Browse source
This commit is contained in:
Eva 2023-10-02 13:31:31 +02:00
parent e8aab8b0bf
commit 6de061159b
17 changed files with 1252 additions and 385 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,8 +19,8 @@
(defn- as-key-value
[item]
(if (map? item)
[(:value item) (:label item)]
[item item]))
[(:value item) (:label item) (:icon item)]
[item item item]))
(mf/defc select
[{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
@ -42,7 +42,7 @@
open-dropdown
(mf/use-fn
(mf/deps disabled)
(fn[]
(fn []
(when-not disabled
(swap! state* assoc :is-open? true))))
@ -82,10 +82,16 @@
(mf/with-effect [default-value]
(swap! state* assoc :current-value default-value))
(if new-css-system
[: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)]
(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}
@ -94,7 +100,8 @@
(if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true)
:key (dm/str current-id "-" index)}]
(let [[value label] (as-key-value item)]
(let [[value label icon] (as-key-value item)
icon-ref (i/key->icon icon)]
[:li
{:key (dm/str current-id "-" index)
:class (dom/classnames
@ -104,10 +111,10 @@
: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]])))]]]
[:div.custom-select {:on-click open-dropdown :class class}
[:span current-label]
[:span.dropdown-button i/arrow-down]

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

@ -24,6 +24,16 @@
width: 100%;
flex-grow: 1;
}
.current-icon {
@include flexCenter;
height: $s-24;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.dropdown-button {
@include flexCenter;
svg {
@ -42,6 +52,17 @@
.checked-element {
@extend .dropdown-element-base;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
padding-right: $s-4;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.label {
flex-grow: 1;
width: 100%;