mirror of
https://github.com/penpot/penpot.git
synced 2025-04-16 00:41:25 -05:00
Migrate to official UI
This commit is contained in:
Florian Schroedl
parent
b1cf641587
commit
bac16aadd8
2 changed files with 76 additions and 116 deletions
frontend/src/app/main/ui/workspace/tokens
|
|
@ -7,95 +7,77 @@
|
|||
(ns app.main.ui.workspace.tokens.sets
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.data.tokens :as wdt]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[okulary.core :as l]
|
||||
[potok.v2.core :as ptk]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
|
||||
#uuid "d608877b-842a-473b-83ca-b5f8305caf83"})
|
||||
|
||||
(def sets-root-order [#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
|
||||
#uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8"
|
||||
#uuid "0381446e-1f1d-423f-912c-ab577d61b79b"])
|
||||
|
||||
(def sets {#uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8" {:type :group
|
||||
:name "Group A"
|
||||
:children [#uuid "d1754e56-3510-493f-8287-5ef3417d4141"
|
||||
#uuid "d608877b-842a-473b-83ca-b5f8305caf83"]}
|
||||
#uuid "d608877b-842a-473b-83ca-b5f8305caf83" {:type :set
|
||||
:name "Set A / 1"}
|
||||
#uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group
|
||||
:name "Group A / B"
|
||||
:children [#uuid "f608877b-842a-473b-83ca-b5f8305caf83"
|
||||
#uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]}
|
||||
#uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set
|
||||
:name "Set A / B / 1"}
|
||||
#uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb" {:type :set
|
||||
:name "Set A / B / 2"}
|
||||
#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" {:type :set
|
||||
:name "Set Root 1"}
|
||||
#uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
|
||||
:name "Set Root 2"}})
|
||||
|
||||
(def ^:private chevron-icon
|
||||
(i/icon-xref :arrow (stl/css :chevron-icon)))
|
||||
|
||||
(defn set-selected-set
|
||||
[set-id]
|
||||
(dm/assert! (uuid? set-id))
|
||||
(ptk/reify ::set-selected-set
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(assoc state :selected-set-id set-id))))
|
||||
(defn on-toggle-token-set-click [id event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (wdt/toggle-token-set id)))
|
||||
|
||||
(defn on-select-token-set-click [id event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (wdt/set-selected-token-set-id id)))
|
||||
|
||||
(mf/defc sets-tree
|
||||
[{:keys [selected-set-id set-id]}]
|
||||
(let [set (get sets set-id)]
|
||||
(when set
|
||||
(let [{:keys [type name children]} set
|
||||
visible? (mf/use-state (contains? active-sets set-id))
|
||||
collapsed? (mf/use-state false)
|
||||
icon (if (= type :set) i/document i/group)
|
||||
selected? (mf/use-state (= set-id selected-set-id))
|
||||
|
||||
on-click
|
||||
(mf/use-fn
|
||||
(mf/deps type set-id)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (set-selected-set set-id))))]
|
||||
[:div {:class (stl/css :set-item-container)
|
||||
:on-click on-click}
|
||||
[:div {:class (stl/css-case :set-item-group (= type :group)
|
||||
:set-item-set (= type :set)
|
||||
:selected-set (and (= type :set) @selected?))}
|
||||
(when (= type :group)
|
||||
[:span {:class (stl/css-case
|
||||
:collapsabled-icon true
|
||||
:collapsed @collapsed?)
|
||||
:on-click #(when (= type :group) (swap! collapsed? not))}
|
||||
chevron-icon])
|
||||
[:span {:class (stl/css :icon)} icon]
|
||||
[:div {:class (stl/css :set-name)} name]
|
||||
(when (= type :set)
|
||||
[:span {:class (stl/css :action-btn)
|
||||
:on-click #(swap! visible? not)}
|
||||
(if @visible?
|
||||
i/shown
|
||||
i/hide)])]
|
||||
(when (and children (not @collapsed?))
|
||||
[:div {:class (stl/css :set-children)}
|
||||
(for [child-id children]
|
||||
[:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])]))))
|
||||
[{:keys [token-set token-set-active? token-set-selected?] :as _props}]
|
||||
(let [{:keys [id name _children]} token-set
|
||||
selected? (and set? (token-set-selected? id))
|
||||
visible? (token-set-active? id)
|
||||
collapsed? (mf/use-state false)
|
||||
set? true #_(= type :set)
|
||||
group? false #_ (= type :group)]
|
||||
[:div {:class (stl/css :set-item-container)
|
||||
:on-click #(on-select-token-set-click id %)}
|
||||
[:div {:class (stl/css-case :set-item-group group?
|
||||
:set-item-set set?
|
||||
:selected-set selected?)}
|
||||
(when group?
|
||||
[:span {:class (stl/css-case :collapsabled-icon true
|
||||
:collapsed @collapsed?)
|
||||
:on-click #(swap! collapsed? not)}
|
||||
chevron-icon])
|
||||
[:span {:class (stl/css :icon)}
|
||||
(if set? i/document i/group)]
|
||||
[:div {:class (stl/css :set-name)} name]
|
||||
(when set?
|
||||
[:span {:class (stl/css :action-btn)
|
||||
:on-click #(on-toggle-token-set-click id %)}
|
||||
(if visible? i/shown i/hide)])]
|
||||
#_(when (and children (not @collapsed?))
|
||||
[:div {:class (stl/css :set-children)}
|
||||
(for [child-id children]
|
||||
[:& sets-tree (assoc props :key child-id
|
||||
{:key child-id}
|
||||
:set-id child-id
|
||||
:selected-set-id selected-token-set-id)])])]))
|
||||
|
||||
(mf/defc sets-list
|
||||
[{:keys [selected-set-id]}]
|
||||
[:ul {:class (stl/css :sets-list)}
|
||||
(for [set-id sets-root-order]
|
||||
[:& sets-tree {:key set-id
|
||||
:set-id set-id
|
||||
:selected-set-id selected-set-id}])])
|
||||
[{:keys []}]
|
||||
(let [token-sets (mf/deref refs/workspace-token-sets)
|
||||
selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
|
||||
token-set-selected? (mf/use-callback
|
||||
(mf/deps selected-token-set-id)
|
||||
(fn [id]
|
||||
(= id selected-token-set-id)))
|
||||
active-token-set-ids (mf/deref refs/workspace-active-set-ids)
|
||||
token-set-active? (mf/use-callback
|
||||
(mf/deps active-token-set-ids)
|
||||
(fn [id]
|
||||
(get active-token-set-ids id)))]
|
||||
[:ul {:class (stl/css :sets-list)}
|
||||
(for [[id token-set] token-sets]
|
||||
[:& sets-tree
|
||||
{:key id
|
||||
:token-set token-set
|
||||
:selected-token-set-id selected-token-set-id
|
||||
:token-set-selected? token-set-selected?
|
||||
:token-set-active? token-set-active?}])]))
|
||||
|
|
|
|||
|
|
@ -40,6 +40,14 @@
|
|||
(def selected-set-id
|
||||
(l/derived :selected-set-id st/state))
|
||||
|
||||
;; Event Functions -------------------------------------------------------------
|
||||
|
||||
(defn on-set-add-click [_event]
|
||||
(when-let [set-name (js/window.prompt "Set name")]
|
||||
(st/emit! (wdt/create-token-set {:name set-name}))))
|
||||
|
||||
;; Components ------------------------------------------------------------------
|
||||
|
||||
(mf/defc token-pill
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [on-click token theme-token highlighted? on-context-menu] :as props}]
|
||||
|
|
@ -174,10 +182,7 @@
|
|||
(mf/defc token-sets
|
||||
[_props]
|
||||
(let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
|
||||
themes (mf/deref refs/workspace-ordered-token-themes)
|
||||
selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
|
||||
active-set-ids (mf/deref refs/workspace-active-set-ids)
|
||||
token-sets (mf/deref refs/workspace-token-sets)]
|
||||
themes (mf/deref refs/workspace-ordered-token-themes)]
|
||||
[:div
|
||||
[:style
|
||||
(str "@scope {"
|
||||
|
|
@ -189,9 +194,7 @@
|
|||
"b { font-weight: 600; }"])
|
||||
"}")]
|
||||
[:div.spaced-y
|
||||
{:style {:border-bottom "2px solid grey"
|
||||
:padding "10px"}}
|
||||
|
||||
{:style {:padding "10px"}}
|
||||
[:& tokene-theme-create]
|
||||
[:div.spaced-y
|
||||
[:b "Themes"]
|
||||
|
|
@ -216,31 +219,7 @@
|
|||
(dom/prevent-default e)
|
||||
(dom/stop-propagation e)
|
||||
(st/emit! (wdt/delete-token-theme id)))}
|
||||
"🗑️"]]]])]])]]
|
||||
[:div.spaced
|
||||
[:b "Sets"]
|
||||
[:button {:on-click #(when-let [set-name (js/window.prompt "Set name")]
|
||||
(st/emit! (wdt/create-token-set {:name set-name})))} "Create"]]
|
||||
[:ul.spaced-y
|
||||
(for [[_ {:keys [id name]}] token-sets]
|
||||
[:li {:class [(when (= selected-token-set-id id) "selected")]
|
||||
:on-click (fn []
|
||||
(st/emit!
|
||||
(wdt/set-selected-token-set-id id)))}
|
||||
[:div.spaced
|
||||
name
|
||||
[:div.spaced
|
||||
[:button
|
||||
{:on-click (fn [e]
|
||||
(dom/prevent-default e)
|
||||
(dom/stop-propagation e)
|
||||
(st/emit! (wdt/toggle-token-set id)))}
|
||||
(when (get active-set-ids id) "👁️")]
|
||||
[:button {:on-click (fn [e]
|
||||
(dom/prevent-default e)
|
||||
(dom/stop-propagation e)
|
||||
(st/emit! (wdt/delete-token-set id)))}
|
||||
"🗑️"]]]])]]]))
|
||||
"🗑️"]]]])]])]]]]))
|
||||
|
||||
(mf/defc tokens-explorer
|
||||
[_props]
|
||||
|
|
@ -269,8 +248,7 @@
|
|||
|
||||
(mf/defc sets-sidebar
|
||||
[]
|
||||
(let [selected-set-id (mf/deref selected-set-id)
|
||||
open? (mf/use-state true)]
|
||||
(let [open? (mf/use-state true)]
|
||||
[:div {:class (stl/css :sets-sidebar)}
|
||||
[:div {:class (stl/css :sidebar-header)}
|
||||
[:& title-bar {:collapsable true
|
||||
|
|
@ -279,10 +257,10 @@
|
|||
:title "SETS"
|
||||
:on-collapsed #(swap! open? not)}]
|
||||
[:button {:class (stl/css :add-set)
|
||||
:on-click #(println "Add Set")}
|
||||
:on-click on-set-add-click}
|
||||
i/add]]
|
||||
(when @open?
|
||||
[:& sets-list {:selected-set-id selected-set-id}])]))
|
||||
[:& sets-list])]))
|
||||
|
||||
(defn dev-or-preview-url? [url]
|
||||
(let [host (-> url js/URL. .-host)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue