Skip to content

Merge BjarneF fix into 10.3 #13220

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

Merged
nielslyngsoe merged 7 commits into from
Oct 17, 2022
Merged

Merge BjarneF fix into 10.3 #13220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
14bf77b
Adjust duplicate for attributes with "iconcolor" value
bjarnef Aug 16, 2022
4081111
Fix property info icon overlapping property label
bjarnef Aug 16, 2022
1195537
Better center alignment of symbol in property info component button
bjarnef Aug 16, 2022
009a0e6
Align icon in action button
bjarnef Aug 16, 2022
309ae46
Workaround to not trigger edit block when navigating keyboard to requ…
bjarnef Aug 16, 2022
c8717c7
Merge remote-tracking branch 'BjarneF/v10/feature/block-configuration…
nielslyngsoe Oct 17, 2022
33f464d
scale by keyboard fix
nielslyngsoe Oct 17, 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
7 changes: 6 additions & 1 deletion src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,13 +130,18 @@ umb-block-card {
right: 10px;
opacity: 0;
transition: opacity 120ms;
margin-right: 10px;

.__action {
display: inline-block;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 28px;
height: 28px;
background-color: white;
color:@ui-action-type;

&:hover {
color: @ui-action-type-hover;
}
Expand Down
8 changes: 6 additions & 2 deletions ...Web.UI.Client/src/views/components/umb-property-info-button/umb-property-info-button.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,20 @@ umb-property-info-button {
display: inline-block;
vertical-align: text-bottom;

.control-label + & {
margin-left: 3px;
}

> .__button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;

width: 15px;
height: 15px;
padding-top: 1px;
padding-left: 1px;
padding: 2px 1px 1px 1px;
margin-top: -1px;
font-size: 12px;
font-weight: 700;
Expand Down
20 changes: 14 additions & 6 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,8 @@

vm.scaleHandlerKeyUp = function($event) {

let addCol = 0;

let addColIndex = 0;
let addRow = 0;

switch ($event.originalEvent.key) {
Expand All @@ -322,16 +323,23 @@
addRow = 1;
break;
case 'ArrowLeft':
addCol = -1;
addColIndex = -1;
break;
case 'ArrowRight':
addCol = 1;
addColIndex = 1;
break;
}

const newColumnSpan = Math.max(vm.layoutEntry.columnSpan + addCol, 1);

vm.layoutEntry.columnSpan = closestColumnSpanOption(newColumnSpan, vm.layoutEntry.$block.config.columnSpanOptions, gridColumns.length).columnSpan;
if(addColIndex !== 0) {
if (vm.layoutEntry.$block.config.columnSpanOptions.length > 0) {
const sortOptions = vm.layoutEntry.$block.config.columnSpanOptions.sort((a,b) => (a.columnSpan > b.columnSpan) ? 1 : ((b.columnSpan > a.columnSpan) ? -1 : 0));
const currentColIndex = sortOptions.findIndex(x => x.columnSpan === vm.layoutEntry.columnSpan);
const newColIndex = Math.min(Math.max(currentColIndex + addColIndex, 0), sortOptions.length-1);
vm.layoutEntry.columnSpan = sortOptions[newColIndex].columnSpan;
} else {
vm.layoutEntry.columnSpan = vm.layoutColumnsInt;
}
}
let newRowSpan = Math.max(vm.layoutEntry.rowSpan + addRow, vm.layoutEntry.$block.config.rowMinSpan || 1);
if(vm.layoutEntry.$block.config.rowMaxSpan != null) {
newRowSpan = Math.min(newRowSpan, vm.layoutEntry.$block.config.rowMaxSpan);
Expand Down
2 changes: 1 addition & 1 deletion ...t/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
});

event.stopPropagation();
}
};

vm.removeBlockByIndex = function (index) {
$scope.model.value.splice(index, 1);
Expand Down
6 changes: 4 additions & 2 deletions ....UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
ng-repeat="block in model.value"
ng-class="{'--isOpen':vm.openBlock === block}"
ng-click="vm.openBlockOverlay(block)">
<div class="__actions">
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<div class="__actions" ng-click="$event.stopPropagation()" tabindex="-1">
<button type="button"
class="btn-reset __action umb-outline"
ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
Expand Down
42 changes: 24 additions & 18 deletions ...nt/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@
<!-- label -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="label"><localize key="blockEditor_labelLabelTemplate">label</localize></label>
<label class="control-label" for="blockLabel"><localize key="blockEditor_labelLabelTemplate">label</localize></label>
<div class="controls">
<input type="text" name="label" ng-model="vm.block.label" style="width:100%" umb-auto-focus/>
<input type="text" name="label" id="blockLabel" ng-model="vm.block.label" style="width:100%" umb-auto-focus/>
</div>
</div>
</div>

<!-- custom view -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="iconcolor"><localize key="blockEditor_labelCustomView">Custom view</localize></label>
<label class="control-label" for="blockCustomView"><localize key="blockEditor_labelCustomView">Custom view</localize></label>
<umb-property-info-button button-title-key="blockEditor_labelCustomViewInfoTitle">
<localize key="blockEditor_labelCustomViewDescription">Overwrite how this block appears in the BackOffice UI. Pick a .html file containing your presentation.</localize>
</umb-property-info-button>
Expand All @@ -50,7 +50,7 @@
</button>
</div>
</div>
<button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.view === null" ng-click="vm.addViewForBlock(vm.block)">
<button type="button" id="blockCustomView" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.view === null" ng-click="vm.addViewForBlock(vm.block)">
<localize key="blockEditor_addCustomView">Add custom view</localize>
</button>
</div>
Expand All @@ -60,7 +60,7 @@
<!-- custom stylesheet -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="iconcolor"><localize key="blockEditor_labelCustomStylesheet">Custom stylesheet</localize></label>
<label class="control-label" for="blockStyleSheet"><localize key="blockEditor_labelCustomStylesheet">Custom stylesheet</localize></label>
<div class="controls">
<div class="__settings-input --hasValue" ng-if="vm.block.stylesheet !== null" >

Expand All @@ -71,7 +71,7 @@
</button>
</div>
</div>
<button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.stylesheet === null" ng-click="vm.addStylesheetForBlock(vm.block)">
<button type="button" id="blockStyleSheet" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.stylesheet === null" ng-click="vm.addStylesheetForBlock(vm.block)">
<localize key="blockEditor_addCustomStylesheet">Add custom stylesheet</localize>
</button>
</div>
Expand All @@ -81,9 +81,9 @@
<!-- editor overlay size -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="editorSize"><localize key="blockEditor_labelEditorSize">Editor size</localize></label>
<label class="control-label" for="blockEditorSize"><localize key="blockEditor_labelEditorSize">Editor size</localize></label>
<div class="controls">
<select id="editorSize" ng-model="vm.block.editorSize">
<select id="blockEditorSize" ng-model="vm.block.editorSize">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
Expand All @@ -107,12 +107,12 @@
<!-- Content Element Type -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label"><localize key="blockEditor_labelContentElementType">Content ElementType</localize></label>
<label class="control-label" for="blockContentElemenType"><localize key="blockEditor_labelContentElementType">Content ElementType</localize></label>
<div class="controls">
<div class="__settings-input --hasValue" ng-if="vm.block.contentElementTypeKey !== null" >
<umb-node-preview icon="vm.contentPreview.icon" name="vm.contentPreview.name" alias="vm.contentPreview.alias"></umb-node-preview>
<div class="__control-actions">
<button type="button" class="btn-reset __control-actions-btn --open umb-outline" ng-click="vm.openElementType(vm.block.contentElementTypeKey)">
<button type="button" id="blockContentElemenType" class="btn-reset __control-actions-btn --open umb-outline" ng-click="vm.openElementType(vm.block.contentElementTypeKey)">
<umb-icon icon="icon-edit" class="icon"></umb-icon>
</button>
</div>
Expand All @@ -124,7 +124,7 @@
<!-- Settings Element Type -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label"><localize key="blockEditor_labelSettingsElementType">Settings Element Type</localize></label>
<label class="control-label" for="blockSettingsElemenType"><localize key="blockEditor_labelSettingsElementType">Settings Element Type</localize></label>
<div class="controls">
<div class="__settings-input --hasValue" ng-if="vm.block.settingsElementTypeKey !== null">
<umb-node-preview icon="vm.settingsPreview.icon" name="vm.settingsPreview.name" alias="vm.settingsPreview.alias"></umb-node-preview>
Expand All @@ -137,7 +137,7 @@
</button>
</div>
</div>
<button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.settingsElementTypeKey === null" ng-click="vm.addSettingsForBlock($event, vm.block)">
<button type="button" id="blockSettingsElemenType" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.settingsElementTypeKey === null" ng-click="vm.addSettingsForBlock($event, vm.block)">
<localize key="blockEditor_addSettingsElementType">Add settings</localize>
</button>
</div>
Expand All @@ -157,9 +157,10 @@
<!-- backgroundColor -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="backgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
<label class="control-label" for="blockBackgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
<div class="controls">
<umb-color-picker
id="blockBackgroundColor"
ng-model="vm.block.backgroundColor"
options="vm.colorPickerOptions"
on-change="vm.changeBackgroundColor(color)">
Expand All @@ -171,9 +172,10 @@
<!-- iconColor -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="iconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
<label class="control-label" for="blockIconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
<div class="controls">
<umb-color-picker
id="blockIconColor"
ng-model="vm.block.iconColor"
options="vm.colorPickerOptions"
on-change="vm.changeIconColor(color)">
Expand All @@ -185,7 +187,7 @@
<!-- thumbnail -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="iconcolor"><localize key="blockEditor_thumbnail">Thumbnail</localize></label>
<label class="control-label" for="blockThumbnail"><localize key="blockEditor_thumbnail">Thumbnail</localize></label>
<div class="controls">
<div class="__settings-input --hasValue" ng-if="vm.block.thumbnail !== null" >

Expand All @@ -196,7 +198,7 @@
</button>
</div>
</div>
<button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.thumbnail === null" ng-click="vm.addThumbnailForBlock(vm.block)">
<button type="button" id="blockThumbnail" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.thumbnail === null" ng-click="vm.addThumbnailForBlock(vm.block)">
<localize key="blockEditor_addThumbnail">Add thumbnail</localize>
</button>
</div>
Expand All @@ -218,9 +220,13 @@
<!-- forceHideContentEditorInOverlay -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="forceHideContentEditorInOverlay"><localize key="blockEditor_forceHideContentEditor">Force hide content editor</localize></label>
<label class="control-label" for="blockforceHideContentEditorInOverlay"><localize key="blockEditor_forceHideContentEditor">Force hide content editor</localize></label>
<div class="controls">
<umb-toggle checked="vm.block.forceHideContentEditorInOverlay" on-click="vm.block.forceHideContentEditorInOverlay = vm.block.forceHideContentEditorInOverlay != true"></umb-toggle>
<umb-toggle
input-id="blockforceHideContentEditorInOverlay"
checked="vm.block.forceHideContentEditorInOverlay"
on-click="vm.block.forceHideContentEditorInOverlay = vm.block.forceHideContentEditorInOverlay != true">
</umb-toggle>
</div>
</div>
</div>
Expand Down