From 5797c65a1d115e7c8da9e737e9c8409ff7ca37f4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 25 Nov 2015 09:24:19 +0100 Subject: [PATCH] Fixes: U4-7446 Grid - Confirm dialog on delete row/cell --- .../components/umbconfirmaction.directive.js | 39 ++++++ .../components/umbconfirmdelete.directive.js | 35 ----- .../components/umbgroupsbuilder.directive.js | 14 +- src/Umbraco.Web.UI.Client/src/less/belle.less | 2 +- .../less/components/umb-confirm-action.less | 130 ++++++++++++++++++ .../less/components/umb-confirm-delete.less | 34 ----- .../src/less/components/umb-grid.less | 6 +- .../less/components/umb-group-builder.less | 8 ++ .../views/components/umb-confirm-action.html | 16 +++ .../views/components/umb-confirm-delete.html | 19 --- .../views/components/umb-groups-builder.html | 22 ++- .../propertyeditors/grid/grid.controller.js | 8 +- .../src/views/propertyeditors/grid/grid.html | 51 +++---- 13 files changed, 255 insertions(+), 129 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js delete mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmdelete.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less delete mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-delete.less create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html delete mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-delete.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js new file mode 100644 index 0000000000..df3e431620 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js @@ -0,0 +1,39 @@ +(function() { + 'use strict'; + + function ConfirmAction() { + + function link(scope, el, attr, ctrl) { + + scope.clickConfirm = function() { + if(scope.onConfirm) { + scope.onConfirm(); + } + }; + + scope.clickCancel = function() { + if(scope.onCancel) { + scope.onCancel(); + } + }; + + } + + var directive = { + restrict: 'E', + replace: true, + templateUrl: 'views/components/umb-confirm-action.html', + scope: { + direction: "@", + onConfirm: "&", + onCancel: "&" + }, + link: link + }; + + return directive; + } + + angular.module('umbraco.directives').directive('umbConfirmAction', ConfirmAction); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmdelete.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmdelete.directive.js deleted file mode 100644 index 5cd244f108..0000000000 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmdelete.directive.js +++ /dev/null @@ -1,35 +0,0 @@ -(function() { - 'use strict'; - - function ConfirmDelete() { - - function link(scope, el, attr, ctrl) { - - scope.confirmOverlayOpen = false; - - scope.toggleOverlay = function() { - scope.confirmOverlayOpen = !scope.confirmOverlayOpen; - }; - - scope.closeOverlay = function() { - scope.confirmOverlayOpen = false; - }; - - } - - var directive = { - restrict: 'E', - replace: true, - templateUrl: 'views/components/umb-confirm-delete.html', - scope: { - confirmAction: "&" - }, - link: link - }; - - return directive; - } - - angular.module('umbraco.directives').directive('umbConfirmDelete', ConfirmDelete); - -})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js index c93df61e13..d18251da0b 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js @@ -157,6 +157,16 @@ } + /* ---------- DELETE PROMT ---------- */ + + scope.togglePrompt = function (object) { + object.deletePrompt = !object.deletePrompt; + }; + + scope.hidePrompt = function (object) { + object.deletePrompt = false; + }; + /* ---------- TOOLBAR ---------- */ scope.toggleSortingMode = function(tool) { @@ -404,13 +414,13 @@ } }; - scope.deleteProperty = function(tab, propertyIndex, group) { + scope.deleteProperty = function(tab, propertyIndex) { // remove property tab.properties.splice(propertyIndex, 1); // if the last property in group is an placeholder - remove add new tab placeholder - if(group.properties.length === 1 && group.properties[0].propertyState === "init") { + if(tab.properties.length === 1 && tab.properties[0].propertyState === "init") { angular.forEach(scope.model.groups, function(group, index, groups){ if(group.tabState === 'init') { diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index b90f7472b1..5b8282efd1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -91,7 +91,7 @@ @import "components/umb-group-builder.less"; @import "components/umb-list-view.less"; @import "components/umb-table.less"; -@import "components/umb-confirm-delete.less"; +@import "components/umb-confirm-action.less"; @import "components/umb-keyboard-shortcuts-overview.less"; @import "components/umb-checkbox-list.less"; @import "components/umb-locked-field.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less new file mode 100644 index 0000000000..1c31b97baa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less @@ -0,0 +1,130 @@ +// OVERLAY +.umb_confirm-action__overlay { + position: absolute; + z-index: 999999; + display: flex; +} + +// positions +.umb_confirm-action__overlay.-top { + top: -50px; + right: auto; + bottom: auto; + left: 0; + animation: fadeInUp 0.2s; + flex-direction: column; + + .umb_confirm-action__overlay-action { + margin-bottom: 5px; + } + + .umb_confirm-action__overlay-action.-confirm { + order: 1; + } + + .umb_confirm-action__overlay-action.-cancel { + order: 2; + } + +} + +.umb_confirm-action__overlay.-right { + top: 0; + right: -50px; + bottom: auto; + left: auto; + animation: fadeInLeft 0.2s; + flex-direction: row; + + .umb_confirm-action__overlay-action { + margin-left: 5px; + } + + .umb_confirm-action__overlay-action.-confirm { + order: 2; + } + + .umb_confirm-action__overlay-action.-cancel { + order: 1; + } +} + +.umb_confirm-action__overlay.-bottom { + top: auto; + right: auto; + bottom: -50px; + left: 0; + animation: fadeInDown 0.2s; + flex-direction: column; + + .umb_confirm-action__overlay-action { + margin-top: 5px; + } + + .umb_confirm-action__overlay-action.-confirm { + order: 2; + } + + .umb_confirm-action__overlay-action.-cancel { + order: 1; + } +} + +.umb_confirm-action__overlay.-left { + top: 0; + right: auto; + bottom: auto; + left: -50px; + animation: fadeInRight 0.2s; + flex-direction: row; + + .umb_confirm-action__overlay-action { + margin-right: 5px; + } + + .umb_confirm-action__overlay-action.-confirm { + order: 1; + } + + .umb_confirm-action__overlay-action.-cancel { + order: 2; + } +} + +// BUTTONS +.umb_confirm-action__overlay-action { + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + border-radius: 40px; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); + font-size: 18px; +} + +.umb_confirm-action__overlay-action:hover { + text-decoration: none; + color: #ffffff; +} + +// confirm button +.umb_confirm-action__overlay-action.-confirm { + background: #ffffff; + color: @green !important; +} + +.umb_confirm-action__overlay-action.-confirm:hover { + color: @green !important; +} + +// cancel button +.umb_confirm-action__overlay-action.-cancel { + background: #ffffff; + color: @red !important; +} + +.umb_confirm-action__overlay-action.-cancel:hover { + color: @red !important; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-delete.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-delete.less deleted file mode 100644 index 8f767c501c..0000000000 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-delete.less +++ /dev/null @@ -1,34 +0,0 @@ -.umb-confirm-delete { - position: relative; -} - -.umb_confirm-delete__overlay-action { - position: absolute; - z-index: 999999; - width: 20px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; - color: #ffffff; - border-radius: 40px; - animation: fadeInRight 0.2s; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -} - -.umb_confirm-delete__overlay-action:hover { - text-decoration: none; - color: #ffffff; -} - -.umb_confirm-delete__overlay-action.-confirm { - background: @green; - top: 0; - left: -50px; -} - -.umb_confirm-delete__overlay-action.-cancel { - background: @red; - top: 0; - left: -25px; -} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less index 25fb609ce9..0b4475149d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less @@ -252,6 +252,7 @@ .umb-grid .cell-tools-remove { display: inline-block; + position: relative; } .umb-grid .cell-tools-remove .iconBox:hover, @@ -597,12 +598,15 @@ } .umb-grid .umb-control-tools { - margin-left: auto; + display: inline-block; + margin-left: 10px; } .umb-grid .umb-control-tool { font-size: 16px; margin-right: 5px; + position: relative; + cursor: pointer; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less index b8f0d457dd..2768c370c9 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less @@ -59,10 +59,12 @@ position: absolute; top: -30px; right: 20px; + font-size: 18px; } .umb-group-builder__group-remove:hover { cursor: pointer; + color: @blueDark; } .umb-group-builder__group-title-wrapper { @@ -312,6 +314,12 @@ input.umb-group-builder__group-sort-value { margin: 0 0 10px 0; display: block; font-size: 18px; + position: relative; + cursor: pointer; +} + +.umb-group-builder__property-action:hover { + color: @blueDark; } .umb-group-builder__property-inherited-label { diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html new file mode 100644 index 0000000000..c34c3f9283 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html @@ -0,0 +1,16 @@ +
+ + + + + + + + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-delete.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-delete.html deleted file mode 100644 index 11eff8cb4d..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-delete.html +++ /dev/null @@ -1,19 +0,0 @@ -
- - - - - -
- - - - - - - - - -
- -
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html index f8c060b3df..97f024c3b3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html @@ -24,7 +24,13 @@
- + + +
@@ -97,7 +103,7 @@
- +
{{ property.alias }}
-
+
- + + +
- +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js index 5e3230646c..838b57007a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js @@ -473,8 +473,12 @@ angular.module("umbraco") e.stopPropagation(); }; - $scope.showPrompt = function (scopedObject) { - scopedObject.deletePrompt = true; + $scope.togglePrompt = function (scopedObject) { + scopedObject.deletePrompt = !scopedObject.deletePrompt; + }; + + $scope.hidePrompt = function (scopedObject) { + scopedObject.deletePrompt = false; }; $scope.toggleAddRow = function() { diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html index 8d9687aa00..65f32b8499 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html @@ -67,30 +67,6 @@
- -
-
- - - - - - - - -
-
- - -
+
+ + + +
+
@@ -167,16 +153,21 @@
- {{control.editor.name}}
-
- -
+ +
+ + + +
+