From 8d8fb2d15c087943a5b5fb5bb8da7d42f48e550a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 12 Apr 2021 12:27:12 +0200 Subject: [PATCH] =?UTF-8?q?Dont=20show=20block=20catalogue=20if=20only=20o?= =?UTF-8?q?ne=20block=20is=20available.=20Enable=20ente=E2=80=A6=20(#9575)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Dont show block catalogue if only one block is available. Enable entering clipboard directly. * corrected button states * jump clipboard icon when adding items to the clipboard. * fix merge issue * add missing eventsService * correcting missing parts from Merge Co-authored-by: Niels Lyngsø Co-authored-by: Mads Rasmussen --- .../blockpicker/blockpicker.controller.js | 11 +- .../umb-block-list-property-editor.html | 32 +++-- .../umb-block-list-property-editor.less | 110 ++++++++++++++---- .../umbBlockListPropertyEditor.component.js | 97 ++++++++++++--- src/Umbraco.Web.UI/Umbraco/config/lang/da.xml | 3 + src/Umbraco.Web.UI/Umbraco/config/lang/en.xml | 2 + .../Umbraco/config/lang/en_us.xml | 2 + 7 files changed, 207 insertions(+), 50 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.controller.js index 90803a3765..5e6613c0f4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.controller.js @@ -17,7 +17,6 @@ angular.module("umbraco") "alias": "empty", "name": data[0], "icon": "icon-add", - "active": true, "view": "" }, { @@ -28,10 +27,16 @@ angular.module("umbraco") "disabled": vm.model.clipboardItems.length === 0 }]; - vm.activeTab = vm.navigation[0]; + if (vm.model.openClipboard === true) { + vm.activeTab = vm.navigation[1]; + } else { + vm.activeTab = vm.navigation[0]; + } + + vm.activeTab.active = true; } ); - + vm.onNavigationChanged = function (tab) { vm.activeTab.active = false; vm.activeTab = tab; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html index 9726daf5e6..87c0026d56 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html @@ -10,7 +10,7 @@ + + class="btn-reset umb-block-list__clipboard-button umb-outline" + ng-class="{'--jump': vm.jumpClipboardButton}" + ng-disabled="vm.clipboardItems.length === 0" + ng-click="vm.requestShowClipboard(vm.layout.length, $event)" + localize="title" + title="@blockEditor_tabClipboard"> + + + Clipboard + + + diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less index e290c6e856..019a772fdd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less @@ -236,30 +236,98 @@ ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-blo } } } -.umb-block-list__create-button { - position: relative; + +.umb-block-list__actions { display: flex; - width: 100%; - align-items: center; - justify-content: center; + border: 1px dashed @ui-action-discreet-border; - color: @ui-action-discreet-type; - font-weight: bold; - margin: 2px 0; - padding: 5px 15px; - box-sizing: border-box; border-radius: @baseBorderRadius; -} + box-sizing: border-box; -.umb-block-list__create-button:hover { - color: @ui-action-discreet-type-hover; - border-color: @ui-action-discreet-border-hover; - text-decoration: none; -} + &:hover { + border-color: transparent; + > button { -.umb-block-list__create-button.--disabled, -.umb-block-list__create-button.--disabled:hover { - color: @gray-7; - border-color: @gray-7; - cursor: default; + border-color: @ui-action-discreet-border; + + &.umb-block-list__clipboard-button { + opacity: 1; + } + } + + } + + > button { + position: relative; + display: flex; + //width: 100%; + align-items: center; + justify-content: center; + + color: @ui-action-discreet-type; + font-weight: bold; + margin: -1px; + padding: 5px 15px; + + border: 1px dashed transparent; + border-radius: @baseBorderRadius; + box-sizing: border-box; + + &:hover { + color: @ui-action-discreet-type-hover; + border-color: @ui-action-discreet-border-hover; + text-decoration: none; + z-index: 1; + } + + &[disabled], + &[disabled]:hover { + color: @gray-7; + border-color: @gray-7; + cursor: default; + } + + &.umb-block-list__create-button { + flex-grow: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &.umb-block-list__clipboard-button { + margin-left: 0; + padding: 5px 12px; + font-size: 18px;// Align with block action buttons. + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + opacity: 0; + &:hover, &:focus { + opacity: 1; + } + + &.--jump { + + @keyframes umb-block-list__jump-clipboard-button { + 0% { opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { opacity: 0; } + } + animation: umb-block-list__jump-clipboard-button 2s; + + i{ + @keyframes umb-block-list__jump-clipboard-button-i { + 10% { transform: scale(1); } + 10% { transform: scale(1.33); } + 20% { transform: scale(.82); } + 30% { transform: scale(1.24); } + 40% { transform: scale(.94); } + 50% { transform: scale(1); } + } + animation: umb-block-list__jump-clipboard-button-i 2s; + } + } + + } + } } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js index 613e6a8c6a..2d9b13ec7a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js @@ -28,7 +28,7 @@ } }); - function BlockListController($scope, editorService, clipboardService, localizationService, overlayService, blockEditorService, udiService, serverValidationManager, angularHelper) { + function BlockListController($scope, $timeout, editorService, clipboardService, localizationService, overlayService, blockEditorService, udiService, serverValidationManager, angularHelper, eventsService) { var unsubscribe = []; var modelObject; @@ -53,6 +53,8 @@ }; vm.supportCopy = clipboardService.isSupported(); + vm.clipboardItems = []; + unsubscribe.push(eventsService.on("clipboardService.storageUpdate", updateClipboard)); vm.layout = []; // The layout object specific to this Block Editor, will be a direct reference from Property Model. vm.availableBlockTypes = []; // Available block entries of this property editor. @@ -187,6 +189,8 @@ vm.availableContentTypesAliases = modelObject.getAvailableAliasesForBlockContent(); vm.availableBlockTypes = modelObject.getAvailableBlocksForBlockPicker(); + updateClipboard(true); + vm.loading = false; $scope.$evalAsync(); @@ -406,9 +410,34 @@ editorService.open(blockEditorModel); } - vm.showCreateDialog = showCreateDialog; + vm.requestShowCreate = requestShowCreate; + function requestShowCreate(createIndex, mouseEvent) { - function showCreateDialog(createIndex, $event) { + if (vm.blockTypePicker) { + return; + } + + if (vm.availableBlockTypes.length === 1) { + var wasAdded = false; + var blockType = vm.availableBlockTypes[0]; + + wasAdded = addNewBlock(createIndex, blockType.blockConfigModel.contentElementTypeKey); + + if(wasAdded && !(mouseEvent.ctrlKey || mouseEvent.metaKey)) { + userFlowWhenBlockWasCreated(createIndex); + } + } else { + showCreateDialog(createIndex); + } + + } + vm.requestShowClipboard = requestShowClipboard; + function requestShowClipboard(createIndex, mouseEvent) { + showCreateDialog(createIndex, true); + } + + vm.showCreateDialog = showCreateDialog; + function showCreateDialog(createIndex, openClipboard) { if (vm.blockTypePicker) { return; @@ -424,6 +453,7 @@ $parentForm: vm.propertyForm, // pass in a $parentForm, this maintains the FormController hierarchy with the infinite editing view (if it contains a form) availableItems: vm.availableBlockTypes, title: vm.labels.grid_addElement, + openClipboard: openClipboard, orderBy: "$index", view: "views/common/infiniteeditors/blockpicker/blockpicker.html", size: (amountOfAvailableTypes > 8 ? "medium" : "small"), @@ -444,19 +474,15 @@ } }, submit: function(blockPickerModel, mouseEvent) { - var added = false; + var wasAdded = false; if (blockPickerModel && blockPickerModel.selectedItem) { - added = addNewBlock(createIndex, blockPickerModel.selectedItem.blockConfigModel.contentElementTypeKey); + wasAdded = addNewBlock(createIndex, blockPickerModel.selectedItem.blockConfigModel.contentElementTypeKey); } if(!(mouseEvent.ctrlKey || mouseEvent.metaKey)) { editorService.close(); - if (added && vm.layout.length > createIndex) { - if (inlineEditing === true) { - activateBlock(vm.layout[createIndex].$block); - } else if (inlineEditing === false && vm.layout[createIndex].$block.hideContentInOverlay !== true) { - editBlock(vm.layout[createIndex].$block, false, createIndex, blockPickerModel.$parentForm, {createFlow: true}); - } + if (wasAdded) { + userFlowWhenBlockWasCreated(createIndex); } } }, @@ -475,7 +501,28 @@ clipboardService.clearEntriesOfType(clipboardService.TYPES.BLOCK, vm.availableContentTypesAliases); }; - blockPickerModel.clipboardItems = []; + blockPickerModel.clipboardItems = vm.clipboardItems; + + // open block picker overlay + editorService.open(blockPickerModel); + + }; + function userFlowWhenBlockWasCreated(createIndex) { + if (vm.layout.length > createIndex) { + var blockObject = vm.layout[createIndex].$block; + if (inlineEditing === true) { + blockObject.activate(); + } else if (inlineEditing === false && blockObject.hideContentInOverlay !== true) { + blockObject.edit(); + } + } + } + + function updateClipboard(firstTime) { + + var oldAmount = vm.clipboardItems.length; + + vm.clipboardItems = []; var entriesForPaste = clipboardService.retriveEntriesOfType(clipboardService.TYPES.ELEMENT_TYPE, vm.availableContentTypesAliases); entriesForPaste.forEach(function (entry) { @@ -511,19 +558,33 @@ if(Array.isArray(entry.data) === false) { pasteEntry.blockConfigModel = modelObject.getBlockConfiguration(entry.data.data.contentTypeKey); } - blockPickerModel.clipboardItems.push(pasteEntry); + vm.clipboardItems.push(pasteEntry); }); - blockPickerModel.clipboardItems.sort( (a, b) => { + vm.clipboardItems.sort( (a, b) => { return b.date - a.date }); - // open block picker overlay - editorService.open(blockPickerModel); + if(firstTime !== true && vm.clipboardItems.length > oldAmount) { + jumpClipboard(); + } + } - }; + var jumpClipboardTimeout; + function jumpClipboard() { - var requestCopyAllBlocks = function () { + if(jumpClipboardTimeout) { + return; + } + + vm.jumpClipboardButton = true; + jumpClipboardTimeout = $timeout(() => { + vm.jumpClipboardButton = false; + jumpClipboardTimeout = null; + }, 2000); + } + + function requestCopyAllBlocks() { var aliases = []; diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml index 39a6fee671..737181c668 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml @@ -1891,7 +1891,10 @@ Mange hilsner fra Umbraco robotten Error! The ElementType of this block does not exist anymore + Tilføj indhold + Tilføj %0% Feltet %0% bruger editor %1% som ikke er supporteret for blokke. + Hvad er Indholdsskabeloner? diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml index 5865d39a75..3f6c985a0f 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml @@ -2543,6 +2543,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont Error! The ElementType of this block does not exist anymore + Add content + Add %0% Property '%0%' uses editor '%1%' which is not supported in blocks. 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 102f04371d..87b58e5063 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml @@ -2562,6 +2562,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont Error! The ElementType of this block does not exist anymore + Add content + Add %0% Property '%0%' uses editor '%1%' which is not supported in blocks.