From d539fdf4f6aaa5d6a34fd6233f93ccb232addaa0 Mon Sep 17 00:00:00 2001 From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com> Date: Tue, 23 Jun 2020 18:36:09 +0200 Subject: [PATCH] Add backdrop when menu items are opened (#8121) --- .../application/umbcontextmenu.directive.js | 3 +- .../components/editor/umbeditors.directive.js | 25 +++++++++++++---- .../umbcontextdialog.directive.js | 3 +- .../components/tree/umbtree.directive.js | 16 ++++++++++- .../components/tree/umbtreeitem.directive.js | 2 +- .../src/common/services/navigation.service.js | 28 ++++++++++++++++--- .../src/less/application/grid.less | 4 +++ .../content/content.create.controller.js | 2 ++ 8 files changed, 69 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbcontextmenu.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbcontextmenu.directive.js index 8d1420b73e..32034818a3 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbcontextmenu.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbcontextmenu.directive.js @@ -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"); }); - } }; }); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js index 9bdef41225..672b3fa286 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js @@ -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(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js index 904a2ce8ca..3b753a371c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js @@ -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) { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js index 5a7da80eff..0ccaf7b05c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js @@ -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; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js index 0a6eeb8835..8767de446a 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js @@ -18,7 +18,7 @@ */ 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, diff --git a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js index da784a1f9e..f903c44ad5 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js @@ -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"); } }; diff --git a/src/Umbraco.Web.UI.Client/src/less/application/grid.less b/src/Umbraco.Web.UI.Client/src/less/application/grid.less index 0c6e790272..9e91da4792 100644 --- a/src/Umbraco.Web.UI.Client/src/less/application/grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/application/grid.less @@ -80,6 +80,10 @@ body.umb-drawer-is-visible #mainwrapper{ float: left; position: absolute; top: 0; + + &.above-backdrop{ + z-index: 7501; + } } #navigation { diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js index fc7d38fd37..487a73f948 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js @@ -92,6 +92,8 @@ function contentCreateController($scope, } else { createBlank(docType); } + + navigationService.hideDialog(); } function createFromBlueprint(blueprintId) {