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 65d4fe000..a1cde4010 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -20,6 +20,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])) @@ -35,12 +36,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 @@ -54,12 +55,12 @@ (st/emit! (dwsl/update-layout shape-ids {:layout-padding (zipmap attributes (repeat value))})))) -(defn apply-spacing-token [{:keys [token-id token-type-props selected-shapes]} attribute] +(defn apply-spacing-token [{:keys [token-id token-type-props selected-shapes]} attributes] (let [token (dt/get-token-data-from-token-id token-id) - attribute (set attribute) + attributes (set attributes) updated-token-type-props (assoc token-type-props :on-update-shape update-layout-spacing - :attributes attribute)] + :attributes attributes)] (wtc/on-apply-token {:token token :token-type-props updated-token-type-props :selected-shapes selected-shapes}))) @@ -70,53 +71,61 @@ (defn update-layout-sizing-limits [value shape-ids attributes] (st/emit! (dwsl/update-layout-child shape-ids {(first attributes) value}))) -(defn apply-sizing-token [{:keys [token-id token-type-props selected-shapes]} attribute] +(defn apply-sizing-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 (cond - (#{:width :height} attribute) + (set/superset? #{:width :height} attributes) (assoc token-type-props :on-update-shape update-shape-dimensions - :attributes #{attribute}) + :attributes attributes) - (#{:layout-item-min-w :layout-item-max-w - :layout-item-min-h :layout-item-max-h} attribute) + (set/superset? {:layout-item-min-w :layout-item-max-w + :layout-item-min-h :layout-item-max-h} attributes) (assoc token-type-props :on-update-shape update-layout-sizing-limits - :attributes #{attribute}))] + :attributes attributes))] (wtc/on-apply-token {:token token :token-type-props updated-token-type-props :selected-shapes selected-shapes}))) +(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] + (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 #{:r1 :r2 :r3 :r4}} + {: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 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})}]) + :sizing (attributes->actions + apply-sizing-token + [{:title "All" :attributes #{:width :height :layout-item-min-w :layout-item-max-w :layout-item-min-h :layout-item-max-h}} + {:title "Width" :attributes #{:width}} + {:title "Height" :attributes #{:height}} + {:title "Min width" :attributes #{:layout-item-min-w}} + {:title "Max width" :attributes #{:layout-item-max-w}} + {:title "Min height" :attributes #{:layout-item-min-h}} + {:title "Max height" :attributes #{:layout-item-max-h}}]) - :sizing (let [action #(apply-sizing-token context-data %)] - [{:title "All" :action #(action :all)} - {:title "Width" :action #(action :width)} - {:title "Height" :action #(action :height)} - {:title "Min width" :action #(action :layout-item-min-w)} - {:title "Max width" :action #(action :layout-item-max-w)} - {:title "Min height" :action #(action :layout-item-min-h)} - {:title "Max height" :action #(action :layout-item-max-h)}]) - - [])) + []))) (defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] (let [{:keys [modal]} token-type-props @@ -137,10 +146,16 @@ 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}]))) + (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 [] @@ -176,4 +191,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}]])]]))