From 4fdbfee5973c09c9678d3f13f2ecadb83cd0ff27 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 11 May 2022 00:51:37 +0200 Subject: [PATCH] Show nicer overlay when clicking block card for deleted element type (#12140) * 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 ebb1dc21a91e08ad994bdd46ab2dd89ed0de3632) --- .../EmbeddedResources/Lang/da.xml | 7 +- .../EmbeddedResources/Lang/en.xml | 1 + .../EmbeddedResources/Lang/en_us.xml | 1 + .../src/common/services/editor.service.js | 2 - .../src/common/services/overlay.service.js | 2 +- .../src/less/components/editor.less | 12 +- src/Umbraco.Web.UI.Client/src/less/navs.less | 26 ++-- .../blockcard/umb-block-card-grid.less | 11 +- .../editor/umb-editor-container.html | 2 +- ...blocklist.blockconfiguration.controller.js | 124 ++++++++++-------- .../blocklist.blockconfiguration.html | 6 +- .../blocklist.blockconfiguration.less | 10 +- 12 files changed, 101 insertions(+), 103 deletions(-) diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml index ea28892f49..8717ba3bb0 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml @@ -2181,18 +2181,19 @@ Mange hilsner fra Umbraco robotten være muligt. Indholdet vil blive vist som ikke understøttet indhold. + Kan ikke redigeres fordi elementtypen ikke eksisterer. Billede Tilføj billede Opret ny Udklipsholder Indstillinger Avanceret - Skjuld indholds editoren + Skjul indholdseditoren Du har lavet ændringer til dette indhold. Er du sikker på at du vil kassere dem? Annuller oprettelse? - Error! - The ElementType of this block does not exist anymore + Fejl! + Elementtypen for denne blok eksisterer ikke længere Tilføj indhold Tilføj %0% Feltet %0% bruger editor %1% som ikke er supporteret for blokke. diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml index 1b93cacf01..1b7bcbf2d0 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml @@ -2714,6 +2714,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont will no longer be available and will be shown as unsupported content. + Cannot be edited cause ElementType does not exist. Thumbnail Add thumbnail Create empty diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml index b1dd754861..7ebce617b5 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml @@ -2802,6 +2802,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont will no longer be available and will be shown as unsupported content. + Cannot be edited cause ElementType does not exist. Thumbnail Add thumbnail Create empty diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js index b146f471e0..cb95e60e29 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js @@ -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) { diff --git a/src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js b/src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js index 113b26d74c..6e05712ad2 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js @@ -10,7 +10,7 @@ function overlayService(eventsService, backdropService, focusLockService) { - var currentOverlay = null; + let currentOverlay = null; /** * @ngdoc method diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less index 4f71fe46da..211e4d4f34 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -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 diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less index 3d5f5e40f5..db18d3f9d2 100644 --- a/src/Umbraco.Web.UI.Client/src/less/navs.less +++ b/src/Umbraco.Web.UI.Client/src/less/navs.less @@ -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, diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card-grid.less b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card-grid.less index 58794461df..470eb3173d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card-grid.less +++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card-grid.less @@ -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; } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html index 9e675b15ba..aa1765f365 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js index 5e73755593..f0b89a095f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js @@ -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); + }); } }; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html index de6a409415..3172219434 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html @@ -1,7 +1,7 @@
- +
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.less index 878f6a8ef8..afb4316ce8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.less +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.less @@ -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; + } } }