swcs/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

user overlayService for keyboard shortcuts instead of custom overlay + fix template editor shortcuts

Browse Source
This commit is contained in:
Mads Rasmussen
2018-06-27 13:49:25 +02:00
parent 101135b1ea
commit e0643c8dd0
4 changed files with 90 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js
+56 -5
View File
@@ -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: "&"
}
};
src/Umbraco.Web.UI.Client/src/less/components/umb-keyboard-shortcuts-overview.less
+2 -55
View File
@@ -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;
}
src/Umbraco.Web.UI.Client/src/views/common/overlays/keyboardshortcuts/keyboardshortcuts.html
+19
View File
@@ -0,0 +1,19 @@
<div class="umb-keyboard-shortcuts-overview__keyboard-shortcuts-group" ng-repeat="shortcutGroup in model.shortcuts">
<h5 class="umb-keyboard-shortcuts-overview__keyboard-shortcuts-group-name">{{ shortcutGroup.name }}</h5>
<div class="umb-keyboard-shortcuts-overview__keyboard-shortcuts">
<div class="umb-keyboard-shortcuts-overview__keyboard-shortcut" ng-repeat="shortcut in shortcutGroup.shortcuts">
<div class="umb-keyboard-shortcuts-overview__description">{{ shortcut.description }}</div>
<div class="umb-keyboard-keys">
<div ng-repeat="key in shortcut.platformKeys">
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">{{ key.key }}</div>
<div ng-if="!$last">
<span ng-if="!keyboardShortcut.keyRange">+</span>
<span ng-if="keyboardShortcut.keyRange">-</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/Umbraco.Web.UI.Client/src/views/components/umb-keyboard-shortcuts-overview.html
+13 -54
View File
@@ -1,60 +1,19 @@
<div class="umb-keyboard-shortcuts-overview">
<div class="umb-keyboard-shortcuts-overview__keyboard-shortcut -no-air -no-stroke" data-hotkey="alt+shift+k" ng-click="toggleShortcutsOverlay()">
<div class="umb-keyboard-shortcuts-overview flex items-center" data-hotkey="alt+shift+k" ng-click="toggleShortcutsOverlay()">
<div class="umb-keyboard-shortcuts-overview__description"><localize key="shortcuts_showShortcuts">show shortcuts</localize></div>
<div class="umb-keyboard-keys">
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">alt</div>
<div>+</div>
</div>
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">shift</div>
<div>+</div>
</div>
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">k</div>
</div>
</div>
</div>
<div class="umb-keyboard-shortcuts-overview__overlay" ng-if="showOverlay">
<a href="" class="umb-keyboard-shortcuts-overview__overlay-close" ng-click="toggleShortcutsOverlay()" data-hotkey="esc" hotkey-when-hidden="true">
<i class="icon-delete"></i>
</a>
<div class="umb-keyboard-shortcuts-overview__overlay-content">
<div class="umb-keyboard-shortcuts-overview__keyboard-shortcuts-group" ng-repeat="keyboardShortcutGroup in model">
<h5 class="umb-keyboard-shortcuts-overview__keyboard-shortcuts-group-name">{{ keyboardShortcutGroup.name }}</h5>
<div class="umb-keyboard-shortcuts-overview__keyboard-shortcuts">
<div class="umb-keyboard-shortcuts-overview__keyboard-shortcut" ng-repeat="keyboardShortcut in keyboardShortcutGroup.shortcuts">
<div class="umb-keyboard-shortcuts-overview__description">{{ keyboardShortcut.description }}</div>
<div class="umb-keyboard-keys">
<div ng-repeat="key in keyboardShortcut.platformKeys">
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">{{ key.key }}</div>
<div ng-if="!$last">
<span ng-if="!keyboardShortcut.keyRange">+</span>
<span ng-if="keyboardShortcut.keyRange">-</span>
</div>
</div>
</div>
</div>
</div>
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">alt</div>
<div>+</div>
</div>
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">shift</div>
<div>+</div>
</div>
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">k</div>
</div>
</div>
</div>
</div>
</div>