From 8d76028f7bd1467da8f6af697c6ccff4c18b3713 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 28 Oct 2020 14:18:58 +0100 Subject: [PATCH 1/7] Dim not-allowed tree items --- src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less index f967994c0f..435243e5f0 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less @@ -249,6 +249,7 @@ body.touch .umb-tree { > .umb-tree-item__inner > i.icon, > .umb-tree-item__inner > a { cursor: not-allowed; + opacity: 0.4; } } From 5375dbbe3aeb840106ba2b5b7e803e16cc41cc27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 28 Oct 2020 14:19:16 +0100 Subject: [PATCH 2/7] ability to add more actions --- .../infiniteeditors/treepicker/treepicker.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html index 4d43c2df51..522301d76f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html @@ -28,9 +28,8 @@ -
+
+ + + Date: Wed, 28 Oct 2020 14:19:42 +0100 Subject: [PATCH 3/7] use not-allowed for filters --- .../prevalue/blocklist.blockconfiguration.overlay.controller.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js index dac8f2c6ff..5839366cb3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js @@ -160,6 +160,7 @@ filter: function (i) { return !(i.name.indexOf(".html") !== -1); }, + filterCssClass: "not-allowed", select: function (node) { const filepath = decodeURIComponent(node.id.replace(/\+/g, " ")); block.view = "~/" + filepath; @@ -206,6 +207,7 @@ filter: function (i) { return !(i.name.indexOf(".css") !== -1); }, + filterCssClass: "not-allowed", select: function (node) { const filepath = decodeURIComponent(node.id.replace(/\+/g, " ")); block.stylesheet = "~/" + filepath; From 0a2393d48a9e26f2e54f03a693a91cf4419dbee5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 28 Oct 2020 14:20:05 +0100 Subject: [PATCH 4/7] use Tree for picking initial content Element Type --- ...blocklist.blockconfiguration.controller.js | 78 ++++++++++--------- 1 file changed, 40 insertions(+), 38 deletions(-) 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 ebdeebc549..327cfe1f66 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 @@ -16,7 +16,7 @@ } } - function BlockConfigurationController($scope, elementTypeResource, overlayService, localizationService, editorService, eventsService) { + function BlockConfigurationController($scope, elementTypeResource, overlayService, localizationService, editorService, eventsService, udiService) { var unsubscribe = []; @@ -95,47 +95,46 @@ } }; - vm.openAddDialog = function ($event, entry) { + vm.openAddDialog = function () { - //we have to add the 'alias' property to the objects, to meet the data requirements of itempicker. - var selectedItems = Utilities.copy($scope.model.value).forEach((obj) => { - var elementType = vm.getElementTypeByKey(obj.contentElementTypeKey); - if(elementType) { - obj.alias = elementType.alias; - return obj; - } - }); + localizationService.localize("blockEditor_headlineCreateBlock").then(function(localizedTitle) { - var availableItems = vm.getAvailableElementTypes() - - localizationService.localizeMany(["blockEditor_headlineCreateBlock", "blockEditor_labelcreateNewElementType"]).then(function(localized) { - - var elemTypeSelectorOverlay = { - view: "itempicker", - title: localized[0], - availableItems: availableItems, - selectedItems: selectedItems, - createNewItem: { - action: function() { - overlayService.close(); - vm.createElementTypeAndCallback(vm.addBlockFromElementTypeKey); - }, - icon: "icon-add", - name: localized[1] + const contentTypePicker = { + title: localizedTitle, + section: "settings", + treeAlias: "documentTypes", + entityType: "documentType", + isDialog: true, + 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 true; }, - position: "target", - event: $event, - size: availableItems.length < 7 ? "small" : "medium", - submit: function (overlay) { - vm.addBlockFromElementTypeKey(overlay.selectedItem.key); - overlayService.close(); + filterCssClass: "not-allowed", + select: function (node) { + vm.addBlockFromElementTypeKey(udiService.getKey(node.udi)); + editorService.close(); }, close: function () { - overlayService.close(); - } + editorService.close(); + }, + extraActions: [ + { + style: "primary", + labelKey: "blockEditor_labelcreateNewElementType", + action: function () { + editorService.close(); + vm.createElementTypeAndCallback(vm.addBlockFromElementTypeKey); + } + } + ] }; - - overlayService.open(elemTypeSelectorOverlay); + editorService.treePicker(contentTypePicker); }); }; @@ -160,7 +159,7 @@ vm.addBlockFromElementTypeKey = function(key) { - var entry = { + var blockType = { "contentElementTypeKey": key, "settingsElementTypeKey": null, "labelTemplate": "", @@ -172,7 +171,10 @@ "thumbnail": null }; - $scope.model.value.push(entry); + $scope.model.value.push(blockType); + + vm.openBlockOverlay(blockType); + }; From 1f5c61fe6732780d9e101ee333f3721a967f36d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 28 Oct 2020 14:20:18 +0100 Subject: [PATCH 5/7] New text as UI has changed --- src/Umbraco.Web.UI/Umbraco/config/lang/da.xml | 4 ++-- src/Umbraco.Web.UI/Umbraco/config/lang/en.xml | 4 ++-- src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml index cc728e3640..69fa48d73c 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml @@ -1824,12 +1824,12 @@ Mange hilsner fra Umbraco robotten Åben egenskabshandlinger - Opret ny blok + Vælg Element-Type Tilføj en indstillings afsnit Tilføj visning Tilføj stylesheet Vælg billede - Opret ny + Opret ny Element-Type Overskriv stylesheet Tilføj stylesheet Redigerings udseende diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml index 3cacea1674..2cd1c8bc5b 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml @@ -2454,12 +2454,12 @@ To manage your website, simply open the Umbraco back office and start adding con 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! - Create new block + Pick Element Type Attach a settings section Select view Select stylesheet Choose thumbnail - Create new + Create new Element Type Custom stylesheet Add stylesheet Editor apperance diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml index b86424a68d..d415030a8c 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml @@ -2476,12 +2476,12 @@ To manage your website, simply open the Umbraco back office and start adding con 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! - Create new block + Pick Element Type Attach a settings section Select view Select stylesheet Choose thumbnail - Create new + Create new Element Type Custom stylesheet Add stylesheet Editor apperance From e145a4cf1fb496a70ff31d0983a284ebc5c9d8cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 2 Nov 2020 09:05:37 +0100 Subject: [PATCH 6/7] implement widely on BlockList Prevalue Editor --- ...blocklist.blockconfiguration.controller.js | 9 ++- ...t.blockconfiguration.overlay.controller.js | 61 +++++++++++-------- src/Umbraco.Web.UI/Umbraco/config/lang/da.xml | 2 +- src/Umbraco.Web.UI/Umbraco/config/lang/en.xml | 2 +- .../Umbraco/config/lang/en_us.xml | 2 +- 5 files changed, 46 insertions(+), 30 deletions(-) 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 327cfe1f66..c29ed19b85 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 @@ -128,8 +128,12 @@ style: "primary", labelKey: "blockEditor_labelcreateNewElementType", action: function () { - editorService.close(); - vm.createElementTypeAndCallback(vm.addBlockFromElementTypeKey); + vm.createElementTypeAndCallback((documentTypeKey) => { + vm.addBlockFromElementTypeKey(documentTypeKey); + + // At this point we will close the contentTypePicker. + editorService.close(); + }); } } ] @@ -144,6 +148,7 @@ create: true, infiniteMode: true, isElement: true, + noTemplate: true, submit: function (model) { loadElementTypes().then( function () { callback(model.documentTypeKey); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js index 5839366cb3..fb49e11aa9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js @@ -10,7 +10,7 @@ (function () { "use strict"; - function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService) { + function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService, udiService) { var unsubscribe = []; @@ -56,6 +56,7 @@ create: true, infiniteMode: true, isElement: true, + noTemplate: true, submit: function (model) { callback(model.documentTypeKey); editorService.close(); @@ -69,35 +70,45 @@ vm.addSettingsForBlock = function($event, block) { - localizationService.localizeMany(["blockEditor_headlineAddSettingsElementType", "blockEditor_labelcreateNewElementType"]).then(function(localized) { + localizationService.localize("blockEditor_headlineAddSettingsElementType").then(function(localizedTitle) { - var elemTypeSelectorOverlay = { - view: "itempicker", - title: localized[0], - availableItems: vm.elementTypes, - position: "target", - event: $event, - size: vm.elementTypes.length < 7 ? "small" : "medium", - createNewItem: { - action: function() { - overlayService.close(); - vm.createElementTypeAndCallback((key) => { - vm.applySettingsToBlock(block, key); - }); - }, - icon: "icon-add", - name: localized[1] + const settingsTypePicker = { + title: localizedTitle, + section: "settings", + treeAlias: "documentTypes", + entityType: "documentType", + isDialog: true, + filter: function (node) { + if (node.metaData.isElement === true) { + return false; + } + return true; }, - submit: function (overlay) { - vm.applySettingsToBlock(block, overlay.selectedItem.key); - overlayService.close(); + filterCssClass: "not-allowed", + select: function (node) { + vm.applySettingsToBlock(block, udiService.getKey(node.udi)); + editorService.close(); }, close: function () { - overlayService.close(); - } - }; + editorService.close(); + }, + extraActions: [ + { + style: "primary", + labelKey: "blockEditor_labelcreateNewElementType", + action: function () { + vm.createElementTypeAndCallback((key) => { + vm.applySettingsToBlock(block, key); + + // At this point we will close the contentTypePicker. + editorService.close(); + }); + } + } + ] + }; + editorService.treePicker(settingsTypePicker); - overlayService.open(elemTypeSelectorOverlay); }); }; diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml index 69fa48d73c..6851139936 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml @@ -1825,7 +1825,7 @@ Mange hilsner fra Umbraco robotten Vælg Element-Type - Tilføj en indstillings afsnit + Tilføj en indstillings Element-Type Tilføj visning Tilføj stylesheet Vælg billede diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml index 2cd1c8bc5b..b319b4d7bf 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml @@ -2455,7 +2455,7 @@ To manage your website, simply open the Umbraco back office and start adding con Pick Element Type - Attach a settings section + Attach a settings Element Type Select view Select stylesheet Choose thumbnail diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml index d415030a8c..3ed755a6bd 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml @@ -2477,7 +2477,7 @@ To manage your website, simply open the Umbraco back office and start adding con Pick Element Type - Attach a settings section + Attach a settings Element Type Select view Select stylesheet Choose thumbnail From aa060514187428d5e53ec1a3c29f507d98f38752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 2 Nov 2020 15:16:25 +0100 Subject: [PATCH 7/7] Update da.xml --- src/Umbraco.Web.UI/Umbraco/config/lang/da.xml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml index 6851139936..f73bd0c88a 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml @@ -1824,12 +1824,12 @@ Mange hilsner fra Umbraco robotten Åben egenskabshandlinger - Vælg Element-Type - Tilføj en indstillings Element-Type + Vælg elementtype + Tilføj en indstillings elementtype Tilføj visning Tilføj stylesheet Vælg billede - Opret ny Element-Type + Opret ny elementtype Overskriv stylesheet Tilføj stylesheet Redigerings udseende