diff --git a/frontend/src/app/main/ui/workspace/tokens/changes.cljs b/frontend/src/app/main/ui/workspace/tokens/changes.cljs index ceba897e4..cab2069fe 100644 --- a/frontend/src/app/main/ui/workspace/tokens/changes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/changes.cljs @@ -6,6 +6,8 @@ (ns app.main.ui.workspace.tokens.changes (:require + [app.common.data :as d] + [app.common.data.macros :as dm] [app.common.types.shape.layout :as ctsl] [app.common.types.shape.radius :as ctsr] [app.common.types.token :as ctt] @@ -26,6 +28,8 @@ [clojure.set :as set] [potok.v2.core :as ptk])) +(declare token-properties) + ;; Token Updates --------------------------------------------------------------- (defn apply-token @@ -76,12 +80,16 @@ (update shape :applied-tokens remove-token)))))))) (defn toggle-token - [{:keys [token-type-props token shapes] :as _props}] + [{:keys [token shapes]}] (ptk/reify ::on-toggle-token ptk/WatchEvent (watch [_ _ _] - (let [{:keys [attributes all-attributes on-update-shape]} token-type-props - unapply-tokens? (wtt/shapes-token-applied? token shapes (or all-attributes attributes)) + (let [{:keys [attributes all-attributes on-update-shape]} + (get token-properties (:type token)) + + unapply-tokens? + (wtt/shapes-token-applied? token shapes (or all-attributes attributes)) + shape-ids (map :id shapes)] (if unapply-tokens? (rx/of @@ -252,3 +260,88 @@ (select-keys attributes))] (dwsl/update-layout-child shape-ids props {:ignore-touched true :page-id page-id})))))) + +;; Token Types ----------------------------------------------------------------- + +;; FIXME: the values should be lazy evaluated, probably a function, +;; becasue on future we will need to translate that labels and that +;; can not be done statically + +(def token-properties + "A map of default properties by token type" + (d/ordered-map + :border-radius + {:title "Border Radius" + :attributes ctt/border-radius-keys + :on-update-shape update-shape-radius-all + :modal {:key :tokens/border-radius + :fields [{:label "Border Radius" + :key :border-radius}]}} + + :color + {:title "Color" + :attributes #{:fill} + :all-attributes ctt/color-keys + :on-update-shape update-fill-stroke + :modal {:key :tokens/color + :fields [{:label "Color" :key :color}]}} + + :stroke-width + {:title "Stroke Width" + :attributes ctt/stroke-width-keys + :on-update-shape update-stroke-width + :modal {:key :tokens/stroke-width + :fields [{:label "Stroke Width" + :key :stroke-width}]}} + + :sizing + {:title "Sizing" + :attributes #{:width :height} + :all-attributes ctt/sizing-keys + :on-update-shape update-shape-dimensions + :modal {:key :tokens/sizing + :fields [{:label "Sizing" + :key :sizing}]}} + :dimensions + {:title "Dimensions" + :attributes #{:width :height} + :all-attributes (set/union + ctt/spacing-keys + ctt/sizing-keys + ctt/border-radius-keys + ctt/stroke-width-keys) + :on-update-shape update-shape-dimensions + :modal {:key :tokens/dimensions + :fields [{:label "Dimensions" + :key :dimensions}]}} + + :opacity + {:title "Opacity" + :attributes ctt/opacity-keys + :on-update-shape update-opacity + :modal {:key :tokens/opacity + :fields [{:label "Opacity" + :key :opacity}]}} + + :rotation + {:title "Rotation" + :attributes ctt/rotation-keys + :on-update-shape update-rotation + :modal {:key :tokens/rotation + :fields [{:label "Rotation" + :key :rotation}]}} + :spacing + {:title "Spacing" + :attributes #{:column-gap :row-gap} + :all-attributes ctt/spacing-keys + :on-update-shape update-layout-spacing + :modal {:key :tokens/spacing + :fields [{:label "Spacing" + :key :spacing}]}})) + +(defn get-token-properties [token] + (get token-properties (:type token))) + +(defn token-attributes [token-type] + (dm/get-in token-properties [token-type :attributes])) + 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 9961ea407..77b2e16d2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -18,7 +18,6 @@ [app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.workspace.tokens.changes :as wtch] [app.main.ui.workspace.tokens.token :as wtt] - [app.main.ui.workspace.tokens.token-types :as wtty] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [app.util.timers :as timers] @@ -37,7 +36,7 @@ (defn generic-attribute-actions [attributes title {:keys [token selected-shapes on-update-shape]}] (let [on-update-shape-fn (or on-update-shape - (-> (wtty/get-token-properties token) + (-> (wtch/get-token-properties token) (:on-update-shape))) {:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)] (map (fn [attribute] @@ -214,7 +213,7 @@ (generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape wtch/update-shape-position))))})) (defn default-actions [{:keys [token selected-token-set-name]}] - (let [{:keys [modal]} (wtty/get-token-properties token)] + (let [{:keys [modal]} (wtch/get-token-properties token)] [{:title (tr "workspace.token.edit") :no-selectable true :action (fn [event] diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs index 46406903a..85c8530c3 100644 --- a/frontend/src/app/main/ui/workspace/tokens/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs @@ -21,13 +21,13 @@ [app.main.ui.notifications.context-notification :refer [context-notification]] [app.main.ui.workspace.colorpicker :as colorpicker] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]] + [app.main.ui.workspace.tokens.changes :as wtch] [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]] [app.main.ui.workspace.tokens.components.controls.input-tokens :refer [input-tokens*]] [app.main.ui.workspace.tokens.errors :as wte] [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.tinycolor :as tinycolor] [app.main.ui.workspace.tokens.token :as wtt] - [app.main.ui.workspace.tokens.token-types :as wtty] [app.main.ui.workspace.tokens.update :as wtu] [app.main.ui.workspace.tokens.warnings :as wtw] [app.util.dom :as dom] @@ -223,7 +223,7 @@ [{:keys [token token-type action selected-token-set-name on-display-colorpicker]}] (let [create? (not (instance? ctob/Token token)) token (or token {:type token-type}) - token-properties (wtty/get-token-properties token) + token-properties (wtch/get-token-properties token) color? (wtt/color-token? token) selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens) active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 98e614382..acf919a06 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -34,7 +34,6 @@ [app.main.ui.workspace.tokens.theme-select :refer [theme-select]] [app.main.ui.workspace.tokens.token :as wtt] [app.main.ui.workspace.tokens.token-pill :refer [token-pill*]] - [app.main.ui.workspace.tokens.token-types :as wtty] [app.util.array :as array] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -80,7 +79,7 @@ (l/derived lens:token-type-open-status))) {:keys [modal attributes all-attributes title] :as token-type-props} - (get wtty/token-types type) + (get wtch/token-properties type) tokens (mf/with-memo [tokens] @@ -119,14 +118,12 @@ on-token-pill-click (mf/use-fn - (mf/deps selected-shapes token-type-props) + (mf/deps selected-shapes) (fn [event token] (dom/stop-propagation event) (when (seq selected-shapes) - (st/emit! - (wtch/toggle-token {:token token - :shapes selected-shapes - :token-type-props token-type-props}))))) + (st/emit! (wtch/toggle-token {:token token + :shapes selected-shapes}))))) tokens-count (count tokens) can-edit? (:can-edit (deref refs/permissions))] @@ -171,7 +168,7 @@ [tokens-by-type] (loop [empty #js [] filled #js [] - types (-> wtty/token-types keys seq)] + types (-> wtch/token-properties keys seq)] (if-let [type (first types)] (if (not-empty (get tokens-by-type type)) (recur empty diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs index 3cc333d46..c635fd444 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs @@ -8,8 +8,8 @@ [app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]] + [app.main.ui.workspace.tokens.changes :as wtch] [app.main.ui.workspace.tokens.token :as wtt] - [app.main.ui.workspace.tokens.token-types :as wtty] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [cuerdas.core :as str] @@ -75,9 +75,8 @@ ;; Helper functions (defn partially-applied-attr "Translates partially applied attributes based on the dictionary." - [app-token-keys is-applied token-type-props] - (let [{:keys [attributes all-attributes]} token-type-props - filtered-keys (if all-attributes + [app-token-keys is-applied {:keys [attributes all-attributes]}] + (let [filtered-keys (if all-attributes (filter #(contains? all-attributes %) app-token-keys) (filter #(contains? attributes %) app-token-keys))] (when is-applied @@ -98,7 +97,7 @@ "Generates a tooltip for a given token" [is-viewer shape token half-applied no-valid-value ref-not-in-active-set] (let [{:keys [name value resolved-value type]} token - {:keys [title] :as token-type-props} (get wtty/token-types (:type token)) + {:keys [title] :as token-props} (wtch/get-token-properties token) applied-tokens (:applied-tokens shape) app-token-vals (set (vals applied-tokens)) app-token-keys (keys applied-tokens) @@ -106,7 +105,7 @@ applied-to (if half-applied - (partially-applied-attr app-token-keys is-applied? token-type-props) + (partially-applied-attr app-token-keys is-applied? token-props) (tr "labels.all")) grouped-values (group-by dimensions-dictionary app-token-keys) diff --git a/frontend/src/app/main/ui/workspace/tokens/token_types.cljs b/frontend/src/app/main/ui/workspace/tokens/token_types.cljs deleted file mode 100644 index f5979add4..000000000 --- a/frontend/src/app/main/ui/workspace/tokens/token_types.cljs +++ /dev/null @@ -1,89 +0,0 @@ -;; This Source Code Form is subject to the terms of the Mozilla Public -;; License, v. 2.0. If a copy of the MPL was not distributed with this -;; file, You can obtain one at http://mozilla.org/MPL/2.0/. -;; -;; Copyright (c) KALEIDOS INC - -(ns app.main.ui.workspace.tokens.token-types - (:require - [app.common.data :as d :refer [ordered-map]] - [app.common.types.token :as ctt] - [app.main.ui.workspace.tokens.changes :as wtch] - [clojure.set :as set])) - -(def token-types - (ordered-map - :border-radius - {:title "Border Radius" - :attributes ctt/border-radius-keys - :on-update-shape wtch/update-shape-radius-all - :modal {:key :tokens/border-radius - :fields [{:label "Border Radius" - :key :border-radius}]}} - - :color - {:title "Color" - :attributes #{:fill} - :all-attributes ctt/color-keys - :on-update-shape wtch/update-fill-stroke - :modal {:key :tokens/color - :fields [{:label "Color" :key :color}]}} - - :stroke-width - {:title "Stroke Width" - :attributes ctt/stroke-width-keys - :on-update-shape wtch/update-stroke-width - :modal {:key :tokens/stroke-width - :fields [{:label "Stroke Width" - :key :stroke-width}]}} - - :sizing - {:title "Sizing" - :attributes #{:width :height} - :all-attributes ctt/sizing-keys - :on-update-shape wtch/update-shape-dimensions - :modal {:key :tokens/sizing - :fields [{:label "Sizing" - :key :sizing}]}} - :dimensions - {:title "Dimensions" - :attributes #{:width :height} - :all-attributes (set/union - ctt/spacing-keys - ctt/sizing-keys - ctt/border-radius-keys - ctt/stroke-width-keys) - :on-update-shape wtch/update-shape-dimensions - :modal {:key :tokens/dimensions - :fields [{:label "Dimensions" - :key :dimensions}]}} - - :opacity - {:title "Opacity" - :attributes ctt/opacity-keys - :on-update-shape wtch/update-opacity - :modal {:key :tokens/opacity - :fields [{:label "Opacity" - :key :opacity}]}} - - :rotation - {:title "Rotation" - :attributes ctt/rotation-keys - :on-update-shape wtch/update-rotation - :modal {:key :tokens/rotation - :fields [{:label "Rotation" - :key :rotation}]}} - :spacing - {:title "Spacing" - :attributes #{:column-gap :row-gap} - :all-attributes ctt/spacing-keys - :on-update-shape wtch/update-layout-spacing - :modal {:key :tokens/spacing - :fields [{:label "Spacing" - :key :spacing}]}})) - -(defn get-token-properties [token] - (get token-types (:type token))) - -(defn token-attributes [token-type] - (get-in token-types [token-type :attributes]))