Block Grid: Streamline readonly with other property editors (#21007)

* Align cursor style and readonly mode for other property editors

* Show disabled actions as in other property editors when readonly

* Disable sortmode as well when readonly

* Formatting

* Ensure delete action remains disabled if readonly

Author: bjarnef

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less

@@ -527,7 +527,7 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
         &[disabled]:hover {
             color: @gray-7;
             border-color: @gray-7;
-            cursor: default;
+            cursor: not-allowed;
         }
 
         &.umb-block-grid__create-button {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html

@@ -65,12 +65,12 @@
         ng-click="vm.blockEditorApi.requestShowCreate(vm.parentBlock, vm.areaKey, vm.entries.length, $event)">
     </uui-button-inline-create>
 
-    <div class="umb-block-grid__actions" ng-if="!vm.blockEditorApi.readonly && vm.depth === '0'">
+    <div class="umb-block-grid__actions" ng-if="vm.depth === '0'">
         <button
                 id="{{vm.model.alias}}"
                 type="button"
                 class="btn-reset umb-block-grid__create-button umb-outline"
-                ng-disabled="vm.locallyAvailableBlockTypes.length === 0"
+                ng-disabled="vm.locallyAvailableBlockTypes.length === 0 || vm.blockEditorApi.readonly"
                 ng-click="vm.blockEditorApi.requestShowCreate(vm.parentBlock, vm.areaKey, vm.entries.length, $event)">
                 <span ng-if="vm.createLabel">{{vm.createLabel}}</span>
             <localize ng-if="!vm.createLabel && vm.locallyAvailableBlockTypes.length !== 1" key="blockEditor_addBlock">Add content</localize>
@@ -79,7 +79,7 @@
         <button type="button"
                 class="btn-reset umb-block-grid__clipboard-button umb-outline"
                 ng-class="{'--jump': vm.jumpClipboardButton}"
-                ng-disabled="vm.clipboardItems.length === 0"
+                ng-disabled="vm.clipboardItems.length === 0 || vm.blockEditorApi.readonly"
                 ng-click="vm.blockEditorApi.requestShowClipboard(vm.parentBlock, vm.areaKey, vm.entries.length, $event)"
                 localize="title"
                 title="@blockEditor_tabClipboard">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbBlockGridPropertyEditor.component.js

@@ -83,7 +83,6 @@
         var shadowRoot;
         var firstLayoutContainer;
 
-
         var vm = this;
 
         vm.readonly = false;
@@ -96,6 +95,10 @@
             if (deleteAllBlocksAction) {
                 deleteAllBlocksAction.isDisabled = vm.readonly;
             }
+
+            if (enterSortModeAction) {
+                enterSortModeAction.isDisabled = vm.readonly;
+            }
         });
 
         vm.loading = true;
@@ -1367,8 +1370,9 @@
             if (copyAllBlocksAction) {
                 copyAllBlocksAction.isDisabled = vm.layout.length === 0;
             }
+
             if (deleteAllBlocksAction) {
-                deleteAllBlocksAction.isDisabled = vm.layout.length === 0;
+                deleteAllBlocksAction.isDisabled = vm.layout.length === 0 || vm.readonly;
             }
 
             // validate limits: