Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 23:35:58 -05:00
Code Issues Activity

♻️ Move token-types to changes ns

Browse source 
And rename it to token-properties
This commit is contained in:
Andrey Antukh 2025-02-04 20:54:07 +01:00
parent 831b0baddd
commit d6e7a331d5
6 changed files with 110 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
frontend/src/app/main/ui/workspace/tokens/changes.cljs
View file

@ -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]))

5
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -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]

4
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -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)

13
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -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

11
frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
View file

@ -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)

89
frontend/src/app/main/ui/workspace/tokens/token_types.cljs
View file

@ -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]))