Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-27 23:21:47 -05:00
Code Issues 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
Show stats 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/create-page ::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)
(defmethod process-event :default [_] nil)
@ -141,7 +143,8 @@
{:type "action"
: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
{:event-origin (::origin mdata)
:event-namespace (namespace type)

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

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

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

@ -417,25 +417,26 @@
;; 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
(update [_ state]
(update state :workspace-layout
(fn [stored]
(reduce (fn [flags flag]
(if (contains? flags flag)
(disj flags flag)
(conj flags flag)))
stored
(d/concat-set flags)))))))
(fn [flags]
(if (contains? flags flag)
(disj flags flag)
(conj flags flag)))))))
(defn remove-layout-flags
[& flags]
(ptk/reify ::remove-layout-flags
(defn remove-layout-flag
[flag]
(ptk/reify ::remove-layout-flag
ptk/UpdateEvent
(update [_ state]
(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
(:require
[app.main.data.events :as ev]
[app.main.data.shortcuts :as ds]
[app.main.data.workspace :as dw]
[app.main.data.workspace.colors :as mdc]
@ -24,6 +25,11 @@
;; 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
(def base-shortcuts
@ -42,18 +48,18 @@
:toggle-colorpalette {:tooltip (ds/alt "P")
:command (ds/a-mod "p")
:fn #(do (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :textpalette)
(dw/toggle-layout-flags :colorpalette)))}
(st/emit! (dw/remove-layout-flag :textpalette)
(toggle-layout-flag :colorpalette)))}
:toggle-textpalette {:tooltip (ds/alt "T")
:command (ds/a-mod "t")
:fn #(do (r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :colorpalette)
(dw/toggle-layout-flags :textpalette)))}
(st/emit! (dw/remove-layout-flag :colorpalette)
(toggle-layout-flag :textpalette)))}
:toggle-rules {:tooltip (ds/meta-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")
:command (ds/c-mod "a")
@ -61,23 +67,23 @@
:toggle-grid {:tooltip (ds/meta "'")
: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 "'")
: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")
: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 "\\")
: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"
:command "k"
:fn #(st/emit! (dw/toggle-layout-flags :scale-text))}
:fn #(st/emit! (toggle-layout-flag :scale-text))}
:increase-zoom {:tooltip "+"
:command ["+" "="]
@ -354,7 +360,7 @@
:hide-ui {:tooltip "\\"
: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}]
(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]
[:& left-sidebar {:layout layout}])
[:& right-sidebar {:section options-mode

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

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

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

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

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

@ -45,16 +45,16 @@
:position (gpt/point x y)}]
(st/emit! (dw/upload-media-workspace params)))))]
[:li.tooltip.tooltip-right
{:alt (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:on-click on-click}
[:*
i/image
[:& file-uploader {:input-id "image-upload"
:accept cm/str-image-types
:multi true
:ref ref
:on-selected on-files-selected}]]]))
[:li.tooltip.tooltip-right
{:alt (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:on-click on-click}
[:*
i/image
[:& file-uploader {:input-id "image-upload"
:accept cm/str-image-types
:multi true
:ref ref
:on-selected on-files-selected}]]]))
(mf/defc left-toolbar
{::mf/wrap [mf/memo]
@ -124,15 +124,15 @@
:class (when (contains? layout :textpalette) "selected")
:on-click (fn []
(r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :colorpalette)
(dw/toggle-layout-flags :textpalette)))}
(st/emit! (dw/remove-layout-flag :colorpalette)
(dw/toggle-layout-flag :textpalette)))}
"Ag"]
[:li.tooltip.tooltip-right
{:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:class (when (contains? layout :colorpalette) "selected")
:on-click (fn []
(r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flags :textpalette)
(dw/toggle-layout-flags :colorpalette)))}
(st/emit! (dw/remove-layout-flag :textpalette)
(dw/toggle-layout-flag :colorpalette)))}
i/palette]]]]))

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

@ -36,7 +36,7 @@
handle-collapse
(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
:class (dom/classnames

2
frontend/src/debug.cljs
View file

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