Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Grid Editor translations and Area size keyboard navigation #13450

Merged
merged 2 commits into from
Nov 21, 2022
Merged

Block Grid Editor translations and Area size keyboard navigation #13450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b797327
Display media trashed state on custom view for image demo block
nielslyngsoe Nov 21, 2022
11e3e2e
correct missing translations
nielslyngsoe Nov 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions ...ot/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoImageBlock.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,22 @@
transition: opacity 120ms;
}

.is-trashed {
background-color: #d42054 !important;
color:white !important;
}
.is-trashed .file-name {
opacity: 1;
}

</style>

<button type="button" ng-click="block.edit()" ng-focus="block.focus">
<button type="button" ng-click="block.edit()" ng-focus="block.focus" ng-class="{'is-trashed': mediaItem.trashed}">
{{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>
<img ng-if="mediaItem !== null && (mediaItem.mediaLink.indexOf('jpg') !== -1 || mediaItem.mediaLink.indexOf('png') !== -1 || mediaItem.mediaLink.indexOf('webp') !== -1 || mediaItem.mediaLink.indexOf('gif') !== -1) && !mediaItem.trashed" ng-src="{{mediaItem.mediaLink}}" alt="{{mediaItem.name}}" />
<umb-icon ng-if="mediaItem !== null && mediaItem.mediaLink.indexOf('jpg') === -1 && mediaItem.mediaLink.indexOf('png') === -1 && mediaItem.mediaLink.indexOf('webp') === -1 && mediaItem.mediaLink.indexOf('gif') === -1 || mediaItem.trashed" icon="{{mediaItem.contentType.icon}}" class="icon"></umb-icon>
<span ng-if="mediaItem !== null && mediaItem.name" class="file-name">
<span ng-if="mediaItem.trashed"><localize key="mediaPicker_trashed">Trashed</localize>:</span>
{{mediaItem.name}}
</span>
</button>
3 changes: 3 additions & 0 deletions src/Umbraco.Core/EmbeddedResources/Lang/da.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions src/Umbraco.Core/EmbeddedResources/Lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...ent/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions ...src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 0 additions & 3 deletions ...I.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaEditor.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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);
Expand Down
19 changes: 10 additions & 9 deletions .../views/propertyeditors/blockgrid/prevalue/umbBlockGridConfigurationAreaEntry.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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?
*/


Expand Down Expand Up @@ -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));
Expand All @@ -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');
Expand Down Expand Up @@ -217,6 +216,8 @@

vm.scaleHandlerKeyUp = function($event) {

updateGridLayoutData();

let addCol = 0;
let addRow = 0;

Expand All @@ -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();
Expand Down