From 79b5484d23c6aecfcbc8bf8cbc1d26424c4382df 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 1c23c53e38..dc2fa40478 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml @@ -2267,6 +2267,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 7bb861fb3d..d393489bd4 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml @@ -2818,6 +2818,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 7e1aa9525a..6dbed10067 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml +++ b/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 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 ab63757bb5..05f55d3a07 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 524be4f4cd..9909b640a1 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 3b9b6b4bea..914e701fa6 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 f7c1351c47..64d5e421e2 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();