Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -05:00
Code Issues Activity

✨ Improve audit events for layout context menu

Browse source
This commit is contained in:
Andrey Antukh 2024-02-29 10:54:29 +01:00 • committed by Alonso Torres
parent 4ec1844e6e
commit 7d2af587cd
2 changed files with 51 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -124,7 +124,10 @@
(defn create-layout-from-id (defn create-layout-from-id
[id type from-frame?] [id type from-frame?]
(assert (uuid? id) (str id)) (dm/assert!
"expected uuid for `id`"
(uuid? id))
(ptk/reify ::create-layout-from-id (ptk/reify ::create-layout-from-id
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]

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

@ -48,7 +48,9 @@
(dom/stop-propagation event)) (dom/stop-propagation event))
(mf/defc menu-entry (mf/defc menu-entry
[{:keys [title shortcut on-click on-pointer-enter on-pointer-leave on-unmount children selected? icon disabled] :as props}] {::mf/props :obj}
[{:keys [title shortcut on-click on-pointer-enter on-pointer-leave
on-unmount children selected? icon disabled value]}]
(let [submenu-ref (mf/use-ref nil) (let [submenu-ref (mf/use-ref nil)
hovering? (mf/use-ref false) hovering? (mf/use-ref false)
on-pointer-enter on-pointer-enter
@ -86,6 +88,7 @@
(if icon (if icon
[:li {:class (stl/css :icon-menu-item) [:li {:class (stl/css :icon-menu-item)
:disabled disabled :disabled disabled
:data-value value
:ref set-dom-node :ref set-dom-node
:on-click on-click :on-click on-click
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
@ -100,6 +103,7 @@
[:li {:class (stl/css :context-menu-item) [:li {:class (stl/css :context-menu-item)
:disabled disabled :disabled disabled
:ref set-dom-node :ref set-dom-node
:data-value value
:on-click on-click :on-click on-click
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave} :on-pointer-leave on-pointer-leave}
@ -383,39 +387,50 @@
[:& menu-entry {:title (tr "workspace.shape.menu.flow-start") [:& menu-entry {:title (tr "workspace.shape.menu.flow-start")
:on-click do-add-flow}]))))) :on-click do-add-flow}])))))
(mf/defc context-menu-flex
(mf/defc context-menu-layout
{::mf/props :obj}
[{:keys [shapes]}] [{:keys [shapes]}]
(let [single? (= (count shapes) 1) (let [single? (= (count shapes) 1)
has-frame? (->> shapes (d/seek cfh/frame-shape?))
is-flex-container? (and single? has-frame? (= :flex (:layout (first shapes))))
ids (->> shapes (map :id))
add-layout ^boolean
(fn [type] is-flex? (and single?
(if (and single? has-frame?) (some cfh/frame-shape? shapes)
(st/emit! (dwsl/create-layout-from-id (first ids) type true)) (= :flex (:layout (first shapes))))
(st/emit! (dwsl/create-layout-from-selection type))))
remove-flex on-add-layout
(fn [] (mf/use-fn
(st/emit! (dwsl/remove-layout ids)))] (fn [event]
(let [type (-> (dom/get-current-target event)
(dom/get-data "value")
(keyword))]
(st/emit! (with-meta (dwsl/create-layout type)
{::ev/origin "workspace:context-menu"})))))
[:* on-remove-layout
(when (not is-flex-container?) (mf/use-fn
[:div (mf/deps shapes)
[:& menu-separator] (fn [_event]
[:& menu-entry {:title (tr "workspace.shape.menu.add-flex") (let [ids (map :id shapes)]
:shortcut (sc/get-tooltip :toggle-layout-flex) (st/emit! (dwsl/remove-layout ids)))))]
:on-click #(add-layout :flex)}]
[:& menu-entry {:title (tr "workspace.shape.menu.add-grid") (if is-flex?
:shortcut (sc/get-tooltip :toggle-layout-grid)
:on-click #(add-layout :grid)}]])
(when is-flex-container?
[:div [:div
[:& menu-separator] [:& menu-separator]
[:& menu-entry {:title (tr "workspace.shape.menu.remove-flex") [:& menu-entry {:title (tr "workspace.shape.menu.remove-flex")
:shortcut (sc/get-tooltip :toggle-layout-flex) :shortcut (sc/get-tooltip :toggle-layout-flex)
:on-click remove-flex}]])])) :on-click on-remove-layout}]]
[:div
[:& menu-separator]
[:& menu-entry {:title (tr "workspace.shape.menu.add-flex")
:shortcut (sc/get-tooltip :toggle-layout-flex)
:value "flex"
:on-click on-add-layout}]
[:& menu-entry {:title (tr "workspace.shape.menu.add-grid")
:shortcut (sc/get-tooltip :toggle-layout-grid)
:value "grid"
:on-click on-add-layout}]])))
(mf/defc context-menu-component (mf/defc context-menu-component
[{:keys [shapes]}] [{:keys [shapes]}]
@ -476,7 +491,7 @@
[:> context-menu-path props] [:> context-menu-path props]
[:> context-menu-layer-options props] [:> context-menu-layer-options props]
[:> context-menu-prototype props] [:> context-menu-prototype props]
[:> context-menu-flex props] [:> context-menu-layout props]
[:> context-menu-component props] [:> context-menu-component props]
[:> context-menu-delete props]]))) [:> context-menu-delete props]])))