Dont show block catalogue if only one block is available. Enable ente… (#9575)

* 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ø <nsl@umbraco.com> Co-authored-by: Mads Rasmussen <madsr@hey.com>
2021-04-12 12:27:12 +02:00
parent 8c20e252dc
commit 8d8fb2d15c
7 changed files with 207 additions and 50 deletions
--- 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;
--- 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 @@

                <button type="button"
                        class="btn-reset umb-block-list__block--create-button"
-                        ng-click="vm.showCreateDialog($index, $event)"
+                        ng-click="vm.requestShowCreate($index, $event)"
                        ng-controller="Umbraco.PropertyEditors.BlockListPropertyEditor.CreateButtonController as inlineCreateButtonCtrl"
                        ng-mousemove="inlineCreateButtonCtrl.onMouseMove($event)">
                    <div class="__plus" ng-style="{'left':inlineCreateButtonCtrl.plusPosX}">
@@ -26,14 +26,30 @@
            </div>
        </div>

-        <button ng-if="vm.loading !== true"
-                id="{{vm.model.alias}}"
+        <div class="umb-block-list__actions" ng-if="vm.loading !== true">
+            <button
+                    id="{{vm.model.alias}}"
+                    type="button"
+                    class="btn-reset umb-block-list__create-button umb-outline"
+                    ng-disabled="vm.availableBlockTypes.length === 0"
+                    ng-click="vm.requestShowCreate(vm.layout.length, $event)">
+                <localize ng-if="vm.availableBlockTypes.length !== 1" key="blockEditor_addBlock">Add content</localize>
+                <localize ng-if="vm.availableBlockTypes.length === 1" key="blockEditor_addThis" tokens="[vm.availableBlockTypes[0].elementTypeModel.name]">Add content</localize>
+            </button>
+            <button
                type="button"
-                class="btn-reset umb-block-list__create-button umb-outline"
-                ng-class="{ '--disabled': vm.availableBlockTypes.length === 0 }"
-                ng-click="vm.showCreateDialog(vm.layout.length, $event)">
-            <localize key="grid_addElement">Add content</localize>
-        </button>
+                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">
+                <i class="icon icon-paste-in" aria-hidden="true"></i>
+                <span class="sr-only">
+                    <localize key="blockEditor_tabClipboard">Clipboard</localize>
+                </span>
+            </button>
+        </div>

        <input type="hidden" name="minCount" ng-model="vm.layout" val-server="minCount" />
        <input type="hidden" name="maxCount" ng-model="vm.layout" val-server="maxCount" />
--- 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;
+                }
+            }
+            
+        }
+    }
 }
--- 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 = [];

--- 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
    <key alias="confirmCancelBlockCreationMessage"><![CDATA[Er du sikker på at du vil annullere oprettelsen.]]></key>
    <key alias="elementTypeDoesNotExistHeadline">Error!</key>
    <key alias="elementTypeDoesNotExistDescription">The ElementType of this block does not exist anymore</key>
+    <key alias="addBlock">Tilføj indhold</key>
+    <key alias="addThis">Tilføj %0%</key>
    <key alias="propertyEditorNotSupported">Feltet %0% bruger editor %1% som ikke er supporteret for blokke.</key>
+  </area>
  </area>
    <area alias="contentTemplatesDashboard">
        <key alias="whatHeadline">Hvad er Indholdsskabeloner?</key>
--- 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
    <key alias="confirmCancelBlockCreationMessage"><![CDATA[Are you sure you want to cancel the creation.]]></key>
    <key alias="elementTypeDoesNotExistHeadline">Error!</key>
    <key alias="elementTypeDoesNotExistDescription">The ElementType of this block does not exist anymore</key>
+    <key alias="addBlock">Add content</key>
+    <key alias="addThis">Add %0%</key>
    <key alias="propertyEditorNotSupported">Property '%0%' uses editor '%1%' which is not supported in blocks.</key>
  </area>
  <area alias="contentTemplatesDashboard">
--- 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
    <key alias="confirmCancelBlockCreationMessage"><![CDATA[Are you sure you want to cancel the creation.]]></key>
    <key alias="elementTypeDoesNotExistHeadline">Error!</key>
    <key alias="elementTypeDoesNotExistDescription">The ElementType of this block does not exist anymore</key>
+    <key alias="addBlock">Add content</key>
+    <key alias="addThis">Add %0%</key>
    <key alias="propertyEditorNotSupported">Property '%0%' uses editor '%1%' which is not supported in blocks.</key>
  </area>
  <area alias="contentTemplatesDashboard">