diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js
index 40fe431fb8..35bc25bbcc 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js
@@ -110,20 +110,54 @@ When this combination is hit an overview is opened with shortcuts based on the m
(function () {
'use strict';
- function KeyboardShortcutsOverviewDirective(platformService) {
+ function KeyboardShortcutsOverviewDirective(platformService, overlayService) {
function link(scope, el, attr, ctrl) {
var eventBindings = [];
var isMac = platformService.isMac();
+ var overlay = null;
scope.toggleShortcutsOverlay = function () {
- scope.showOverlay = !scope.showOverlay;
- scope.onToggle();
+
+ if(overlay) {
+ scope.close();
+ } else {
+ scope.open();
+ }
+
+ if(scope.onToggle) {
+ scope.onToggle();
+ }
+
+ };
+
+ scope.open = function() {
+ if(!overlay) {
+ overlay = {
+ title: "Keyboard shortcuts",
+ view: "keyboardshortcuts",
+ hideSubmitButton: true,
+ shortcuts: scope.model,
+ close: function() {
+ scope.close();
+ }
+ };
+ overlayService.open(overlay);
+ }
+ };
+
+ scope.close = function() {
+ if(overlay) {
+ overlayService.close();
+ overlay = null;
+ if(scope.onClose) {
+ scope.onClose();
+ }
+ }
};
function onInit() {
-
angular.forEach(scope.model, function (shortcutGroup) {
angular.forEach(shortcutGroup.shortcuts, function (shortcut) {
@@ -152,6 +186,22 @@ When this combination is hit an overview is opened with shortcuts based on the m
}
}));
+ eventBindings.push(scope.$watch('showOverlay', function(newValue, oldValue){
+
+ if(newValue === oldValue) {
+ return;
+ }
+
+ if(newValue === true) {
+ scope.open();
+ }
+
+ if(newValue === false) {
+ scope.close();
+ }
+
+ }));
+
// clean up
scope.$on('$destroy', function () {
// unbind watchers
@@ -170,7 +220,8 @@ When this combination is hit an overview is opened with shortcuts based on the m
scope: {
model: "=",
onToggle: "&",
- showOverlay: "=?"
+ showOverlay: "=?",
+ onClose: "&"
}
};
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-keyboard-shortcuts-overview.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-keyboard-shortcuts-overview.less
index ed1582b7c0..5337fd0e19 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-keyboard-shortcuts-overview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-keyboard-shortcuts-overview.less
@@ -1,52 +1,8 @@
/* ---------- OVERLAY ---------- */
-.umb-keyboard-shortcuts-overview__overlay {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background: @white;
- z-index: 1000;
- animation: fadeIn 0.2s;
- box-sizing: border-box;
- padding-left: 440px;
-}
-
-.umb-keyboard-shortcuts-overview__overlay-close {
- position: absolute;
- top: 20px;
- right: 20px;
- font-size: 25px;
- border-radius: 20px;
- width: 35px;
- height: 35px;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: transparent;
- line-height: 1em;
-}
-
-.umb-keyboard-shortcuts-overview__overlay-close:hover {
- background-color: @turquoise;
- color: @white;
- text-decoration: none;
-}
-
-.umb-keyboard-shortcuts-overview__overlay-content {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
-}
-
.umb-keyboard-shortcuts-overview__keyboard-shortcuts-group {
- width: 50%;
- margin-bottom: 10px;
+ margin-bottom: 20px;
}
.umb-keyboard-shortcuts-overview__keyboard-shortcuts-group-name {
@@ -58,19 +14,10 @@
justify-content: space-between;
align-items: center;
padding: 7px 0;
- border-bottom: 1px solid @gray-8;
-}
-
-.umb-keyboard-shortcuts-overview__keyboard-shortcut.-no-air {
- padding: 0;
-}
-
-.umb-keyboard-shortcuts-overview__keyboard-shortcut.-no-stroke {
- border-bottom: none;
+ border-bottom: 1px solid @gray-9;
}
.umb-keyboard-shortcuts-overview__description {
- font-weight: bold;
font-size: 13px;
margin-right: 10px;
}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/keyboardshortcuts/keyboardshortcuts.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/keyboardshortcuts/keyboardshortcuts.html
new file mode 100644
index 0000000000..f3a0303b03
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/keyboardshortcuts/keyboardshortcuts.html
@@ -0,0 +1,19 @@
+
+
{{ shortcutGroup.name }}
+
+
+
{{ shortcut.description }}
+
+
+
+
{{ key.key }}
+
+ +
+ -
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-keyboard-shortcuts-overview.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-keyboard-shortcuts-overview.html
index 8b12ee4afd..c1f6985257 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-keyboard-shortcuts-overview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-keyboard-shortcuts-overview.html
@@ -1,60 +1,19 @@
-