From c1096e15da28332c0c9d694ec4afdd32d0a93d8e Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 3 Jun 2024 13:39:16 +0200 Subject: [PATCH 1/3] Cleanup --- frontend/src/app/main/ui/workspace/tokens/context_menu.cljs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index 034bf5edad..389a93dcd2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -103,7 +103,7 @@ all-actions)) (mf/defc token-pill-context-menu - [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] + [context-data] (let [menu-entries (generate-menu-entries context-data)] (for [[index entry] (d/enumerate menu-entries)] [:& menu-entry {:title (:title entry) :on-click (:action entry) :key index}]))) @@ -142,4 +142,4 @@ [:& token-pill-context-menu {:token-id (:token-id mdata) :token-type-props (:token-type-props mdata) :token-type (:token-type mdata) - :selected-shapes selected-shapes}]])]])) \ No newline at end of file + :selected-shapes selected-shapes}]])]])) From 65942ef63b3ee3694823eb7b8ca0c24a7be3dbd1 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 3 Jun 2024 13:39:26 +0200 Subject: [PATCH 2/3] Use set of attributes for action generation --- .../ui/workspace/tokens/context_menu.cljs | 48 +++++++++++-------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index 389a93dcd2..d011f9c8b4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -19,6 +19,7 @@ [app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]] [app.main.ui.workspace.tokens.core :as wtc] [app.util.dom :as dom] + [clojure.set :as set] [okulary.core :as l] [rumext.v2 :as mf])) @@ -34,12 +35,12 @@ {:reg-objects? true :attrs [:rx :ry :r1 :r2 :r3 :r4]}))) -(defn apply-border-radius-token [{:keys [token-id token-type-props selected-shapes]} attribute] +(defn apply-border-radius-token [{:keys [token-id token-type-props selected-shapes]} attributes] (let [token (dt/get-token-data-from-token-id token-id) - updated-token-type-props (if (#{:r1 :r2 :r3 :r4} attribute) + updated-token-type-props (if (set/superset? #{:r1 :r2 :r3 :r4} attributes) (assoc token-type-props :on-update-shape update-shape-radius-single-corner - :attributes #{attribute}) + :attributes attributes) token-type-props)] (wtc/on-apply-token {:token token :token-type-props updated-token-type-props @@ -65,24 +66,29 @@ (defn additional-actions [{:keys [token-type] :as context-data}] - (case token-type - :border-radius (let [action #(apply-border-radius-token context-data %)] - [{:title "All" :action #(action :all)} - {:title "Top Left" :action #(action :r1)} - {:title "Top Right" :action #(action :r2)} - {:title "Bottom Right" :action #(action :r3)} - {:title "Bottom Left" :action #(action :r4)}]) - :spacing (let [action #(apply-spacing-token context-data %)] - [{:title "All" :action #(action #{:p1 :p2 :p3 :p4})} - {:title "Column Gap" :action #(action #{:column-gap})} - {:title "Vertical padding" :action #(action #{:p1 :p3})} - {:title "Horizontal padding" :action #(action #{:p2 :p4})} - {:title "Row Gap" :action #(action #{:row-gap})} - {:title "Top" :action #(action #{:p1})} - {:title "Right" :action #(action #{:p2})} - {:title "Bottom" :action #(action #{:p3})} - {:title "Left" :action #(action #{:p4})}]) - [])) + (let [attributes->actions (fn [update-fn coll] + (for [{:keys [attributes] :as item} coll] + (assoc item :action #(update-fn context-data attributes))))] + (case token-type + :border-radius (attributes->actions + apply-border-radius-token + [{:title "All" :attributes #{:all}} + {:title "Top Left" :attributes #{:r1}} + {:title "Top Right" :attributes #{:r2}} + {:title "Bottom Right" :attributes #{:r3}} + {:title "Bottom Left" :attributes #{:r4}}]) + :spacing (attributes->actions + apply-spacing-token + [{:title "All" :attributes #{:p1 :p2 :p3 :p4}} + {:title "Column Gap" :attributes #{:column-gap}} + {:title "Vertical padding" :attributes #{:p1 :p3}} + {:title "Horizontal padding" :attributes #{:p2 :p4}} + {:title "Row Gap" :attributes #{:row-gap}} + {:title "Top" :attributes #{:p1}} + {:title "Right" :attributes #{:p2}} + {:title "Bottom" :attributes #{:p3}} + {:title "Left" :attributes #{:p4}}]) + []))) (defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] (let [{:keys [modal]} token-type-props From 580076355b327e878c5c19e03863a24d1caf01da Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 3 Jun 2024 15:21:08 +0200 Subject: [PATCH 3/3] Show checkmark for applied tokens --- .../ui/workspace/tokens/context_menu.cljs | 20 +++++++++++++------ .../ui/workspace/tokens/context_menu.scss | 15 ++++++++++++-- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index d011f9c8b4..c61f5f0d51 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -64,15 +64,17 @@ :token-type-props updated-token-type-props :selected-shapes selected-shapes}))) - -(defn additional-actions [{:keys [token-type] :as context-data}] +(defn additional-actions [{:keys [token-id token-type selected-shapes] :as context-data}] (let [attributes->actions (fn [update-fn coll] (for [{:keys [attributes] :as item} coll] - (assoc item :action #(update-fn context-data attributes))))] + (let [selected? (wtc/tokens-applied? {:id token-id} selected-shapes attributes)] + (assoc item + :action #(update-fn context-data attributes) + :selected? selected?))))] (case token-type :border-radius (attributes->actions apply-border-radius-token - [{:title "All" :attributes #{:all}} + [{:title "All" :attributes #{:r1 :r2 :r3 :r4}} {:title "Top Left" :attributes #{:r1}} {:title "Top Right" :attributes #{:r2}} {:title "Bottom Right" :attributes #{:r3}} @@ -111,8 +113,14 @@ (mf/defc token-pill-context-menu [context-data] (let [menu-entries (generate-menu-entries context-data)] - (for [[index entry] (d/enumerate menu-entries)] - [:& menu-entry {:title (:title entry) :on-click (:action entry) :key index}]))) + (for [[index {:keys [title action selected?]}] (d/enumerate menu-entries)] + [:& menu-entry {:key index + :title title + :on-click action + ;; TODO: Allow selected items wihtout an icon for the context menu + :icon (mf/html [:div {:class (stl/css-case :empty-icon true + :hidden-icon (not selected?))}]) + :selected? selected?}]))) (mf/defc token-context-menu [] diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss index 49fe696626..25505f4e91 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss @@ -24,8 +24,19 @@ background-color: var(--menu-background-color); max-height: 100vh; overflow-y: auto; + + // TODO: Fixes missing styles from parent context menu + li { + @include bodySmallTypography; + color: var(--menu-foreground-color); + } } -.token-context-submenu { - position: absolute; +// TODO: Allow selected items wihtout an icon for the context menu +.empty-icon { + width: 0; + height: 0; +} +.hidden-icon { + width: 11px; }