Skip to content

Commit b4059ec

Browse files
authored
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
1 parent 6824519 commit b4059ec

File tree

5 files changed

+86
-62
lines changed

5 files changed

+86
-62
lines changed

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js

Lines changed: 61 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -9,55 +9,66 @@
99
(function() {
1010
"use strict";
1111

12-
function ListViewLayoutsPreValsController($scope, editorService) {
13-
14-
var vm = this;
15-
vm.focusLayoutName = false;
16-
17-
vm.layoutsSortableOptions = {
18-
axis: "y",
19-
containment: "parent",
20-
distance: 10,
21-
tolerance: "pointer",
22-
opacity: 0.7,
23-
scroll: true,
24-
cursor: "move",
25-
handle: ".list-view-layout__sort-handle"
26-
};
27-
28-
vm.addLayout = addLayout;
29-
vm.showPrompt = showPrompt;
30-
vm.hidePrompt = hidePrompt;
31-
vm.removeLayout = removeLayout;
32-
vm.openIconPicker = openIconPicker;
33-
34-
function addLayout() {
35-
36-
vm.focusLayoutName = false;
37-
38-
var layout = {
39-
"name": "",
40-
"path": "",
41-
"icon": "icon-stop",
42-
"selected": true
43-
};
44-
45-
$scope.model.value.push(layout);
46-
}
47-
48-
function showPrompt(layout) {
49-
layout.deletePrompt = true;
50-
}
51-
52-
function hidePrompt(layout) {
53-
layout.deletePrompt = false;
54-
}
55-
56-
function removeLayout($index, layout) {
57-
$scope.model.value.splice($index, 1);
58-
}
59-
60-
function openIconPicker(layout) {
12+
function ListViewLayoutsPreValsController($scope, editorService, localizationService, overlayService) {
13+
14+
var vm = this;
15+
vm.focusLayoutName = false;
16+
17+
vm.layoutsSortableOptions = {
18+
axis: "y",
19+
containment: "parent",
20+
distance: 10,
21+
tolerance: "pointer",
22+
opacity: 0.7,
23+
scroll: true,
24+
cursor: "move",
25+
handle: ".list-view-layout__sort-handle"
26+
};
27+
28+
vm.addLayout = addLayout;
29+
vm.removeLayout = removeLayout;
30+
vm.openIconPicker = openIconPicker;
31+
32+
function addLayout() {
33+
34+
vm.focusLayoutName = false;
35+
36+
var layout = {
37+
"name": "",
38+
"path": "",
39+
"icon": "icon-stop",
40+
"selected": true
41+
};
42+
43+
$scope.model.value.push(layout);
44+
}
45+
46+
function removeLayout(template, index, event) {
47+
48+
const dialog = {
49+
view: "views/propertyEditors/listview/overlays/removeListViewLayout.html",
50+
layout: template,
51+
submitButtonLabelKey: "defaultdialogs_yesRemove",
52+
submitButtonStyle: "danger",
53+
submit: function (model) {
54+
$scope.model.value.splice(index, 1);
55+
overlayService.close();
56+
},
57+
close: function () {
58+
overlayService.close();
59+
}
60+
};
61+
62+
localizationService.localize("general_remove").then(value => {
63+
dialog.title = value;
64+
overlayService.open(dialog);
65+
});
66+
67+
event.preventDefault();
68+
event.stopPropagation();
69+
}
70+
71+
function openIconPicker(layout) {
6172
var iconPicker = {
6273
icon: layout.icon.split(' ')[0],
6374
color: layout.icon.split(' ')[1],
@@ -80,7 +91,7 @@
8091
editorService.iconPicker(iconPicker);
8192
}
8293

83-
}
94+
}
8495

8596
angular.module("umbraco").controller("Umbraco.PrevalueEditors.ListViewLayoutsPreValsController", ListViewLayoutsPreValsController);
8697

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,13 @@
3333
</div>
3434

3535
<div class="list-view-layout__action">
36-
<umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox>
37-
38-
<div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
39-
<button type="button" class="btn-icon" ng-click="vm.showPrompt(layout)" aria-label="Remove">
40-
<umb-icon icon="icon-trash"></umb-icon>
41-
</button>
42-
<umb-confirm-action ng-if="layout.deletePrompt"
43-
direction="left"
44-
on-confirm="vm.removeLayout($index, layout)"
45-
on-cancel="vm.hidePrompt(layout)">
46-
</umb-confirm-action>
47-
</div>
36+
<umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox>
37+
38+
<div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
39+
<button type="button" class="umb-node-preview__action umb-node-preview__action--red" ng-click="vm.removeLayout(layout, $index, $event)">
40+
<localize key="general_remove">Remove</localize>
41+
</button>
42+
</div>
4843
</div>
4944

5045
</div>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div>
2+
<div ng-if="model.layout" class="umb-alert umb-alert--warning mb2">
3+
<localize key="defaultdialogs_deleteLayout">You are deleting the layout</localize> <strong>{{model.layout.name}}</strong>.
4+
</div>
5+
6+
<p>
7+
<localize key="defaultdialogs_deletingALayout">
8+
Modifying layout will result in loss of data for any existing content that is based on this configuration.
9+
</localize>
10+
</p>
11+
12+
<localize key="defaultdialogs_confirmdelete">Are you sure you want to delete</localize>?
13+
14+
</div>

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,8 @@
525525
<key alias="propertyuserpickerremovewarning"><![CDATA[This will remove the user <b>%0%</b>.]]></key>
526526
<key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
527527
<key alias="yesRemove">Yes, remove</key>
528+
<key alias="deleteLayout">You are deleting the layout</key>
529+
<key alias="deletingALayout">Modifying layout will result in loss of data for any existing content that is based on this configuration.</key>
528530
</area>
529531
<area alias="dictionary">
530532
<key alias="noItems">There are no dictionary items.</key>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,8 @@
531531
<key alias="propertyuserpickerremovewarning"><![CDATA[This will remove the user <b>%0%</b>.]]></key>
532532
<key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
533533
<key alias="yesRemove">Yes, remove</key>
534+
<key alias="deleteLayout">You are deleting the layout</key>
535+
<key alias="deletingALayout">Modifying layout will result in loss of data for any existing content that is based on this configuration.</key>
534536
</area>
535537
<area alias="dictionary">
536538
<key alias="noItems">There are no dictionary items.</key>

0 commit comments

Comments
 (0)