From 0def36ac31d0521821444543b9e87d351b268a0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 21 Nov 2022 20:07:18 +0100 Subject: [PATCH] Block Grid Editor translations and Area size keyboard navigation (#13450) --- .../EmbeddedResources/Lang/da.xml | 3 +++ .../EmbeddedResources/Lang/en.xml | 3 +++ .../EmbeddedResources/Lang/en_us.xml | 3 +++ .../umb-block-grid-column-editor-option.html | 2 +- ...b-block-grid-configuration-area-entry.html | 8 ++++---- .../umbBlockGridAreaEditor.component.js | 3 --- ...ockGridConfigurationAreaEntry.component.js | 19 ++++++++++--------- 7 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml index 32317e57d0c8..a37490727995 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml @@ -2268,6 +2268,9 @@ Mange hilsner fra Umbraco robotten Sortings tilstand Afslut sortings tilstand Dette område alias skal være unikt sammenlignet med andre områder af denne Blok. + Konfigurer område + Slet område + Tilføj mulighed for %0% koloner Hvad er Indholdsskabeloner? diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml index f3bdf620d452..4787679027ce 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml @@ -2817,6 +2817,9 @@ To manage your website, simply open the Umbraco backoffice and start adding cont Sort mode End sort mode This Areas Alias must be unique compared to the other Areas of this Block. + Configure area + Delete area + Add spanning %0% columns option What are Content Templates? diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml index c19642d35116..9e3fe2305a4d 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml @@ -2920,6 +2920,9 @@ To manage your website, simply open the Umbraco backoffice and start adding cont Sort mode End sort mode This Areas Alias must be unique compared to the other Areas of this Block. + Configure area + Delete area + Add spanning %0% columns option What are Content Templates? diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html index ab63757bb510..05f55d3a0761 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html @@ -18,7 +18,7 @@
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html index 524be4f4cd96..9909b640a199 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html @@ -4,18 +4,18 @@
- -
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaEditor.component.js index 3b9b6b4bea1a..914e701fa67c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaEditor.component.js +++ b/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); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridConfigurationAreaEntry.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridConfigurationAreaEntry.component.js index f7c1351c4771..64d5e421e2cc 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridConfigurationAreaEntry.component.js +++ b/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();