From b4059ecfec729484a31c60cdc2f87ce5f6163713 Mon Sep 17 00:00:00 2001 From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com> Date: Mon, 6 Dec 2021 00:05:08 +0100 Subject: [PATCH] Listview Datatype: Change from using delete icon to "Remove" text in layouts (#11624) * Add overlay and texts for overlay * Change remove icon to remove text --- .../listview/layouts.prevalues.controller.js | 89 +++++++++++-------- .../listview/layouts.prevalues.html | 17 ++-- .../overlays/removeListViewLayout.html | 14 +++ src/Umbraco.Web.UI/Umbraco/config/lang/en.xml | 2 + .../Umbraco/config/lang/en_us.xml | 2 + 5 files changed, 74 insertions(+), 50 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/removeListViewLayout.html diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js index db79c31cfd..d8320711c9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js @@ -9,55 +9,66 @@ (function() { "use strict"; - function ListViewLayoutsPreValsController($scope, editorService) { + function ListViewLayoutsPreValsController($scope, editorService, localizationService, overlayService) { - var vm = this; - vm.focusLayoutName = false; + var vm = this; + vm.focusLayoutName = false; - vm.layoutsSortableOptions = { - axis: "y", - containment: "parent", - distance: 10, - tolerance: "pointer", - opacity: 0.7, - scroll: true, - cursor: "move", - handle: ".list-view-layout__sort-handle" - }; + vm.layoutsSortableOptions = { + axis: "y", + containment: "parent", + distance: 10, + tolerance: "pointer", + opacity: 0.7, + scroll: true, + cursor: "move", + handle: ".list-view-layout__sort-handle" + }; - vm.addLayout = addLayout; - vm.showPrompt = showPrompt; - vm.hidePrompt = hidePrompt; - vm.removeLayout = removeLayout; - vm.openIconPicker = openIconPicker; + vm.addLayout = addLayout; + vm.removeLayout = removeLayout; + vm.openIconPicker = openIconPicker; - function addLayout() { + function addLayout() { - vm.focusLayoutName = false; + vm.focusLayoutName = false; - var layout = { - "name": "", - "path": "", - "icon": "icon-stop", - "selected": true - }; + var layout = { + "name": "", + "path": "", + "icon": "icon-stop", + "selected": true + }; - $scope.model.value.push(layout); - } + $scope.model.value.push(layout); + } - function showPrompt(layout) { - layout.deletePrompt = true; - } + function removeLayout(template, index, event) { - function hidePrompt(layout) { - layout.deletePrompt = false; - } + const dialog = { + view: "views/propertyEditors/listview/overlays/removeListViewLayout.html", + layout: template, + submitButtonLabelKey: "defaultdialogs_yesRemove", + submitButtonStyle: "danger", + submit: function (model) { + $scope.model.value.splice(index, 1); + overlayService.close(); + }, + close: function () { + overlayService.close(); + } + }; - function removeLayout($index, layout) { - $scope.model.value.splice($index, 1); - } + localizationService.localize("general_remove").then(value => { + dialog.title = value; + overlayService.open(dialog); + }); - function openIconPicker(layout) { + event.preventDefault(); + event.stopPropagation(); + } + + function openIconPicker(layout) { var iconPicker = { icon: layout.icon.split(' ')[0], color: layout.icon.split(' ')[1], @@ -80,7 +91,7 @@ editorService.iconPicker(iconPicker); } - } + } angular.module("umbraco").controller("Umbraco.PrevalueEditors.ListViewLayoutsPreValsController", ListViewLayoutsPreValsController); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html index 95bdb3644f..36ebc45f38 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html @@ -33,18 +33,13 @@
- + -
- - - -
+
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/removeListViewLayout.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/removeListViewLayout.html new file mode 100644 index 0000000000..80080a82b0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/removeListViewLayout.html @@ -0,0 +1,14 @@ +
+
+ You are deleting the layout {{model.layout.name}}. +
+ +

+ + Modifying layout will result in loss of data for any existing content that is based on this configuration. + +

+ + Are you sure you want to delete? + +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml index f5f1f8ac4e..022a5e0344 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml @@ -525,6 +525,8 @@ %0%.]]> %0% from the %1% group]]> Yes, remove + You are deleting the layout + Modifying layout will result in loss of data for any existing content that is based on this configuration. There are no dictionary items. diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml index 5cfd176504..47e82ceebb 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml @@ -531,6 +531,8 @@ %0%.]]> %0% from the %1% group]]> Yes, remove + You are deleting the layout + Modifying layout will result in loss of data for any existing content that is based on this configuration. There are no dictionary items.