diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 3e6dbf02c..af5207ffb 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/workspace/tokens/common.cljs b/frontend/src/app/main/ui/workspace/tokens/common.cljs index cd955330c..e1f258053 100644 --- a/frontend/src/app/main/ui/workspace/tokens/common.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/common.cljs @@ -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])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs index 91c949826..2d6465c07 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs @@ -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 %))}])) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss index 43844c392..83ca1ae21 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss @@ -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); + } +} diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs index 62eb5def4..ee2678c21 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs @@ -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]))