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

show overlay prompt when removing tabs, groups and properties

Browse Source
This commit is contained in:
Mads Rasmussen
2021-07-01 22:32:51 +02:00
parent cd84b46637
commit 63f3f8906f
9 changed files with 98 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypegroup.component.js
View File

@@ -11,12 +11,8 @@
vm.$onInit = onInit;
vm.removePromptIsVisible = false;
vm.updateName = updateName;
vm.removeGroup = removeGroup;
vm.togglePrompt = togglePrompt;
vm.hidePrompt = hidePrompt;
vm.whenNameFocus = whenNameFocus;
vm.whenFocus = whenFocus;
vm.changeSortOrderValue = changeSortOrderValue;
@@ -28,14 +24,6 @@
vm.formName = `groupForm${identifier}`;
}
function togglePrompt () {
vm.removePromptIsVisible = !vm.removePromptIsVisible;
}
function hidePrompt () {
vm.removePromptIsVisible = false;
}
function updateName (group) {
if (vm.onUpdateName) {
vm.onUpdateName({ group });
@@ -45,7 +33,6 @@
function removeGroup () {
if (vm.onRemove) {
vm.onRemove({ group: vm.group });
vm.removePromptIsVisible = false;
}
}

13
src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypeproperty.component.js
View File

@@ -9,11 +9,7 @@
const vm = this;
vm.removePromptIsVisible = false;
vm.edit = edit;
vm.togglePrompt = togglePrompt;
vm.hidePrompt = hidePrompt;
vm.remove = remove;
vm.changeSortOrderValue = changeSortOrderValue;
@@ -23,18 +19,9 @@
}
}
function togglePrompt () {
vm.removePromptIsVisible = !vm.removePromptIsVisible;
}
function hidePrompt () {
vm.removePromptIsVisible = false;
}
function remove () {
if (vm.onRemove) {
vm.onRemove({ property: vm.property });
vm.removePromptIsVisible = false;
}
}

15
src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
View File

