Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-10 06:41:40 -05:00
Code Issues Activity

Add dropdown button

Browse source
This commit is contained in:
Florian Schroedl 2024-09-10 14:33:45 +02:00
parent 27409f43d2
commit d54c5476d8
5 changed files with 41 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/refs.cljs
View file

@ -244,6 +244,9 @@
[id]
(l/derived #(wtts/get-workspace-theme id %) st/state))
(def workspace-token-theme-groups
(l/derived wtts/get-workspace-theme-groups st/state))
(def workspace-active-theme-ids
(l/derived wtts/get-active-theme-ids st/state))

6
frontend/src/app/main/ui/workspace/tokens/common.cljs
View file

@ -34,7 +34,7 @@
(mf/defc labeled-input
{::mf/wrap-props false}
[{:keys [label input-props auto-complete? error?]}]
[{:keys [label input-props auto-complete? error? icon render-right]}]
(let [input-props (cond-> input-props
:always camel-keys
;; Disable auto-complete on form fields for proprietary password managers
@ -45,4 +45,6 @@
[:label {:class (stl/css-case :labeled-input true
:labeled-input-error error?)}
[:span {:class (stl/css :label)} label]
[:& :input input-props]]))
[:& :input input-props]
(when render-right
[:& render-right])]))

14
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -108,7 +108,7 @@
"Create theme"]]]))
(mf/defc edit-theme
[{:keys [token-sets theme on-back on-submit] :as props}]
[{:keys [token-sets theme theme-groups on-back on-submit]}]
(let [edit? (some? (:id theme))
theme-state (mf/use-state {:token-sets token-sets
:theme theme})
@ -153,7 +153,13 @@
[:div {:class (stl/css :edit-theme-inputs-wrapper)}
[:& labeled-input {:label "Group"
:input-props {:default-value (:group theme)
:on-change on-update-group}}]
:on-change on-update-group}
:render-right (mf/fnc []
[:button {:class (stl/css :group-drop-down-button)
:type "button"
:on-click (fn [e]
(dom/stop-propagation e))}
i/arrow])}]
[:& labeled-input {:label "Theme"
:input-props {:default-value (:name theme)
:on-change on-update-name}}]]
@ -189,10 +195,12 @@
[{:keys [state set-state]}]
(let [{:keys [theme-id]} @state
token-sets (mf/deref refs/workspace-ordered-token-sets)
theme (mf/deref (refs/workspace-token-theme theme-id))]
theme (mf/deref (refs/workspace-token-theme theme-id))
theme-groups (mf/deref refs/workspace-token-theme-groups)]
[:& edit-theme
{:token-sets token-sets
:theme theme
:theme-groups theme-groups
:on-back #(set-state (constantly {:type :themes-overview}))
:on-submit #(st/emit! (wdt/update-token-theme %))}]))

15
frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
View file

@ -211,3 +211,18 @@ hr {
}
}
}
.group-drop-down-button {
@include buttonStyle;
width: $s-24;
height: 100%;
padding: 0;
margin: 0 $s-6;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
fill: var(--icon-foreground);
}
}

8
frontend/src/app/main/ui/workspace/tokens/token_set.cljs
View file

@ -18,6 +18,14 @@
(defn get-workspace-themes-index [state]
(get-in state [:workspace-data :token-themes-index] {}))
(defn get-workspace-theme-groups [state]
(reduce
(fn [acc {:keys [group]}]
(if group
(conj acc group)
acc))
#{} (vals (get-workspace-themes-index state))))
(defn get-workspace-token-set-groups [state]
(get-in state [:workspace-data :token-set-groups]))