From 9cacca4802d3e4902b5107547918a45dcccae126 Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 3 May 2022 10:34:11 +0200 Subject: [PATCH] :sparkles: Add shortcut panel --- frontend/resources/images/icons/shortcut.svg | 3 + .../styles/main/partials/left-toolbar.scss | 4 + .../styles/main/partials/sidebar.scss | 150 ++++ .../main/partials/workspace-header.scss | 14 +- .../app/main/data/dashboard/shortcuts.cljs | 4 + .../src/app/main/data/viewer/shortcuts.cljs | 12 + .../main/data/workspace/path/shortcuts.cljs | 10 + .../app/main/data/workspace/shortcuts.cljs | 643 ++++++++++-------- .../src/app/main/ui/dashboard/sidebar.cljs | 34 +- frontend/src/app/main/ui/icons.cljs | 1 + .../src/app/main/ui/workspace/header.cljs | 44 +- .../app/main/ui/workspace/left_toolbar.cljs | 11 +- .../src/app/main/ui/workspace/sidebar.cljs | 33 +- .../main/ui/workspace/sidebar/shortcuts.cljs | 310 +++++++++ frontend/translations/en.po | 436 +++++++++++- frontend/translations/es.po | 436 +++++++++++- 16 files changed, 1841 insertions(+), 304 deletions(-) create mode 100644 frontend/resources/images/icons/shortcut.svg create mode 100644 frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs diff --git a/frontend/resources/images/icons/shortcut.svg b/frontend/resources/images/icons/shortcut.svg new file mode 100644 index 000000000..a5545e77e --- /dev/null +++ b/frontend/resources/images/icons/shortcut.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/styles/main/partials/left-toolbar.scss b/frontend/resources/styles/main/partials/left-toolbar.scss index 1c787bd96..2e82347e0 100644 --- a/frontend/resources/styles/main/partials/left-toolbar.scss +++ b/frontend/resources/styles/main/partials/left-toolbar.scss @@ -60,6 +60,10 @@ fill: $color-primary; } } + + &.separator { + border-top: 1px solid $color-gray-60; + } } &.panels { diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index 9451071e1..ff0817f6b 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -292,3 +292,153 @@ button.collapse-sidebar { height: 100%; overflow: hidden; } + +.shortcuts { + .shortcuts-header { + display: flex; + height: 40px; + background-color: $color-gray-60; + .shortcuts-title { + color: $color-white; + font-size: $fs12; + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + } + .shortcuts-close-button { + display: flex; + justify-content: center; + background-color: transparent; + border: none; + cursor: pointer; + padding: 2px 0 2px 15px; + position: absolute; + top: 8px; + svg { + height: 18px; + width: 18px; + transform: rotate(45deg); + fill: $color-gray-20; + } + } + } + + .search-field { + height: 60px; + display: flex; + justify-content: center; + align-items: center; + padding: 12px 10px; + .search-box { + display: flex; + justify-content: space-between; + align-items: center; + border: 1px solid $color-gray-30; + border-radius: 2px; + width: 100%; + .input-text { + margin: 0; + background: $color-gray-50; + width: 100%; + color: $color-white; + &:focus { + border-bottom: none; + } + } + .icon-wrapper { + display: flex; + justify-content: center; + align-items: center; + &.close { + transform: rotate(45deg); + } + } + svg { + width: 16px; + height: 16px; + margin: 0 7px; + cursor: pointer; + fill: $color-gray-20; + } + } + } + + .shortcut-list { + border-top: 1px solid $color-gray-60; + padding: 10px; + overflow-y: auto; + height: 90%; + margin-bottom: 15px; + .section-title { + background-color: $color-gray-60; + padding: 4px 0; + } + .section-title, + .subsection-title { + display: flex; + cursor: pointer; + margin-top: 4px; + font-size: $fs12; + .section-name { + color: $color-white; + } + .collapesed-shortcuts { + padding: 0 10px; + svg { + height: 8px; + width: 8px; + fill: $color-gray-20; + } + &.open { + svg { + transform: rotate(90deg); + } + } + } + .shortcut-count { + padding-left: 5px; + color: $color-white; + } + } + .subsection-title { + padding: 4px 0px; + .subsection-name { + color: $color-white; + } + } + + .shortcut-name { + border: 1px solid $color-gray-60; + border-radius: 4px; + padding: 7px; + display: flex; + justify-content: space-between; + margin-top: 4px; + color: $color-white; + font-size: $fs12; + .keys { + flex-grow: 1; + display: flex; + align-items: flex-start; + justify-content: flex-end; + } + .char-box { + min-width: 15px; + background-color: $color-white; + color: $color-black; + border-radius: 3px; + padding: 2px 5px; + font-size: $fs11; + font-weight: 600; + margin: 0 2px; + text-transform: capitalize; + display: inline-block; + text-align: center; + } + .space { + margin: 0 3px; + } + } + } +} diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss index a657af70e..d05041bf7 100644 --- a/frontend/resources/styles/main/partials/workspace-header.scss +++ b/frontend/resources/styles/main/partials/workspace-header.scss @@ -152,7 +152,7 @@ position: absolute; top: 40px; left: 40px; - width: 183px; + width: 195px; z-index: 12; background-color: $color-white; @@ -192,7 +192,7 @@ background-color: $color-primary-lighter; } - &.feedback { + &.info { border-top: 1px solid $color-gray-10; } } @@ -200,7 +200,7 @@ .sub-menu { position: absolute; - left: 230px; + left: 238px; width: 270px; z-index: 12; background-color: $color-white; @@ -234,6 +234,10 @@ top: 150px; } + &.help-info { + top: 186px; + } + li { cursor: pointer; font-size: $fs14; @@ -254,6 +258,10 @@ &:hover { background-color: $color-primary-lighter; } + + &.separator { + border-top: 1px solid $color-gray-10; + } } } diff --git a/frontend/src/app/main/data/dashboard/shortcuts.cljs b/frontend/src/app/main/data/dashboard/shortcuts.cljs index 983c89ae9..78e085b0b 100644 --- a/frontend/src/app/main/data/dashboard/shortcuts.cljs +++ b/frontend/src/app/main/data/dashboard/shortcuts.cljs @@ -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] diff --git a/frontend/src/app/main/data/viewer/shortcuts.cljs b/frontend/src/app/main/data/viewer/shortcuts.cljs index 1a4dab457..e36216eea 100644 --- a/frontend/src/app/main/data/viewer/shortcuts.cljs +++ b/frontend/src/app/main/data/viewer/shortcuts.cljs @@ -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] diff --git a/frontend/src/app/main/data/workspace/path/shortcuts.cljs b/frontend/src/app/main/data/workspace/path/shortcuts.cljs index 15cd8182a..7c002b9d4 100644 --- a/frontend/src/app/main/data/workspace/path/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/path/shortcuts.cljs @@ -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) diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs index 2d4a8b9e8..150cf4375 100644 --- a/frontend/src/app/main/data/workspace/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/shortcuts.cljs @@ -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 diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 39c929ff1..382e96d6d 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -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) %) diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index c10126c61..76e189e37 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs index 015c30c8d..504d8d910 100644 --- a/frontend/src/app/main/ui/workspace/header.cljs +++ b/frontend/src/app/main/ui/workspace/header.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index ef6b825d5..6c3d000b9 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -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]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index deb44f7b9..f50cb8c62 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs new file mode 100644 index 000000000..1d0a56efa --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs @@ -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}]]])) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index d6628984f..b8a9d608a 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1170,6 +1170,10 @@ msgstr "Go back" msgid "labels.help-center" msgstr "Help Center" +#: src/app/main/ui/dashboard/sidebar.cljs +msgid "labels.tutorials" +msgstr "Tutorials" + #: src/app/main/ui/workspace/comments.cljs, src/app/main/ui/viewer/header.cljs msgid "labels.hide-resolved-comments" msgstr "Hide resolved comments" @@ -1205,6 +1209,10 @@ msgstr "Language" msgid "labels.libraries-and-templates" msgstr "Libraries & Templates" +#: src/app/main/ui/dashboard/sidebar.cljs +msgid "labels.github-repo" +msgstr "Github repository" + msgid "labels.link" msgstr "Link" @@ -2296,6 +2304,10 @@ msgstr "File" msgid "workspace.header.menu.option.preferences" msgstr "Preferences" +#: src/app/main/ui/workspace/header.cljs +msgid "workspace.header.menu.option.help-info" +msgstr "Help & info" + #: src/app/main/ui/workspace/header.cljs msgid "workspace.header.menu.option.view" msgstr "View" @@ -3588,6 +3600,14 @@ msgstr "Text (%s)" msgid "workspace.toolbar.text-palette" msgstr "Typographies (%s)" +#: src/app/main/ui/workspace/left_toolbar.cljs +msgid "workspace.toolbar.shortcuts" +msgstr "Shortcuts (%s)" + +#: src/app/main/ui/workspace/header.cljs +msgid "label.shortcuts" +msgstr "Shortcuts" + #: src/app/main/ui/workspace/sidebar/history.cljs msgid "workspace.undo.empty" msgstr "There are no history changes so far" @@ -3716,4 +3736,418 @@ msgid "workspace.updates.update" msgstr "Update" msgid "workspace.viewport.click-to-close-path" -msgstr "Click to close the path" \ No newline at end of file +msgstr "Click to close the path" + +#: src/app/main/ui/workspace/sidebar/shortcuts.cljs +msgid "shortcuts.title" +msgstr "Keyboard shortcuts" + +msgid "shortcuts.search-placeholder" +msgstr "Search shortcuts" + +msgid "shortcuts.add-comment" +msgstr "Comments" + +msgid "shortcuts.add-node" +msgstr "Add node" + +msgid "shortcuts.align-bottom" +msgstr "Align bottom" + +msgid "shortcuts.align-hcenter" +msgstr "Align center horizontally" + +msgid "shortcuts.align-left" +msgstr "Align left" + +msgid "shortcuts.align-right" +msgstr "Align right" + +msgid "shortcuts.align-top" +msgstr "Align top" + +msgid "shortcuts.align-vcenter" +msgstr "Align center vertically" + +msgid "shortcuts.artboard-selection" +msgstr "Create artboard from selection" + +msgid "shortcuts.bool-difference" +msgstr "Boolean difference" + +msgid "shortcuts.bool-exclude" +msgstr "Boolean exclude" + +msgid "shortcuts.bool-intersection" +msgstr "Boolean intersection" + +msgid "shortcuts.bool-union" +msgstr "Boolean union" + +msgid "shortcuts.bring-back" +msgstr "Send to the back" + +msgid "shortcuts.bring-backward" +msgstr "Send backward" + +msgid "shortcuts.bring-forward" +msgstr "Bring forward" + +msgid "shortcuts.bring-front" +msgstr "Bring to the front" + +msgid "shortcuts.clear-undo" +msgstr "Clear undo" + +msgid "shortcuts.copy" +msgstr "Copy" + +msgid "shortcuts.create-component" +msgstr "Create component" + +msgid "shortcuts.create-new-project" +msgstr "Create new" + +msgid "shortcuts.cut" +msgstr "Cut" + +msgid "shortcuts.decrease-zoom" +msgstr "Zoom out" + +msgid "shortcuts.delete" +msgstr "Delete" + +msgid "shortcuts.delete-node" +msgstr "Delete node" + +msgid "shortcuts.detach-component" +msgstr "Detach component" + +msgid "shortcuts.draw-curve" +msgstr "Curve" + +msgid "shortcuts.draw-ellipse" +msgstr "Ellipse" + +msgid "shortcuts.draw-frame" +msgstr "Artboard" + +msgid "shortcuts.draw-nodes" +msgstr "Draw path" + +msgid "shortcuts.draw-path" +msgstr "Path" + +msgid "shortcuts.draw-rect" +msgstr "Rectangle" + +msgid "shortcuts.draw-text" +msgstr "Text" + +msgid "shortcuts.duplicate" +msgstr "Duplicate" + +msgid "shortcuts.escape" +msgstr "Cancel" + +msgid "shortcuts.export-shapes" +msgstr "Export shapes" + +msgid "shortcuts.fit-all" +msgstr "Zoom to fit all" + +msgid "shortcuts.flip-horizontal" +msgstr "Flip horizontally" + +msgid "shortcuts.flip-vertical" +msgstr "Flip vertically" + +msgid "shortcuts.go-to-drafts" +msgstr "Go to drafts" + +msgid "shortcuts.go-to-libs" +msgstr "Go to shared libraries" + +msgid "shortcuts.go-to-search" +msgstr "Search" + +msgid "shortcuts.group" +msgstr "Group" + +msgid "shortcuts.h-distribute" +msgstr "Distribute horizontally" + +msgid "shortcuts.hide-ui" +msgstr "Show/hide UI" + +msgid "shortcuts.increase-zoom" +msgstr "Zoom in" + +msgid "shortcuts.insert-image" +msgstr "Insert image" + +msgid "shortcuts.join-nodes" +msgstr "Join nodes" + +msgid "shortcuts.make-corner" +msgstr "Make corner" + +msgid "shortcuts.make-curve" +msgstr "Make curve" + +msgid "shortcuts.mask" +msgstr "Mask" + +msgid "shortcuts.merge-nodes" +msgstr "Merge nodes" + +msgid "shortcuts.move" +msgstr "Move" + +msgid "shortcuts.move-fast-down" +msgstr "Move down fast" + +msgid "shortcuts.move-fast-left" +msgstr "Move left fast" + +msgid "shortcuts.move-fast-right" +msgstr "Move right fast" + +msgid "shortcuts.move-fast-up" +msgstr "Move up fast" + +msgid "shortcuts.move-nodes" +msgstr "Move node" + +msgid "shortcuts.move-unit-down" +msgstr "Move down" + +msgid "shortcuts.move-unit-left" +msgstr "Move left" + +msgid "shortcuts.move-unit-right" +msgstr "Move right" + +msgid "shortcuts.move-unit-up" +msgstr "Move up" + +msgid "shortcuts.next-frame" +msgstr "Next artboard" + +msgid "shortcuts.opacity-0" +msgstr "Set opacity to 100%" + +msgid "shortcuts.opacity-1" +msgstr "Set opacity to 10%" + +msgid "shortcuts.opacity-2" +msgstr "Set opacity to 20%" + +msgid "shortcuts.opacity-3" +msgstr "Set opacity to 30%" + +msgid "shortcuts.opacity-4" +msgstr "Set opacity to 40%" + +msgid "shortcuts.opacity-5" +msgstr "Set opacity to 50%" + +msgid "shortcuts.opacity-6" +msgstr "Set opacity to 60%" + +msgid "shortcuts.opacity-7" +msgstr "Set opacity to 70%" + +msgid "shortcuts.opacity-8" +msgstr "Set opacity to 80%" + +msgid "shortcuts.opacity-9" +msgstr "Set opacity to 90%" + +msgid "shortcuts.open-color-picker" +msgstr "Color picker" + +msgid "shortcuts.open-comments" +msgstr "Go to viewer comment section" + +msgid "shortcuts.open-dashboard" +msgstr "Go to dashboard" + +msgid "shortcuts.open-handoff" +msgstr "Go to viewer handoff section" + +msgid "shortcuts.open-interactions" +msgstr "Go to viewer intertactions section" + +msgid "shortcuts.open-viewer" +msgstr "Go to viewer intertactions section" + +msgid "shortcuts.open-workspace" +msgstr "Go to workspace" + +msgid "shortcuts.paste" +msgstr "Paste" + +msgid "shortcuts.prev-frame" +msgstr "Previous artboard" + +msgid "shortcuts.redo" +msgstr "Redo" + +msgid "shortcuts.reset-zoom" +msgstr "Reset zoom" + +msgid "shortcuts.select-all" +msgstr "Select all" + +msgid "shortcuts.separate-nodes" +msgstr "Separate nodes" + +msgid "shortcuts.show-pixel-grid" +msgstr "Show/hide pixel grid" + +msgid "shortcuts.show-shortcuts" +msgstr "Show/hide shortcuts" + +msgid "shortcuts.snap-nodes" +msgstr "Snap to nodes" + +msgid "shortcuts.snap-pixel-grid" +msgstr "Snap to pixel grid" + +msgid "shortcuts.start-editing" +msgstr "Start editing" + +msgid "shortcuts.start-measure" +msgstr "Start measurement" + +msgid "shortcuts.stop-measure" +msgstr "Stop measurement" + +msgid "shortcuts.thumbnail-set" +msgstr "Set thumbnails" + +msgid "shortcuts.toggle-alignment" +msgstr "Toggle dynamic alignment" + +msgid "shortcuts.toggle-assets" +msgstr "Toggle assets" + +msgid "shortcuts.toggle-colorpalette" +msgstr "Toggle color palette" + +msgid "shortcuts.toggle-focus-mode" +msgstr "Toggle focus mode" + +msgid "shortcuts.toggle-grid" +msgstr "Show/hide grid" + +msgid "shortcuts.toggle-history" +msgstr "Toggle history" + +msgid "shortcuts.toggle-layers" +msgstr "Toggle layers" + +msgid "shortcuts.toggle-lock" +msgstr "Lock selected" + +msgid "shortcuts.toggle-lock-size" +msgstr "Lock proportions" + +msgid "shortcuts.toggle-rules" +msgstr "Show/hide rules" + +msgid "shortcuts.toggle-scale-text" +msgstr "Toggle scale text" + +msgid "shortcuts.toggle-snap-grid" +msgstr "Snap to grid" + +msgid "shortcuts.toggle-snap-guide" +msgstr "Snap to guides" + +msgid "shortcuts.toggle-textpalette" +msgstr "Toggle text palette" + +msgid "shortcuts.toggle-visibility" +msgstr "Toggle visibility" + +msgid "shortcuts.toggle-zoom-style" +msgstr "Toggle zoom style" + +msgid "shortcuts.toogle-fullscreen" +msgstr "Toogle fullscreen" + +msgid "shortcuts.undo" +msgstr "Undo" + +msgid "shortcuts.ungroup" +msgstr "Ungroup" + +msgid "shortcuts.unmask" +msgstr "Unmask" + +msgid "shortcuts.v-distribute" +msgstr "Distribute vertically" + +msgid "shortcuts.zoom-selected" +msgstr "Zoom to selected" + +# SECTIONS +msgid "shortcut-section.basics" +msgstr "Basics" + +msgid "shortcut-section.workspace" +msgstr "Workspace" + +msgid "shortcut-section.dashboard" +msgstr "Dashboard" + +msgid "shortcut-section.viewer" +msgstr "Viewer" + +# SUBSECTIONS +msgid "shortcut-subsection.alignment" +msgstr "Alignment" + +msgid "shortcut-subsection.zoom-workspace" +msgstr "Zoom" + +msgid "shortcut-subsection.modify-layers" +msgstr "Modify layers" + +msgid "shortcut-subsection.tools" +msgstr "Tools" + +msgid "shortcut-subsection.edit" +msgstr "Edit" + +msgid "shortcut-subsection.path-editor" +msgstr "Paths" + +msgid "shortcut-subsection.navigation-workspace" +msgstr "Navigation" + +msgid "shortcut-subsection.main-menu" +msgstr "Main menu" + +msgid "shortcut-subsection.shape" +msgstr "Shapes" + +msgid "shortcut-subsection.panels" +msgstr "Panels" + +msgid "shortcut-subsection.navigation-dashboard" +msgstr "Navigation" + +msgid "shortcut-subsection.general-dashboard" +msgstr "Generic" + +msgid "shortcut-subsection.navigation-viewer" +msgstr "Navigation" + +msgid "shortcut-subsection.general-viewer" +msgstr "Generic" + +msgid "shortcut-subsection.zoom-viewer" +msgstr "Zoom" \ No newline at end of file diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 945e4c402..acf770f31 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1173,6 +1173,10 @@ msgstr "Volver" msgid "labels.help-center" msgstr "Centro de ayuda" +#: src/app/main/ui/dashboard/sidebar.cljs +msgid "labels.tutorials" +msgstr "Tutoriales" + #: src/app/main/ui/workspace/comments.cljs, src/app/main/ui/viewer/header.cljs msgid "labels.hide-resolved-comments" msgstr "Ocultar comentarios resueltos" @@ -1208,6 +1212,10 @@ msgstr "Idioma" msgid "labels.libraries-and-templates" msgstr "Bibliotecas y Plantillas" +#: src/app/main/ui/dashboard/sidebar.cljs +msgid "labels.github-repo" +msgstr "Repositorio de Github" + msgid "labels.link" msgstr "Enlace" @@ -2314,6 +2322,10 @@ msgstr "Archivo" msgid "workspace.header.menu.option.preferences" msgstr "Preferencias" +#: src/app/main/ui/workspace/header.cljs +msgid "workspace.header.menu.option.help-info" +msgstr "Ayuda e información" + #: src/app/main/ui/workspace/header.cljs msgid "workspace.header.menu.option.view" msgstr "Ver" @@ -3604,6 +3616,14 @@ msgstr "Texto (%s)" msgid "workspace.toolbar.text-palette" msgstr "Tipografías (%s)" +#: src/app/main/ui/workspace/left_toolbar.cljs +msgid "workspace.toolbar.shortcuts" +msgstr "Atajos de teclado (%s)" + +#: src/app/main/ui/workspace/header.cljs +msgid "label.shortcuts" +msgstr "Atajos de teclado" + #: src/app/main/ui/workspace/sidebar/history.cljs msgid "workspace.undo.empty" msgstr "Todavía no hay cambios en el histórico" @@ -3732,4 +3752,418 @@ msgid "workspace.updates.update" msgstr "Actualizar" msgid "workspace.viewport.click-to-close-path" -msgstr "Pulsar para cerrar la ruta" \ No newline at end of file +msgstr "Pulsar para cerrar la ruta" + +#: src/app/main/ui/workspace/sidebar/shortcuts.cljs +msgid "shortcuts.title" +msgstr "Atajos de teclado" + +msgid "shortcuts.search-placeholder" +msgstr "Buscar atajos" + +msgid "shortcuts.add-comment" +msgstr "Añadir comentarios" + +msgid "shortcuts.add-node" +msgstr "Añadir nodo" + +msgid "shortcuts.align-bottom" +msgstr "Alinear abajo" + +msgid "shortcuts.align-hcenter" +msgstr "Alinear al centro horizontalmente" + +msgid "shortcuts.align-left" +msgstr "Alinear a la izquierda" + +msgid "shortcuts.align-right" +msgstr "Alinear a la derecha" + +msgid "shortcuts.align-top" +msgstr "Alinear arriba" + +msgid "shortcuts.align-vcenter" +msgstr "Alinear al centro verticalmente" + +msgid "shortcuts.artboard-selection" +msgstr "Crear tablero desde la selección" + +msgid "shortcuts.bool-difference" +msgstr "Diferencia" + +msgid "shortcuts.bool-exclude" +msgstr "Exclusión" + +msgid "shortcuts.bool-intersection" +msgstr "Interescción" + +msgid "shortcuts.bool-union" +msgstr "Unión" + +msgid "shortcuts.bring-back" +msgstr "Enviar detrás" + +msgid "shortcuts.bring-backward" +msgstr "Enviar al fondo" + +msgid "shortcuts.bring-forward" +msgstr "Mover al frente" + +msgid "shortcuts.bring-front" +msgstr "Mover hacia adelante" + +msgid "shortcuts.clear-undo" +msgstr "Limpiar historial" + +msgid "shortcuts.copy" +msgstr "Copiar" + +msgid "shortcuts.create-component" +msgstr "Crear componente" + +msgid "shortcuts.create-new-project" +msgstr "Crear nuevo" + +msgid "shortcuts.cut" +msgstr "Cortar" + +msgid "shortcuts.decrease-zoom" +msgstr "Reducir zoom" + +msgid "shortcuts.delete" +msgstr "Borrar" + +msgid "shortcuts.delete-node" +msgstr "Borrar nodo" + +msgid "shortcuts.detach-component" +msgstr "Desacoplar instancia" + +msgid "shortcuts.draw-curve" +msgstr "Curva" + +msgid "shortcuts.draw-ellipse" +msgstr "Elipse" + +msgid "shortcuts.draw-frame" +msgstr "Tablero" + +msgid "shortcuts.draw-nodes" +msgstr "Dibujar nodos" + +msgid "shortcuts.draw-path" +msgstr "Ruta" + +msgid "shortcuts.draw-rect" +msgstr "Rectángulo" + +msgid "shortcuts.draw-text" +msgstr "Texto" + +msgid "shortcuts.duplicate" +msgstr "Duplicar" + +msgid "shortcuts.escape" +msgstr "Cancelar" + +msgid "shortcuts.export-shapes" +msgstr "Exportar elementos" + +msgid "shortcuts.fit-all" +msgstr "Zoom abarcar todo" + +msgid "shortcuts.flip-horizontal" +msgstr "Voltear horizontalmente" + +msgid "shortcuts.flip-vertical" +msgstr "Voltear verticalmente" + +msgid "shortcuts.go-to-drafts" +msgstr "Ir a borradores" + +msgid "shortcuts.go-to-libs" +msgstr "Ir a bibliotecas compartidas" + +msgid "shortcuts.go-to-search" +msgstr "Buscar" + +msgid "shortcuts.group" +msgstr "Agrupar" + +msgid "shortcuts.h-distribute" +msgstr "Distribuir horizontalmente" + +msgid "shortcuts.hide-ui" +msgstr "Mostrar/ocultar interfaz" + +msgid "shortcuts.increase-zoom" +msgstr "Aumentar zoom" + +msgid "shortcuts.insert-image" +msgstr "Insertar imagen" + +msgid "shortcuts.join-nodes" +msgstr "Unir nodos" + +msgid "shortcuts.make-corner" +msgstr "Convertir en esquina" + +msgid "shortcuts.make-curve" +msgstr "Convertir en curva" + +msgid "shortcuts.mask" +msgstr "Máscara" + +msgid "shortcuts.merge-nodes" +msgstr "Fusionar nodos" + +msgid "shortcuts.move" +msgstr "Mover" + +msgid "shortcuts.move-fast-down" +msgstr "Mover rápidamente hacia abajo" + +msgid "shortcuts.move-fast-left" +msgstr "Mover rápidamente hacia la izquierda" + +msgid "shortcuts.move-fast-right" +msgstr "Mover rápidamente hacia la derecha" + +msgid "shortcuts.move-fast-up" +msgstr "Mover rápidamente hacia arriba" + +msgid "shortcuts.move-nodes" +msgstr "Mover nodo" + +msgid "shortcuts.move-unit-down" +msgstr "Mover hacia abajo" + +msgid "shortcuts.move-unit-left" +msgstr "Mover hacia la izquierda" + +msgid "shortcuts.move-unit-right" +msgstr "Mover hacia la derecha" + +msgid "shortcuts.move-unit-up" +msgstr "Mover hacia arriba" + +msgid "shortcuts.next-frame" +msgstr "Siguiente tablero" + +msgid "shortcuts.opacity-0" +msgstr "Opacidad 100%" + +msgid "shortcuts.opacity-1" +msgstr "Opacidad 10%" + +msgid "shortcuts.opacity-2" +msgstr "Opacidad 20%" + +msgid "shortcuts.opacity-3" +msgstr "Opacidad 30%" + +msgid "shortcuts.opacity-4" +msgstr "Opacidad 40%" + +msgid "shortcuts.opacity-5" +msgstr "Opacidad 50%" + +msgid "shortcuts.opacity-6" +msgstr "Opacidad 60%" + +msgid "shortcuts.opacity-7" +msgstr "Opacidad 70%" + +msgid "shortcuts.opacity-8" +msgstr "Opacidad 80%" + +msgid "shortcuts.opacity-9" +msgstr "Opacidad 90%" + +msgid "shortcuts.open-color-picker" +msgstr "Abrir selector de color" + +msgid "shortcuts.open-comments" +msgstr "Comentarios" + +msgid "shortcuts.open-dashboard" +msgstr "Ir al dashboard" + +msgid "shortcuts.open-handoff" +msgstr "Ir a handoff" + +msgid "shortcuts.open-interactions" +msgstr "Ir a interacciones" + +msgid "shortcuts.open-viewer" +msgstr "Ir al modo de visualización" + +msgid "shortcuts.open-workspace" +msgstr "Ir al área de trabajo" + +msgid "shortcuts.paste" +msgstr "Pegar" + +msgid "shortcuts.prev-frame" +msgstr "Tablero anterior" + +msgid "shortcuts.redo" +msgstr "Rehacer" + +msgid "shortcuts.reset-zoom" +msgstr "Reiniciar zoom" + +msgid "shortcuts.select-all" +msgstr "Seleccionar todo" + +msgid "shortcuts.separate-nodes" +msgstr "Separar nodos" + +msgid "shortcuts.show-pixel-grid" +msgstr "Mostrar rejilla a pixel" + +msgid "shortcuts.show-shortcuts" +msgstr "Mostrar atajos de teclado" + +msgid "shortcuts.snap-nodes" +msgstr "Alinear nodos" + +msgid "shortcuts.snap-pixel-grid" +msgstr "Activar alineación a rejilla de pixel" + +msgid "shortcuts.start-editing" +msgstr "Comenzar edición" + +msgid "shortcuts.start-measure" +msgstr "Comenzar medida" + +msgid "shortcuts.stop-measure" +msgstr "Terminar medida" + +msgid "shortcuts.thumbnail-set" +msgstr "Activar miniaturas" + +msgid "shortcuts.toggle-alignment" +msgstr "Alternar alineación" + +msgid "shortcuts.toggle-assets" +msgstr "Mostrar/ocultar recursos" + +msgid "shortcuts.toggle-colorpalette" +msgstr "Mostrar/ocultar paleta de colores" + +msgid "shortcuts.toggle-focus-mode" +msgstr "Mostrar/ocultar focus mode" + +msgid "shortcuts.toggle-grid" +msgstr "Mostrar/ocultar rejilla" + +msgid "shortcuts.toggle-history" +msgstr "Mostrar/ocultar histórico" + +msgid "shortcuts.toggle-layers" +msgstr "Mostrar/ocultar capas" + +msgid "shortcuts.toggle-lock" +msgstr "Bloquear/Desbloquear" + +msgid "shortcuts.toggle-lock-size" +msgstr "Bloquear/Desbloquear proporciones" + +msgid "shortcuts.toggle-rules" +msgstr "Mostrar/ocultar reglas" + +msgid "shortcuts.toggle-scale-text" +msgstr "Alternar escalado de texto" + +msgid "shortcuts.toggle-snap-grid" +msgstr "Alinear a la rejilla" + +msgid "shortcuts.toggle-snap-guide" +msgstr "Alinear a las guias" + +msgid "shortcuts.toggle-textpalette" +msgstr "Mostrar/ocultar paleta de textos" + +msgid "shortcuts.toggle-visibility" +msgstr "Mostrar/ocultar elemento" + +msgid "shortcuts.toggle-zoom-style" +msgstr "Alternar estilo de zoom" + +msgid "shortcuts.toogle-fullscreen" +msgstr "Activar/desactivar pantalla completa" + +msgid "shortcuts.undo" +msgstr "Deshacer" + +msgid "shortcuts.ungroup" +msgstr "Desagrupar" + +msgid "shortcuts.unmask" +msgstr "Deshacer máscara" + +msgid "shortcuts.v-distribute" +msgstr "Distribuir verticalmente" + +msgid "shortcuts.zoom-selected" +msgstr "Zoom a selección" + +# SECTIONS +msgid "shortcut-section.basics" +msgstr "Básicos" + +msgid "shortcut-section.workspace" +msgstr "Área de trabajo" + +msgid "shortcut-section.dashboard" +msgstr "Panel" + +msgid "shortcut-section.viewer" +msgstr "Modo visualización" + +# SUBSECTIONS +msgid "shortcut-subsection.alignment" +msgstr "Alineamiento" + +msgid "shortcut-subsection.zoom-workspace" +msgstr "Zoom" + +msgid "shortcut-subsection.modify-layers" +msgstr "Modificar capas" + +msgid "shortcut-subsection.tools" +msgstr "Herramientas" + +msgid "shortcut-subsection.edit" +msgstr "Editar" + +msgid "shortcut-subsection.path-editor" +msgstr "Ruta" + +msgid "shortcut-subsection.navigation-workspace" +msgstr "Navegación" + +msgid "shortcut-subsection.main-menu" +msgstr "Menu principal" + +msgid "shortcut-subsection.shape" +msgstr "Formas" + +msgid "shortcut-subsection.panels" +msgstr "Paneles" + +msgid "shortcut-subsection.navigation-dashboard" +msgstr "Navegación" + +msgid "shortcut-subsection.general-dashboard" +msgstr "Genérico" + +msgid "shortcut-subsection.navigation-viewer" +msgstr "Navegación" + +msgid "shortcut-subsection.general-viewer" +msgstr "Genérico" + +msgid "shortcut-subsection.zoom-viewer" +msgstr "Zoom" \ No newline at end of file