yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: 17533 (#17579)

Browse Source 
* fix styling of placeholder on list

* make sure to only setup items that uses the same Sorter Controller identifier

* make sure identifier is unique for each variant

* correct comments

* style grid block

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>
This commit is contained in:
Niels Lyngsø
2024-11-20 11:25:21 +01:00
committed by GitHub
parent 01d66875b2
commit 61192ba3a0
5 changed files with 112 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
View File

@@ -107,9 +107,6 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryE
*/
@customElement('umb-block-grid-entries')
export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElement) {
//
// TODO: Make sure Sorter callbacks handles columnSpan when retrieving a new entry.
//
#sorter = new UmbSorterController<UmbBlockGridLayoutModel, UmbBlockGridEntryElement>(this, {
...SORTER_CONFIG,
@@ -198,7 +195,6 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
},
null,
);
this.observe(
this.#context.amountOfAllowedBlockTypes,
(length) => {
@@ -253,6 +249,16 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
'observeIsReadOnly',
);
this.observe(
manager.variantId,
(variantId) => {
if (variantId) {
this.#sorter.identifier = 'umb-block-grid-' + variantId.toString();
}
},
'observeVariantId',
);
if (this.areaKey) {
this.observe(
this.#context.areaTypeCreateLabel,

38
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
View File

@@ -555,6 +555,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
display: block;
--umb-block-grid-entry-actions-opacity: 0;
}
:host([settings-invalid]),
:host([content-invalid]),
:host(:hover),
@@ -562,6 +563,23 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
--umb-block-grid-entry-actions-opacity: 1;
}
:host::after {
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
inset: 0;
border: 1px solid transparent;
border-radius: var(--uui-border-radius);
transition: border-color 240ms ease-in;
}
:host([settings-invalid])::after,
:host([content-invalid])::after {
border-color: var(--uui-color-danger);
}
uui-action-bar {
position: absolute;
top: var(--uui-size-2);
@@ -591,17 +609,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
height: 100%;
}
:host::after {
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
inset: 0;
border: 1px solid transparent;
border-radius: var(--uui-border-radius);
transition: border-color 240ms ease-in;
}
:host(:hover):not(:drop)::after {
display: block;
border-color: var(--uui-color-interactive-emphasis);
@@ -630,15 +637,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
opacity: 0;
}
:host([settings-invalid])::after,
:host([content-invalid])::after {
border-color: var(--uui-color-danger);
}
:host([settings-invalid])::before,
:host([content-invalid])::before {
background-color: var(--uui-color-danger);
}
uui-badge {
z-index: 2;
}

1
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts
View File

@@ -31,6 +31,7 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
}
#open-part {
display: flex;
min-height: var(
--uui-size-layout-2
); /* TODO: We should not do this, but it is a quick fix for now to ensure that the top part of a block gets a minimum height. */

102
src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
View File

@@ -13,6 +13,7 @@ import type {
ManifestBlockEditorCustomView,
UmbBlockEditorCustomViewProperties,
} from '@umbraco-cms/backoffice/block-custom-view';
import { UUIBlinkAnimationValue } from '@umbraco-cms/backoffice/external/uui';
/**
* @element umb-block-list-entry
@@ -302,20 +303,22 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
#renderBlock() {
return this.contentKey && this._contentTypeAlias
? html`
<umb-extension-slot
type="blockEditorCustomView"
default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
.props=${this._blockViewProps}
.filter=${this.#extensionSlotFilterMethod}
single
>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
>
<uui-action-bar>
${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()}
</uui-action-bar>
${!this._showContentEdit && this._contentInvalid
? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
: nothing}
<div class="umb-block-list__block">
<umb-extension-slot
type="blockEditorCustomView"
default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
.props=${this._blockViewProps}
.filter=${this.#extensionSlotFilterMethod}
single
>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
>
<uui-action-bar>
${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()}
</uui-action-bar>
${!this._showContentEdit && this._contentInvalid
? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
: nothing}
</div>
`
: nothing;
}
@@ -385,6 +388,23 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
--umb-block-list-entry-actions-opacity: 1;
}
:host::after {
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
inset: 0;
border: 1px solid transparent;
border-radius: var(--uui-border-radius);
transition: border-color 240ms ease-in;
}
:host([settings-invalid])::after,
:host([content-invalid])::after {
border-color: var(--uui-color-danger);
}
uui-action-bar {
position: absolute;
top: var(--uui-size-2);
@@ -393,24 +413,48 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
transition: opacity 120ms;
}
:host([drag-placeholder]) {
opacity: 0.2;
--umb-block-list-entry-actions-opacity: 0;
}
:host([settings-invalid])::after,
:host([content-invalid])::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border: 1px solid var(--uui-color-danger);
border-radius: var(--uui-border-radius);
}
uui-badge {
z-index: 2;
}
:host::after {
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
inset: 0;
border: 1px solid transparent;
border-radius: var(--uui-border-radius);
transition: border-color 240ms ease-in;
}
:host(:hover):not(:drop)::after {
display: block;
border-color: var(--uui-color-interactive-emphasis);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.7),
inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
:host([drag-placeholder])::after {
display: block;
border-width: 2px;
border-color: var(--uui-color-interactive-emphasis);
animation: ${UUIBlinkAnimationValue};
}
:host([drag-placeholder])::before {
content: '';
position: absolute;
pointer-events: none;
inset: 0;
border-radius: var(--uui-border-radius);
background-color: var(--uui-color-interactive-emphasis);
opacity: 0.12;
}
:host([drag-placeholder]) .umb-block-list__block {
transition: opacity 50ms 16ms;
opacity: 0;
}
`,
];
}

14
src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
View File

@@ -203,7 +203,7 @@ export type UmbSorterConfig<T, ElementType extends HTMLElement = HTMLElement> =
Partial<Pick<INTERNAL_UmbSorterConfig<T, ElementType>, 'ignorerSelector' | 'containerSelector' | 'identifier'>>;
/**
* @class UmbSorterController
* @implements {UmbControllerInterface}
* @description This controller can make user able to sort items.
@@ -265,6 +265,12 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
public get identifier() {
return this.#config.identifier;
}
public set identifier(identifier: UniqueType) {
this.#config.identifier = identifier;
}
#isActiveIdentifier() {
return UmbSorterController.activeSorter?.identifier === this.identifier;
}
constructor(host: UmbControllerHostElement, config: UmbSorterConfig<T, ElementType>) {
super(host);
@@ -460,7 +466,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
}
// If we have a currentItem and the element matches, we should set the currentElement to this element.
if (UmbSorterController.activeItem) {
if (UmbSorterController.activeItem && this.#isActiveIdentifier()) {
const elUnique = this.#config.getUniqueOfElement(element);
const modelUnique = this.#config.getUniqueOfModel(UmbSorterController.activeItem);
if (elUnique === modelUnique && elUnique !== undefined) {
@@ -587,12 +593,12 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
};
#handleDragEnd = async (event?: DragEvent) => {
// If not good drop, revert model?
if (!UmbSorterController.activeElement || !UmbSorterController.activeItem) {
return;
}
// If browser thinks this was a cancelled move, we should revert the move. (based on dropEffect === 'none') [NL]
// But notice, this also count when releasing the mouse outside the sorters element, this i'm not sure if I agree on, would be ideal only to revert if ESC was pressed. [NL]
if (UmbSorterController.originalSorter && event?.dataTransfer != null && event.dataTransfer.dropEffect === 'none') {
// Revert move, to start position.
UmbSorterController.originalSorter.moveItemInModel(