Block Grid Editor translations and Area size keyboard navigation (#13450)

src/Umbraco.Core/EmbeddedResources/Lang/da.xml

@@ -2267,6 +2267,9 @@ Mange hilsner fra Umbraco robotten
     <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>
+    <key alias="configureArea">Konfigurer område</key>
+    <key alias="deleteArea">Slet område</key>
+    <key alias="addColumnSpanOption">Tilføj mulighed for %0% koloner</key>
   </area>
   <area alias="contentTemplatesDashboard">
     <key alias="whatHeadline">Hvad er Indholdsskabeloner?</key>

src/Umbraco.Core/EmbeddedResources/Lang/en.xml

@@ -2818,6 +2818,9 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <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>
+    <key alias="configureArea">Configure area</key>
+    <key alias="deleteArea">Delete area</key>
+    <key alias="addColumnSpanOption">Add spanning %0% columns option</key>
   </area>
   <area alias="contentTemplatesDashboard">
     <key alias="whatHeadline">What are Content Templates?</key>

src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml

@@ -2921,6 +2921,9 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <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>
+    <key alias="configureArea">Configure area</key>
+    <key alias="deleteArea">Delete area</key>
+    <key alias="addColumnSpanOption">Add spanning %0% columns option</key>
   </area>
   <area alias="contentTemplatesDashboard">
     <key alias="whatHeadline">What are Content Templates?</key>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html

@@ -18,7 +18,7 @@
         <div class="__border"></div>
         <button type="button" class="btn-reset" ng-click="vm.onClickAdd()">
             <span class="sr-only">
-                <localize key="TODO spell out the action">Add</localize>
+                <localize key="blockEditor_addColumnSpanOption" tokens="[vm.columnSpanOption.columnSpan]">Add span option</localize>
                 {{vm.columnSpanOption.columnSpan}}
             </span>
         </button>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html

@@ -4,18 +4,18 @@
 
     <div class="umb-block-grid__area--actions">
 
-        <button type="button" class="btn-reset umb-outline action --edit" localize="title" title="TODO"
+        <button type="button" class="btn-reset umb-outline action --edit" localize="title" title="blockEditor_configureArea"
                 ng-click="vm.onEditClick($event);">
             <umb-icon icon="icon-edit" class="icon"></umb-icon>
             <span class="sr-only">
-                <localize key="general_edit">Edit</localize>
+                <localize key="blockEditor_configureArea">Edit</localize>
             </span>
         </button>
-        <button type="button" class="btn-reset umb-outline action --delete" localize="title" title="TODO"
+        <button type="button" class="btn-reset umb-outline action --delete" localize="title" title="blockEditor_deleteArea"
                 ng-click="vm.onDeleteClick($event);">
             <umb-icon icon="icon-trash" class="icon"></umb-icon>
             <span class="sr-only">
-                <localize key="general_delete">Delete</localize>
+                <localize key="blockEditor_deleteArea">Delete</localize>
             </span>
         </button>
     </div>

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

@@ -164,7 +164,6 @@
         }
 
         vm.requestDeleteArea = function (area) {
-            // TODO: Translations
             localizationService.localizeMany(["general_delete", "blockEditor_confirmDeleteBlockAreaMessage", "blockEditor_confirmDeleteBlockAreaNotice"]).then(function (data) {
                 overlayService.confirmDelete({
                     title: data[0],
@@ -216,8 +215,6 @@
 
         vm.openArea = null;
         vm.openAreaOverlay = function (area) {
-
-            // TODO: use the right localization key:
             localizationService.localize("blockEditor_blockConfigurationOverlayTitle").then(function (localized) {
 
                 var clonedAreaData = Utilities.copy(area);

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

@@ -2,9 +2,7 @@
     "use strict";
 
     /**
-     * 
      * Note for new backoffice: there is a lot of similarities between the Area configuration and the Block entry, as they both share Grid scaling features.
-     * TODO: Can we already as part of this PR make it shared as a dictionary or something?
      */
 
 
@@ -100,6 +98,13 @@
 
         function updateGridLayoutData() {
 
+            if(!layoutContainer) {
+                layoutContainer = $element[0].closest('.umb-block-grid-area-editor__grid-wrapper');
+                if(!layoutContainer) {
+                    console.error($element[0], 'could not find area-container');
+                }
+            }
+
             const computedStyles = window.getComputedStyle(layoutContainer);
 
             gridColumns = computedStyles.gridTemplateColumns.trim().split("px").map(x => Number(x));
@@ -126,12 +131,6 @@
             window.addEventListener('mouseup', vm.onMouseUp);
             window.addEventListener('mouseleave', vm.onMouseUp);
 
-
-            layoutContainer = $element[0].closest('.umb-block-grid-area-editor__grid-wrapper');
-            if(!layoutContainer) {
-                console.error($element[0], 'could not find area-container');
-            }
-
             updateGridLayoutData();
 
             scaleBoxBackdropEl = document.createElement('div');
@@ -217,6 +216,8 @@
 
         vm.scaleHandlerKeyUp = function($event) {
 
+            updateGridLayoutData();
+
             let addCol = 0;
             let addRow = 0;
 
@@ -236,7 +237,7 @@
             }
 
             // Todo: Ensure value fit with configuration.
-            vm.area.columnSpan = Math.max(vm.area.columnSpan + addCol, 1);
+            vm.area.columnSpan = Math.min(Math.max(vm.area.columnSpan + addCol, 1), gridColumns.length);
             vm.area.rowSpan = Math.max(vm.area.rowSpan + addRow, 1);
 
             $event.originalEvent.stopPropagation();