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

Show nicer overlay when clicking block card for deleted element type (#12140)

Browse Source 
* Show nicer overlay when clicking block card for deleted element type

* Cleanup

* Remove stop-scrolling container

* Use flex-start instead on start

* Remove legacy flexbox fallback

* Remove unnecessary hack

* Use standard gap property instead

* Localization of message

* Fix translation

* End sentence with a dot

(cherry picked from commit ebb1dc21a9)
This commit is contained in:
Bjarne Fyrstenborg
2022-05-11 00:51:37 +02:00
committed by Sebastiaan Janssen
parent 3856bf8288
commit 4fdbfee597
12 changed files with 101 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
View File

@@ -165,13 +165,11 @@ When building a custom infinite editor view you can use the same components as a
function editorService(eventsService, keyboardService, $timeout) {
let editorsKeyboardShorcuts = [];
var editors = [];
var isEnabled = true;
var lastElementInFocus = null;
// events for backdrop
eventsService.on("appState.backdrop", function (name, args) {
if (args.show === true) {

2
src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js
View File

@@ -10,7 +10,7 @@
function overlayService(eventsService, backdropService, focusLockService) {
var currentOverlay = null;
let currentOverlay = null;
/**
* @ngdoc method

12
src/Umbraco.Web.UI.Client/src/less/components/editor.less
View File

@@ -202,17 +202,13 @@ input.umb-editor-header__name-input:disabled {
bottom: 0;
}
.umb-editor-container.-stop-scrolling {
overflow: hidden;
}
.umb-editor-actions{
.umb-editor-actions {
list-style: none;
margin: 0; padding: 0;
}
.umb-editor-actions li{
display: inline-block;
li {
display: inline-block;
}
}
// editor footer

26
src/Umbraco.Web.UI.Client/src/less/navs.less
View File

@@ -266,19 +266,19 @@
.dropdown-menu > li > button {
position: relative;
background: transparent;
border: 0;
padding: 8px 20px;
color: @ui-option-type;
display: flex;
justify-content: start;
clear: both;
font-weight: normal;
line-height: 20px;
white-space: nowrap;
cursor:pointer;
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 8px 20px;
color: @ui-option-type;
display: flex;
justify-content: flex-start;
clear: both;
font-weight: normal;
line-height: 20px;
white-space: nowrap;
cursor:pointer;
width: 100%;
text-align: left;
}
.dropdown-menu > li > a:hover,

11
src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card-grid.less
View File

@@ -1,15 +1,6 @@
.umb-block-card-grid {
/* FlexBox Fallback */
display: flex;
flex-wrap: wrap;
> * {
flex: 1 1 240px;
}
/* Grid Setup */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(160px, auto);
grid-gap: 20px;
gap: 20px;
}

2
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html
View File

@@ -1,4 +1,4 @@
<div data-element="editor-container" class="umb-editor-container umb-panel-body umb-scrollable row-fluid" ng-class="{'-stop-scrolling': numberOfOverlays > 0}">
<div data-element="editor-container" class="umb-editor-container umb-panel-body umb-scrollable row-fluid">
<!--This must be contained within a div else transclusion doesn't work when this is loaded dynamically :/ -->
<div>

124
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
View File

@@ -20,7 +20,7 @@
var unsubscribe = [];
var vm = this;
const vm = this;
vm.openBlock = null;
function onInit() {
@@ -30,11 +30,10 @@
}
loadElementTypes();
}
function loadElementTypes() {
return elementTypeResource.getAll().then(function (elementTypes) {
return elementTypeResource.getAll().then(elementTypes => {
vm.elementTypes = elementTypes;
});
}
@@ -47,24 +46,32 @@
}
}
}
unsubscribe.push(eventsService.on("editors.documentType.saved", updateUsedElementTypes));
vm.requestRemoveBlockByIndex = function (index) {
localizationService.localizeMany(["general_delete", "blockEditor_confirmDeleteBlockTypeMessage", "blockEditor_confirmDeleteBlockTypeNotice"]).then(function (data) {
vm.requestRemoveBlockByIndex = function (index, event) {
const labelKeys = [
"general_delete",
"blockEditor_confirmDeleteBlockTypeMessage",
"blockEditor_confirmDeleteBlockTypeNotice"
];
localizationService.localizeMany(labelKeys).then(data => {
var contentElementType = vm.getElementTypeByKey($scope.model.value[index].contentElementTypeKey);
overlayService.confirmDelete({
title: data[0],
content: localizationService.tokenReplace(data[1], [contentElementType ? contentElementType.name : "(Unavailable ElementType)"]),
confirmMessage: data[2],
close: function () {
overlayService.close();
},
submit: function () {
submit: () => {
vm.removeBlockByIndex(index);
overlayService.close();
}
},
close: overlayService.close()
});
});
event.stopPropagation();
}
vm.removeBlockByIndex = function (index) {
@@ -78,7 +85,6 @@
placeholder: 'umb-block-card --sortable-placeholder'
};
vm.getAvailableElementTypes = function () {
return vm.elementTypes.filter(function (type) {
return !$scope.model.value.find(function (entry) {
@@ -89,15 +95,13 @@
vm.getElementTypeByKey = function(key) {
if (vm.elementTypes) {
return vm.elementTypes.find(function (type) {
return type.key === key;
}) || null;
return vm.elementTypes.find(type => type.key === key) || null;
}
};
vm.openAddDialog = function () {
localizationService.localize("blockEditor_headlineCreateBlock").then(function(localizedTitle) {
localizationService.localize("blockEditor_headlineCreateBlock").then(localizedTitle => {
const contentTypePicker = {
title: localizedTitle,
@@ -108,10 +112,9 @@
filter: function (node) {
if (node.metaData.isElement === true) {
var key = udiService.getKey(node.udi);
// If a Block with this ElementType as content already exists, we will emit it as a posible option.
return $scope.model.value.find(function (entry) {
return key === entry.contentElementTypeKey;
});
return $scope.model.value.find(entry => entry.contentElementTypeKey === key);
}
return true;
},
@@ -138,8 +141,8 @@
}
]
};
editorService.treePicker(contentTypePicker);
});
};
@@ -151,9 +154,10 @@
isElement: true,
noTemplate: true,
submit: function (model) {
loadElementTypes().then( function () {
loadElementTypes().then(() => {
callback(model.documentTypeKey);
});
editorService.close();
},
close: function () {
@@ -165,60 +169,66 @@
vm.addBlockFromElementTypeKey = function(key) {
var blockType = {
"contentElementTypeKey": key,
"settingsElementTypeKey": null,
"labelTemplate": "",
"view": null,
"stylesheet": null,
"editorSize": "medium",
"iconColor": null,
"backgroundColor": null,
"thumbnail": null
const blockType = {
contentElementTypeKey: key,
settingsElementTypeKey: null,
labelTemplate: "",
view: null,
stylesheet: null,
editorSize: "medium",
iconColor: null,
backgroundColor: null,
thumbnail: null
};
$scope.model.value.push(blockType);
vm.openBlockOverlay(blockType);
};
vm.openBlockOverlay = function (block) {
var elementType = vm.getElementTypeByKey(block.contentElementTypeKey);
if(elementType) {
localizationService.localize("blockEditor_blockConfigurationOverlayTitle", [elementType.name]).then(function (data) {
if (elementType) {
let clonedBlockData = Utilities.copy(block);
vm.openBlock = block;
var clonedBlockData = Utilities.copy(block);
vm.openBlock = block;
var overlayModel = {
block: clonedBlockData,
title: data,
view: "views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html",
size: "small",
submit: function(overlayModel) {
loadElementTypes()// lets load elementType again, to ensure we are up to date.
TransferProperties(overlayModel.block, block);// transfer properties back to block object. (Doing this cause we dont know if block object is added to model jet, therefor we cant use index or replace the object.)
overlayModel.close();
},
close: function() {
editorService.close();
vm.openBlock = null;
}
};
const overlayModel = {
block: clonedBlockData,
view: "views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html",
size: "small",
submit: function(overlayModel) {
loadElementTypes()// lets load elementType again, to ensure we are up to date.
TransferProperties(overlayModel.block, block);// transfer properties back to block object. (Doing this cause we dont know if block object is added to model jet, therefor we cant use index or replace the object.)
overlayModel.close();
},
close: function() {
editorService.close();
vm.openBlock = null;
}
};
localizationService.localize("blockEditor_blockConfigurationOverlayTitle", [elementType.name]).then(data => {
overlayModel.title = data,
// open property settings editor
editorService.open(overlayModel);
});
} else {
alert("Cannot be edited cause ElementType does not exist.");
const overlay = {
close: () => {
overlayService.close()
}
};
localizationService.localize("blockEditor_elementTypeDoesNotExist").then(data => {
overlay.content = data;
overlayService.open(overlay);
});
}
};

6
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html
View File

@@ -1,7 +1,7 @@
<div class="umb-block-list-block-configuration" ng-controller="Umbraco.PropertyEditors.BlockList.BlockConfigurationController as vm">
<div class="umb-block-card-grid" ui-sortable="vm.sortableOptions" ng-model="model.value">
<umb-block-card
block-config-model="block"
element-type-model="vm.getElementTypeByKey(block.contentElementTypeKey)"
@@ -9,14 +9,14 @@
ng-class="{'--isOpen':vm.openBlock === block}"
ng-click="vm.openBlockOverlay(block)">
<div class="__actions">
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index); $event.stopPropagation();">
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
</div>
</umb-block-card>
<button id="{{model.alias}}" type="button" class="btn-reset __add-button" ng-click="vm.openAddDialog($event)">
<button type="button" id="{{model.alias}}" class="btn-reset __add-button" ng-click="vm.openAddDialog($event)">
<localize key="general_add">Add</localize>
</button>
</div>

10
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.less
View File

@@ -18,11 +18,11 @@
padding: 5px 15px;
box-sizing: border-box;
font-weight: bold;
}
.__add-button:hover {
color: @ui-action-discreet-type-hover;
border-color: @ui-action-discreet-border-hover;
&:hover {
color: @ui-action-discreet-type-hover;
border-color: @ui-action-discreet-border-hover;
}
}
}