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

WIP: added directive to show a keyboard shortcuts overview

Browse Source
This commit is contained in:
Mads Rasmussen
2015-07-13 16:06:51 +02:00
parent 7d85074387
commit fc8751f897
8 changed files with 220 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js Normal file
View File

@@ -0,0 +1,31 @@
(function() {
'use strict';
function KeyboardShortcutsOverview() {
function link(scope, el, attr, ctrl) {
scope.shortcutOverlay = false;
scope.toggleShortcutsOverlay = function() {
scope.shortcutOverlay = !scope.shortcutOverlay;
};
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/umb-keyboard-shortcuts-overview.html',
link: link,
scope: {
model: "="
}
};
return directive;
}
angular.module('umbraco.directives').directive('umbKeyboardShortcutsOverview', KeyboardShortcutsOverview);
})();

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -98,6 +98,7 @@
@import "components/umb-group-builder.less";
@import "components/umb-list-view.less";
@import "components/umb-confirm-delete.less";
@import "components/umb-keyboard-shortcuts-overview.less";
@import "components/umb-file-dropzone.less";

77
src/Umbraco.Web.UI.Client/src/less/components/umb-keyboard-shortcuts-overview.less Normal file
View File

@@ -0,0 +1,77 @@
/* ---------- OVERLAY ---------- */
.umb-keyboard-shortcuts-overview__overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgb(255, 255, 255);
z-index: 1000;
animation: fadeIn 0.2s;
box-sizing: border-box;
padding-left: 440px;
}
.umb-keyboard-shortcuts-overview__overlay-close {
position: absolute;
top: 10px;
right: 10px;
}
.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;
}
.umb-keyboard-shortcuts-overview__keyboard-shortcuts-group-name {
margin-bottom: 0;
}
.umb-keyboard-shortcuts-overview__keyboard-shortcut {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border-bottom: 1px solid @grayLight;
}
.umb-keyboard-shortcuts-overview__description {
font-weight: bold;
font-size: 13px;
margin-right: 10px;
}
/* ---------- KEYBOARD KEYS ---------- */
.umb-keyboard-keys {
list-style: none;
display: flex;
font-size: 12px;
align-items: center;
}
.umb-keyboard-key-wrapper {
display: flex;
margin-right: 5px;
align-items: center;
}
.umb-keyboard-key {
background: #ffffff;
border: 1px solid @grayLight;
color: @gray;
border-radius: 5px;
margin-right: 5px;
padding: 1px 7px;
}

6
src/Umbraco.Web.UI.Client/src/less/panel.less
View File

@@ -444,4 +444,8 @@ input.umb-panel-header-description {
}
}
.umb-editor-drawer-content {
display: flex;
align-items: center;
justify-content: space-between;
}

10
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-footer.html
View File

@@ -1,7 +1,7 @@
<div class="umb-tab-buttons umb-editor-drawer">
<div class="btn-group pull-right" ng-transclude>
<div class="umb-editor-drawer-content" ng-transclude>
</div>
</div>
</div>

51
src/Umbraco.Web.UI.Client/src/views/components/umb-keyboard-shortcuts-overview.html Normal file
View File

@@ -0,0 +1,51 @@
<div class="umb-keyboard-shortcuts-overview">
<div class="umb-keyboard-shortcuts-overview__keyboard-shortcut" data-hotkey="alt+shift+k" ng-click="toggleShortcutsOverlay()">
<div class="umb-keyboard-shortcuts-overview__description">show shortcuts</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="shortcutOverlay">
<a href="" ng-click="toggleShortcutsOverlay()">
<i class="umb-keyboard-shortcuts-overview__overlay-close 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 class="umb-keyboard-key-wrapper" ng-repeat="key in keyboardShortcut.keys">
<div class="umb-keyboard-key">{{ key.key }}</div>
<div ng-if="!$last">+</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

41
src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js
View File

@@ -42,6 +42,47 @@
}
];
vm.page.keyboardShortcutsOverview = [
{
"name": "Design",
"shortcuts": [
{
"description": "Add tab",
"keys": [{"key": "alt"},{"key": "shift"},{"key": "t"}]
},
{
"description": "Add property",
"keys": [{"key": "alt"},{"key": "shift"},{"key": "p"}]
},
{
"description": "Add editor",
"keys": [{"key": "alt"},{"key": "shift"},{"key": "e"}]
},
{
"description": "Edit data type",
"keys": [{"key": "alt"},{"key": "shift"},{"key": "d"}]
}
]
},
{
"name": "List view",
"shortcuts": [
{
"description": "Toggle list view",
"keys": [{"key": "alt"},{"key": "shift"},{"key": "l"}]
}
]
},
{
"name": "Permissions",
"shortcuts": [
{
"description": "Toggle allow as root",
"keys": [{"key": "alt"},{"key": "shift"},{"key": "r"}]
}
]
}
];
if ($routeParams.create) {
//we are creating so get an empty data type item

10
src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html
View File

@@ -26,9 +26,17 @@
<umb-editor-footer>
<umb-keyboard-shortcuts-overview
model="vm.page.keyboardShortcutsOverview">
</umb-keyboard-shortcuts-overview>
<div class="btn-group">
<button type="submit" data-hotkey="ctrl+s" class="btn btn-success">
<localize key="buttons_save">Save</localize>
<localize key="buttons_save">Save</localize>
</button>
</div>
</umb-editor-footer>
</umb-editor-view>