mirror of
https://github.com/penpot/penpot.git
synced 2025-07-10 18:27:19 +02:00
🔧 Add tokens-lib custom type
This commit is contained in:
Andrés Moya
parent
27409f43d2
commit
d147d844fb
20 changed files with 863 additions and 173 deletions
|
|
@ -81,6 +81,11 @@
|
|||
(let [workspace-data (deref refs/workspace-data)]
|
||||
(get (:tokens workspace-data) id)))
|
||||
|
||||
(defn get-token-set-data-from-token-set-id
|
||||
[id]
|
||||
(let [workspace-data (deref refs/workspace-data)]
|
||||
(get (:token-sets-index workspace-data) id)))
|
||||
|
||||
(defn set-selected-token-set-id
|
||||
[id]
|
||||
(ptk/reify ::set-selected-token-set-id
|
||||
|
|
@ -88,6 +93,10 @@
|
|||
(update [_ state]
|
||||
(wtts/assoc-selected-token-set-id state id))))
|
||||
|
||||
(defn get-token-set-tokens
|
||||
[token-set file]
|
||||
(map #(get-in file [:tokens %]) (:tokens token-set)))
|
||||
|
||||
(defn create-token-theme [token-theme]
|
||||
(let [new-token-theme (merge
|
||||
{:id (uuid/next)
|
||||
|
|
@ -120,7 +129,7 @@
|
|||
(not theme-id) (-> changes
|
||||
(pcb/add-temporary-token-theme
|
||||
{:id (uuid/next)
|
||||
:name ""
|
||||
:name "Test theme"
|
||||
:sets #{id}}))
|
||||
new-set? (-> changes
|
||||
(pcb/update-token-theme
|
||||
|
|
@ -196,14 +205,14 @@
|
|||
(dch/commit-changes changes)
|
||||
(wtu/update-workspace-tokens))))))
|
||||
|
||||
(defn delete-token-set [token-set-id]
|
||||
(defn delete-token-set [token-set-id token-set-name]
|
||||
(ptk/reify ::delete-token-set
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(let [data (get state :workspace-data)
|
||||
changes (-> (pcb/empty-changes it)
|
||||
(pcb/with-library-data data)
|
||||
(pcb/delete-token-set token-set-id))]
|
||||
(pcb/delete-token-set token-set-id token-set-name))]
|
||||
(rx/of
|
||||
(dch/commit-changes changes)
|
||||
(wtu/update-workspace-tokens))))))
|
||||
|
|
@ -214,46 +223,43 @@
|
|||
(ptk/reify ::update-create-token
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(let [prev-token (get-token-data-from-token-id (:id token))
|
||||
(let [token-set (wtts/get-selected-token-set state)
|
||||
create-set? (not token-set)
|
||||
token-set (or token-set
|
||||
{:id (uuid/next)
|
||||
:name "Global"
|
||||
:tokens []})
|
||||
|
||||
changes (cond-> (pcb/empty-changes it)
|
||||
create-set?
|
||||
(pcb/add-token-set token-set))
|
||||
|
||||
prev-token (d/seek #(= (:id %) (:id token)) (:tokens token-set)) ; TODO
|
||||
create-token? (not prev-token)
|
||||
token-changes (if create-token?
|
||||
(-> (pcb/empty-changes it)
|
||||
(pcb/add-token token))
|
||||
(-> (pcb/empty-changes it)
|
||||
(pcb/update-token token prev-token)))
|
||||
token-set (wtts/get-selected-token-set state)
|
||||
create-set? (not token-set)
|
||||
new-token-set {:id (uuid/next)
|
||||
:name "Global"
|
||||
:tokens [(:id token)]}
|
||||
selected-token-set-id (if create-set?
|
||||
(:id new-token-set)
|
||||
(:id token-set))
|
||||
set-changes (cond
|
||||
create-set? (-> token-changes
|
||||
(pcb/add-token-set new-token-set))
|
||||
:else (let [updated-token-set (if (contains? token-set (:id token))
|
||||
token-set
|
||||
(update token-set :tokens conj (:id token)))]
|
||||
(-> token-changes
|
||||
(pcb/update-token-set updated-token-set token-set))))
|
||||
theme-changes (-> set-changes
|
||||
|
||||
changes (if create-token?
|
||||
(pcb/add-token changes (:id token-set) (:name token-set) token)
|
||||
(pcb/update-token changes (:id token-set) (:name token-set) token prev-token))
|
||||
|
||||
changes (-> changes
|
||||
(ensure-token-theme-changes state {:new-set? create-set?
|
||||
:id selected-token-set-id}))]
|
||||
:id (:id token-set)}))]
|
||||
(rx/of
|
||||
(set-selected-token-set-id selected-token-set-id)
|
||||
(dch/commit-changes theme-changes)))))))
|
||||
(set-selected-token-set-id (:id token-set))
|
||||
(dch/commit-changes changes)))))))
|
||||
|
||||
(defn delete-token
|
||||
[id]
|
||||
[set-name id name]
|
||||
(dm/assert! (string? set-name))
|
||||
(dm/assert! (uuid? id))
|
||||
(dm/assert! (string? name))
|
||||
(ptk/reify ::delete-token
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(let [data (get state :workspace-data)
|
||||
changes (-> (pcb/empty-changes it)
|
||||
(pcb/with-library-data data)
|
||||
(pcb/delete-token id))]
|
||||
(pcb/delete-token set-name id name))]
|
||||
(rx/of (dch/commit-changes changes))))))
|
||||
|
||||
(defn duplicate-token
|
||||
|
|
|
|||
|
|
@ -201,10 +201,11 @@
|
|||
(generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape wtch/update-shape-position))
|
||||
(generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape wtch/update-shape-position))))}))
|
||||
|
||||
(defn default-actions [{:keys [token]}]
|
||||
(let [{:keys [modal]} (wtty/get-token-properties token)]
|
||||
(defn default-actions [{:keys [token selected-token-set-id]}]
|
||||
(let [{:keys [modal]} (wtty/get-token-properties token)
|
||||
selected-token-set (dt/get-token-set-data-from-token-set-id selected-token-set-id)]
|
||||
[{:title "Delete Token"
|
||||
:action #(st/emit! (dt/delete-token (:id token)))}
|
||||
:action #(st/emit! (dt/delete-token (:name selected-token-set) (:id token) (:name token)))}
|
||||
{:title "Duplicate Token"
|
||||
:action #(st/emit! (dt/duplicate-token (:id token)))}
|
||||
{:title "Edit Token"
|
||||
|
|
@ -311,7 +312,8 @@
|
|||
selected (mf/deref refs/selected-shapes)
|
||||
selected-shapes (into [] (keep (d/getf objects)) selected)
|
||||
token-id (:token-id mdata)
|
||||
token (get (mf/deref refs/workspace-selected-token-set-tokens) token-id)]
|
||||
token (get (mf/deref refs/workspace-selected-token-set-tokens) token-id)
|
||||
selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)]
|
||||
(mf/use-effect
|
||||
(mf/deps mdata)
|
||||
(fn []
|
||||
|
|
@ -327,4 +329,5 @@
|
|||
[:ul {:class (stl/css :context-list)}
|
||||
[:& menu-tree {:submenu-offset @width
|
||||
:token token
|
||||
:selected-token-set-id selected-token-set-id
|
||||
:selected-shapes selected-shapes}]])]]))
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@
|
|||
(defn on-select-token-set-click [id]
|
||||
(st/emit! (wdt/set-selected-token-set-id id)))
|
||||
|
||||
(defn on-delete-token-set-click [id event]
|
||||
(defn on-delete-token-set-click [id name event]
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (wdt/delete-token-set id)))
|
||||
(st/emit! (wdt/delete-token-set id name)))
|
||||
|
||||
(defn on-update-token-set [token-set]
|
||||
(st/emit! (wdt/update-token-set token-set)))
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
[:*
|
||||
[:div {:class (stl/css :set-name)} name]
|
||||
[:div {:class (stl/css :delete-set)}
|
||||
[:button {:on-click #(on-delete-token-set-click id %)
|
||||
[:button {:on-click #(on-delete-token-set-click id name %)
|
||||
:type "button"}
|
||||
i/delete]]
|
||||
(if set?
|
||||
|
|
|
|||
|
|
@ -13,106 +13,65 @@
|
|||
|
||||
(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}]}}]
|
||||
[: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}]}}]
|
||||
: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}]}}
|
||||
: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}]}}]
|
||||
: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}]}}]
|
||||
: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}]}}]
|
||||
(comment
|
||||
[:boolean
|
||||
{:title "Boolean"
|
||||
:modal {:key :tokens/boolean
|
||||
:fields [{:label "Boolean"}]}}]
|
||||
|
||||
[:box-shadow
|
||||
{:title "Box Shadow"
|
||||
:modal {:key :tokens/box-shadow
|
||||
:fields [{:label "Box shadows"
|
||||
:key :box-shadow
|
||||
:type :box-shadow}]}}]
|
||||
|
||||
[:numeric
|
||||
{:title "Numeric"
|
||||
:modal {:key :tokens/numeric
|
||||
:fields [{:label "Numeric"
|
||||
:key :numeric}]}}]
|
||||
|
||||
[:other
|
||||
{:title "Other"
|
||||
:modal {:key :tokens/other
|
||||
:fields [{:label "Other"
|
||||
:key :other}]}}]
|
||||
[:string
|
||||
{:title "String"
|
||||
:modal {:key :tokens/string
|
||||
:fields [{:label "String"
|
||||
:key :string}]}}]
|
||||
[:typography
|
||||
{:title "Typography"
|
||||
:modal {:key :tokens/typography
|
||||
:fields [{:label "Font" :key :font-family}
|
||||
{:label "Weight" :key :weight}
|
||||
{:label "Font Size" :key :font-size}
|
||||
{:label "Line Height" :key :line-height}
|
||||
{:label "Letter Spacing" :key :letter-spacing}
|
||||
{:label "Paragraph Spacing" :key :paragraph-spacing}
|
||||
{:label "Paragraph Indent" :key :paragraph-indent}
|
||||
{:label "Text Decoration" :key :text-decoration}
|
||||
{:label "Text Case" :key :text-case}]}}])))
|
||||
: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)))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue