Adjust block list configuration

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js

@@ -30,7 +30,6 @@
             }
 
             loadElementTypes();
-
         }
 
         function loadElementTypes() {
@@ -47,9 +46,10 @@
                 }
             }
         }
+
         unsubscribe.push(eventsService.on("editors.documentType.saved", updateUsedElementTypes));
 
-        vm.requestRemoveBlockByIndex = function (index) {
+        vm.requestRemoveBlockByIndex = function ($event, index) {
             localizationService.localizeMany(["general_delete", "blockEditor_confirmDeleteBlockMessage", "blockEditor_confirmDeleteBlockNotice"]).then(function (data) {
                 var contentElementType = vm.getElementTypeByKey($scope.model.value[index].contentTypeKey);
                 overlayService.confirmDelete({
@@ -65,7 +65,10 @@
                     }
                 });
             });
-        }
+
+            $event.preventDefault();
+            $event.stopPropagation();
+        };
 
         vm.removeBlockByIndex = function (index) {
             $scope.model.value.splice(index, 1);
@@ -77,7 +80,6 @@
             cursor: "grabbing",
             placeholder: 'umb-block-card --sortable-placeholder'
         };
-
 
         vm.getAvailableElementTypes = function () {
             return vm.elementTypes.filter(function (type) {
@@ -96,7 +98,7 @@
         };
 
         vm.openAddDialog = function ($event, entry) {
-
+            
             //we have to add the 'alias' property to the objects, to meet the data requirements of itempicker.
             var selectedItems = Utilities.copy($scope.model.value).forEach((obj) => {
                 obj.alias = vm.getElementTypeByKey(obj.contentTypeKey).alias;
@@ -133,17 +135,16 @@
                 };
 
                 overlayService.open(elemTypeSelectorOverlay);
-
             });
         };
 
-        vm.createElementTypeAndCallback = function(callback) {
+        vm.createElementTypeAndCallback = function (callback) {
             const editor = {
                 create: true,
                 infiniteMode: true,
                 isElement: true,
                 submit: function (model) {
-                    loadElementTypes().then( function () {
+                    loadElementTypes().then(function () {
                         callback(model.documentTypeKey);
                     });
                     editorService.close();
@@ -153,7 +154,7 @@
                 }
             };
             editorService.documentTypeEditor(editor);
-        }
+        };
 
         vm.addBlockFromElementTypeKey = function(key) {
 
@@ -172,10 +173,6 @@
             $scope.model.value.push(entry);
         };
 
-
-
-
-
         vm.openBlockOverlay = function (block) {
 
             localizationService.localize("blockEditor_blockConfigurationOverlayTitle", [vm.getElementTypeByKey(block.contentTypeKey).name]).then(function (data) {
@@ -201,9 +198,7 @@
 
                 // open property settings editor
                 editorService.open(overlayModel);
-
             });
-
         };
 
         $scope.$on('$destroy', function () {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html

@@ -1,13 +1,6 @@
-<div
-    class="umb-block-list-block-configuration"
-    ng-controller="Umbraco.PropertyEditors.BlockList.BlockConfigurationController as vm"
-    >
+<div class="umb-block-list-block-configuration" ng-controller="Umbraco.PropertyEditors.BlockList.BlockConfigurationController as vm">
 
-    <div
-        class="umb-block-card-grid"
-        ui-sortable="vm.sortableOptions"
-        ng-model="model.value"
-        >
+    <div class="umb-block-card-grid" ui-sortable="vm.sortableOptions" ng-model="model.value">
 
         <umb-block-card
             block-config-model="block"
@@ -16,14 +9,14 @@
             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.stopPropagation();">
+                <button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($event, $index)">
                     <i class="icon icon-trash" aria-hidden="true"></i>
                     <localize key="general_delete" class="sr-only">Delete</localize>
                 </button>
             </div>
         </umb-block-card>
 
-        <button id="{{model.alias}}" type="button" class="btn-reset __add-button" ng-click="vm.openAddDialog($event)">
+        <button type="button" id="{{model.alias}}" class="btn-reset __add-button" ng-click="vm.openAddDialog($event)">
             <localize key="general_add">Add</localize>
         </button>
     </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html

@@ -227,6 +227,7 @@
 
                     <umb-button
                         action="vm.close()"
+                        shortcut="esc"
                         button-style="link"
                         label-key="general_close"
                         type="button">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.less

@@ -9,33 +9,37 @@
         position: absolute;
         display: flex;
         align-items: center;
-        top:0;
+        top: 0;
         bottom: 0;
         right: 0;
         background-color: rgba(255, 255, 255, 0.8);
         opacity: 0;
         transition: opacity 120ms;
     }
+
     .control-group:hover,
     .control-group:focus,
     .control-group:focus-within {
         .__control-actions {
             opacity: 1;
         }
     }
+
     .__control-actions-btn {
         position: relative;
         color: @ui-action-discreet-type;
         height: 32px;
         width: 26px;
+
         &:hover {
             color: @ui-action-discreet-type-hover;
         }
+
         &:last-of-type {
             margin-right: 7px;
         }
     }
-    
+
     .umb-node-preview {
         border-bottom: none;
     }
@@ -64,8 +68,8 @@
         &.--noValue {
             text-align: center;
             border-radius: @baseBorderRadius;
-            color: white;
             transition: color 120ms;
+
             &:hover, &:focus {
                 color: @ui-action-discreet-type-hover;
                 border-color: @ui-action-discreet-border-hover;
@@ -79,7 +83,7 @@
     }
 
     .__add-button {
-        width:100%;
+        width: 100%;
         color: @ui-action-discreet-type;
         border: 1px dashed @ui-action-discreet-border;
         border-radius: @baseBorderRadius;
@@ -91,10 +95,9 @@
         margin: 20px 0;
         font-weight: bold;
     }
-    
+
     .__add-button:hover {
         color: @ui-action-discreet-type-hover;
         border-color: @ui-action-discreet-border-hover;
     }
-
 }