Block Grid Editor Improvements (#13282)

umbraco · Nov 14, 2022 · 27ec620 · 27ec620
1 parent 69c6eae
commit 27ec620
Show file tree

Hide file tree

Showing 45 changed files with 932 additions and 710 deletions.
diff --git a/...App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoHeadlineBlock.html b/...App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoHeadlineBlock.html
@@ -1,11 +1,4 @@
 <style>
-
-    :host {
-        position: relative;
-        border-radius: 3px;
-        height: 100%;/* Add this to fill the cell fully */
-        box-sizing: border-box;
-    }
 
     button {
         position: relative;
@@ -33,5 +26,4 @@
 
 <button type="button" ng-click="block.edit()" ng-focus="block.focus">
     <h1 style="margin: 0 20px;">{{block.data.headline}}</h1>
-</button>
-<slot name="area-container" part="area-container"></slot>
+</button>
diff --git a/...ot/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoImageBlock.html b/...ot/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoImageBlock.html
@@ -1,12 +1,7 @@
 <style>
 
     :host {
-        position: relative;
-        border-radius: 3px;
-        height: 100%;/* Add this to fill the cell fully */
         min-height: 160px;
-        box-sizing: border-box;
-        //border: 1px solid #BBBABF;
     }
 
     button > * {
@@ -31,7 +26,7 @@
         overflow:hidden;
     }
     button:hover {
-        color: #2152A3;// TODO: Set right colors:
+        color: #2152A3;
     }
     img {
         object-fit: cover;
@@ -67,24 +62,15 @@
         bottom: 0;
         right: 0;
 
-        opacity: var(--umb-block-grid__block--show-ui, 0);
+        opacity: var(--umb-block-grid--block-ui-opacity, 0);
         transition: opacity 120ms;
     }
-    /*
-    :host(:focus-within) .file-name, 
-    :host(:hover) .file-name {
-        opacity: 1;
-    }
-    */
 
 </style>
-<script>
-    <!-- TODO: what can we do? -->
-</script>
 
-<button ng-controller="Umbraco.PropertyEditors.BlockEditor.MediaBlockEditor as bc" type="button" ng-click="block.edit()" ng-focus="block.focus">
-    <img ng-if="bc.isImage || bc.fileExtension === 'svg'" ng-src="{{bc.imageSource}}" alt="{{bc.mediaName}}" />
-    <umb-icon ng-if="!bc.isImage && bc.fileExtension !== 'svg'" icon="{{bc.icon}} color-black" class="icon"></umb-icon>
-    <span ng-if="bc.mediaName" class="file-name">{{bc.mediaName}}</span>
-</button>
-<slot name="area-container" part="area-container"></slot>
+<button type="button" ng-click="block.edit()" ng-focus="block.focus">
+    {{mediaItem = (block.data.image[0].mediaKey | mediaItemResolver); ""}}
+    <img ng-if="mediaItem !== null && (mediaItem.mediaLink.indexOf('svg') === -1)" ng-src="{{mediaItem.mediaLink}}" alt="{{mediaItem.name}}" />
+    <umb-icon ng-if="mediaItem !== null && (mediaItem.mediaLink.indexOf('svg') !== -1)" icon="{{mediaItem.contentType.icon}} color-black" class="icon"></umb-icon>
+    <span ng-if="mediaItem !== null && mediaItem.name" class="file-name">{{mediaItem.name}}</span>
+</button>
diff --git a/...App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoRichTextBlock.html b/...App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoRichTextBlock.html
@@ -1,13 +1,5 @@
 <style>
 
-    :host {
-        position: relative;
-        border-radius: 3px;
-        height: 100%;/* Add this to fill the cell fully */
-        box-sizing: border-box;
-        //border: 1px solid #BBBABF;
-    }
-
     .text {
         position: relative;
         display: block;
@@ -30,5 +22,4 @@
 </style>
 
 <div class="text" ng-click="block.edit()" ng-focus="block.focus" ng-bind-html="block.data.richText" style="margin: 0 20px;">
-</div>
-<slot name="area-container" part="area-container"></slot>
+</div>
diff --git a/...gins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoTwoColumnLayoutBlock.html b/...gins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoTwoColumnLayoutBlock.html
@@ -1,50 +1,3 @@
-<style>
-
-    :host {
-        position: relative;
-        border-radius: 3px;
-        height: 100%;/* Add this to fill the cell fully */
-        box-sizing: border-box;
-        //border: 1px solid #BBBABF;
-    }
-    /*
-    button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        color: black;
-        background-color: white;
-        text-align: left;
-        user-select: none;
-        border: none;
-        opacity: 0;
-        transition: border-color 120ms, background-color 120ms, opacity 120ms;
-
-        position: absolute;
-        z-index: 2;
-        min-height: 20px;
-        top:0;
-        left:0;
-        padding: 2px 6px;
-    }
-    button:hover {
-        color: #2152A3;// TODO: Set right colors:
-        background-color: #F9F9FA;
-    }
-
-    :host(:focus-within) button, 
-    :host(:hover) button {
-        opacity: 1;
-    }
-    */
-
-</style>
 <section ng-style="{'background-color': block.data.backgroundColor}">
-    <!--
-    <button type="button" ng-click="block.edit()" ng-focus="block.focus">
-        <span class="file-name">{{block.label}}</span>
-    </button>
-    -->
-    <slot name="area-container" part="area-container"></slot>
+    <umb-block-grid-render-area-slots></umb-block-grid-render-area-slots>
 </section>
diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml
@@ -2201,6 +2201,8 @@ Mange hilsner fra Umbraco robotten
     <key alias="headlineAdvanced">Avanceret</key>
     <key alias="forceHideContentEditor">Skjul indholdseditoren</key>
     <key alias="forceHideContentEditorHelp">Skjul indholds redigerings knappen samt indholdseditoren i Blok Redigerings vinduet</key>
+    <key alias="girdInlineEditing">Direkte redigering</key>
+    <key alias="girdInlineEditingHelp">Tilføjer direkte redigering a det første felt. Yderligere felter optræder kun i redigerings vinduet.</key>
     <key alias="blockHasChanges">Du har lavet ændringer til dette indhold. Er du sikker på at du vil kassere dem?</key>
     <key alias="confirmCancelBlockCreationHeadline">Annuller oprettelse?</key>
     <key alias="confirmCancelBlockCreationMessage"><![CDATA[Er du sikker på at du vil annullere oprettelsen.]]></key>
@@ -2218,6 +2220,7 @@ Mange hilsner fra Umbraco robotten
     <key alias="areaDisallowAllBlocks">Tillad kun specifikke blok-typer</key>
     <key alias="areaAllowedBlocks">Tilladte blok-typer</key>
     <key alias="areaAllowedBlocksHelp">Vælg de blok-typer, der er tilladt i dette område, og evt. også hvor mange af hver type, redaktørerne skal tilføje til området.</key>
+    <key alias="areaAllowedBlocksEmpty">Når denne er tom er alle block-typer tilladt for områder tilladt.</key>
     <key alias="confirmDeleteBlockAreaMessage">Er du sikker på, at du vil slette dette område?</key>
     <key alias="confirmDeleteBlockAreaNotice">Alle blokke, der er oprettet i dette område, vil blive slettet.</key>
     <key alias="layoutOptions">Layout-opsætning</key>
@@ -2255,9 +2258,9 @@ Mange hilsner fra Umbraco robotten
     <key alias="addAppearanceOptions">Tilføj katalog udseende</key>
     <key alias="addBlockType">Tilføj Blok</key>
     <key alias="addBlockGroup">Tilføj gruppe</key>
-    <key alias="pickSpecificAllowance">Tilføj gruppe eller block</key>
-    <key alias="allowanceMinimum">Sæt minimum krav for denne tilladelse</key>
-    <key alias="allowanceMaximum">Set maksimum krav for denne tilladelse</key>
+    <key alias="pickSpecificAllowance">Tilføj gruppe eller Blok</key>
+    <key alias="allowanceMinimum">Sæt minimum krav</key>
+    <key alias="allowanceMaximum">Sæt maksimum krav</key>
     <key alias="block">Blok</key>
     <key alias="tabBlock">Blok</key>
     <key alias="tabBlockTypeSettings">Indstillinger</key>
@@ -2267,6 +2270,9 @@ Mange hilsner fra Umbraco robotten
     <key alias="getSampleHeadline">Installer demo konfiguration</key>
     <key alias="getSampleDescription"><![CDATA[Dette tilføjer basale og hjælper dig til at komme igang med Block Grid Editor.<br/>Dette indeholder Blokke for Overskrift, Beriget-Tekst, Billede og To-Koloners-Layout.]]></key>
     <key alias="getSampleButton">Installer</key>
+    <key alias="actionEnterSortMode">Sortings tilstand</key>
+    <key alias="actionExitSortMode">Afslut sortings tilstand</key>
+    <key alias="areaAliasIsNotUnique">Dette område alias skal være unikt sammenlignet med andre områder af denne Blok.</key>
   </area>
   <area alias="contentTemplatesDashboard">
     <key alias="whatHeadline">Hvad er Indholdsskabeloner?</key>

diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
@@ -2747,7 +2747,9 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="tabBlockSettings">Settings</key>
     <key alias="headlineAdvanced">Advanced</key>
     <key alias="forceHideContentEditor">Hide content editor</key>
-    <key alias="forceHideContentEditorHelp">Hide the content edit button and the content editor from the Block Editor overlay</key>
+    <key alias="forceHideContentEditorHelp">Hide the content edit button and the content editor from the Block Editor overlay.</key>
+    <key alias="girdInlineEditing">Inline editing</key>
+    <key alias="girdInlineEditingHelp">Enables inline editing for the first Property. Additional properties can be edited in the overlay.</key>
     <key alias="blockHasChanges">You have made changes to this content. Are you sure you want to discard them?</key>
     <key alias="confirmCancelBlockCreationHeadline">Discard creation?</key>
     <key alias="confirmCancelBlockCreationMessage"><![CDATA[Are you sure you want to cancel the creation.]]></key>
@@ -2779,6 +2781,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="allowBlockInRootHelp">Make this block available in the root of the layout.</key>
     <key alias="allowBlockInAreas">Allow in areas</key>
     <key alias="allowBlockInAreasHelp">Make this block available within other Blocks.</key>
+    <key alias="areaAllowedBlocksEmpty">When empty all Blocks allowed for Areas can be created.</key>
     <key alias="areas">Areas</key>
     <key alias="areasLayoutColumns">Grid Columns for Areas</key>
     <key alias="areasLayoutColumnsHelp">Define how many columns that will be available for areas. If not defined, the number of columns defined for the entire layout will be used.</key>
@@ -2805,17 +2808,20 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="addBlockType">Add Block</key>
     <key alias="addBlockGroup">Add group</key>
     <key alias="pickSpecificAllowance">Pick group or Block</key>
-    <key alias="allowanceMinimum">Set minimum requirement for this allowance</key>
-    <key alias="allowanceMaximum">Set maximum requirement for this allowance</key>
+    <key alias="allowanceMinimum">Set a minimum requirement</key>
+    <key alias="allowanceMaximum">Set a maximum requirement</key>
     <key alias="block">Block</key>
     <key alias="tabBlock">Block</key>
     <key alias="tabBlockTypeSettings">Settings</key>
     <key alias="tabAreas">Areas</key>
     <key alias="tabAdvanced">Advanced</key>
-    <key alias="headlineAllowance">Allowance</key>
+    <key alias="headlineAllowance">Permissions</key>
     <key alias="getSampleHeadline">Install Sample Configuration</key>
     <key alias="getSampleDescription"><![CDATA[This will add basic Blocks and help you get started with the Block Grid Editor. You'll get Blocks for Headline, Rich Text, Image, as well as a Two Column Layout. ]]></key>
     <key alias="getSampleButton">Install</key>
+    <key alias="actionEnterSortMode">Sort mode</key>
+    <key alias="actionExitSortMode">End sort mode</key>
+    <key alias="areaAliasIsNotUnique">This Areas Alias must be unique compared to the other Areas of this Block.</key>
   </area>
   <area alias="contentTemplatesDashboard">
     <key alias="whatHeadline">What are Content Templates?</key>

diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
@@ -2851,6 +2851,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="headlineAdvanced">Advanced</key>
     <key alias="forceHideContentEditor">Hide content editor</key>
     <key alias="forceHideContentEditorHelp">Hide the content edit button and the content editor from the Block Editor overlay</key>
+    <key alias="girdInlineEditing">Inline editing</key>
+    <key alias="girdInlineEditingHelp">Enables inline editing for the first Property. Additional properties can be edited in the overlay.</key>
     <key alias="blockHasChanges">You have made changes to this content. Are you sure you want to discard them?</key>
     <key alias="confirmCancelBlockCreationHeadline">Discard creation?</key>
     <key alias="confirmCancelBlockCreationMessage"><![CDATA[Are you sure you want to cancel the creation.]]></key>
@@ -2882,6 +2884,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="allowBlockInRootHelp">Make this block available in the root of the layout.</key>
     <key alias="allowBlockInAreas">Allow in areas</key>
     <key alias="allowBlockInAreasHelp">Make this block available within other Blocks.</key>
+    <key alias="areaAllowedBlocksEmpty">When empty all Blocks allowed for Areas can be created.</key>
     <key alias="areas">Areas</key>
     <key alias="areasLayoutColumns">Grid Columns for Areas</key>
     <key alias="areasLayoutColumnsHelp">Define how many columns that will be available for areas. If not defined, the number of columns defined for the entire layout will be used.</key>
@@ -2908,17 +2911,20 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="addBlockType">Add Block</key>
     <key alias="addBlockGroup">Add group</key>
     <key alias="pickSpecificAllowance">Pick group or Block</key>
-    <key alias="allowanceMinimum">Set minimum requirement for this allowance</key>
-    <key alias="allowanceMaximum">Set maximum requirement for this allowance</key>
+    <key alias="allowanceMinimum">Set a minimum requirement</key>
+    <key alias="allowanceMaximum">Set a maximum requirement</key>
     <key alias="block">Block</key>
     <key alias="tabBlock">Block</key>
     <key alias="tabBlockTypeSettings">Settings</key>
     <key alias="tabAreas">Areas</key>
     <key alias="tabAdvanced">Advanced</key>
-    <key alias="headlineAllowance">Allowance</key>
+    <key alias="headlineAllowance">permissions</key>
     <key alias="getSampleHeadline">Install Sample Configuration</key>
     <key alias="getSampleDescription"><![CDATA[This will add basic Blocks and help you get started with the Block Grid Editor. You'll get Blocks for Headline, Rich Text, Image, as well as a Two Column Layout.]]></key>
     <key alias="getSampleButton">Install</key>
+    <key alias="actionEnterSortMode">Sort mode</key>
+    <key alias="actionExitSortMode">End sort mode</key>
+    <key alias="areaAliasIsNotUnique">This Areas Alias must be unique compared to the other Areas of this Block.</key>
   </area>
   <area alias="contentTemplatesDashboard">
     <key alias="whatHeadline">What are Content Templates?</key>

diff --git a/src/Umbraco.Core/PropertyEditors/BlockGridConfiguration.cs b/src/Umbraco.Core/PropertyEditors/BlockGridConfiguration.cs
@@ -40,6 +40,9 @@ public class BlockGridBlockConfiguration : IBlockConfiguration
         [DataMember(Name ="columnSpanOptions")]
         public BlockGridColumnSpanOption[] ColumnSpanOptions { get; set; }  = Array.Empty<BlockGridColumnSpanOption>();
 
+        [DataMember(Name ="rowMinSpan")]
+        public int? RowMinSpan { get; set; }
+
         [DataMember(Name ="rowMaxSpan")]
         public int? RowMaxSpan { get; set; }
 
@@ -82,6 +85,9 @@ public class BlockGridBlockConfiguration : IBlockConfiguration
         [DataMember(Name ="editorSize")]
         public string? EditorSize { get; set; }
 
+        [DataMember(Name ="inlineEditing")]
+        public bool InlineEditing { get; set; }
+
         [DataMember(Name ="forceHideContentEditorInOverlay")]
         public bool ForceHideContentEditorInOverlay { get; set; }
 

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
@@ -24,7 +24,8 @@
                 // optional, if set this will be used for the property alias validation path (hack required because NC changes the actual property.alias :/)
                 propertyAlias: "@",
                 showInherit: "<",
-                inheritsFrom: "<"
+                inheritsFrom: "<",
+                hideLabel: "<?"
             }
         });
 

diff --git a/...o.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js b/...o.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
@@ -5,7 +5,9 @@
      * A component to render the property action toggle
      */
 
-    function umbPropertyActionsController(keyboardService, localizationService) {
+    function umbPropertyActionsController(keyboardService, localizationService, $scope) {
+
+        var unsubscribe = [];
 
         var vm = this;
 
@@ -56,6 +58,9 @@
         }
 
         function onDestroy() {
+            for (var i = 0; i < unsubscribe.length; i++) {
+                unsubscribe[i]();
+            }
             if (vm.isOpen === true) {
                 destroyDropDown();
             }
@@ -72,25 +77,35 @@
                 vm.labels.openText = values[0];
                 vm.labels.closeText = values[1];
             });
+
+            unsubscribe.push($scope.$watchCollection("vm.actions",
+                function (newValue, oldValue) {
+                    if (newValue !== oldValue) {
+                        updateActions();
+                    }
+                }
+            ));
         }
 
         function onChanges(simpleChanges) {
             if (simpleChanges.actions) {
+                updateActions();
+            }
+        }
 
-              let actions = simpleChanges.actions.currentValue || [];
+        function updateActions() {
 
-              Utilities.forEach(actions, action => {
+            Utilities.forEach(vm.actions || [], action => {
 
-                if (action.labelKey) {
-                    localizationService.localize(action.labelKey, (action.labelTokens || []), action.label).then(data => {
-                      action.label = data;
-                    });
-
-                    action.useLegacyIcon = action.useLegacyIcon === false ? false : true;
-                    action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon;
-                }
-              });
-            }
+              if (action.labelKey) {
+                  localizationService.localize(action.labelKey, (action.labelTokens || []), action.label).then(data => {
+                    action.label = data;
+                  });
+
+                  action.useLegacyIcon = action.useLegacyIcon === false ? false : true;
+                  action.icon = (action.useLegacyIcon && action.icon.indexOf('icon-') !== 0 ? 'icon-' : '') + action.icon;
+              }
+            });
         }
     }