3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 19:56:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Token Sets dnd re-ordering

Browse source
This commit is contained in:
Florian Schroedl 2024-10-08 10:24:07 +02:00
parent a85a7d2b2f
commit 85fee87bc4
8 changed files with 169 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/app/main/data/tokens.cljs
View file

@ -204,6 +204,21 @@
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(defn move-token-set [source-set-name dest-set-name position]
(ptk/reify ::move-token-set
ptk/WatchEvent
(watch [it state _]
(let [tokens-lib (get-tokens-lib state)
prev-before-set-name (ctob/get-neighbor-set-name tokens-lib source-set-name 1)
[source-set-name' dest-set-name'] (if (= :top position)
[source-set-name dest-set-name]
[source-set-name (ctob/get-neighbor-set-name tokens-lib dest-set-name 1)])
changes (-> (pcb/empty-changes it)
(pcb/move-token-set-before source-set-name' dest-set-name' prev-before-set-name))]
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(defn update-create-token
[{:keys [token prev-token-name]}]
(ptk/reify ::update-create-token

71
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -11,6 +11,7 @@
[app.main.data.tokens :as wdt]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.workspace.tokens.sets-context :as sets-context]
[app.util.dom :as dom]
@ -79,26 +80,56 @@
set? true #_(= type :set)
group? false #_(= type :group)
editing-node? (editing? name)
on-select (mf/use-callback
(mf/deps editing-node?)
(fn [event]
(dom/stop-propagation event)
(when-not editing-node?
(on-select name))))
on-context-menu (mf/use-callback
(mf/deps editing-node? name)
(fn [event]
(dom/prevent-default event)
(dom/stop-propagation event)
(when-not editing-node?
(st/emit!
(wdt/show-token-set-context-menu
{:position (dom/get-client-position event)
:token-set-name name})))))]
[:div {:class (stl/css :set-item-container)
:on-click on-select
on-click
(mf/use-callback
(mf/deps editing-node?)
(fn [event]
(dom/stop-propagation event)
(when-not editing-node?
(on-select name))))
on-context-menu
(mf/use-callback
(mf/deps editing-node? name)
(fn [event]
(dom/prevent-default event)
(dom/stop-propagation event)
(when-not editing-node?
(st/emit!
(wdt/show-token-set-context-menu
{:position (dom/get-client-position event)
:token-set-name name})))))
on-drag
(mf/use-fn
(mf/deps name)
(fn [_]
(when-not selected?
(on-select name))))
on-drop
(mf/use-fn
(mf/deps name)
(fn [position data]
(st/emit! (wdt/move-token-set (:name data) name position))))
[dprops dref]
(h/use-sortable
:data-type "penpot/token-set"
:on-drag on-drag
:on-drop on-drop
:data {:name name}
:draggable? true)]
[:div {:ref dref
:class (stl/css-case :set-item-container true
:dnd-over (= (:over dprops) :center)
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
:on-click on-click
:on-double-click #(on-edit name)
:on-context-menu on-context-menu}
:on-context-menu on-context-menu
:data-name name}
[:div {:class (stl/css-case :set-item-group group?
:set-item-set set?
:selected-set selected?)}
@ -191,7 +222,7 @@
(let [token-sets (mf/deref refs/workspace-ordered-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)
(mf/deps token-sets selected-token-set-id)
(fn [set-name]
(= set-name selected-token-set-id)))
active-token-set-ids (mf/deref refs/workspace-active-set-names)

11
frontend/src/app/main/ui/workspace/tokens/sets.scss
View file

@ -17,6 +17,17 @@
cursor: pointer;
color: var(--layer-row-foreground-color);
padding-left: $s-20;
border: $s-2 solid transparent;
&.dnd-over-bot {
border-bottom: $s-2 solid var(--layer-row-foreground-color-hover);
}
&.dnd-over-top {
border-top: $s-2 solid var(--layer-row-foreground-color-hover);
}
&.dnd-over {
border: $s-2 solid var(--layer-row-foreground-color-hover);
}
}
.set-item-set,

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

@ -8,12 +8,14 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.types.tokens-lib :as ctob]
[app.main.data.modal :as modal]
[app.main.data.tokens :as dt]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.hooks :as h]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
@ -32,8 +34,7 @@
[cuerdas.core :as str]
[okulary.core :as l]
[rumext.v2 :as mf]
[shadow.resource]
[app.common.types.tokens-lib :as ctob]))
[shadow.resource]))
(def lens:token-type-open-status
(l/derived (l/in [:workspace-tokens :open-status]) st/state))
@ -205,7 +206,8 @@
:on-collapsed #(swap! open? not)}
[:& add-set-button {:on-open on-open}]]]
(when @open?
[:& sets-list])]]))
[:& h/sortable-container {}
[:& sets-list]])]]))
(mf/defc tokens-explorer
[_props]