From e22c7ea0d635adff0f221e957aacc9de31dc4bd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 17 Oct 2022 12:47:18 +0200
Subject: [PATCH] Merge BjarneF fix into 10.3 (#13220)

Co-authored-by: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
---
 .../components/blockcard/umb-block-card.less  |  7 +++-
 .../umb-property-info-button.less             |  8 +++-
 .../blockgrid/umbblockgridentry.component.js  | 20 ++++++---
 ...blocklist.blockconfiguration.controller.js |  2 +-
 .../blocklist.blockconfiguration.html         |  6 ++-
 .../blocklist.blockconfiguration.overlay.html | 42 +++++++++++--------
 6 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.less b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.less
index 45cba81a0b..fee768235a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.less
+++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.less
@@ -130,13 +130,18 @@ umb-block-card {
         right: 10px;
         opacity: 0;
         transition: opacity 120ms;
+        margin-right: 10px;
+
         .__action {
-            display: inline-block;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
             border-radius: 50%;
             width: 28px;
             height: 28px;
             background-color: white;
             color:@ui-action-type;
+
             &:hover {
                 color: @ui-action-type-hover;
             }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-property-info-button/umb-property-info-button.less b/src/Umbraco.Web.UI.Client/src/views/components/umb-property-info-button/umb-property-info-button.less
index 33e1156648..a892f1ca38 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-property-info-button/umb-property-info-button.less
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-property-info-button/umb-property-info-button.less
@@ -3,16 +3,20 @@ umb-property-info-button {
     display: inline-block;
     vertical-align: text-bottom;
 
+    .control-label + & {
+        margin-left: 3px;
+    }
+
     > .__button {
         position: relative;
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        text-align: center;
 
         width: 15px;
         height: 15px;
-        padding-top: 1px;
-        padding-left: 1px;
+        padding: 2px 1px 1px 1px;
         margin-top: -1px;
         font-size: 12px;
         font-weight: 700;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
index 22739d748c..a7c45ecdd8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
@@ -311,7 +311,8 @@
 
         vm.scaleHandlerKeyUp = function($event) {
 
-            let addCol = 0;
+            
+            let addColIndex = 0;
             let addRow = 0;
 
             switch ($event.originalEvent.key) {
@@ -322,16 +323,23 @@
                     addRow = 1;
                     break;
                 case 'ArrowLeft':
-                    addCol = -1;
+                    addColIndex = -1;
                     break;
                 case 'ArrowRight':
-                    addCol = 1;
+                    addColIndex = 1;
                     break;
             }
 
-            const newColumnSpan = Math.max(vm.layoutEntry.columnSpan + addCol, 1);
-
-            vm.layoutEntry.columnSpan = closestColumnSpanOption(newColumnSpan, vm.layoutEntry.$block.config.columnSpanOptions, gridColumns.length).columnSpan;
+            if(addColIndex !== 0) {
+                if (vm.layoutEntry.$block.config.columnSpanOptions.length > 0) {
+                    const sortOptions = vm.layoutEntry.$block.config.columnSpanOptions.sort((a,b) => (a.columnSpan > b.columnSpan) ? 1 : ((b.columnSpan > a.columnSpan) ? -1 : 0));
+                    const currentColIndex = sortOptions.findIndex(x => x.columnSpan === vm.layoutEntry.columnSpan);
+                    const newColIndex = Math.min(Math.max(currentColIndex + addColIndex, 0), sortOptions.length-1);
+                    vm.layoutEntry.columnSpan = sortOptions[newColIndex].columnSpan;
+                } else {
+                    vm.layoutEntry.columnSpan = vm.layoutColumnsInt;
+                }
+            }
             let newRowSpan = Math.max(vm.layoutEntry.rowSpan + addRow, vm.layoutEntry.$block.config.rowMinSpan || 1);
             if(vm.layoutEntry.$block.config.rowMaxSpan != null) {
                 newRowSpan = Math.min(newRowSpan, vm.layoutEntry.$block.config.rowMaxSpan);
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 f0b89a095f..91b1f88444 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
@@ -72,7 +72,7 @@
             });
 
             event.stopPropagation();
-        }
+        };
 
         vm.removeBlockByIndex = function (index) {
             $scope.model.value.splice(index, 1);
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 3172219434..cdefd12993 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
@@ -8,8 +8,10 @@
             ng-repeat="block in model.value"
             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)">
+            <div class="__actions" ng-click="$event.stopPropagation()" tabindex="-1">
+                <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>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
index cc324f70d5..58ca11b716 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
@@ -26,9 +26,9 @@
                             <!-- label -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="label"><localize key="blockEditor_labelLabelTemplate">label</localize></label>
+                                    <label class="control-label" for="blockLabel"><localize key="blockEditor_labelLabelTemplate">label</localize></label>
                                     <div class="controls">
-                                        <input type="text" name="label" ng-model="vm.block.label" style="width:100%" umb-auto-focus/>
+                                        <input type="text" name="label" id="blockLabel" ng-model="vm.block.label" style="width:100%" umb-auto-focus/>
                                     </div>
                                 </div>
                             </div>
@@ -36,7 +36,7 @@
                             <!-- custom view -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="iconcolor"><localize key="blockEditor_labelCustomView">Custom view</localize></label>
+                                    <label class="control-label" for="blockCustomView"><localize key="blockEditor_labelCustomView">Custom view</localize></label>
                                     <umb-property-info-button button-title-key="blockEditor_labelCustomViewInfoTitle">
                                         <localize key="blockEditor_labelCustomViewDescription">Overwrite how this block appears in the BackOffice UI. Pick a .html file containing your presentation.</localize>
                                     </umb-property-info-button>
@@ -50,7 +50,7 @@
                                                 </button>
                                             </div>
                                         </div>
-                                        <button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.view === null" ng-click="vm.addViewForBlock(vm.block)">
+                                        <button type="button" id="blockCustomView" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.view === null" ng-click="vm.addViewForBlock(vm.block)">
                                             <localize key="blockEditor_addCustomView">Add custom view</localize>
                                         </button>
                                     </div>
@@ -60,7 +60,7 @@
                             <!-- custom stylesheet -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="iconcolor"><localize key="blockEditor_labelCustomStylesheet">Custom stylesheet</localize></label>
+                                    <label class="control-label" for="blockStyleSheet"><localize key="blockEditor_labelCustomStylesheet">Custom stylesheet</localize></label>
                                     <div class="controls">
                                         <div class="__settings-input --hasValue" ng-if="vm.block.stylesheet !== null" >
 
@@ -71,7 +71,7 @@
                                                 </button>
                                             </div>
                                         </div>
-                                        <button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.stylesheet === null" ng-click="vm.addStylesheetForBlock(vm.block)">
+                                        <button type="button" id="blockStyleSheet" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.stylesheet === null" ng-click="vm.addStylesheetForBlock(vm.block)">
                                             <localize key="blockEditor_addCustomStylesheet">Add custom stylesheet</localize>
                                         </button>
                                     </div>
@@ -81,9 +81,9 @@
                             <!-- editor overlay size -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="editorSize"><localize key="blockEditor_labelEditorSize">Editor size</localize></label>
+                                    <label class="control-label" for="blockEditorSize"><localize key="blockEditor_labelEditorSize">Editor size</localize></label>
                                     <div class="controls">
-                                        <select id="editorSize" ng-model="vm.block.editorSize">
+                                        <select id="blockEditorSize" ng-model="vm.block.editorSize">
                                             <option value="small">Small</option>
                                             <option value="medium">Medium</option>
                                             <option value="large">Large</option>
@@ -107,12 +107,12 @@
                             <!-- Content Element Type -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label"><localize key="blockEditor_labelContentElementType">Content ElementType</localize></label>
+                                    <label class="control-label" for="blockContentElemenType"><localize key="blockEditor_labelContentElementType">Content ElementType</localize></label>
                                     <div class="controls">
                                         <div class="__settings-input --hasValue" ng-if="vm.block.contentElementTypeKey !== null" >
                                             <umb-node-preview icon="vm.contentPreview.icon" name="vm.contentPreview.name" alias="vm.contentPreview.alias"></umb-node-preview>
                                             <div class="__control-actions">
-                                                <button type="button" class="btn-reset __control-actions-btn --open umb-outline" ng-click="vm.openElementType(vm.block.contentElementTypeKey)">
+                                                <button type="button" id="blockContentElemenType" class="btn-reset __control-actions-btn --open umb-outline" ng-click="vm.openElementType(vm.block.contentElementTypeKey)">
                                                     <umb-icon icon="icon-edit" class="icon"></umb-icon>
                                                 </button>
                                             </div>
@@ -124,7 +124,7 @@
                             <!-- Settings Element Type -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label"><localize key="blockEditor_labelSettingsElementType">Settings Element Type</localize></label>
+                                    <label class="control-label" for="blockSettingsElemenType"><localize key="blockEditor_labelSettingsElementType">Settings Element Type</localize></label>
                                     <div class="controls">
                                         <div class="__settings-input --hasValue" ng-if="vm.block.settingsElementTypeKey !== null">
                                             <umb-node-preview icon="vm.settingsPreview.icon" name="vm.settingsPreview.name" alias="vm.settingsPreview.alias"></umb-node-preview>
@@ -137,7 +137,7 @@
                                                 </button>
                                             </div>
                                         </div>
-                                        <button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.settingsElementTypeKey === null" ng-click="vm.addSettingsForBlock($event, vm.block)">
+                                        <button type="button" id="blockSettingsElemenType" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.settingsElementTypeKey === null" ng-click="vm.addSettingsForBlock($event, vm.block)">
                                             <localize key="blockEditor_addSettingsElementType">Add settings</localize>
                                         </button>
                                     </div>
@@ -157,9 +157,10 @@
                             <!-- backgroundColor -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="backgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
+                                    <label class="control-label" for="blockBackgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
                                     <div class="controls">
                                         <umb-color-picker
+                                            id="blockBackgroundColor"
                                             ng-model="vm.block.backgroundColor"
                                             options="vm.colorPickerOptions"
                                             on-change="vm.changeBackgroundColor(color)">
@@ -171,9 +172,10 @@
                             <!-- iconColor -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="iconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
+                                    <label class="control-label" for="blockIconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
                                     <div class="controls">
                                         <umb-color-picker
+                                            id="blockIconColor"
                                             ng-model="vm.block.iconColor"
                                             options="vm.colorPickerOptions"
                                             on-change="vm.changeIconColor(color)">
@@ -185,7 +187,7 @@
                             <!-- thumbnail -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="iconcolor"><localize key="blockEditor_thumbnail">Thumbnail</localize></label>
+                                    <label class="control-label" for="blockThumbnail"><localize key="blockEditor_thumbnail">Thumbnail</localize></label>
                                     <div class="controls">
                                         <div class="__settings-input --hasValue" ng-if="vm.block.thumbnail !== null" >
 
@@ -196,7 +198,7 @@
                                                 </button>
                                             </div>
                                         </div>
-                                        <button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.thumbnail === null" ng-click="vm.addThumbnailForBlock(vm.block)">
+                                        <button type="button" id="blockThumbnail" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.thumbnail === null" ng-click="vm.addThumbnailForBlock(vm.block)">
                                             <localize key="blockEditor_addThumbnail">Add thumbnail</localize>
                                         </button>
                                     </div>
@@ -218,9 +220,13 @@
                             <!-- forceHideContentEditorInOverlay -->
                             <div class="control-group umb-control-group -no-border">
                                 <div class="umb-el-wrap">
-                                    <label class="control-label" for="forceHideContentEditorInOverlay"><localize key="blockEditor_forceHideContentEditor">Force hide content editor</localize></label>
+                                    <label class="control-label" for="blockforceHideContentEditorInOverlay"><localize key="blockEditor_forceHideContentEditor">Force hide content editor</localize></label>
                                     <div class="controls">
-                                        <umb-toggle checked="vm.block.forceHideContentEditorInOverlay" on-click="vm.block.forceHideContentEditorInOverlay = vm.block.forceHideContentEditorInOverlay != true"></umb-toggle>
+                                        <umb-toggle
+                                            input-id="blockforceHideContentEditorInOverlay"
+                                            checked="vm.block.forceHideContentEditorInOverlay"
+                                            on-click="vm.block.forceHideContentEditorInOverlay = vm.block.forceHideContentEditorInOverlay != true">
+                                        </umb-toggle>
                                     </div>
                                 </div>
                             </div>