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 token functionality in context menu

Browse source
This commit is contained in:
Akshay Gupta 2024-05-14 18:48:48 +05:30
parent 31b487ed86
commit 8cb9d9c352
2 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/app/main/ui/workspace/tokens/common.cljs
View file

@ -8,7 +8,10 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.changes-builder :as pcb]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.main.data.workspace.changes :as dch]
[beicon.v2.core :as rx]
[potok.v2.core :as ptk] [potok.v2.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -58,3 +61,15 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :token-context-menu] nil)))) (assoc-in state [:workspace-local :token-context-menu] nil))))
(defn delete-token
[id]
(dm/assert! (uuid? id))
(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))]
(rx/of (dch/commit-changes changes))))))

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

@ -10,13 +10,14 @@
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.modal :as modal]
[app.main.data.shortcuts :as scd] [app.main.data.shortcuts :as scd]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.tokens.common :refer [hide-token-context-menu]] [app.main.ui.workspace.tokens.common :as tcm]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.timers :as timers] [app.util.timers :as timers]
[okulary.core :as l] [okulary.core :as l]
@ -113,13 +114,18 @@
(mf/defc token-pill-context-menu (mf/defc token-pill-context-menu
[{:keys [token-id]}] [{:keys [token-id]}]
(let [do-delete #(js/console.log "Deleting") (let [delete-fn #(st/emit! (tcm/delete-token token-id))
do-delete #(st/emit! (modal/show
{:type :confirm
:title "Delete"
:message "Are you sure?"
:on-accept delete-fn}))
do-duplicate #(js/console.log "Duplicating") do-duplicate #(js/console.log "Duplicating")
do-edit #(js/console.log "Editing")] do-edit #(js/console.log "Editing")]
[:ul.context-list [:ul.context-list
[:> token-menu-entry {:title "Delete Token" :on-click do-delete}] [:& token-menu-entry {:title "Delete Token" :on-click do-delete}]
[:> token-menu-entry {:title "Duplicate Token" :on-click do-duplicate}] [:& token-menu-entry {:title "Duplicate Token" :on-click do-duplicate}]
[:> token-menu-entry {:title "Edit Token" :on-click do-edit}]])) [:& token-menu-entry {:title "Edit Token" :on-click do-edit}]]))
(mf/defc token-context-menu (mf/defc token-context-menu
[] []
@ -142,11 +148,11 @@
(.setAttribute ^js dropdown "style" new-style)))))) (.setAttribute ^js dropdown "style" new-style))))))
[:& dropdown {:show (boolean mdata) [:& dropdown {:show (boolean mdata)
:on-close #(st/emit! hide-token-context-menu)} :on-close #(st/emit! tcm/hide-token-context-menu)}
[:div {:class (stl/css :token-context-menu) [:div {:class (stl/css :token-context-menu)
:ref dropdown-ref :ref dropdown-ref
:style {:top top :left left} :style {:top top :left left}
:on-context-menu prevent-default} :on-context-menu prevent-default}
(when (= :token (:type mdata)) (when (= :token (:type mdata))
[:ul {:class (stl/css :context-list)} [:ul {:class (stl/css :context-list)}
[:& token-pill-context-menu {:token-id (:id mdata)}]])]])) [:& token-pill-context-menu {:token-id (:token-id mdata)}]])]]))