diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 97f2233f5..656693e95 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -33,7 +33,6 @@ [app.main.ui.workspace.tokens.sets-context-menu :refer [sets-context-menu]] [app.main.ui.workspace.tokens.style-dictionary :as sd] [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.util.array :as array] [app.util.dom :as dom] @@ -66,19 +65,10 @@ :sizing "expand" "add")) -(def ^:private - xf:map-id - (map :id)) - -(defn- all-selected? [token selected-shapes attributes] - (let [ids-by-attributes (wtt/shapes-ids-by-applied-attributes token selected-shapes attributes) - shape-ids (into #{} xf:map-id selected-shapes)] - (wtt/shapes-applied-all? ids-by-attributes shape-ids attributes))) - (mf/defc token-group* {::mf/private true} [{:keys [type tokens selected-shapes active-theme-tokens is-open]}] - (let [{:keys [modal attributes all-attributes title] :as token-type-props} + (let [{:keys [modal title]} (get wtch/token-properties type) tokens @@ -144,23 +134,13 @@ [:& cmm/asset-section-block {:role :content} [:div {:class (stl/css :token-pills-wrapper)} (for [token tokens] - (let [theme-token (get active-theme-tokens (:name token)) - multiple-selection (< 1 (count selected-shapes)) - full-applied (all-selected? token selected-shapes (or all-attributes attributes)) - applied (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))] - - [:> token-pill* - {:key (:name token) - :token (d/nilv theme-token token) - :selected-shapes selected-shapes - :active-theme-tokens active-theme-tokens - :half-applied (or (and applied multiple-selection) - (and applied (not full-applied))) - :full-applied (if multiple-selection - false - applied) - :on-click on-token-pill-click - :on-context-menu on-context-menu}]))]])]])) + [:> token-pill* + {:key (:name token) + :token token + :selected-shapes selected-shapes + :active-theme-tokens active-theme-tokens + :on-click on-token-pill-click + :on-context-menu on-context-menu}])]])]])) (defn- get-sorted-token-groups "Separate token-types into groups of `empty` or `filled` depending if 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 c635fd444..b7316f814 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs @@ -141,17 +141,49 @@ (let [match (second (re-find #"\{([^}]+)\}" text))] (contains? active-tokens match))) +(def ^:private + xf:map-id + (map :id)) + +(defn- applied-all-attributes? + [token selected-shapes attributes] + (let [ids-by-attributes (wtt/shapes-ids-by-applied-attributes token selected-shapes attributes) + shape-ids (into #{} xf:map-id selected-shapes)] + (wtt/shapes-applied-all? ids-by-attributes shape-ids attributes))) + + (mf/defc token-pill* - [{:keys [on-click token full-applied on-context-menu half-applied selected-shapes active-theme-tokens]}] + {::mf/wrap [mf/memo]} + [{:keys [on-click token on-context-menu selected-shapes active-theme-tokens]}] (let [{:keys [name value errors]} token + token + (or (get active-theme-tokens (:name token)) token) + + has-selected? (pos? (count selected-shapes)) is-reference? (wtt/is-reference? token) contains-path? (str/includes? name ".") + {:keys [attributes all-attributes]} + (get wtch/token-properties (:type token)) + + full-applied? + (if has-selected? + (applied-all-attributes? token selected-shapes (or all-attributes attributes)) + true) + + applied? + (if has-selected? + (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes)) + false) + + half-applied? + (and applied? (not full-applied?)) + ;; FIXME: move to context or props can-edit? (:can-edit (deref refs/permissions)) - is-viewer (not can-edit?) + is-viewer? (not can-edit?) ref-not-in-active-set (and is-reference? @@ -174,9 +206,9 @@ token-status-id (cond - half-applied + half-applied? "token-status-partial" - full-applied + full-applied? "token-status-full" :else "token-status-non-applied") @@ -200,26 +232,26 @@ ;; FIXME: missing deps on-hover (mf/use-fn - (mf/deps selected-shapes is-viewer) + (mf/deps selected-shapes is-viewer?) (fn [event] (let [node (dom/get-current-target event) - title (generate-tooltip is-viewer (first selected-shapes) token - half-applied no-valid-value ref-not-in-active-set)] + title (generate-tooltip is-viewer? (first selected-shapes) token + half-applied? no-valid-value ref-not-in-active-set)] (dom/set-attribute! node "title" title))))] [:button {:class (stl/css-case :token-pill true :token-pill-default can-edit? - :token-pill-applied (and can-edit? (or half-applied full-applied)) + :token-pill-applied (and can-edit? has-selected? (or half-applied? full-applied?)) :token-pill-invalid (and can-edit? errors?) - :token-pill-invalid-applied (and full-applied errors? can-edit?) - :token-pill-viewer is-viewer - :token-pill-applied-viewer (and is-viewer - (or half-applied full-applied)) - :token-pill-invalid-viewer (and is-viewer + :token-pill-invalid-applied (and full-applied? errors? can-edit?) + :token-pill-viewer is-viewer? + :token-pill-applied-viewer (and is-viewer? has-selected? + (or half-applied? full-applied?)) + :token-pill-invalid-viewer (and is-viewer? errors?) - :token-pill-invalid-applied-viewer (and is-viewer - (and full-applied errors?))) + :token-pill-invalid-applied-viewer (and is-viewer? + (and full-applied? errors?))) :type "button" :on-click on-click :on-mouse-enter on-hover