3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-01 22:21:50 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Minor improvement on workspace flags and modal event tracing

Browse source
This commit is contained in:
Andrey Antukh 2022-03-07 15:01:12 +01:00
parent 6f32d721c2
commit fdb6533149
10 changed files with 90 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/main/data/events.cljs
View file

@ -110,7 +110,9 @@
(derive :app.main.data.workspace.persistence/set-file-shard ::generic-action) (derive :app.main.data.workspace.persistence/set-file-shard ::generic-action)
(derive :app.main.data.workspace/create-page ::generic-action) (derive :app.main.data.workspace/create-page ::generic-action)
(derive :app.main.data.workspace/set-workspace-layout ::generic-action) (derive :app.main.data.workspace/set-workspace-layout ::generic-action)
(derive :app.main.data.workspace/toggle-layout-flag ::generic-action)
(derive :app.main.data.modal/show-modal ::generic-action)
(derive :app.main.data.workspace.guides/update-guides ::generic-action)
(defmulti process-event ptk/type) (defmulti process-event ptk/type)
(defmethod process-event :default [_] nil) (defmethod process-event :default [_] nil)
@ -141,7 +143,8 @@
{:type "action" {:type "action"
:name (or (::name mdata) (name type)) :name (or (::name mdata) (name type))
:props (merge data (d/without-nils (::props mdata))) :props (merge (d/without-nils data)
(d/without-nils (::props mdata)))
:context (d/without-nils :context (d/without-nils
{:event-origin (::origin mdata) {:event-origin (::origin mdata)
:event-namespace (namespace type) :event-namespace (namespace type)

6
frontend/src/app/main/data/modal.cljs
View file

@ -14,6 +14,8 @@
(defonce components (atom {})) (defonce components (atom {}))
;; TODO: rename `:type` to `:name`
(defn show (defn show
([props] ([props]
(show (uuid/next) (:type props) props)) (show (uuid/next) (:type props) props))
@ -21,6 +23,10 @@
(show (uuid/next) type props)) (show (uuid/next) type props))
([id type props] ([id type props]
(ptk/reify ::show-modal (ptk/reify ::show-modal
IDeref
(-deref [_]
(merge (dissoc props :type) {:name type}))
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc state ::modal {:id id (assoc state ::modal {:id id

25
frontend/src/app/main/data/workspace.cljs
View file

@ -417,25 +417,26 @@
;; Workspace State Manipulation ;; Workspace State Manipulation
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; --- Toggle layout flag ;; --- Layout Flags
(defn toggle-layout-flag
[flag]
(ptk/reify ::toggle-layout-flag
IDeref
(-deref [this]
{:name flag})
(defn toggle-layout-flags
[& flags]
(ptk/reify ::toggle-layout-flags
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update state :workspace-layout (update state :workspace-layout
(fn [stored] (fn [flags]
(reduce (fn [flags flag]
(if (contains? flags flag) (if (contains? flags flag)
(disj flags flag) (disj flags flag)
(conj flags flag))) (conj flags flag)))))))
stored
(d/concat-set flags)))))))
(defn remove-layout-flags (defn remove-layout-flag
[& flags] [flag]
(ptk/reify ::remove-layout-flags (ptk/reify ::remove-layout-flag
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update state :workspace-layout (update state :workspace-layout

28
frontend/src/app/main/data/workspace/shortcuts.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.data.workspace.shortcuts (ns app.main.data.workspace.shortcuts
(:require (:require
[app.main.data.events :as ev]
[app.main.data.shortcuts :as ds] [app.main.data.shortcuts :as ds]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.colors :as mdc] [app.main.data.workspace.colors :as mdc]
@ -24,6 +25,11 @@
;; Shortcuts ;; Shortcuts
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn toggle-layout-flag
[flag]
(-> (dw/toggle-layout-flag flag)
(vary-meta assoc ::ev/origin "workspace-shortcuts")))
;; Shortcuts format https://github.com/ccampbell/mousetrap ;; Shortcuts format https://github.com/ccampbell/mousetrap
(def base-shortcuts (def base-shortcuts
@ -42,18 +48,18 @@
:toggle-colorpalette {:tooltip (ds/alt "P") :toggle-colorpalette {:tooltip (ds/alt "P")
:command (ds/a-mod "p") :command (ds/a-mod "p")
:fn #(do (r/set-resize-type! :bottom) :fn #(do (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :textpalette) (st/emit! (dw/remove-layout-flag :textpalette)
(dw/toggle-layout-flags :colorpalette)))} (toggle-layout-flag :colorpalette)))}
:toggle-textpalette {:tooltip (ds/alt "T") :toggle-textpalette {:tooltip (ds/alt "T")
:command (ds/a-mod "t") :command (ds/a-mod "t")
:fn #(do (r/set-resize-type! :bottom) :fn #(do (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :colorpalette) (st/emit! (dw/remove-layout-flag :colorpalette)
(dw/toggle-layout-flags :textpalette)))} (toggle-layout-flag :textpalette)))}
:toggle-rules {:tooltip (ds/meta-shift "R") :toggle-rules {:tooltip (ds/meta-shift "R")
:command (ds/c-mod "shift+r") :command (ds/c-mod "shift+r")
:fn #(st/emit! (dw/toggle-layout-flags :rules))} :fn #(st/emit! (toggle-layout-flag :rules))}
:select-all {:tooltip (ds/meta "A") :select-all {:tooltip (ds/meta "A")
:command (ds/c-mod "a") :command (ds/c-mod "a")
@ -61,23 +67,23 @@
:toggle-grid {:tooltip (ds/meta "'") :toggle-grid {:tooltip (ds/meta "'")
:command (ds/c-mod "'") :command (ds/c-mod "'")
:fn #(st/emit! (dw/toggle-layout-flags :display-grid))} :fn #(st/emit! (toggle-layout-flag :display-grid))}
:toggle-snap-grid {:tooltip (ds/meta-shift "'") :toggle-snap-grid {:tooltip (ds/meta-shift "'")
:command (ds/c-mod "shift+'") :command (ds/c-mod "shift+'")
:fn #(st/emit! (dw/toggle-layout-flags :snap-grid))} :fn #(st/emit! (toggle-layout-flag :snap-grid))}
:toggle-snap-guide {:tooltip (ds/meta-shift "G") :toggle-snap-guide {:tooltip (ds/meta-shift "G")
:command (ds/c-mod "shift+G") :command (ds/c-mod "shift+G")
:fn #(st/emit! (dw/toggle-layout-flags :snap-guides))} :fn #(st/emit! (toggle-layout-flag :snap-guides))}
:toggle-alignment {:tooltip (ds/meta "\\") :toggle-alignment {:tooltip (ds/meta "\\")
:command (ds/c-mod "\\") :command (ds/c-mod "\\")
:fn #(st/emit! (dw/toggle-layout-flags :dynamic-alignment))} :fn #(st/emit! (toggle-layout-flag :dynamic-alignment))}
:toggle-scale-text {:tooltip "K" :toggle-scale-text {:tooltip "K"
:command "k" :command "k"
:fn #(st/emit! (dw/toggle-layout-flags :scale-text))} :fn #(st/emit! (toggle-layout-flag :scale-text))}
:increase-zoom {:tooltip "+" :increase-zoom {:tooltip "+"
:command ["+" "="] :command ["+" "="]
@ -354,7 +360,7 @@
:hide-ui {:tooltip "\\" :hide-ui {:tooltip "\\"
:command "\\" :command "\\"
:fn #(st/emit! (dw/toggle-layout-flags :hide-ui))} :fn #(st/emit! (toggle-layout-flag :hide-ui))}
}) })

2
frontend/src/app/main/ui/workspace.cljs
View file

@ -77,7 +77,7 @@
[:* [:*
[:& left-toolbar {:layout layout}] [:& left-toolbar {:layout layout}]
(if (:collapse-left-sidebar layout) (if (:collapse-left-sidebar layout)
[:button.collapse-sidebar.collapsed {:on-click #(st/emit! (dw/toggle-layout-flags :collapse-left-sidebar))} [:button.collapse-sidebar.collapsed {:on-click #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))}
i/arrow-slide] i/arrow-slide]
[:& left-sidebar {:layout layout}]) [:& left-sidebar {:layout layout}])
[:& right-sidebar {:section options-mode [:& right-sidebar {:section options-mode

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

@ -9,6 +9,7 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.spec.page :as csp] [app.common.spec.page :as csp]
[app.main.data.events :as ev]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.interactions :as dwi] [app.main.data.workspace.interactions :as dwi]
@ -35,9 +36,6 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event)) (dom/stop-propagation event))
(mf/defc menu-entry (mf/defc menu-entry
[{:keys [title shortcut on-click children selected? icon] :as props}] [{:keys [title shortcut on-click children selected? icon] :as props}]
(let [submenu-ref (mf/use-ref nil) (let [submenu-ref (mf/use-ref nil)
@ -437,8 +435,9 @@
(mf/defc viewport-context-menu (mf/defc viewport-context-menu
[] []
(let [do-paste (st/emitf dw/paste) (let [do-paste #(st/emit! dw/paste)
do-hide-ui (st/emitf (dw/toggle-layout-flags :hide-ui))] do-hide-ui #(st/emit! (-> (dw/toggle-layout-flag :hide-ui)
(vary-meta assoc ::ev/origin "workspace-context-menu")))]
[:* [:*
[:& menu-entry {:title (tr "workspace.shape.menu.paste") [:& menu-entry {:title (tr "workspace.shape.menu.paste")
:shortcut (sc/get-tooltip :paste) :shortcut (sc/get-tooltip :paste)

41
frontend/src/app/main/ui/workspace/header.cljs
View file

@ -206,7 +206,13 @@
(fn [item] (fn [item]
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(reset! show-sub-menu? item))))] (reset! show-sub-menu? item))))
toggle-flag
(mf/use-callback
(fn [flag]
(-> (dw/toggle-layout-flag flag)
(vary-meta assoc ::ev/origin "workspace-menu"))))]
(mf/use-effect (mf/use-effect
(mf/deps @editing?) (mf/deps @editing?)
@ -275,7 +281,7 @@
[:li {:on-click #(st/emit! (dw/select-all))} [:li {:on-click #(st/emit! (dw/select-all))}
[:span (tr "workspace.header.menu.select-all")] [:span (tr "workspace.header.menu.select-all")]
[:span.shortcut (sc/get-tooltip :select-all)]] [:span.shortcut (sc/get-tooltip :select-all)]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :scale-text))} [:li {:on-click #(st/emit! (toggle-flag :scale-text))}
[:span [:span
(if (contains? layout :scale-text) (if (contains? layout :scale-text)
(tr "workspace.header.menu.disable-scale-text") (tr "workspace.header.menu.disable-scale-text")
@ -285,21 +291,22 @@
[:& dropdown {:show (= @show-sub-menu? :view) [:& dropdown {:show (= @show-sub-menu? :view)
:on-close #(reset! show-sub-menu? false)} :on-close #(reset! show-sub-menu? false)}
[:ul.sub-menu.view [:ul.sub-menu.view
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :rules))} [:li {:on-click #(st/emit! (toggle-flag :rules))}
[:span [:span
(if (contains? layout :rules) (if (contains? layout :rules)
(tr "workspace.header.menu.hide-rules") (tr "workspace.header.menu.hide-rules")
(tr "workspace.header.menu.show-rules"))] (tr "workspace.header.menu.show-rules"))]
[:span.shortcut (sc/get-tooltip :toggle-rules)]] [:span.shortcut (sc/get-tooltip :toggle-rules)]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :display-grid))} [:li {:on-click #(st/emit! (toggle-flag :display-grid))}
[:span [:span
(if (contains? layout :display-grid) (if (contains? layout :display-grid)
(tr "workspace.header.menu.hide-grid") (tr "workspace.header.menu.hide-grid")
(tr "workspace.header.menu.show-grid"))] (tr "workspace.header.menu.show-grid"))]
[:span.shortcut (sc/get-tooltip :toggle-grid)]] [:span.shortcut (sc/get-tooltip :toggle-grid)]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :sitemap :layers))} [:li {:on-click #(st/emit! (toggle-flag :sitemap)
(toggle-flag :layers))}
[:span [:span
(if (or (contains? layout :sitemap) (contains? layout :layers)) (if (or (contains? layout :sitemap) (contains? layout :layers))
(tr "workspace.header.menu.hide-layers") (tr "workspace.header.menu.hide-layers")
@ -308,8 +315,8 @@
[:li {:on-click (fn [] [:li {:on-click (fn []
(r/set-resize-type! :bottom) (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :textpalette) (st/emit! (dw/remove-layout-flag :textpalette)
(dw/toggle-layout-flags :colorpalette)))} (toggle-flag :colorpalette)))}
[:span [:span
(if (contains? layout :colorpalette) (if (contains? layout :colorpalette)
(tr "workspace.header.menu.hide-palette") (tr "workspace.header.menu.hide-palette")
@ -318,28 +325,29 @@
[:li {:on-click (fn [] [:li {:on-click (fn []
(r/set-resize-type! :bottom) (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :colorpalette) (st/emit! (dw/remove-layout-flag :colorpalette)
(dw/toggle-layout-flags :textpalette)))} (toggle-flag :textpalette)))}
[:span [:span
(if (contains? layout :textpalette) (if (contains? layout :textpalette)
(tr "workspace.header.menu.hide-textpalette") (tr "workspace.header.menu.hide-textpalette")
(tr "workspace.header.menu.show-textpalette"))] (tr "workspace.header.menu.show-textpalette"))]
[:span.shortcut (sc/get-tooltip :toggle-textpalette)]] [:span.shortcut (sc/get-tooltip :toggle-textpalette)]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :assets))} [:li {:on-click #(st/emit! (toggle-flag :assets))}
[:span [:span
(if (contains? layout :assets) (if (contains? layout :assets)
(tr "workspace.header.menu.hide-assets") (tr "workspace.header.menu.hide-assets")
(tr "workspace.header.menu.show-assets"))] (tr "workspace.header.menu.show-assets"))]
[:span.shortcut (sc/get-tooltip :toggle-assets)]] [:span.shortcut (sc/get-tooltip :toggle-assets)]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :display-artboard-names))} [:li {:on-click #(st/emit! (toggle-flag :display-artboard-names))}
[:span [:span
(if (contains? layout :display-artboard-names) (if (contains? layout :display-artboard-names)
(tr "workspace.header.menu.hide-artboard-names") (tr "workspace.header.menu.hide-artboard-names")
(tr "workspace.header.menu.show-artboard-names"))]] (tr "workspace.header.menu.show-artboard-names"))]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :hide-ui))} [:li {:on-click #(st/emit! (-> (toggle-flag :hide-ui)
(vary-meta assoc ::ev/origin "workspace-menu")))}
[:span [:span
(tr "workspace.shape.menu.hide-ui")] (tr "workspace.shape.menu.hide-ui")]
[:span.shortcut (sc/get-tooltip :hide-ui)]]]] [:span.shortcut (sc/get-tooltip :hide-ui)]]]]
@ -347,21 +355,21 @@
[:& dropdown {:show (= @show-sub-menu? :preferences) [:& dropdown {:show (= @show-sub-menu? :preferences)
:on-close #(reset! show-sub-menu? false)} :on-close #(reset! show-sub-menu? false)}
[:ul.sub-menu.preferences [:ul.sub-menu.preferences
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :snap-guides))} [:li {:on-click #(st/emit! (toggle-flag :snap-guides))}
[:span [:span
(if (contains? layout :snap-guides) (if (contains? layout :snap-guides)
(tr "workspace.header.menu.disable-snap-guides") (tr "workspace.header.menu.disable-snap-guides")
(tr "workspace.header.menu.enable-snap-guides"))] (tr "workspace.header.menu.enable-snap-guides"))]
[:span.shortcut (sc/get-tooltip :toggle-snap-guide)]] [:span.shortcut (sc/get-tooltip :toggle-snap-guide)]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :snap-grid))} [:li {:on-click #(st/emit! (toggle-flag :snap-grid))}
[:span [:span
(if (contains? layout :snap-grid) (if (contains? layout :snap-grid)
(tr "workspace.header.menu.disable-snap-grid") (tr "workspace.header.menu.disable-snap-grid")
(tr "workspace.header.menu.enable-snap-grid"))] (tr "workspace.header.menu.enable-snap-grid"))]
[:span.shortcut (sc/get-tooltip :toggle-snap-grid)]] [:span.shortcut (sc/get-tooltip :toggle-snap-grid)]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :dynamic-alignment))} [:li {:on-click #(st/emit! (toggle-flag :dynamic-alignment))}
[:span [:span
(if (contains? layout :dynamic-alignment) (if (contains? layout :dynamic-alignment)
(tr "workspace.header.menu.disable-dynamic-alignment") (tr "workspace.header.menu.disable-dynamic-alignment")
@ -410,7 +418,8 @@
[:button.document-history [:button.document-history
{:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history)) {:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
:class (when (contains? layout :document-history) "selected") :class (when (contains? layout :document-history) "selected")
:on-click (st/emitf (dw/toggle-layout-flags :document-history))} :on-click #(st/emit! (-> (dw/toggle-layout-flag :document-history)
(vary-meta assoc ::ev/origin "workspace-header")))}
i/recent]] i/recent]]
[:div.options-section [:div.options-section

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

@ -124,8 +124,8 @@
:class (when (contains? layout :textpalette) "selected") :class (when (contains? layout :textpalette) "selected")
:on-click (fn [] :on-click (fn []
(r/set-resize-type! :bottom) (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :colorpalette) (st/emit! (dw/remove-layout-flag :colorpalette)
(dw/toggle-layout-flags :textpalette)))} (dw/toggle-layout-flag :textpalette)))}
"Ag"] "Ag"]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
@ -133,6 +133,6 @@
:class (when (contains? layout :colorpalette) "selected") :class (when (contains? layout :colorpalette) "selected")
:on-click (fn [] :on-click (fn []
(r/set-resize-type! :bottom) (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :textpalette) (st/emit! (dw/remove-layout-flag :textpalette)
(dw/toggle-layout-flags :colorpalette)))} (dw/toggle-layout-flag :colorpalette)))}
i/palette]]]])) i/palette]]]]))

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

@ -36,7 +36,7 @@
handle-collapse handle-collapse
(fn [] (fn []
(st/emit! (dw/toggle-layout-flags :collapse-left-sidebar)))] (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))]
[:aside.settings-bar.settings-bar-left {:ref parent-ref [:aside.settings-bar.settings-bar-left {:ref parent-ref
:class (dom/classnames :class (dom/classnames

2
frontend/src/debug.cljs
View file

@ -282,4 +282,4 @@
(defn ^:export hide-ui (defn ^:export hide-ui
[] []
(st/emit! (st/emit!
(dw/toggle-layout-flags :hide-ui))) (dw/toggle-layout-flag :hide-ui)))