V8.7RC Block list adjustments (umbraco#8763)

src/Umbraco.Web.UI.Client/src/common/services/blockeditormodelobject.service.js

@@ -543,7 +543,6 @@
                         unsupported: true
                     };
                     contentScaffold = {};
-
                 }
 
                 var blockObject = {};
@@ -614,8 +613,7 @@
                     if (this.config.settingsElementTypeKey !== null) {
                         mapElementValues(settings, this.settings);
                     }
-                }
-
+                };
 
                 blockObject.sync = function () {
                     if (this.content !== null) {
@@ -624,7 +622,7 @@
                     if (this.config.settingsElementTypeKey !== null) {
                         mapToPropertyModel(this.settings, this.settingsData);
                     }
-                }
+                };
 
                 // first time instant update of label.
                 blockObject.label = getBlockLabel(blockObject);
@@ -663,7 +661,6 @@
                 }
 
                 return blockObject;
-
             },
 
             /**

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html

@@ -5,7 +5,7 @@
             ng-click="vm.openBlock(block)"
             ng-focus="block.focus">
         <span class="caret"></span>
-        <i class="icon {{block.content.icon}}"></i>
+        <i class="icon {{block.content.icon}}" aria-hidden="true"></i>
         <span class="name">{{block.label}}</span>
     </button>
     <div class="blockelement-inlineblock-editor__inner" ng-class="{'--singleGroup':block.content.variants[0].tabs.length === 1}" ng-if="block.active === true">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html

@@ -3,6 +3,6 @@
         ng-focus="block.focus"
         ng-class="{ '--active': block.active, '--error': parentForm.$invalid && valFormManager.isShowingValidation() }"
         val-server-property-class="">
-    <i class="icon {{block.content.icon}}"></i>
+    <i class="icon {{block.content.icon}}" aria-hidden="true"></i>
     <span>{{block.label}}</span>
 </button>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.html

@@ -1,12 +1,12 @@
 <div class="blockelement-unsupportedblock-editor blockelement__draggable-element" ng-focus="block.focus">
     <div class="__header">
-        <i class="icon icon-alert"></i>
+        <i class="icon icon-alert" aria-hidden="true"></i>
         <span>{{block.label}}</span>
     </div>
     <div class="__body">
         This Block is no longer supported in this context.<br/>
         You might want to remove this block, or contact your developer to take actions for making this block available again.<br/><br/>
-        <a href="http://our.umbraco.com" target="_blank">Learn about this circumstance</a>
+        <a href="http://our.umbraco.com" target="_blank" rel="noreferrer">Learn about this circumstance</a>
         <h5>Block data:</h5>
         <pre ng-bind="block.data | json : 4"></pre>
     </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html

@@ -30,7 +30,7 @@
                 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"></localize>
+            <localize key="grid_addElement">Add content</localize>
         </button>
 
         <input type="hidden" name="minCount" ng-model="vm.layout" val-server="minCount" />

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less

@@ -157,7 +157,7 @@ ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-blo
 .umb-block-list__block--create-button {
     position: absolute;
     width: 100%;
-    z-index:1;
+    z-index: 1;
     opacity: 0;
     outline: none;
     height: 12px;
@@ -170,28 +170,27 @@ ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-blo
         content: '';
         position: absolute;
         background-color: @blueMid;
-        border-top:1px solid white;
-        border-bottom:1px solid white;
+        border-top: 1px solid white;
+        border-bottom: 1px solid white;
         border-radius: 2px;
-        top:5px;
+        top: 5px;
         right: 0;
         left: 0;
         height: 2px;
         animation: umb-block-list__block--create-button_before 400ms ease-in-out alternate infinite;
+
         @keyframes umb-block-list__block--create-button_before {
             0%   { opacity: 1; }
             100% { opacity: 0.5; }
         }
     }
+
     > .__plus {
         position: absolute;
-        pointer-events: none;// lets stop avoiding the mouse values in JS move event.
-        margin-left: -18px - 10px;
-        margin-top: -18px;
-        margin-bottom: -18px;
-        width: 28px;
-        height: 25px;
-        padding-bottom: 3px;
+        pointer-events: none; // lets stop avoiding the mouse values in JS move event.
+        width: 24px;
+        height: 24px;
+        padding: 0;
         border-radius: 3em;
         border: 2px solid @blueMid;
         display: flex;
@@ -202,25 +201,29 @@ ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-blo
         font-weight: 800;
         background-color: rgba(255, 255, 255, .96);
         box-shadow: 0 0 0 2px rgba(255, 255, 255, .96);
-        transform: scale(0);
+        transform: scale(0) translate(-80%, -50%);
         transition: transform 240ms ease-in;
         animation: umb-block-list__block--create-button_after 800ms ease-in-out infinite;
+
         @keyframes umb-block-list__block--create-button_after {
             0%   { color: rgba(@blueMid, 0.8); }
             50% { color: rgba(@blueMid, 1); }
             100% { color: rgba(@blueMid, 0.8); }
         }
     }
+
     &:focus {
         > .__plus {
             border: 2px solid @ui-outline;
         }
     }
+
     &:hover, &:focus {
         opacity: 1;
         transition-duration: 120ms;
+
         > .__plus {
-            transform: scale(1);
+            transform: scale(1) translate(-80%, -50%);
             transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
     }

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js

@@ -44,23 +44,23 @@
 
         vm.loading = true;
         vm.currentBlockInFocus = null;
-        vm.setBlockFocus = function(block) {
-            if(vm.currentBlockInFocus !== null) {
+        vm.setBlockFocus = function (block) {
+            if (vm.currentBlockInFocus !== null) {
                 vm.currentBlockInFocus.focus = false;
             }
             vm.currentBlockInFocus = block;
             block.focus = true;
-        }
+        };
+
         vm.supportCopy = clipboardService.isSupported();
 
         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.
+        vm.labels = {};
 
-        var labels = {};
-        vm.labels = labels;
         localizationService.localizeMany(["grid_addElement", "content_createEmpty"]).then(function (data) {
-            labels.grid_addElement = data[0];
-            labels.content_createEmpty = data[1];
+            vm.labels.grid_addElement = data[0];
+            vm.labels.content_createEmpty = data[1];
         });
 
         vm.$onInit = function() {
@@ -195,12 +195,14 @@
 
         function getDefaultViewForBlock(block) {
 
+            var defaultViewFolderPath = "views/propertyeditors/blocklist/blocklistentryeditors/";
+
             if (block.config.unsupported === true)
-                return "views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.html";
+                return defaultViewFolderPath + "unsupportedblock/unsupportedblock.editor.html";
 
             if (inlineEditing === true)
-                return "views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html";
-            return "views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html";
+                return defaultViewFolderPath + "inlineblock/inlineblock.editor.html";
+            return defaultViewFolderPath + "labelblock/labelblock.editor.html";
         }
 
         /**