improved actions for block list

This commit is contained in:
Niels Lyngsø
2020-02-14 14:29:12 +01:00
parent b2c20864ea
commit 74dfe8d08e
5 changed files with 112 additions and 31 deletions
@@ -41,11 +41,28 @@
function loadElementTypes() {
return elementTypeResource.getAll().then(function (elementTypes) {
vm.elementTypes = elementTypes;
console.log("vm.elementTypes:", vm.elementTypes)
evaluateStatus();
});
}
vm.requestRemoveEntryByIndex = function (index) {
localizationService.localizeMany(["general_delete", "blockEditor_confirmDeleteBlockMessage", "blockEditor_confirmDeleteBlockNotice"]).then(function (data) {
var contentElementType = vm.getElementTypeByAlias($scope.model.value[index].elementTypeAlias);
overlayService.confirmDelete({
title: data[0],
content: localizationService.tokenReplace(data[1], [contentElementType.name]),
confirmMessage: data[2],
close: function () {
overlayService.close();
},
submit: function () {
vm.removeEntryByIndex(index);
overlayService.close();
}
});
});
}
vm.removeEntryByIndex = function (index) {
$scope.model.value.splice(index, 1);
};
@@ -141,11 +158,29 @@
$scope.model.value.push(entry);
};
vm.requestRemoveSettingsForEntry = function(entry) {
localizationService.localizeMany(["general_remove", "defaultdialogs_confirmremoveusageof"]).then(function (data) {
var settingsElementType = vm.getElementTypeByAlias(entry.settingsElementTypeAlias);
overlayService.confirmRemove({
title: data[0],
content: localizationService.tokenReplace(data[1], [settingsElementType.name]),
close: function () {
overlayService.close();
},
submit: function () {
vm.removeSettingsForEntry(entry);
overlayService.close();
}
});
});
};
vm.removeSettingsForEntry = function(entry) {
entry.settingsElementTypeAlias = null;
};
vm.openPickSettingsDialog = function ($event, entry) {
vm.addSettingsForEntry = function ($event, entry) {
var elemTypeSelectorOverlay = {
view: "itempicker",
@@ -194,6 +229,21 @@
editorService.documentTypeEditor(editor);
}
vm.requestRemoveViewForEntry = function(entry) {
localizationService.localizeMany(["general_remove", "defaultdialogs_confirmremoveusageof"]).then(function (data) {
overlayService.confirmRemove({
title: data[0],
content: localizationService.tokenReplace(data[1], [entry.view]),
close: function () {
overlayService.close();
},
submit: function () {
vm.removeViewForEntry(entry);
overlayService.close();
}
});
});
};
vm.removeViewForEntry = function(entry) {
entry.view = null;
};
@@ -201,8 +251,8 @@
const viewPicker = {
title: "Pick view (TODO need translation)",
section: "settings",
treeAlias: "partialView",
entityType: "partialView",
treeAlias: "templates",
entityType: "template",
onlyInitialized: false,
filter: function (i) {
if (i.name.indexOf(".cshtml") === -1 && i.name.indexOf(".vbhtml") === -1) {
@@ -26,9 +26,11 @@
<div class="umb-table-cell not-fixed umb-table__name">
{{ contentPreview = vm.getElementTypeByAlias(entry.elementTypeAlias); "" }}
<umb-node-preview icon="contentPreview.icon" name="contentPreview.name"></umb-node-preview>
<button type="button" class="btn-reset cell-btn --open umb-outline" ng-click="vm.openElementType(entry.elementTypeAlias)">
<i class="icon icon-edit"></i>
</button>
<div class="cell-actions">
<button type="button" class="btn-reset cell-actions-btn --open umb-outline" ng-click="vm.openElementType(entry.elementTypeAlias)">
<i class="icon icon-edit"></i>
</button>
</div>
</div>
<div class="umb-table-cell">
<input type="text" ng-model="entry.labelTemplate" class="text-input"/>
@@ -37,10 +39,11 @@
<div class="settings-input --hasValue" ng-if="entry.view !== null" >
<umb-node-preview icon="'icon-document'" name="entry.view"></umb-node-preview>
<button type="button" class="btn-reset cell-btn --remove umb-outline" ng-click="vm.removeViewForEntry(entry)">
<i class="icon icon-wrong"></i>
</button>
<div class="cell-actions">
<button type="button" class="btn-reset cell-actions-btn --remove umb-outline" ng-click="vm.requestRemoveViewForEntry(entry)">
<i class="icon icon-wrong"></i>
</button>
</div>
</div>
<button type="button" class="btn-reset settings-input --noValue umb-outline" ng-if="entry.view === null" ng-click="vm.addViewForEntry(entry)">
<localize key="blockEditor_addCustomView">Add custom view</localize>
@@ -50,20 +53,21 @@
<div class="settings-input --hasValue" ng-if="entry.settingsElementTypeAlias !== null" >
{{ settingsPreview = vm.getElementTypeByAlias(entry.settingsElementTypeAlias); "" }}
<umb-node-preview icon="settingsPreview.icon" name="settingsPreview.name"></umb-node-preview>
<button type="button" class="btn-reset cell-btn --open umb-outline" ng-click="vm.openElementType(entry.settingsElementTypeAlias)">
<i class="icon icon-edit"></i>
</button>
<button type="button" class="btn-reset cell-btn --remove umb-outline" ng-click="vm.removeSettingsForEntry(entry)">
<i class="icon icon-wrong"></i>
</button>
<div class="cell-actions">
<button type="button" class="btn-reset cell-actions-btn --open umb-outline" ng-click="vm.openElementType(entry.settingsElementTypeAlias)">
<i class="icon icon-edit"></i>
</button>
<button type="button" class="btn-reset cell-actions-btn --remove umb-outline" ng-click="vm.requestRemoveSettingsForEntry(entry)">
<i class="icon icon-wrong"></i>
</button>
</div>
</div>
<button type="button" class="btn-reset settings-input --noValue umb-outline" ng-if="entry.settingsElementTypeAlias === null" ng-click="vm.openPickSettingsDialog($event, entry)">
<button type="button" class="btn-reset settings-input --noValue umb-outline" ng-if="entry.settingsElementTypeAlias === null" ng-click="vm.addSettingsForEntry($event, entry)">
<localize key="blockEditor_addSettingsElementType">Add settings</localize>
</button>
</div>
<div class="umb-table-cell action-cell --noOverflow">
<button type="button" class="btn-icon umb-outline" ng-click="vm.removeEntryByIndex($index)">
<button type="button" class="btn-icon umb-outline" ng-click="vm.requestRemoveEntryByIndex($index)">
<i class="icon icon-trash" aria-hidden="true"></i>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
@@ -40,9 +40,26 @@
flex-grow: 1;
}
.cell-btn {
position: relative;
.cell-actions {
position: absolute;
display: flex;
align-items: center;
top:0;
bottom: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.8);
opacity: 0;
transition: opacity 120ms;
}
.umb-table-cell:hover,
.umb-table-cell:focus,
.umb-table-cell:focus-within {
.cell-actions {
opacity: 1;
}
}
.cell-actions-btn {
position: relative;
color: @ui-action-discreet-type;
height: 30px;
width: 26px;
@@ -54,12 +71,9 @@
margin-right: 7px;
}
}
.umb-table-cell:hover,
.umb-table-cell:focus,
.umb-table-cell:focus-within {
.cell-btn {
opacity: 1;
}
.umb-node-preview {
border-bottom: none;
}
.settings-input {
@@ -30,6 +30,7 @@
<key alias="unpublish">Unpublish</key>
<key alias="refreshNode">Reload</key>
<key alias="republish">Republish entire site</key>
<key alias="remove">Remove</key>
<key alias="rename" version="7.3.0">Rename</key>
<key alias="restore" version="7.3.0">Restore</key>
<key alias="SetPermissionsForThePage">Set permissions for the page %0%</key>
@@ -414,7 +415,11 @@
<key alias="assignDomain">Manage hostnames</key>
<key alias="closeThisWindow">Close this window</key>
<key alias="confirmdelete">Are you sure you want to delete</key>
<key alias="confirmdeleteXofX">Are you sure you want to delete %0% based on %1%</key>
<key alias="confirmdisable">Are you sure you want to disable</key>
<key alias="confirmremove">Are you sure you want to remove</key>
<key alias="confirmremoveusageof"><![CDATA[Are you sure you want to remove the usage of <b>%0%</b>]]></key>
<key alias="confirmremovereferenceto"><![CDATA[Are you sure you want to remove the reference to <b>%0%</b>]]></key>
<key alias="confirmlogout">Are you sure?</key>
<key alias="confirmSure">Are you sure?</key>
<key alias="cut">Cut</key>
@@ -1846,7 +1851,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="resetPassword">Reset password</key>
<key alias="passwordChanged">Your password has been changed!</key>
<key alias="passwordChangedGeneric">Password changed</key>
<key alias="passwordConfirm">Please confirm the new password</key>
<key alias="passwordConfirm">Please confirm the new password</key>
<key alias="passwordEnterNew">Enter your new password</key>
<key alias="passwordIsBlank">Your new password cannot be blank!</key>
<key alias="passwordCurrent">Current password</key>
@@ -2388,7 +2393,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<area alias="startupDashboard">
<key alias="fallbackHeadline">Welcome to The Friendly CMS</key>
<key alias="fallbackDescription">Thank you for choosing Umbraco - we think this could be the beginning of something beautiful. While it may feel overwhelming at first, we've done a lot to make the learning curve as smooth and fast as possible.</key>
</area>
</area>
<area alias="formsDashboard">
<key alias="formsHeadline">Umbraco Forms</key>
<key alias="formsDescription">Create forms using an intuitive drag and drop interface. From simple contact forms that sends e-mails to advanced questionaires that integrate with CRM systems. Your clients will love it!</key>
@@ -2401,5 +2406,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="addCustomView">Add custom view</key>
<key alias="addSettingsElementType">Add settings</key>
<key alias="labelTemplatePlaceholder">Overwrite label template</key>
<key alias="confirmDeleteBlockMessage"><![CDATA[Are you sure you want to delete block of <strong>%0%</strong>.]]></key>
<key alias="confirmDeleteBlockNotice">Content using this block will be lost.</key>
</area>
</language>
@@ -30,6 +30,7 @@
<key alias="unpublish">Unpublish</key>
<key alias="refreshNode">Reload</key>
<key alias="republish">Republish entire site</key>
<key alias="remove">Remove</key>
<key alias="rename" version="7.3.0">Rename</key>
<key alias="restore" version="7.3.0">Restore</key>
<key alias="SetPermissionsForThePage">Set permissions for the page %0%</key>
@@ -418,6 +419,9 @@
<key alias="closeThisWindow">Close this window</key>
<key alias="confirmdelete">Are you sure you want to delete</key>
<key alias="confirmdisable">Are you sure you want to disable</key>
<key alias="confirmremove">Are you sure you want to remove</key>
<key alias="confirmremoveusageof"><![CDATA[Are you sure you want to remove the usage of <b>%0%</b>]]></key>
<key alias="confirmremovereferenceto"><![CDATA[Are you sure you want to remove the reference to <b>%0%</b>]]></key>
<key alias="confirmlogout">Are you sure?</key>
<key alias="confirmSure">Are you sure?</key>
<key alias="cut">Cut</key>
@@ -2400,7 +2404,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<area alias="startupDashboard">
<key alias="fallbackHeadline">Welcome to The Friendly CMS</key>
<key alias="fallbackDescription">Thank you for choosing Umbraco - we think this could be the beginning of something beautiful. While it may feel overwhelming at first, we've done a lot to make the learning curve as smooth and fast as possible.</key>
</area>
</area>
<area alias="formsDashboard">
<key alias="formsHeadline">Umbraco Forms</key>
<key alias="formsDescription">Create forms using an intuitive drag and drop interface. From simple contact forms that sends e-mails to advanced questionaires that integrate with CRM systems. Your clients will love it!</key>
@@ -2413,5 +2417,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="addCustomView">Add custom view</key>
<key alias="addSettingsElementType">Add settings</key>
<key alias="labelTemplatePlaceholder">Overwrite label template</key>
<key alias="confirmDeleteBlockMessage"><![CDATA[Are you sure you want to delete block of <strong>%0%</strong>.]]></key>
<key alias="confirmDeleteBlockNotice">Content using this block will be lost.</key>
</area>
</language>