From 5ef98ada8c0cbcb52954c2eeea2f2432773725e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 27 Apr 2020 12:36:25 +0200
Subject: [PATCH] minor changes for a better developer experience

---
 .../infiniteeditors/blockpicker/blockpicker.html     |  1 +
 .../blocklist/blocklist.block.component.js           | 10 +++++-----
 .../blocklist/blocklist.component.html               | 12 ++++++------
 .../propertyeditors/blocklist/blocklist.component.js | 10 ++++++++--
 .../blocklist/blocklist.component.less               |  1 +
 .../blocklist/blocklist.scopedblock.component.js     | 12 ++++++------
 6 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html
index 196eec4cdb..fb7e946ee7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html
@@ -30,6 +30,7 @@
                 <div class="umb-block-card-grid">
 
                     <umb-block-card
+                        class="umb-outline"
                         ng-repeat="block in vm.model.availableItems | filter:searchTerm"
                         block-config-model="block.blockConfigModel"
                         element-type-model="block.elementTypeModel"
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.block.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.block.component.js
index 0385460864..fb47ffdaab 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.block.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.block.component.js
@@ -13,7 +13,7 @@
     angular
         .module("umbraco")
         .component("umbBlockListBlockContent", {
-            template: '<div ng-include="vm.view"></div>',
+            template: '<div ng-include="model.view"></div>',
             controller: BlockListBlockContentController,
             controllerAs: "model",
             bindings: {
@@ -26,10 +26,10 @@
     );
 
     function BlockListBlockContentController($scope) {
-        var vm = this;
-        vm.$onInit = function() {
-            $scope.block = vm.block;
-            $scope.api = vm.api;
+        var model = this;
+        model.$onInit = function() {
+            $scope.block = model.block;
+            $scope.api = model.api;
         };
     }
         
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
index 070ee4839b..4167667af0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
@@ -19,25 +19,25 @@
 
                 <div class="umb-block-list__block" ng-class="{'--open':block.isOpen}">
 
-                    <umb-block-list-scoped-block-content ng-if="block.config.stylesheet" class="umb-block-list__block--content blockelement__draggable-element" view="{{::block.view}}" stylesheet="/{{::block.config.stylesheet}}" api="vm.blockEditorApi" block="block" index="$index">
+                    <umb-block-list-scoped-block-content ng-if="block.config.stylesheet" class="umb-block-list__block--content blockelement__draggable-element" view="{{block.view}}" stylesheet="/{{::block.config.stylesheet}}" api="vm.blockEditorApi" block="block" index="$index">
                     </umb-block-list-scoped-block-content>
-                    <umb-block-list-block-content ng-if="!block.config.stylesheet" class="umb-block-list__block--content" view="{{::block.view}}" api="vm.blockEditorApi" block="block" index="$index">
+                    <umb-block-list-block-content ng-if="!block.config.stylesheet" class="umb-block-list__block--content" view="{{block.view}}" api="vm.blockEditorApi" block="block" index="$index">
                     </umb-block-list-block-content>
 
                     <div class="umb-block-list__block--actions">
-                        <button type="button" class="btn-reset action --settings" localize="title" title="actions_editSettings" ng-click="vm.blockEditorApi.openSettingsForBlock(block);" ng-if="block.showSettings === true">
+                        <button type="button" class="btn-reset umb-outline action --settings" localize="title" title="actions_editSettings" ng-click="vm.blockEditorApi.openSettingsForBlock(block);" ng-if="block.showSettings === true">
                             <i class="icon icon-settings" aria-hidden="true"></i>
                             <span class="sr-only">
                                 <localize key="general_settings">Settings</localize>
                             </span>
                         </button>
-                        <button type="button" class="btn-reset action --copy" localize="title" title="actions_copy" ng-click="vm.blockEditorApi.requestCopyBlock(block);" ng-if="vm.showCopy">
+                        <button type="button" class="btn-reset umb-outline action --copy" localize="title" title="actions_copy" ng-click="vm.blockEditorApi.requestCopyBlock(block);" ng-if="vm.showCopy">
                             <i class="icon icon-documents" aria-hidden="true"></i>
                             <span class="sr-only">
                                 <localize key="general_copy">Copy</localize>
                             </span>
                         </button>
-                        <button type="button" class="btn-reset action --delete" localize="title" title="actions_delete" ng-click="vm.blockEditorApi.requestDeleteBlock(block);">
+                        <button type="button" class="btn-reset umb-outline action --delete" localize="title" title="actions_delete" ng-click="vm.blockEditorApi.requestDeleteBlock(block);">
                             <i class="icon icon-trash" aria-hidden="true"></i>
                             <span class="sr-only">
                                 <localize key="general_delete">Delete</localize>
@@ -51,7 +51,7 @@
 
         <button
             type="button"
-            class="btn-reset umb-block-list__create-button"
+            class="btn-reset umb-block-list__create-button umb-outline"
             ng-class="{ '--disabled': vm.availableBlockTypes.length === 0 }"
             ng-click="vm.showCreateDialog(vm.blocks.length, $event)"
         >
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js
index 1cb0a0c2d6..b7d6cb5315 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js
@@ -35,6 +35,7 @@
         var copyAllBlocksAction;
         var deleteAllBlocksAction;
 
+        var inlineEditing = false;
 
         var vm = this;
 
@@ -58,6 +59,8 @@
 
         vm.$onInit = function() {
 
+            inlineEditing = vm.model.config.useInlineEditingAsDefault;
+
             vm.validationLimit = vm.model.config.validationLimit;
 
             vm.listWrapperStyles = {};
@@ -136,7 +139,7 @@
             if (block === null) return null;
 
             // Lets apply fallback views, and make the view available directly on the blockModel.
-            block.view = (block.config.view ? "/" + block.config.view : (vm.model.config.useInlineEditingAsDefault ? "views/blockelements/inlineblock/inlineblock.editor.html" : "views/blockelements/labelblock/labelblock.editor.html"));
+            block.view = (block.config.view ? "/" + block.config.view : (inlineEditing ? "views/blockelements/inlineblock/inlineblock.editor.html" : "views/blockelements/labelblock/labelblock.editor.html"));
 
             block.showSettings = block.config.settingsElementTypeAlias != null;
 
@@ -197,7 +200,7 @@
             vm.blocks.forEach(deleteBlock);
         }
 
-        function editBlock(blockModel, hideContent) {
+        function editBlock(blockModel, openSettings) {
 
             // make a clone to avoid editing model directly.
             var blockContentClone = angular.copy(blockModel.content);
@@ -206,10 +209,13 @@
             if (blockModel.config.settingsElementTypeAlias) {
                 blockSettingsClone = angular.copy(blockModel.settings);
             }
+
+            var hideContent = (openSettings === true && inlineEditing === true);
             
             var blockEditorModel = {
                 content: blockContentClone,
                 hideContent: hideContent,
+                openSettings: openSettings === true,
                 settings: blockSettingsClone,
                 title: blockModel.label,
                 view: "views/common/infiniteeditors/blockeditor/blockeditor.html",
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
index 35eece038e..6d15e5abef 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less
@@ -33,6 +33,7 @@
 }
 .umb-block-list__block--actions {
     position: absolute;
+    z-index:999999999;// We always want to be on top of custom view, but we need to make sure we still are behind relevant Umbraco CMS UI. ToDo: Needs further testing.
     top: 10px;
     right: 10px;
     font-size: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.scopedblock.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.scopedblock.component.js
index 0498db32c3..b778abc35b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.scopedblock.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.scopedblock.component.js
@@ -26,16 +26,16 @@
     );
 
     function BlockListScopedBlockContentController($compile, $element, $scope) {
-        var vm = this;
-        vm.$onInit = function() {
-            $scope.block = vm.block;
-            $scope.api = vm.api;
+        var model = this;
+        model.$onInit = function() {
+            $scope.block = model.block;
+            $scope.api = model.api;
             var shadowRoot = $element[0].attachShadow({mode:'open'});
             shadowRoot.innerHTML = `
                 <style>
-                @import "${vm.stylesheet}"
+                @import "${model.stylesheet}"
                 </style>
-                <div ng-include="'${vm.view}'"></div>
+                <div ng-include="'${model.view}'"></div>
             `;
             $compile(shadowRoot)($scope);
         }