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

Add backdrop when menu items are opened (#8121)

Browse Source
This commit is contained in:
Jan Skovgaard
2020-06-23 18:36:09 +02:00
committed by GitHub
parent b38cf41752
commit d539fdf4f6
8 changed files with 69 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbcontextmenu.directive.js
View File

@@ -1,5 +1,5 @@
angular.module("umbraco.directives")
.directive('umbContextMenu', function (navigationService, keyboardService) {
.directive('umbContextMenu', function (navigationService, keyboardService, backdropService) {
return {
scope: {
menuDialogTitle: "@",
@@ -30,7 +30,6 @@ angular.module("umbraco.directives")
scope.$on('$destroy', function () {
keyboardService.unbind("esc");
});
}
};
});

25
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js
View File

@@ -7,11 +7,12 @@
var evts = [];
var allowedNumberOfVisibleEditors = 3;
var aboveBackDropCssClass = 'above-backdrop';
var sectionId = '#leftcolumn';
var isLeftColumnAbove = false;
scope.editors = [];
function addEditor(editor) {
editor.inFront = true;
editor.moveRight = true;
editor.level = 0;
@@ -19,6 +20,14 @@
// push the new editor to the dom
scope.editors.push(editor);
if(scope.editors.length === 1){
isLeftColumnAbove = $(sectionId).hasClass(aboveBackDropCssClass);
if(isLeftColumnAbove){
$(sectionId).removeClass(aboveBackDropCssClass);
}
}
$timeout(() => {
editor.moveRight = false;
@@ -32,14 +41,20 @@
}
function removeEditor(editor) {
editor.moveRight = true;
editor.animating = true;
setTimeout(removeEditorFromDOM.bind(this, editor), 400);
updateEditors(-1);
if(scope.editors.length === 1){
if(isLeftColumnAbove){
$('#leftcolumn').addClass(aboveBackDropCssClass);
}
isLeftColumnAbove = false;
}
}
function revealEditorContent(editor) {
@@ -57,7 +72,7 @@
if (index !== -1) {
scope.editors.splice(index, 1);
}
updateEditors();
scope.$digest();

3
src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js
View File

@@ -1,7 +1,7 @@
(function() {
'use strict';
function UmbContextDialog(navigationService, keyboardService, localizationService, overlayService) {
function UmbContextDialog(navigationService, keyboardService, localizationService, overlayService, backdropService) {
function link($scope) {
@@ -23,6 +23,7 @@
});
function hide() {
if ($scope.dialog.confirmDiscardChanges) {
localizationService.localizeMany(["prompt_unsavedChanges", "prompt_unsavedChangesWarning", "prompt_discardChanges", "prompt_stay"]).then(
function (values) {

16
src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
View File

@@ -3,7 +3,7 @@
* @name umbraco.directives.directive:umbTree
* @restrict E
**/
function umbTreeDirective($q, $rootScope, treeService, notificationsService, userService) {
function umbTreeDirective($q, $rootScope, treeService, notificationsService, userService, backdropService) {
return {
restrict: 'E',
@@ -319,6 +319,18 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use
}
}
// Close any potential backdrop and remove the #leftcolumn modifier class
function closeBackdrop() {
var aboveClass = 'above-backdrop';
var leftColumn = $('#leftcolumn');
var isLeftColumnOnTop = leftColumn.hasClass(aboveClass);
if(isLeftColumnOnTop){
backdropService.close();
leftColumn.removeClass(aboveClass);
}
}
/** Returns the css classses assigned to the node (div element) */
$scope.getNodeCssClass = function (node) {
if (!node) {
@@ -368,6 +380,8 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use
*/
$scope.select = function (n, ev) {
closeBackdrop()
if (n.metaData && n.metaData.noAccess === true) {
ev.preventDefault();
return;

2
src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
View File

@@ -18,7 +18,7 @@
</example>
*/
angular.module("umbraco.directives")
.directive('umbTreeItem', function(treeService, $timeout, localizationService, eventsService, appState) {
.directive('umbTreeItem', function(treeService, $timeout, localizationService, eventsService, appState, navigationService) {
return {
restrict: 'E',
replace: true,

28
src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
View File

@@ -13,7 +13,7 @@
* Section navigation and search, and maintain their state for the entire application lifetime
*
*/
function navigationService($routeParams, $location, $q, $injector, eventsService, umbModelMapper, treeService, appState) {
function navigationService($routeParams, $location, $q, $injector, eventsService, umbModelMapper, treeService, appState, backdropService) {
//the promise that will be resolved when the navigation is ready
var navReadyPromise = $q.defer();
@@ -26,7 +26,10 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
navReadyPromise.resolve(mainTreeApi);
});
eventsService.on('appState.backdrop', function(e, args){
var element = $(args.element);
element.addClass('above-backdrop');
});
//A list of query strings defined that when changed will not cause a reload of the route
var nonRoutingQueryStrings = ["mculture", "cculture", "csegment", "lq", "sr"];
@@ -113,6 +116,17 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
}
}
function closeBackdrop() {
var aboveClass = 'above-backdrop';
var leftColumn = $('#leftcolumn');
var isLeftColumnOnTop = leftColumn.hasClass(aboveClass);
if(isLeftColumnOnTop){
backdropService.close();
leftColumn.removeClass(aboveClass);
}
}
var service = {
/**
@@ -410,12 +424,15 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
* @param {Event} event the click event triggering the method, passed from the DOM element
*/
showMenu: function (args) {
var self = this;
var backDropOptions = {
'element': $('#leftcolumn')[0]
};
return treeService.getMenu({ treeNode: args.node })
.then(function (data) {
backdropService.open(backDropOptions);
//check for a default
//NOTE: event will be undefined when a call to hideDialog is made so it won't re-load the default again.
// but perhaps there's a better way to deal with with an additional parameter in the args ? it works though.
@@ -466,6 +483,7 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
appState.setMenuState("currentNode", null);
appState.setMenuState("menuActions", []);
setMode("tree");
closeBackdrop();
},
/** Executes a given menu action */
@@ -650,6 +668,7 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
if (showMenu) {
this.showMenu({ skipDefault: true, node: appState.getMenuState("currentNode") });
} else {
closeBackdrop();
setMode("default");
}
},
@@ -685,6 +704,7 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
*/
hideNavigation: function () {
appState.setMenuState("menuActions", []);
closeBackdrop();
setMode("default");
}
};

4
src/Umbraco.Web.UI.Client/src/less/application/grid.less
View File

@@ -80,6 +80,10 @@ body.umb-drawer-is-visible #mainwrapper{
float: left;
position: absolute;
top: 0;
&.above-backdrop{
z-index: 7501;
}
}
#navigation {

2
src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js
View File

@@ -92,6 +92,8 @@ function contentCreateController($scope,
} else {
createBlank(docType);
}
navigationService.hideDialog();
}
function createFromBlueprint(blueprintId) {