@@ -5,29 +5,17 @@
* A component to render the content type tab
*/
function umbContentTypeTabController(editorService) {
function umbContentTypeTabController() {
const vm = this;
vm.removePromptIsVisible = false;
vm.click = click;
vm.removeTab = removeTab;
vm.togglePrompt = togglePrompt;
vm.hidePrompt = hidePrompt;
vm.whenFocusName = whenFocusName;
vm.whenFocus = whenFocus;
vm.changeSortOrderValue = changeSortOrderValue;
vm.changeName = changeName;
function togglePrompt () {
vm.removePromptIsVisible = !vm.removePromptIsVisible;
}
function hidePrompt () {
vm.removePromptIsVisible = false;
}
function click () {
if (vm.onClick) {
vm.onClick({ tab: vm.tab });
@@ -37,7 +25,6 @@
function removeTab () {
if (vm.onRemove) {
vm.onRemove({ tab: vm.tab });
vm.removePromptIsVisible = false;
}
}

106
src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
View File

@@ -426,17 +426,40 @@
};
scope.removeTab = function (tab, indexInTabs) {
scope.model.groups.splice(tab.indexInGroups, 1);
$q.all([
localizationService.localize('contentTypeEditor_removeTabPromptTitle', [tab.name]),
localizationService.localize('contentTypeEditor_removeTabPromptContent', [tab.name])
]).then((localizations) => {
// remove all child groups
scope.model.groups = scope.model.groups.filter(group => group.parentKey !== tab.key);
const confirm = {
title: localizations[0],
view: "default",
content: localizations[1],
submitButtonLabelKey: "general_remove",
submitButtonStyle: "danger",
closeButtonLabelKey: "general_cancel",
submit: function () {
scope.model.groups.splice(tab.indexInGroups, 1);
// remove all child groups
scope.model.groups = scope.model.groups.filter(group => group.parentKey !== tab.key);
// we need a timeout because the filter hasn't updated the tabs collection
$timeout(() => {
scope.openTabKey = indexInTabs > 0 ? scope.tabs[indexInTabs - 1].key : scope.tabs[0].key;
});
scope.$broadcast('umbOverflowChecker.checkOverflow');
// we need a timeout because the filter hasn't updated the tabs collection
$timeout(() => {
scope.openTabKey = indexInTabs > 0 ? scope.tabs[indexInTabs - 1].key : scope.tabs[0].key;
overlayService.close();
},
close: function () {
overlayService.close();
}
};
overlayService.open(confirm);
});
scope.$broadcast('umbOverflowChecker.checkOverflow');
};
scope.canRemoveTab = function (tab) {
@@ -451,10 +474,6 @@
scope.tabs = $filter('orderBy')(scope.tabs, 'sortOrder');
};
scope.onChangeTabIcon = function (icon, color, tab) {
tab.icon = color ? icon + ' ' + color : icon;
};
scope.onChangeTabName = function () {
scope.$broadcast('umbOverflowChecker.checkOverflow');
};
@@ -562,9 +581,33 @@
return group.inherited !== true && _.find(group.properties, function (property) { return property.locked === true; }) == null;
};
scope.removeGroup = function (key) {
const index = scope.model.groups.findIndex(group => group.key === key);
scope.model.groups.splice(index, 1);
scope.removeGroup = function (selectedGroup) {
$q.all([
localizationService.localize('contentTypeEditor_removeGroupPromptTitle', [selectedGroup.name]),
localizationService.localize('contentTypeEditor_removeGroupPromptContent', [selectedGroup.name])
]).then((localizations) => {
const confirm = {
title: localizations[0],
view: "default",
content: localizations[1],
submitButtonLabelKey: "general_remove",
submitButtonStyle: "danger",
closeButtonLabelKey: "general_cancel",
submit: function () {
const index = scope.model.groups.findIndex(group => group.key === selectedGroup.key);
scope.model.groups.splice(index, 1);
overlayService.close();
},
close: function () {
overlayService.close();
}
};
overlayService.open(confirm);
});
};
scope.addGroupToActiveTab = function () {
@@ -725,10 +768,35 @@
}
};
scope.deleteProperty = function (properties, { id }) {
const index = properties.map(property => property.id).findIndex(propertyId => propertyId === id);
properties.splice(index, 1);
notifyChanged();
scope.deleteProperty = function (properties, { id, label }) {
$q.all([
localizationService.localize('contentTypeEditor_removePropertyPromptTitle', [label]),
localizationService.localize('contentTypeEditor_removePropertyPromptContent', [label])
]).then((localizations) => {
const confirm = {
title: localizations[0],
view: "default",
content: localizations[1],
submitButtonLabelKey: "general_remove",
submitButtonStyle: "danger",
closeButtonLabelKey: "general_cancel",
submit: function () {
const index = properties.findIndex(property => property.id === id);
properties.splice(index, 1);
notifyChanged();
overlayService.close();
},
close: function () {
overlayService.close();
}
};
overlayService.open(confirm);
});
};
scope.onChangePropertySortOrderValue = function (group) {

8
src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html
View File

@@ -50,13 +50,7 @@
</ng-form>
<div class="umb-group-builder__group-remove" ng-if="vm.allowRemove">
<i class="icon-trash" ng-click="vm.togglePrompt()"></i>
<umb-confirm-action
ng-if="vm.removePromptIsVisible"
direction="left"
on-confirm="vm.removeGroup()"
on-cancel="vm.hidePrompt()">
</umb-confirm-action>
<i class="icon-trash" ng-click="vm.removeGroup()"></i>
</div>
</div>

8
src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-property.html
View File

@@ -137,15 +137,9 @@
<!-- delete property -->
<div ng-if="!vm.property.locked" class="umb-group-builder__property-action">
<button aria-label="Delete property" class="btn-icon" ng-click="vm.togglePrompt()">
<button aria-label="Delete property" class="btn-icon" ng-click="vm.remove()">
<umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
</button>
<umb-confirm-action
ng-if="vm.removePromptIsVisible"
direction="left"
on-confirm="vm.remove()"
on-cancel="vm.hidePrompt()">
</umb-confirm-action>
</div>
</div>

8
src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html
View File

@@ -51,14 +51,8 @@
</div>
</div>
<div class="umb-group-builder__tab-remove" ng-if="vm.allowRemove">
<button type="button" class="btn-reset" ng-click="vm.togglePrompt()">
<button type="button" class="btn-reset" ng-click="vm.removeTab()">
<i class="icon-trash"></i>
</button>
<umb-confirm-action
ng-if="vm.removePromptIsVisible"
direction="left"
on-confirm="vm.removeTab()"
on-cancel="vm.hidePrompt()">
</umb-confirm-action>
</div>
</div>

3
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

@@ -19,7 +19,6 @@
on-remove="removeTab(tab, tabIndex)"
val-server-field-name="{{'Groups[' + tab.indexInGroups + '].Name'}}"
on-change-sort-order-value="onChangeTabSortOrderValue(tab)"
on-change-icon="onChangeTabIcon(icon, color, tab)"
on-change-name="onChangeTabName(name)">
</umb-content-type-tab>
</li>
@@ -116,7 +115,7 @@
allow-name="true"
group="group"
allow-remove="canRemoveGroup(group) && !sortingMode"
on-remove="removeGroup(group.key)"
on-remove="removeGroup(group)"
sorting="sortingMode"
val-server-field-name="{{'Groups[' + $index + '].Name'}}"
on-change-sort-order-value="onChangeGroupSortOrderValue(group)">

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

@@ -1754,6 +1754,12 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
<key alias="propertyHasChanges">You have made changes to this property. Are you sure you want to discard them?</key>
<key alias="displaySettingsHeadline">Appearance</key>
<key alias="displaySettingsLabelOnTop">Label above (full-width)</key>
<key alias="removeTabPromptTitle">Remove the tab "%0%?"</key>
<key alias="removeTabPromptContent">Are you sure you want to remove "%0%" and all groups and properties underneath?</key>
<key alias="removeGroupPromptTitle">Remove the group "%0%?"</key>
<key alias="removeGroupPromptContent">Are you sure you want to remove "%0%" and all properties underneath?</key>
<key alias="removePropertyPromptTitle">Remove the property "%0%"?</key>
<key alias="removePropertyPromptContent">Are you sure you want to remove "%0%"?</key>
</area>
<area alias="languages">
<key alias="addLanguage">Add language</key>