diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss index 9565ac527d..3669201399 100644 --- a/frontend/resources/styles/main/partials/workspace-header.scss +++ b/frontend/resources/styles/main/partials/workspace-header.scss @@ -36,7 +36,7 @@ height: 30px; width: 28px; - } + } &:hover { @@ -118,6 +118,8 @@ cursor: pointer; font-size: $fs12; padding: $small $x-small; + display: flex; + justify-content: space-between; svg { fill: $color-gray-60; @@ -130,6 +132,10 @@ margin: 0 $x-small; } + .shortcut { + color: $color-gray-20; + } + &:hover { background-color: $color-primary-lighter; } diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index c9fce37c28..482bea27f9 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -1516,11 +1516,14 @@ ;; Shortcuts impl https://github.com/ccampbell/mousetrap (def shortcuts - {"ctrl+shift+m" #(st/emit! (toggle-layout-flag :sitemap)) - "ctrl+shift+i" #(st/emit! (toggle-layout-flag :libraries)) - "ctrl+shift+l" #(st/emit! (toggle-layout-flag :layers)) - "ctrl+shift+r" #(st/emit! (toggle-layout-flag :rules)) - "ctrl+shift+d" #(st/emit! (toggle-layout-flag :dynamic-alignment)) + {"ctrl+m" #(st/emit! (toggle-layout-flag :sitemap)) + "ctrl+i" #(st/emit! (toggle-layout-flag :libraries)) + "ctrl+l" #(st/emit! (toggle-layout-flag :layers)) + "ctrl+r" #(st/emit! (toggle-layout-flag :rules)) + "ctrl+a" #(st/emit! (toggle-layout-flag :dynamic-alignment)) + "ctrl+p" #(st/emit! (toggle-layout-flag :colorpalette)) + "ctrl+'" #(st/emit! (toggle-layout-flag :display-grid)) + "ctrl+shift+'" #(st/emit! (toggle-layout-flag :snap-grid)) "+" #(st/emit! (increase-zoom nil)) "-" #(st/emit! (decrease-zoom nil)) "g" #(st/emit! create-group) diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index fb7ab40b47..2ad160e173 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -75,43 +75,50 @@ [:span (if (contains? layout :rules) (t locale "workspace.header.menu.hide-rules") - (t locale "workspace.header.menu.show-rules"))]] + (t locale "workspace.header.menu.show-rules"))] + [:span.shortcut "Ctrl+r"]] [:li {:on-click #(st/emit! (dw/toggle-layout-flag :display-grid))} [:span (if (contains? layout :display-grid) (t locale "workspace.header.menu.hide-grid") - (t locale "workspace.header.menu.show-grid"))]] + (t locale "workspace.header.menu.show-grid"))] + [:span.shortcut "Ctrl+'"]] [:li {:on-click #(st/emit! (dw/toggle-layout-flag :snap-grid))} [:span (if (contains? layout :snap-grid) (t locale "workspace.header.menu.disable-snap-grid") - (t locale "workspace.header.menu.enable-snap-grid"))]] + (t locale "workspace.header.menu.enable-snap-grid"))] + [:span.shortcut "Ctrl+Shift+'"]] [:li {:on-click #(st/emit! (dw/toggle-layout-flag :sitemap :layers))} [:span (if (or (contains? layout :sitemap) (contains? layout :layers)) (t locale "workspace.header.menu.hide-layers") - (t locale "workspace.header.menu.show-layers"))]] + (t locale "workspace.header.menu.show-layers"))] + [:span.shortcut "Ctrl+l"]] [:li {:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))} [:span (if (contains? layout :colorpalette) (t locale "workspace.header.menu.hide-palette") - (t locale "workspace.header.menu.show-palette"))]] + (t locale "workspace.header.menu.show-palette"))] + [:span.shortcut "Ctrl+p"]] [:li {:on-click #(st/emit! (dw/toggle-layout-flag :libraries))} [:span (if (contains? layout :libraries) (t locale "workspace.header.menu.hide-libraries") - (t locale "workspace.header.menu.show-libraries"))]] + (t locale "workspace.header.menu.show-libraries"))] + [:span.shortcut "Ctrl+i"]] [:li {:on-click #(st/emit! (dw/toggle-layout-flag :dynamic-alignment))} [:span (if (contains? layout :dynamic-alignment) (t locale "workspace.header.menu.disable-dynamic-alignment") - (t locale "workspace.header.menu.enable-dynamic-alignment"))]] + (t locale "workspace.header.menu.enable-dynamic-alignment"))] + [:span.shortcut "Ctrl+a"]] ]]])) ;; --- Header Component