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

Listview Datatype: Change from using delete icon to "Remove" text in layouts (#11624)

Browse Source 
* Add overlay and texts for overlay

* Change remove icon to remove text
This commit is contained in:
Jan Skovgaard
2021-12-06 00:05:08 +01:00
committed by GitHub
parent 6824519cdb
commit b4059ecfec
5 changed files with 74 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);

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

@@ -33,18 +33,13 @@
</div>
<div class="list-view-layout__action">
<umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox>
<umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox>
<div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
<button type="button" class="btn-icon" ng-click="vm.showPrompt(layout)" aria-label="Remove">
<umb-icon icon="icon-trash"></umb-icon>
</button>
<umb-confirm-action ng-if="layout.deletePrompt"
direction="left"
on-confirm="vm.removeLayout($index, layout)"
on-cancel="vm.hidePrompt(layout)">
</umb-confirm-action>
</div>
<div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
<button type="button" class="umb-node-preview__action umb-node-preview__action--red" ng-click="vm.removeLayout(layout, $index, $event)">
<localize key="general_remove">Remove</localize>
</button>
</div>
</div>
</div>

14
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/overlays/removeListViewLayout.html Normal file
View File

@@ -0,0 +1,14 @@
<div>
<div ng-if="model.layout" class="umb-alert umb-alert--warning mb2">
<localize key="defaultdialogs_deleteLayout">You are deleting the layout</localize> <strong>{{model.layout.name}}</strong>.
</div>
<p>
<localize key="defaultdialogs_deletingALayout">
Modifying layout will result in loss of data for any existing content that is based on this configuration.
</localize>
</p>
<localize key="defaultdialogs_confirmdelete">Are you sure you want to delete</localize>?
</div>

2
src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
View File

@@ -525,6 +525,8 @@
<key alias="propertyuserpickerremovewarning"><![CDATA[This will remove the user <b>%0%</b>.]]></key>
<key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
<key alias="yesRemove">Yes, remove</key>
<key alias="deleteLayout">You are deleting the layout</key>
<key alias="deletingALayout">Modifying layout will result in loss of data for any existing content that is based on this configuration.</key>
</area>
<area alias="dictionary">
<key alias="noItems">There are no dictionary items.</key>

2
src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
View File

@@ -531,6 +531,8 @@
<key alias="propertyuserpickerremovewarning"><![CDATA[This will remove the user <b>%0%</b>.]]></key>
<key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
<key alias="yesRemove">Yes, remove</key>
<key alias="deleteLayout">You are deleting the layout</key>
<key alias="deletingALayout">Modifying layout will result in loss of data for any existing content that is based on this configuration.</key>
</area>
<area alias="dictionary">
<key alias="noItems">There are no dictionary items.</key>