Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 22:22:43 -05:00
Code Issues Activity

Add delete set action button

Browse source
This commit is contained in:
Florian Schroedl 2024-08-23 11:32:54 +02:00
parent 88c899c5c6
commit 97f119f3da
2 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,15 +18,16 @@
(i/icon-xref :arrow (stl/css :chevron-icon))) (i/icon-xref :arrow (stl/css :chevron-icon)))
(defn on-toggle-token-set-click [id event] (defn on-toggle-token-set-click [id event]
(dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (wdt/toggle-token-set id))) (st/emit! (wdt/toggle-token-set id)))
(defn on-select-token-set-click [id event] (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))) (st/emit! (wdt/set-selected-token-set-id id)))
(defn on-delete-token-set-click [id event]
(dom/stop-propagation event)
(st/emit! (wdt/delete-token-set id)))
(mf/defc sets-tree (mf/defc sets-tree
[{:keys [token-set token-set-active? token-set-selected?] :as _props}] [{:keys [token-set token-set-active? token-set-selected?] :as _props}]
(let [{:keys [id name _children]} token-set (let [{:keys [id name _children]} token-set
@ -34,7 +35,7 @@
visible? (token-set-active? id) visible? (token-set-active? id)
collapsed? (mf/use-state false) collapsed? (mf/use-state false)
set? true #_(= type :set) set? true #_(= type :set)
group? false #_ (= type :group)] group? false #_(= type :group)]
[:div {:class (stl/css :set-item-container) [:div {:class (stl/css :set-item-container)
:on-click #(on-select-token-set-click id %)} :on-click #(on-select-token-set-click id %)}
[:div {:class (stl/css-case :set-item-group group? [:div {:class (stl/css-case :set-item-group group?
@ -48,6 +49,9 @@
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
(if set? i/document i/group)] (if set? i/document i/group)]
[:div {:class (stl/css :set-name)} name] [:div {:class (stl/css :set-name)} name]
[:div {:class (stl/css :delete-set)}
[:button {:on-click #(on-delete-token-set-click id %)}
i/delete]]
(when set? (when set?
[:span {:class (stl/css :action-btn) [:span {:class (stl/css :action-btn)
:on-click #(on-toggle-token-set-click id %)} :on-click #(on-toggle-token-set-click id %)}

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

@ -56,6 +56,10 @@
background-color: var(--layer-row-background-color-hover); background-color: var(--layer-row-background-color-hover);
color: var(--layer-row-foreground-color-hover); color: var(--layer-row-foreground-color-hover);
box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover); box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
.delete-set {
visibility: visible;
}
} }
} }
@ -65,6 +69,27 @@
box-shadow: -100px 0 0 0 var(--layer-row-background-color-selected); box-shadow: -100px 0 0 0 var(--layer-row-background-color-selected);
} }
.delete-set {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
visibility: hidden;
button {
@include buttonStyle;
@include flexCenter;
width: $s-24;
height: 100%;
svg {
@extend .button-icon-small;
height: $s-12;
width: $s-12;
color: transparent;
fill: none;
stroke: var(--icon-foreground);
}
}
}
.action-btn { .action-btn {
@extend .button-tertiary; @extend .button-tertiary;
height: $s-28; height: $s-28;