mirror of
https://github.com/penpot/penpot.git
synced 2025-08-02 11:28:22 +02:00
✨ Add shortcut panel
This commit is contained in:
Eva
Andrés Moya
parent
4363e32aae
commit
9cacca4802
16 changed files with 1841 additions and 304 deletions
|
|
@ -13,18 +13,22 @@
|
|||
(def shortcuts
|
||||
{:go-to-search {:tooltip (ds/meta "F")
|
||||
:command (ds/c-mod "f")
|
||||
:subsections [:navigation-dashboard]
|
||||
:fn (st/emitf (dd/go-to-search))}
|
||||
|
||||
:go-to-drafts {:tooltip "G D"
|
||||
:command "g d"
|
||||
:subsections [:navigation-dashboard]
|
||||
:fn (st/emitf (dd/go-to-drafts))}
|
||||
|
||||
:go-to-libs {:tooltip "G L"
|
||||
:command "g l"
|
||||
:subsections [:navigation-dashboard]
|
||||
:fn (st/emitf (dd/go-to-libs))}
|
||||
|
||||
:create-new-project {:tooltip "+"
|
||||
:command "+"
|
||||
:subsections [:general-dashboard]
|
||||
:fn (st/emitf (dd/create-element))}})
|
||||
|
||||
(defn get-tooltip [shortcut]
|
||||
|
|
|
|||
|
|
@ -13,50 +13,62 @@
|
|||
(def shortcuts
|
||||
{:increase-zoom {:tooltip "+"
|
||||
:command "+"
|
||||
:subsections [:zoom-viewer]
|
||||
:fn (st/emitf dv/increase-zoom)}
|
||||
|
||||
:decrease-zoom {:tooltip "-"
|
||||
:command "-"
|
||||
:subsections [:zoom-viewer]
|
||||
:fn (st/emitf dv/decrease-zoom)}
|
||||
|
||||
:select-all {:tooltip (ds/meta "A")
|
||||
:command (ds/c-mod "a")
|
||||
:subsections [:general-viewer]
|
||||
:fn (st/emitf (dv/select-all))}
|
||||
|
||||
:reset-zoom {:tooltip (ds/shift "0")
|
||||
:command "shift+0"
|
||||
:subsections [:zoom-viewer]
|
||||
:fn (st/emitf dv/reset-zoom)}
|
||||
|
||||
:toggle-zoom-style {:tooltip "F"
|
||||
:command "f"
|
||||
:subsections [:zoom-viewer]
|
||||
:fn (st/emitf dv/toggle-zoom-style)}
|
||||
|
||||
:toogle-fullscreen {:tooltip (ds/shift "F")
|
||||
:command "shift+f"
|
||||
:subsections [:zoom-viewer]
|
||||
:fn (st/emitf dv/toggle-fullscreen)}
|
||||
|
||||
:next-frame {:tooltip ds/left-arrow
|
||||
:command "left"
|
||||
:subsections [:general-viewer]
|
||||
:fn (st/emitf dv/select-prev-frame)}
|
||||
|
||||
:prev-frame {:tooltip ds/right-arrow
|
||||
:command "right"
|
||||
:subsections [:general-viewer]
|
||||
:fn (st/emitf dv/select-next-frame)}
|
||||
|
||||
:open-handoff {:tooltip "G H"
|
||||
:command "g h"
|
||||
:subsections [:navigation-viewer]
|
||||
:fn #(st/emit! (dv/go-to-section :handoff))}
|
||||
|
||||
:open-comments {:tooltip "G C"
|
||||
:command "g c"
|
||||
:subsections [:navigation-viewer]
|
||||
:fn #(st/emit! (dv/go-to-section :comments))}
|
||||
|
||||
:open-interactions {:tooltip "G V"
|
||||
:command "g v"
|
||||
:subsections [:navigation-viewer]
|
||||
:fn #(st/emit! (dv/go-to-section :interactions))}
|
||||
|
||||
:open-workspace {:tooltip "G W"
|
||||
:command "g w"
|
||||
:subsections [:navigation-viewer]
|
||||
:fn #(st/emit! (dv/go-to-workspace))}})
|
||||
|
||||
(defn get-tooltip [shortcut]
|
||||
|
|
|
|||
|
|
@ -34,42 +34,52 @@
|
|||
(def shortcuts
|
||||
{:move-nodes {:tooltip "M"
|
||||
:command "m"
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/change-edit-mode :move))}
|
||||
|
||||
:draw-nodes {:tooltip "P"
|
||||
:command "p"
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/change-edit-mode :draw))}
|
||||
|
||||
:add-node {:tooltip (ds/shift "+")
|
||||
:command "shift++"
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/add-node))}
|
||||
|
||||
:delete-node {:tooltip (ds/supr)
|
||||
:command ["del" "backspace"]
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/remove-node))}
|
||||
|
||||
:merge-nodes {:tooltip (ds/meta "J")
|
||||
:command (ds/c-mod "j")
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/merge-nodes))}
|
||||
|
||||
:join-nodes {:tooltip "J"
|
||||
:command "j"
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/join-nodes))}
|
||||
|
||||
:separate-nodes {:tooltip "K"
|
||||
:command "k"
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/separate-nodes))}
|
||||
|
||||
:make-corner {:tooltip "X"
|
||||
:command "x"
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/make-corner))}
|
||||
|
||||
:make-curve {:tooltip "C"
|
||||
:command "c"
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/make-curve))}
|
||||
|
||||
:snap-nodes {:tooltip (ds/meta "'")
|
||||
:command (ds/c-mod "'")
|
||||
:subsections [:path-editor]
|
||||
:fn #(st/emit! (drp/toggle-snap))}
|
||||
|
||||
:escape {:tooltip (ds/esc)
|
||||
|
|
|
|||
|
|
@ -34,356 +34,464 @@
|
|||
;; Shortcuts format https://github.com/ccampbell/mousetrap
|
||||
|
||||
(def base-shortcuts
|
||||
{:toggle-layers {:tooltip (ds/alt "L")
|
||||
:command (ds/a-mod "l")
|
||||
:fn #(st/emit! (dw/go-to-layout :layers))}
|
||||
|
||||
:toggle-assets {:tooltip (ds/alt "I")
|
||||
:command (ds/a-mod "i")
|
||||
:fn #(st/emit! (dw/go-to-layout :assets))}
|
||||
|
||||
:toggle-history {:tooltip (ds/alt "H")
|
||||
:command (ds/a-mod "h")
|
||||
:fn #(st/emit! (dw/go-to-layout :document-history))}
|
||||
|
||||
:toggle-colorpalette {:tooltip (ds/alt "P")
|
||||
:command (ds/a-mod "p")
|
||||
:fn #(do (r/set-resize-type! :bottom)
|
||||
(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-flag :colorpalette)
|
||||
(toggle-layout-flag :textpalette)))}
|
||||
|
||||
:toggle-rules {:tooltip (ds/meta-shift "R")
|
||||
:command (ds/c-mod "shift+r")
|
||||
:fn #(st/emit! (toggle-layout-flag :rules))}
|
||||
|
||||
:export-shapes {:tooltip (ds/meta-shift "E")
|
||||
:command (ds/c-mod "shift+e")
|
||||
:fn #(st/emit!
|
||||
(de/show-workspace-export-dialog))}
|
||||
|
||||
:select-all {:tooltip (ds/meta "A")
|
||||
:command (ds/c-mod "a")
|
||||
:fn #(st/emit! (dw/select-all))}
|
||||
|
||||
:toggle-grid {:tooltip (ds/meta "'")
|
||||
:command (ds/c-mod "'")
|
||||
:fn #(st/emit! (toggle-layout-flag :display-grid))}
|
||||
|
||||
:toggle-snap-grid {:tooltip (ds/meta-shift "'")
|
||||
:command (ds/c-mod "shift+'")
|
||||
: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! (toggle-layout-flag :snap-guides))}
|
||||
|
||||
:toggle-alignment {:tooltip (ds/meta "\\")
|
||||
:command (ds/c-mod "\\")
|
||||
:fn #(st/emit! (toggle-layout-flag :dynamic-alignment))}
|
||||
|
||||
:toggle-scale-text {:tooltip "K"
|
||||
:command "k"
|
||||
:fn #(st/emit! (toggle-layout-flag :scale-text))}
|
||||
|
||||
:increase-zoom {:tooltip "+"
|
||||
:command ["+" "="]
|
||||
:fn #(st/emit! (dw/increase-zoom nil))}
|
||||
|
||||
:decrease-zoom {:tooltip "-"
|
||||
:command ["-" "_"]
|
||||
:fn #(st/emit! (dw/decrease-zoom nil))}
|
||||
|
||||
:group {:tooltip (ds/meta "G")
|
||||
:command (ds/c-mod "g")
|
||||
:fn #(st/emit! dw/group-selected)}
|
||||
|
||||
:ungroup {:tooltip (ds/shift "G")
|
||||
:command "shift+g"
|
||||
:fn #(st/emit! dw/ungroup-selected)}
|
||||
|
||||
:mask {:tooltip (ds/meta "M")
|
||||
:command (ds/c-mod "m")
|
||||
:fn #(st/emit! dw/mask-group)}
|
||||
|
||||
:unmask {:tooltip (ds/meta-shift "M")
|
||||
:command (ds/c-mod "shift+m")
|
||||
:fn #(st/emit! dw/unmask-group)}
|
||||
|
||||
:create-component {:tooltip (ds/meta "K")
|
||||
:command (ds/c-mod "k")
|
||||
:fn #(st/emit! (dwl/add-component))}
|
||||
|
||||
:detach-component {:tooltip (ds/meta-shift "K")
|
||||
:command (ds/c-mod "shift+k")
|
||||
:fn #(st/emit! dwl/detach-selected-components)}
|
||||
|
||||
:flip-vertical {:tooltip (ds/shift "V")
|
||||
:command "shift+v"
|
||||
:fn #(st/emit! (dw/flip-vertical-selected))}
|
||||
|
||||
:flip-horizontal {:tooltip (ds/shift "H")
|
||||
:command "shift+h"
|
||||
:fn #(st/emit! (dw/flip-horizontal-selected))}
|
||||
|
||||
:reset-zoom {:tooltip (ds/shift "0")
|
||||
:command "shift+0"
|
||||
:fn #(st/emit! dw/reset-zoom)}
|
||||
|
||||
:fit-all {:tooltip (ds/shift "1")
|
||||
:command "shift+1"
|
||||
:fn #(st/emit! dw/zoom-to-fit-all)}
|
||||
|
||||
:zoom-selected {:tooltip (ds/shift "2")
|
||||
:command ["shift+2" "@" "\""]
|
||||
:fn #(st/emit! dw/zoom-to-selected-shape)}
|
||||
|
||||
:duplicate {:tooltip (ds/meta "D")
|
||||
:command (ds/c-mod "d")
|
||||
:fn #(st/emit! (dw/duplicate-selected true))}
|
||||
|
||||
{;; EDIT
|
||||
:undo {:tooltip (ds/meta "Z")
|
||||
:command (ds/c-mod "z")
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! dwc/undo)}
|
||||
|
||||
:redo {:tooltip (ds/meta "Y")
|
||||
:command [(ds/c-mod "shift+z") (ds/c-mod "y")]
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! dwc/redo)}
|
||||
|
||||
:clear-undo {:tooltip (ds/meta "Q")
|
||||
:command (ds/c-mod "q")
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! dwu/reinitialize-undo)}
|
||||
|
||||
:draw-frame {:tooltip "A"
|
||||
:command "a"
|
||||
:fn #(st/emit! (dwd/select-for-drawing :frame))}
|
||||
|
||||
:move {:tooltip "V"
|
||||
:command "v"
|
||||
:fn #(st/emit! :interrupt)}
|
||||
|
||||
:draw-rect {:tooltip "R"
|
||||
:command "r"
|
||||
:fn #(st/emit! (dwd/select-for-drawing :rect))}
|
||||
|
||||
:draw-ellipse {:tooltip "E"
|
||||
:command "e"
|
||||
:fn #(st/emit! (dwd/select-for-drawing :circle))}
|
||||
|
||||
:draw-text {:tooltip "T"
|
||||
:command "t"
|
||||
:fn #(st/emit! dwtxt/start-edit-if-selected
|
||||
(dwd/select-for-drawing :text))}
|
||||
|
||||
:draw-path {:tooltip "P"
|
||||
:command "p"
|
||||
:fn #(st/emit! (dwd/select-for-drawing :path))}
|
||||
|
||||
:draw-curve {:tooltip (ds/shift "C")
|
||||
:command "shift+c"
|
||||
:fn #(st/emit! (dwd/select-for-drawing :curve))}
|
||||
|
||||
:add-comment {:tooltip "C"
|
||||
:command "c"
|
||||
:fn #(st/emit! (dwd/select-for-drawing :comments))}
|
||||
|
||||
:insert-image {:tooltip (ds/shift "K")
|
||||
:command "shift+k"
|
||||
:fn #(-> "image-upload" dom/get-element dom/click)}
|
||||
|
||||
:copy {:tooltip (ds/meta "C")
|
||||
:command (ds/c-mod "c")
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! (dw/copy-selected))}
|
||||
|
||||
:cut {:tooltip (ds/meta "X")
|
||||
:command (ds/c-mod "x")
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! (dw/copy-selected)
|
||||
(dw/delete-selected))}
|
||||
|
||||
:paste {:tooltip (ds/meta "V")
|
||||
:disabled true
|
||||
:command (ds/c-mod "v")
|
||||
:subsections [:edit]
|
||||
:fn (constantly nil)}
|
||||
|
||||
:delete {:tooltip (ds/supr)
|
||||
:command ["del" "backspace"]
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! (dw/delete-selected))}
|
||||
|
||||
:bring-forward {:tooltip (ds/meta ds/up-arrow)
|
||||
:command (ds/c-mod "up")
|
||||
:fn #(st/emit! (dw/vertical-order-selected :up))}
|
||||
|
||||
:bring-backward {:tooltip (ds/meta ds/down-arrow)
|
||||
:command (ds/c-mod "down")
|
||||
:fn #(st/emit! (dw/vertical-order-selected :down))}
|
||||
|
||||
:bring-front {:tooltip (ds/meta-shift ds/up-arrow)
|
||||
:command (ds/c-mod "shift+up")
|
||||
:fn #(st/emit! (dw/vertical-order-selected :top))}
|
||||
|
||||
:bring-back {:tooltip (ds/meta-shift ds/down-arrow)
|
||||
:command (ds/c-mod "shift+down")
|
||||
:fn #(st/emit! (dw/vertical-order-selected :bottom))}
|
||||
|
||||
:move-fast-up {:tooltip (ds/shift ds/up-arrow)
|
||||
:command "shift+up"
|
||||
:fn #(st/emit! (dwt/move-selected :up true))}
|
||||
|
||||
:move-fast-down {:tooltip (ds/shift ds/down-arrow)
|
||||
:command "shift+down"
|
||||
:fn #(st/emit! (dwt/move-selected :down true))}
|
||||
|
||||
:move-fast-right {:tooltip (ds/shift ds/right-arrow)
|
||||
:command "shift+right"
|
||||
:fn #(st/emit! (dwt/move-selected :right true))}
|
||||
|
||||
:move-fast-left {:tooltip (ds/shift ds/left-arrow)
|
||||
:command "shift+left"
|
||||
:fn #(st/emit! (dwt/move-selected :left true))}
|
||||
|
||||
:move-unit-up {:tooltip ds/up-arrow
|
||||
:command "up"
|
||||
:fn #(st/emit! (dwt/move-selected :up false))}
|
||||
|
||||
:move-unit-down {:tooltip ds/down-arrow
|
||||
:command "down"
|
||||
:fn #(st/emit! (dwt/move-selected :down false))}
|
||||
|
||||
:move-unit-left {:tooltip ds/right-arrow
|
||||
:command "right"
|
||||
:fn #(st/emit! (dwt/move-selected :right false))}
|
||||
|
||||
:move-unit-right {:tooltip ds/left-arrow
|
||||
:command "left"
|
||||
:fn #(st/emit! (dwt/move-selected :left false))}
|
||||
|
||||
:open-color-picker {:tooltip "I"
|
||||
:command "i"
|
||||
:fn #(st/emit! (mdc/picker-for-selected-shape))}
|
||||
|
||||
:open-viewer {:tooltip "G V"
|
||||
:command "g v"
|
||||
:fn #(st/emit! (dw/go-to-viewer))}
|
||||
|
||||
:open-handoff {:tooltip "G H"
|
||||
:command "g h"
|
||||
:fn #(st/emit! (dw/go-to-viewer {:section :handoff}))}
|
||||
|
||||
:open-comments {:tooltip "G C"
|
||||
:command "g c"
|
||||
:fn #(st/emit! (dw/go-to-viewer {:section :comments}))}
|
||||
|
||||
:open-dashboard {:tooltip "G D"
|
||||
:command "g d"
|
||||
:fn #(st/emit! (dw/go-to-dashboard))}
|
||||
|
||||
:escape {:tooltip (ds/esc)
|
||||
:command "escape"
|
||||
:fn #(st/emit! :interrupt (dw/deselect-all true))}
|
||||
:duplicate {:tooltip (ds/meta "D")
|
||||
:command (ds/c-mod "d")
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! (dw/duplicate-selected true))}
|
||||
|
||||
:start-editing {:tooltip (ds/enter)
|
||||
:command "enter"
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! (dw/start-editing-selected))}
|
||||
|
||||
:start-measure {:tooltip (ds/alt "")
|
||||
:command ["alt" "."]
|
||||
:type "keydown"
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! (dw/toggle-distances-display true))}
|
||||
|
||||
:stop-measure {:tooltip (ds/alt "")
|
||||
:command ["alt" "."]
|
||||
:type "keyup"
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! (dw/toggle-distances-display false))}
|
||||
|
||||
:bool-union {:tooltip (ds/meta (ds/alt "U"))
|
||||
:command (ds/c-mod "alt+u")
|
||||
:fn #(st/emit! (dw/create-bool :union))}
|
||||
:escape {:tooltip (ds/esc)
|
||||
:command "escape"
|
||||
:subsections [:edit]
|
||||
:fn #(st/emit! :interrupt (dw/deselect-all true))}
|
||||
|
||||
:bool-difference {:tooltip (ds/meta (ds/alt "D"))
|
||||
:command (ds/c-mod "alt+d")
|
||||
:fn #(st/emit! (dw/create-bool :difference))}
|
||||
;; MODIFY LAYERS
|
||||
|
||||
:bool-intersection {:tooltip (ds/meta (ds/alt "I"))
|
||||
:command (ds/c-mod "alt+i")
|
||||
:fn #(st/emit! (dw/create-bool :intersection))}
|
||||
|
||||
:bool-exclude {:tooltip (ds/meta (ds/alt "E"))
|
||||
:command (ds/c-mod "alt+e")
|
||||
:fn #(st/emit! (dw/create-bool :exclude))}
|
||||
:group {:tooltip (ds/meta "G")
|
||||
:command (ds/c-mod "g")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! dw/group-selected)}
|
||||
|
||||
:align-left {:tooltip (ds/alt "A")
|
||||
:command "alt+a"
|
||||
:fn #(st/emit! (dw/align-objects :hleft))}
|
||||
:ungroup {:tooltip (ds/shift "G")
|
||||
:command "shift+g"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! dw/ungroup-selected)}
|
||||
|
||||
:align-right {:tooltip (ds/alt "D")
|
||||
:command "alt+d"
|
||||
:fn #(st/emit! (dw/align-objects :hright))}
|
||||
:mask {:tooltip (ds/meta "M")
|
||||
:command (ds/c-mod "m")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! dw/mask-group)}
|
||||
|
||||
:align-top {:tooltip (ds/alt "W")
|
||||
:command "alt+w"
|
||||
:fn #(st/emit! (dw/align-objects :vtop))}
|
||||
:unmask {:tooltip (ds/meta-shift "M")
|
||||
:command (ds/c-mod "shift+m")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! dw/unmask-group)}
|
||||
|
||||
:align-hcenter {:tooltip (ds/alt "H")
|
||||
:command "alt+h"
|
||||
:fn #(st/emit! (dw/align-objects :hcenter))}
|
||||
:create-component {:tooltip (ds/meta "K")
|
||||
:command (ds/c-mod "k")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwl/add-component))}
|
||||
|
||||
:align-vcenter {:tooltip (ds/alt "V")
|
||||
:command "alt+v"
|
||||
:fn #(st/emit! (dw/align-objects :vcenter))}
|
||||
:detach-component {:tooltip (ds/meta-shift "K")
|
||||
:command (ds/c-mod "shift+k")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! dwl/detach-selected-components)}
|
||||
|
||||
:align-bottom {:tooltip (ds/alt "S")
|
||||
:command "alt+s"
|
||||
:fn #(st/emit! (dw/align-objects :vbottom))}
|
||||
:flip-vertical {:tooltip (ds/shift "V")
|
||||
:command "shift+v"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dw/flip-vertical-selected))}
|
||||
|
||||
:h-distribute {:tooltip (ds/meta-shift (ds/alt "H"))
|
||||
:command (ds/c-mod "shift+alt+h")
|
||||
:fn #(st/emit! (dw/distribute-objects :horizontal))}
|
||||
:flip-horizontal {:tooltip (ds/shift "H")
|
||||
:command "shift+h"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dw/flip-horizontal-selected))}
|
||||
:bring-forward {:tooltip (ds/meta ds/up-arrow)
|
||||
:command (ds/c-mod "up")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dw/vertical-order-selected :up))}
|
||||
|
||||
:v-distribute {:tooltip (ds/meta-shift (ds/alt "V"))
|
||||
:command (ds/c-mod "shift+alt+v")
|
||||
:fn #(st/emit! (dw/distribute-objects :vertical))}
|
||||
:bring-backward {:tooltip (ds/meta ds/down-arrow)
|
||||
:command (ds/c-mod "down")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dw/vertical-order-selected :down))}
|
||||
|
||||
:bring-front {:tooltip (ds/meta-shift ds/up-arrow)
|
||||
:command (ds/c-mod "shift+up")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dw/vertical-order-selected :top))}
|
||||
|
||||
:bring-back {:tooltip (ds/meta-shift ds/down-arrow)
|
||||
:command (ds/c-mod "shift+down")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dw/vertical-order-selected :bottom))}
|
||||
|
||||
:move-fast-up {:tooltip (ds/shift ds/up-arrow)
|
||||
:command "shift+up"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwt/move-selected :up true))}
|
||||
|
||||
:move-fast-down {:tooltip (ds/shift ds/down-arrow)
|
||||
:command "shift+down"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwt/move-selected :down true))}
|
||||
|
||||
:move-fast-right {:tooltip (ds/shift ds/right-arrow)
|
||||
:command "shift+right"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwt/move-selected :right true))}
|
||||
|
||||
:move-fast-left {:tooltip (ds/shift ds/left-arrow)
|
||||
:command "shift+left"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwt/move-selected :left true))}
|
||||
|
||||
:move-unit-up {:tooltip ds/up-arrow
|
||||
:command "up"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwt/move-selected :up false))}
|
||||
|
||||
:move-unit-down {:tooltip ds/down-arrow
|
||||
:command "down"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwt/move-selected :down false))}
|
||||
|
||||
:move-unit-left {:tooltip ds/right-arrow
|
||||
:command "right"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwt/move-selected :right false))}
|
||||
|
||||
:move-unit-right {:tooltip ds/left-arrow
|
||||
:command "left"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwt/move-selected :left false))}
|
||||
|
||||
:artboard-selection {:tooltip (ds/meta (ds/alt "G"))
|
||||
:command (ds/c-mod "alt+g")
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dw/create-artboard-from-selection))}
|
||||
|
||||
;; TOOLS
|
||||
|
||||
:draw-frame {:tooltip "A"
|
||||
:command "a"
|
||||
:subsections [:tools :basics]
|
||||
:fn #(st/emit! (dwd/select-for-drawing :frame))}
|
||||
|
||||
:move {:tooltip "V"
|
||||
:command "v"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! :interrupt)}
|
||||
|
||||
:draw-rect {:tooltip "R"
|
||||
:command "r"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (dwd/select-for-drawing :rect))}
|
||||
|
||||
:draw-ellipse {:tooltip "E"
|
||||
:command "e"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (dwd/select-for-drawing :circle))}
|
||||
|
||||
:draw-text {:tooltip "T"
|
||||
:command "t"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! dwtxt/start-edit-if-selected
|
||||
(dwd/select-for-drawing :text))}
|
||||
|
||||
:draw-path {:tooltip "P"
|
||||
:command "p"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (dwd/select-for-drawing :path))}
|
||||
|
||||
:draw-curve {:tooltip (ds/shift "C")
|
||||
:command "shift+c"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (dwd/select-for-drawing :curve))}
|
||||
|
||||
:add-comment {:tooltip "C"
|
||||
:command "c"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (dwd/select-for-drawing :comments))}
|
||||
|
||||
:insert-image {:tooltip (ds/shift "K")
|
||||
:command "shift+k"
|
||||
:subsections [:tools]
|
||||
:fn #(-> "image-upload" dom/get-element dom/click)}
|
||||
|
||||
:toggle-visibility {:tooltip (ds/meta-shift "H")
|
||||
:command (ds/c-mod "shift+h")
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (dw/toggle-visibility-selected))}
|
||||
|
||||
:toggle-lock {:tooltip (ds/meta-shift "L")
|
||||
:command (ds/c-mod "shift+l")
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (dw/toggle-lock-selected))}
|
||||
|
||||
:toggle-lock-size {:tooltip (ds/meta (ds/alt "L"))
|
||||
:command (ds/c-mod "alt+l")
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (dw/toggle-proportion-lock))}
|
||||
|
||||
:artboard-selection {:tooltip (ds/meta (ds/alt "G"))
|
||||
:command (ds/c-mod "alt+g")
|
||||
:fn #(st/emit! (dw/create-artboard-from-selection))}
|
||||
:toggle-scale-text {:tooltip "K"
|
||||
:command "k"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (toggle-layout-flag :scale-text))}
|
||||
|
||||
:hide-ui {:tooltip "\\"
|
||||
:command "\\"
|
||||
:fn #(st/emit! (toggle-layout-flag :hide-ui))}
|
||||
:open-color-picker {:tooltip "I"
|
||||
:command "i"
|
||||
:subsections [:tools]
|
||||
:fn #(st/emit! (mdc/picker-for-selected-shape))}
|
||||
|
||||
:toggle-focus-mode {:command "f"
|
||||
:tooltip "F"
|
||||
:subsections [:basics :tools]
|
||||
:fn #(st/emit! (dw/toggle-focus-mode))}
|
||||
|
||||
:thumbnail-set {:tooltip (ds/shift "T")
|
||||
:command "shift+t"
|
||||
:fn #(st/emit! (dw/toggle-file-thumbnail-selected))}
|
||||
;; ITEM ALIGNMENT
|
||||
|
||||
:align-left {:tooltip (ds/alt "A")
|
||||
:command "alt+a"
|
||||
:subsections [:alignment]
|
||||
:fn #(st/emit! (dw/align-objects :hleft))}
|
||||
|
||||
:align-right {:tooltip (ds/alt "D")
|
||||
:command "alt+d"
|
||||
:subsections [:alignment]
|
||||
:fn #(st/emit! (dw/align-objects :hright))}
|
||||
|
||||
:align-top {:tooltip (ds/alt "W")
|
||||
:command "alt+w"
|
||||
:subsections [:alignment]
|
||||
:fn #(st/emit! (dw/align-objects :vtop))}
|
||||
|
||||
:align-hcenter {:tooltip (ds/alt "H")
|
||||
:command "alt+h"
|
||||
:subsections [:alignment]
|
||||
:fn #(st/emit! (dw/align-objects :hcenter))}
|
||||
|
||||
:align-vcenter {:tooltip (ds/alt "V")
|
||||
:command "alt+v"
|
||||
:subsections [:alignment]
|
||||
:fn #(st/emit! (dw/align-objects :vcenter))}
|
||||
|
||||
:align-bottom {:tooltip (ds/alt "S")
|
||||
:command "alt+s"
|
||||
:subsections [:alignment]
|
||||
:fn #(st/emit! (dw/align-objects :vbottom))}
|
||||
|
||||
:h-distribute {:tooltip (ds/meta-shift (ds/alt "H"))
|
||||
:command (ds/c-mod "shift+alt+h")
|
||||
:subsections [:alignment]
|
||||
:fn #(st/emit! (dw/distribute-objects :horizontal))}
|
||||
|
||||
:v-distribute {:tooltip (ds/meta-shift (ds/alt "V"))
|
||||
:command (ds/c-mod "shift+alt+v")
|
||||
:subsections [:alignment]
|
||||
:fn #(st/emit! (dw/distribute-objects :vertical))}
|
||||
|
||||
;; MAIN MENU
|
||||
|
||||
:toggle-rules {:tooltip (ds/meta-shift "R")
|
||||
:command (ds/c-mod "shift+r")
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (toggle-layout-flag :rules))}
|
||||
|
||||
:select-all {:tooltip (ds/meta "A")
|
||||
:command (ds/c-mod "a")
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (dw/select-all))}
|
||||
|
||||
:toggle-grid {:tooltip (ds/meta "'")
|
||||
:command (ds/c-mod "'")
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (toggle-layout-flag :display-grid))}
|
||||
|
||||
:toggle-snap-grid {:tooltip (ds/meta-shift "'")
|
||||
:command (ds/c-mod "shift+'")
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (toggle-layout-flag :snap-grid))}
|
||||
|
||||
:toggle-alignment {:tooltip (ds/meta "\\")
|
||||
:command (ds/c-mod "\\")
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (toggle-layout-flag :dynamic-alignment))}
|
||||
|
||||
:thumbnail-set {:tooltip (ds/shift "T")
|
||||
:command "shift+t"
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (dw/toggle-file-thumbnail-selected))}
|
||||
|
||||
:show-pixel-grid {:tooltip (ds/shift ",")
|
||||
:command "shift+,"
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (toggle-layout-flag :show-pixel-grid))}
|
||||
|
||||
:snap-pixel-grid {:command ","
|
||||
:tooltip ","
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (toggle-layout-flag :snap-pixel-grid))}
|
||||
})
|
||||
|
||||
:export-shapes {:tooltip (ds/meta-shift "E")
|
||||
:command (ds/c-mod "shift+e")
|
||||
:subsections [:basics :main-menu]
|
||||
:fn #(st/emit!
|
||||
(de/show-workspace-export-dialog))}
|
||||
|
||||
:toggle-snap-guide {:tooltip (ds/meta-shift "G")
|
||||
:command (ds/c-mod "shift+g")
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (toggle-layout-flag :snap-guides))}
|
||||
|
||||
:show-shortcuts {:tooltip "?"
|
||||
:command "?"
|
||||
:subsections [:main-menu]
|
||||
:fn #(st/emit! (toggle-layout-flag :shortcuts)) }
|
||||
|
||||
;; PANELS
|
||||
|
||||
:toggle-layers {:tooltip (ds/alt "L")
|
||||
:command (ds/a-mod "l")
|
||||
:subsections [:panels]
|
||||
:fn #(st/emit! (dw/go-to-layout :layers))}
|
||||
|
||||
:toggle-assets {:tooltip (ds/alt "I")
|
||||
:command (ds/a-mod "i")
|
||||
:subsections [:panels]
|
||||
:fn #(st/emit! (dw/go-to-layout :assets))}
|
||||
|
||||
:toggle-history {:tooltip (ds/alt "H")
|
||||
:command (ds/a-mod "h")
|
||||
:subsections [:panels]
|
||||
:fn #(st/emit! (dw/go-to-layout :document-history))}
|
||||
|
||||
:toggle-colorpalette {:tooltip (ds/alt "P")
|
||||
:command (ds/a-mod "p")
|
||||
:subsections [:panels]
|
||||
:fn #(do (r/set-resize-type! :bottom)
|
||||
(st/emit! (dw/remove-layout-flag :textpalette)
|
||||
(toggle-layout-flag :colorpalette)))}
|
||||
|
||||
:toggle-textpalette {:tooltip (ds/alt "T")
|
||||
:command (ds/a-mod "t")
|
||||
:subsections [:panels]
|
||||
:fn #(do (r/set-resize-type! :bottom)
|
||||
(st/emit! (dw/remove-layout-flag :colorpalette)
|
||||
(toggle-layout-flag :textpalette)))}
|
||||
|
||||
:hide-ui {:tooltip "\\"
|
||||
:command "\\"
|
||||
:subsections [:panels :basics]
|
||||
:fn #(st/emit! (toggle-layout-flag :hide-ui))}
|
||||
|
||||
;; ZOOM-WORKSPACE
|
||||
|
||||
:increase-zoom {:tooltip "+"
|
||||
:command ["+" "="]
|
||||
:subsections [:zoom-workspace]
|
||||
:fn #(st/emit! (dw/increase-zoom nil))}
|
||||
|
||||
:decrease-zoom {:tooltip "-"
|
||||
:command ["-" "_"]
|
||||
:subsections [:zoom-workspace]
|
||||
:fn #(st/emit! (dw/decrease-zoom nil))}
|
||||
|
||||
:reset-zoom {:tooltip (ds/shift "0")
|
||||
:command "shift+0"
|
||||
:subsections [:zoom-workspace]
|
||||
:fn #(st/emit! dw/reset-zoom)}
|
||||
|
||||
:fit-all {:tooltip (ds/shift "1")
|
||||
:command "shift+1"
|
||||
:subsections [:zoom-workspace]
|
||||
:fn #(st/emit! dw/zoom-to-fit-all)}
|
||||
|
||||
:zoom-selected {:tooltip (ds/shift "2")
|
||||
:command ["shift+2" "@" "\""]
|
||||
:subsections [:zoom-workspace]
|
||||
:fn #(st/emit! dw/zoom-to-selected-shape)}
|
||||
|
||||
;; NAVIGATION
|
||||
|
||||
|
||||
:open-viewer {:tooltip "G V"
|
||||
:command "g v"
|
||||
:subsections [:navigation-workspace]
|
||||
:fn #(st/emit! (dw/go-to-viewer))}
|
||||
|
||||
:open-handoff {:tooltip "G H"
|
||||
:command "g h"
|
||||
:subsections [:navigation-workspace]
|
||||
:fn #(st/emit! (dw/go-to-viewer {:section :handoff}))}
|
||||
|
||||
:open-comments {:tooltip "G C"
|
||||
:command "g c"
|
||||
:subsections [:navigation-workspace]
|
||||
:fn #(st/emit! (dw/go-to-viewer {:section :comments}))}
|
||||
|
||||
:open-dashboard {:tooltip "G D"
|
||||
:command "g d"
|
||||
:subsections [:navigation-workspace]
|
||||
:fn #(st/emit! (dw/go-to-dashboard))}
|
||||
|
||||
;; SHAPE
|
||||
|
||||
:bool-union {:tooltip (ds/meta (ds/alt "U"))
|
||||
:command (ds/c-mod "alt+u")
|
||||
:subsections [:shape]
|
||||
:fn #(st/emit! (dw/create-bool :union))}
|
||||
|
||||
:bool-difference {:tooltip (ds/meta (ds/alt "D"))
|
||||
:command (ds/c-mod "alt+d")
|
||||
:subsections [:shape]
|
||||
:fn #(st/emit! (dw/create-bool :difference))}
|
||||
|
||||
:bool-intersection {:tooltip (ds/meta (ds/alt "I"))
|
||||
:command (ds/c-mod "alt+i")
|
||||
:subsections [:shape]
|
||||
:fn #(st/emit! (dw/create-bool :intersection))}
|
||||
|
||||
:bool-exclude {:tooltip (ds/meta (ds/alt "E"))
|
||||
:command (ds/c-mod "alt+e")
|
||||
:subsections [:shape]
|
||||
:fn #(st/emit! (dw/create-bool :exclude))}}
|
||||
)
|
||||
|
||||
(def opacity-shortcuts
|
||||
(into {} (->>
|
||||
|
|
@ -391,6 +499,7 @@
|
|||
(map (fn [n] [(keyword (str "opacity-" n))
|
||||
{:tooltip (str n)
|
||||
:command (str n)
|
||||
:subsections [:modify-layers]
|
||||
:fn #(st/emit! (dwly/pressed-opacity n))}])))))
|
||||
|
||||
(def shortcuts
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
[beicon.core :as rx]
|
||||
[cljs.spec.alpha :as s]
|
||||
[goog.functions :as f]
|
||||
[potok.core :as ptk]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc sidebar-project
|
||||
|
|
@ -472,7 +473,16 @@
|
|||
(dom/stop-propagation event)
|
||||
(if (keyword? section)
|
||||
(st/emit! (rt/nav section))
|
||||
(st/emit! section))))]
|
||||
(st/emit! section))))
|
||||
|
||||
show-release-notes
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [version (:main @cf/version)]
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
|
||||
(if (and (kbd/alt? event) (kbd/mod? event))
|
||||
(st/emit! (modal/show {:type :onboarding}))
|
||||
(st/emit! (modal/show {:type :release-notes :version version}))))))]
|
||||
|
||||
[:div.profile-section
|
||||
[:div.profile {:on-click #(reset! show true)
|
||||
|
|
@ -485,26 +495,26 @@
|
|||
[:ul.dropdown
|
||||
[:li {:on-click (partial on-click :settings-profile)
|
||||
:data-test "profile-profile-opt"}
|
||||
[:span.icon i/user]
|
||||
[:span.text (tr "labels.your-account")]]
|
||||
[:li.separator {:on-click #(dom/open-new-window "https://help.penpot.app")
|
||||
:data-test "help-center-profile-opt"}
|
||||
[:span.icon i/help]
|
||||
[:span.text (tr "labels.help-center")]]
|
||||
[:li {:on-click #(dom/open-new-window "https://penpot.app/libraries-templates.html")
|
||||
:data-test "libraries-templates-profile-opt"}
|
||||
[:span.icon i/download]
|
||||
[:li {:on-click #(dom/open-new-window "https://www.youtube.com/c/Penpot")}
|
||||
[:span.text (tr "labels.tutorials")]]
|
||||
[:li {:on-click show-release-notes}
|
||||
[:span (tr "labels.release-notes")]]
|
||||
|
||||
[:li.separator {:on-click #(dom/open-new-window "https://penpot.app/libraries-templates.html")
|
||||
:data-test "libraries-templates-profile-opt"}
|
||||
[:span.text (tr "labels.libraries-and-templates")]]
|
||||
;;[:li {:on-click #(dom/open-new-window "https://penpot.app?no-redirect=1")
|
||||
[:li {:on-click #(dom/open-new-window "https://landing-next.penpot.app?no-redirect=1")
|
||||
:data-test "about-penpot-profile-opt"} ;; Parameter ?no-redirect is to force stay in landing page
|
||||
[:span.icon i/logo-icon] ;; instead of redirecting to app
|
||||
[:span.text (tr "labels.about-penpot")]]
|
||||
[:li {:on-click #(dom/open-new-window "https://github.com/penpot/penpot")}
|
||||
[:span (tr "labels.github-repo")]]
|
||||
[:li {:on-click #(dom/open-new-window "https://penpot.app/terms.html")}
|
||||
[:span (tr "auth.terms-of-service")]]
|
||||
|
||||
(when (contains? @cf/flags :user-feedback)
|
||||
[:li.separator {:on-click (partial on-click :settings-feedback)
|
||||
:data-test "feedback-profile-opt"}
|
||||
[:span.icon i/msg-info]
|
||||
[:span.text (tr "labels.give-feedback")]])
|
||||
|
||||
[:li.separator {:on-click #(on-click (du/logout) %)
|
||||
|
|
|
|||
|
|
@ -146,6 +146,7 @@
|
|||
(def shape-valign-center (icon-xref :shape-valign-center))
|
||||
(def shape-valign-top (icon-xref :shape-valign-top))
|
||||
(def shape-vdistribute (icon-xref :shape-vdistribute))
|
||||
(def shortcut (icon-xref :shortcut))
|
||||
(def size-horiz (icon-xref :size-horiz))
|
||||
(def size-vert (icon-xref :size-vert))
|
||||
(def sort-ascending (icon-xref :sort-ascending))
|
||||
|
|
|
|||
|
|
@ -207,7 +207,16 @@
|
|||
(mf/use-callback
|
||||
(fn [flag]
|
||||
(-> (dw/toggle-layout-flag flag)
|
||||
(vary-meta assoc ::ev/origin "workspace-menu"))))]
|
||||
(vary-meta assoc ::ev/origin "workspace-menu"))))
|
||||
|
||||
show-release-notes
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [version (:main @cf/version)]
|
||||
(st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
|
||||
(if (and (kbd/alt? event) (kbd/mod? event))
|
||||
(st/emit! (modal/show {:type :onboarding}))
|
||||
(st/emit! (modal/show {:type :release-notes :version version}))))))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps @editing?)
|
||||
|
|
@ -251,10 +260,9 @@
|
|||
[:li {:on-click (on-item-click :preferences)
|
||||
:on-pointer-enter (on-item-hover :preferences)}
|
||||
[:span (tr "workspace.header.menu.option.preferences")] [:span i/arrow-slide]]
|
||||
(when (contains? @cf/flags :user-feedback)
|
||||
[:*
|
||||
[:li.feedback {:on-click (st/emitf (rt/nav-new-window* {:rname :settings-feedback}))}
|
||||
[:span (tr "labels.give-feedback")]]])]]
|
||||
[:li.info {:on-click (on-item-click :help-info)
|
||||
:on-pointer-enter (on-item-hover :help-info)}
|
||||
[:span (tr "workspace.header.menu.option.help-info")] [:span i/arrow-slide]]]]
|
||||
|
||||
[:& dropdown {:show (= @show-sub-menu? :file)
|
||||
:on-close #(reset! show-sub-menu? false)}
|
||||
|
|
@ -389,7 +397,31 @@
|
|||
[:span.shortcut (sc/get-tooltip :snap-pixel-grid)]]
|
||||
|
||||
[:li {:on-click #(st/emit! (modal/show {:type :nudge-option}))}
|
||||
[:span (tr "modals.nudge-title")]]]]]))
|
||||
[:span (tr "modals.nudge-title")]]]]
|
||||
|
||||
[:& dropdown {:show (= @show-sub-menu? :help-info)
|
||||
:on-close #(reset! show-sub-menu? false)}
|
||||
[:ul.sub-menu.help-info
|
||||
[:li {:on-click #(dom/open-new-window "https://help.penpot.app")}
|
||||
[:span (tr "labels.help-center")]]
|
||||
[:li {:on-click #(dom/open-new-window "https://www.youtube.com/c/Penpot")}
|
||||
[:span (tr "labels.tutorials")]]
|
||||
[:li {:on-click show-release-notes}
|
||||
[:span (tr "labels.release-notes")]]
|
||||
[:li.separator {:on-click #(dom/open-new-window "https://penpot.app/libraries-templates.html")}
|
||||
[:span (tr "labels.libraries-and-templates")]]
|
||||
[:li {:on-click #(dom/open-new-window "https://github.com/penpot/penpot")}
|
||||
[:span (tr "labels.github-repo")]]
|
||||
[:li {:on-click #(dom/open-new-window "https://penpot.app/terms.html")}
|
||||
[:span (tr "auth.terms-of-service")]]
|
||||
[:li.separator {:on-click #(st/emit! (rt/nav-new-window* {:rname :settings-feedback}))}
|
||||
[:span (tr "label.shortcuts")]
|
||||
[:span.shortcut (sc/get-tooltip :show-shortcuts)]]
|
||||
|
||||
(when (contains? @cf/flags :user-feedback)
|
||||
[:*
|
||||
[:li.feedback {:on-click (st/emitf (rt/nav-new-window* {:rname :settings-feedback}))}
|
||||
[:span (tr "labels.give-feedback")]]])]]]))
|
||||
|
||||
;; --- Header Component
|
||||
|
||||
|
|
|
|||
|
|
@ -141,4 +141,13 @@
|
|||
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
|
||||
(-> (dw/toggle-layout-flag :colorpalette)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar")))))}
|
||||
i/palette]]]]))
|
||||
i/palette]
|
||||
[:li.tooltip.tooltip-right.separator
|
||||
{:alt (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
|
||||
:class (when (contains? layout :shortcuts) "selected")
|
||||
:on-click (fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar))
|
||||
(-> (dw/toggle-layout-flag :shortcuts)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
|
||||
i/shortcut]]]]))
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.shortcuts :refer [shortcuts-container]]
|
||||
[app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
|
|
@ -28,8 +29,9 @@
|
|||
(mf/defc left-sidebar
|
||||
{:wrap [mf/memo]}
|
||||
[{:keys [layout] :as props}]
|
||||
(let [section (cond (contains? layout :layers) :layers
|
||||
(contains? layout :assets) :assets)
|
||||
(let [section (cond (contains? layout :layers) :layers
|
||||
(contains? layout :assets) :assets)
|
||||
shortcuts? (contains? layout :shortcuts)
|
||||
|
||||
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
|
||||
(use-resize-hook :left-sidebar 255 255 500 :x false :left)
|
||||
|
|
@ -49,19 +51,24 @@
|
|||
:on-mouse-move on-mouse-move}]
|
||||
|
||||
[:div.settings-bar-inside
|
||||
[:button.collapse-sidebar
|
||||
{:on-click handle-collapse}
|
||||
i/arrow-slide]
|
||||
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
|
||||
:selected section}
|
||||
|
||||
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
|
||||
[:div.layers-tab
|
||||
[:& sitemap {:layout layout}]
|
||||
[:& layers-toolbox]]]
|
||||
[:* (if shortcuts?
|
||||
[:& shortcuts-container]
|
||||
[:*
|
||||
[:button.collapse-sidebar
|
||||
{:on-click handle-collapse}
|
||||
i/arrow-slide]
|
||||
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
|
||||
:selected section
|
||||
:shortcuts? shortcuts?}
|
||||
|
||||
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
|
||||
[:& assets-toolbox]]]]]))
|
||||
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
|
||||
[:div.layers-tab
|
||||
[:& sitemap {:layout layout}]
|
||||
[:& layers-toolbox]]]
|
||||
|
||||
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
|
||||
[:& assets-toolbox]]]])]]]))
|
||||
|
||||
;; --- Right Sidebar (Component)
|
||||
|
||||
|
|
|
|||
310
frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
Normal file
310
frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
Normal file
|
|
@ -0,0 +1,310 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.shortcuts
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.config :as cf]
|
||||
[app.main.data.dashboard.shortcuts]
|
||||
[app.main.data.shortcuts :as ds]
|
||||
[app.main.data.viewer.shortcuts]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.path.shortcuts]
|
||||
[app.main.data.workspace.shortcuts]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.strings :refer [matches-search]]
|
||||
[clojure.string]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc converted-chars
|
||||
[{:keys [char command] :as props}]
|
||||
(let [modified-keys {:up ds/up-arrow
|
||||
:down ds/down-arrow
|
||||
:left ds/left-arrow
|
||||
:right ds/right-arrow
|
||||
:plus "+"}
|
||||
macos-keys {:command "\u2318"
|
||||
:option "\u2325"
|
||||
:alt "\u2325"
|
||||
:delete "\u232B"
|
||||
:del "\u232B"
|
||||
:shift "\u21E7"
|
||||
:control "\u2303"
|
||||
:esc "\u238B"
|
||||
:enter "\u23CE"}
|
||||
is-macos? (cf/check-platform? :macos)
|
||||
char (if (contains? modified-keys (keyword key)) ((keyword char) modified-keys) char)
|
||||
char (if (and is-macos? (contains? macos-keys (keyword char))) ((keyword char) macos-keys) char)
|
||||
unique-key (str (d/name command) "-" char)]
|
||||
[:*
|
||||
[:span.char-box {:key unique-key} char]]))
|
||||
|
||||
(defn shortcuts->subsections
|
||||
"A function to obtain the list of subsections and their
|
||||
associated shortcus from the general map of shortcuts"
|
||||
[shortcuts]
|
||||
(let [subsections (into #{} (mapcat :subsections) (vals shortcuts))
|
||||
get-sc-by-subsection
|
||||
(fn [subsection [k v]]
|
||||
(when (some #(= subsection %) (:subsections v)) k))
|
||||
reduce-sc
|
||||
(fn [acc subsection]
|
||||
(let [shortcuts-by-subsection (keep (partial get-sc-by-subsection subsection) shortcuts)]
|
||||
(assoc acc subsection shortcuts-by-subsection)))]
|
||||
(reduce reduce-sc {} subsections)))
|
||||
|
||||
(mf/defc shortcuts-keys
|
||||
[{:keys [content command] :as props}]
|
||||
(let [managed-list (if (coll? content)
|
||||
content
|
||||
(conj () content))
|
||||
split-sc (fn [sc]
|
||||
(let [sc (cond-> sc (str/includes? sc "++")
|
||||
(str/replace "++" "+plus"))]
|
||||
(if (= (count sc) 1)
|
||||
[sc]
|
||||
(str/split sc #"\+| "))))
|
||||
chars-list (map split-sc managed-list)
|
||||
last-element (last chars-list)
|
||||
short-char-list (if (= 1 (count chars-list))
|
||||
chars-list
|
||||
(drop-last chars-list))
|
||||
penultimate (last short-char-list)]
|
||||
[:span.keys
|
||||
(for [chars short-char-list]
|
||||
[:*
|
||||
(for [char chars]
|
||||
[:& converted-chars {:char char :command command}])
|
||||
|
||||
(when (not= chars penultimate) [:span.space ","])])
|
||||
(when (not= last-element penultimate)
|
||||
[:*
|
||||
[:span.space " or "]
|
||||
(for [char last-element]
|
||||
[:& converted-chars {:char char
|
||||
:command command}])])]))
|
||||
|
||||
(mf/defc shortcut-row
|
||||
[{:keys [shortcuts elements filter-term match-section? match-subsection?] :as props}]
|
||||
(let [reduce-translation (fn [acc element] (assoc acc element (tr (str "shortcuts." (d/name element)))))
|
||||
translations (reduce reduce-translation {} elements)
|
||||
filtered (if (or match-section? match-subsection?)
|
||||
(vals translations)
|
||||
(filter #(matches-search % (:term @filter-term)) (vals translations)))
|
||||
sorted-filtered (sort filtered)]
|
||||
[:ul.sub-menu
|
||||
(for [command-translate sorted-filtered]
|
||||
(let [command (first (filter (comp #{command-translate} translations) (keys translations)))
|
||||
content (:command (command shortcuts))
|
||||
name (tr (str "shortcuts." (d/name command)))]
|
||||
[:li.shortcut-name {:key command}
|
||||
[:span.command-name name]
|
||||
[:& shortcuts-keys {:content content
|
||||
:command command}]]))]))
|
||||
|
||||
(mf/defc section-title
|
||||
[{:keys [is-visible? section elem-n] :as props}]
|
||||
(let [name (tr (str "shortcut-section." (d/name section)))]
|
||||
[:div.section-title
|
||||
[:span.collapesed-shortcuts {:class (when is-visible? "open")} i/arrow-slide]
|
||||
[:span.section-name name]
|
||||
[:span.shortcut-count "(" elem-n ")"]]))
|
||||
|
||||
|
||||
(mf/defc subsection-title
|
||||
[{:keys [subsection-name elements open-sections] :as props}]
|
||||
(let [subsection-name2 (tr (str "shortcut-subsection." (d/name subsection-name)))]
|
||||
[:div.subsection-title
|
||||
[:span.collapesed-shortcuts {:class (when (some #(= % subsection-name) (:subsection @open-sections)) "open")} i/arrow-slide]
|
||||
[:span.subsection-name subsection-name2]
|
||||
[:span.shortcut-count "(" elements ")"]]))
|
||||
|
||||
(mf/defc shortcut-subsection
|
||||
[{:keys [shortcuts-by-group manage-sections shortcuts filter-term match-section? open-sections] :as props}]
|
||||
(let [reduce-translation (fn [acc subsection] (assoc acc subsection (tr (str "shortcut-subsection." (d/name subsection)))))
|
||||
translations (reduce reduce-translation {} (keys shortcuts-by-group))
|
||||
sorted-translations (sort (vals translations))]
|
||||
[:ul.subsection-menu
|
||||
(for [sub-translate sorted-translations]
|
||||
(let [subsection (first (filter (comp #{sub-translate} translations) (keys translations)))
|
||||
elements (subsection shortcuts-by-group)
|
||||
visible? (some #(= % subsection) (:subsection @open-sections))
|
||||
match-subsection? (matches-search sub-translate (:term @filter-term))
|
||||
|
||||
keywords (subsection shortcuts-by-group)
|
||||
matched-map (into {} (map (fn [element] {element (:translation (element shortcuts))}) keywords))
|
||||
translations (vals matched-map)
|
||||
match-shortcut-in-sub? (some #(matches-search % (:term @filter-term)) translations)
|
||||
shortcut-count (count (filter #(matches-search % (:term @filter-term)) translations))]
|
||||
(when (and (or match-section? match-subsection? match-shortcut-in-sub?) (not= subsection :basics))
|
||||
[:li {:key subsection
|
||||
:on-click (manage-sections subsection true)}
|
||||
[:& subsection-title {:subsection-name subsection
|
||||
:open-sections open-sections
|
||||
:elements shortcut-count}]
|
||||
[:div {:style {:display (if visible? "initial" "none")}}
|
||||
[:& shortcut-row {:shortcuts shortcuts
|
||||
:elements elements
|
||||
:filter-term filter-term
|
||||
:match-section? match-section?
|
||||
:match-subsection? match-subsection?}]]])))]))
|
||||
|
||||
(mf/defc shortcut-section
|
||||
[{:keys [section shortcuts shortcuts-by-group manage-sections filter-term open-sections] :as props}]
|
||||
(let [section-name (d/name section)
|
||||
visible? (some #(= % section) (:section @open-sections))
|
||||
section-translation (tr (str "shortcut-section." section-name))
|
||||
match-section? (matches-search section-translation (:term @filter-term))
|
||||
subsections (map (fn [subsection] (tr (str "shortcut-subsection." (d/name subsection)))) (filter #(not= % :basics) (keys shortcuts-by-group)))
|
||||
match-subsection? (some #(matches-search % (:term @filter-term)) subsections)
|
||||
keywords (keys shortcuts)
|
||||
matched-map (into {} (map (fn [element] {element (:translation (element shortcuts))}) keywords))
|
||||
translations (vals matched-map)
|
||||
match-shortcut? (some #(matches-search % (:term @filter-term)) translations)
|
||||
filtered-shortcuts (count (filter #(matches-search % (:term @filter-term)) translations))]
|
||||
(when (or match-section? match-subsection? match-shortcut?)
|
||||
[:div {:on-click (manage-sections section false)}
|
||||
[:& section-title {:is-visible? visible?
|
||||
:section section
|
||||
:elem-n filtered-shortcuts}]
|
||||
[:div {:style {:display (if visible? "initial" "none")}}
|
||||
[:& shortcut-subsection {:shortcuts-by-group shortcuts-by-group
|
||||
:manage-sections manage-sections
|
||||
:match-section? match-section?
|
||||
:open-sections open-sections
|
||||
:filter-term filter-term
|
||||
:shortcuts shortcuts}]]])))
|
||||
|
||||
(defn add-translation-to-shorcuts
|
||||
[shortcuts]
|
||||
(map (fn [[k v]] [k (assoc v :translation (tr (str "shortcuts." (d/name k))))]) shortcuts))
|
||||
|
||||
(mf/defc shortcuts-container
|
||||
[]
|
||||
(let [workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts
|
||||
path-shortcuts app.main.data.workspace.path.shortcuts/shortcuts
|
||||
all-workspace-shortcuts (->> (d/deep-merge path-shortcuts workspace-shortcuts)
|
||||
(add-translation-to-shorcuts)
|
||||
(into {}))
|
||||
|
||||
dashboard-shortcuts (->> app.main.data.dashboard.shortcuts/shortcuts
|
||||
(add-translation-to-shorcuts)
|
||||
(into {}))
|
||||
viewer-shortcuts (->> app.main.data.viewer.shortcuts/shortcuts
|
||||
(add-translation-to-shorcuts)
|
||||
(into {}))
|
||||
|
||||
all-shortcuts (d/deep-merge all-workspace-shortcuts dashboard-shortcuts viewer-shortcuts)
|
||||
|
||||
workspace-sc-by-subsections (shortcuts->subsections all-workspace-shortcuts)
|
||||
dashboard-sc-by-subsections (shortcuts->subsections dashboard-shortcuts)
|
||||
viewer-sc-by-subsections (shortcuts->subsections viewer-shortcuts)
|
||||
|
||||
;; The basics section is treated separately because these elements
|
||||
;; are obtained from the rest of the listings of shortcuts.
|
||||
basics-elements (concat (:basics workspace-sc-by-subsections)
|
||||
(:basics dashboard-sc-by-subsections)
|
||||
(:basics viewer-sc-by-subsections))
|
||||
reduce-translation (fn [acc sc] (assoc acc sc (tr (str "shortcuts." (d/name sc)))))
|
||||
basics-translations (reduce reduce-translation {} basics-elements)
|
||||
open-sections (mf/use-state {:section [:workspace] :subsection []})
|
||||
basics-open? (some #(= % :basics) (:section @open-sections))
|
||||
|
||||
search-term (mf/use-state {:term ""})
|
||||
search-match-basics-items? (some #(matches-search % (:term @search-term)) (vals basics-translations))
|
||||
search-match-basics? (matches-search :basics (:term @search-term))
|
||||
|
||||
close-fn #(st/emit! (dw/toggle-layout-flag :shortcuts))
|
||||
|
||||
on-search-term-change
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [value (dom/get-target-val event)]
|
||||
(swap! search-term assoc :term value))))
|
||||
|
||||
on-search-clear-click
|
||||
(mf/use-callback
|
||||
(fn [_]
|
||||
(swap! search-term assoc :term "")))
|
||||
|
||||
manage-sections
|
||||
(fn [item is-sub?]
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(let [modify-atom
|
||||
(fn [is-sub? item atom-name]
|
||||
(let [keyword-name (if is-sub?
|
||||
:subsection
|
||||
:section)
|
||||
is-present? (some #(= % item) (keyword-name atom-name))
|
||||
value-vector (get atom-name keyword-name)
|
||||
new-value (if is-present?
|
||||
(filterv (fn [element] (not= element item)) value-vector)
|
||||
(conj value-vector item))]
|
||||
(assoc atom-name keyword-name new-value)))]
|
||||
|
||||
(reset! open-sections (modify-atom is-sub? item @open-sections)))))]
|
||||
|
||||
[:div.shortcuts
|
||||
[:div.shortcuts-header
|
||||
[:div.shortcuts-close-button
|
||||
{:on-click close-fn} i/close]
|
||||
[:div.shortcuts-title (tr "shortcuts.title")]]
|
||||
[:div.search-field
|
||||
[:div.search-box
|
||||
[:input.input-text
|
||||
{:id "shortcut-search"
|
||||
:placeholder (tr "shortcuts.search-placeholder")
|
||||
:type "text"
|
||||
:value (:term @search-term)
|
||||
:on-change on-search-term-change
|
||||
:auto-complete "off"}]
|
||||
(if (str/empty? (:term @search-term))
|
||||
[:span.icon-wrapper
|
||||
i/search]
|
||||
[:span.icon-wrapper.close
|
||||
{:on-click on-search-clear-click}
|
||||
i/close])]]
|
||||
|
||||
[:div.shortcut-list
|
||||
(when (or search-match-basics-items? search-match-basics?)
|
||||
[:div {:on-click (manage-sections :basics false)}
|
||||
[:& section-title {:section :basics
|
||||
:is-visible? basics-open?
|
||||
:elem-n (count basics-elements)}]
|
||||
[:div {:style {:display (if basics-open? "initial" "none")}}
|
||||
[:& shortcut-row {:shortcuts all-shortcuts
|
||||
:elements basics-elements
|
||||
:filter-term search-term
|
||||
:match-section? search-match-basics?}]]])
|
||||
|
||||
[:& shortcut-section
|
||||
{:shortcuts-by-group workspace-sc-by-subsections
|
||||
:manage-sections manage-sections
|
||||
:open-sections open-sections
|
||||
:filter-term search-term
|
||||
:shortcuts all-workspace-shortcuts
|
||||
:section :workspace}]
|
||||
|
||||
[:& shortcut-section
|
||||
{:shortcuts-by-group dashboard-sc-by-subsections
|
||||
:manage-sections manage-sections
|
||||
:open-sections open-sections
|
||||
:filter-term search-term
|
||||
:shortcuts dashboard-shortcuts
|
||||
:section :dashboard}]
|
||||
|
||||
[:& shortcut-section
|
||||
{:shortcuts-by-group viewer-sc-by-subsections
|
||||
:manage-sections manage-sections
|
||||
:open-sections open-sections
|
||||
:filter-term search-term
|
||||
:shortcuts viewer-shortcuts
|
||||
:section :viewer}]]]))
|
||||
Loading…
Add table
Add a link
Reference in a new issue