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

ability to hide block actions (#19626)

Browse Source 
Co-authored-by: Mads Rasmussen <madsr@hey.com>
This commit is contained in:
Niels Lyngsø
2025-06-30 14:35:18 +02:00
committed by GitHub
parent df39026d0d
commit b81d45901b
4 changed files with 66 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,6 +92,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
@state()
_unsupported?: boolean;
@state()
_showActions?: boolean;
@state()
_workspaceEditContentPath?: string;
@@ -214,6 +217,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
},
null,
);
this.observe(
this.#context.actionsVisibility,
(showActions) => {
this._showActions = showActions;
},
null,
);
this.observe(
this.#context.inlineEditingMode,
@@ -546,12 +556,14 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
}
#renderActionBar() {
return html`
<uui-action-bar>
${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
${this.#renderDeleteAction()}</uui-action-bar
>
`;
return this._showActions
? html`
<uui-action-bar>
${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
${this.#renderDeleteAction()}</uui-action-bar
>
`
: nothing;
}
#renderEditAction() {

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

@@ -84,6 +84,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
@state()
_unsupported?: boolean;
@state()
_showActions?: boolean;
@state()
_workspaceEditContentPath?: string;
@@ -178,6 +181,13 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
},
null,
);
this.observe(
this.#context.actionsVisibility,
(showActions) => {
this._showActions = showActions;
},
null,
);
this.observe(
this.#context.inlineEditingMode,
(mode) => {
@@ -412,10 +422,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
single
>${this.#renderBuiltinBlockView()}</umb-extension-slot
>
<uui-action-bar>
${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()}
${this.#renderCopyToClipboardAction()} ${this.#renderDeleteAction()}
</uui-action-bar>
${this.#renderActionBar()}
${!this._showContentEdit && this._contentInvalid
? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
: nothing}
@@ -424,6 +431,15 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
: nothing;
}
#renderActionBar() {
return this._showActions
? html`<uui-action-bar>
${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
${this.#renderDeleteAction()}
</uui-action-bar>`
: nothing;
}
#renderEditContentAction() {
return this._showContentEdit && this._workspaceEditContentPath
? html`<uui-button

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

@@ -59,6 +59,9 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
@state()
_exposed?: boolean;
@state()
_showActions?: boolean;
@state()
_workspaceEditContentPath?: string;
@@ -158,6 +161,14 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
},
null,
);
this.observe(
this.#context.actionsVisibility,
(showActions) => {
this._showActions = showActions;
},
null,
);
// Data props:
this.observe(
this.#context.layout,
@@ -269,7 +280,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
single>
${this.#renderRefBlock()}
</umb-extension-slot>
<uui-action-bar> ${this.#renderEditAction()} ${this.#renderEditSettingsAction()} </uui-action-bar>
${this.#renderActionBar()}
${!this._showContentEdit && this._contentInvalid
? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
: nothing}
@@ -278,6 +289,12 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
: nothing;
}
#renderActionBar() {
return this._showActions
? html` <uui-action-bar> ${this.#renderEditAction()} ${this.#renderEditSettingsAction()}</uui-action-bar> `
: nothing;
}
#renderRefBlock() {
return html`<umb-ref-rte-block
.label=${this._label}

10
src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
View File

@@ -65,6 +65,16 @@ export abstract class UmbBlockEntryContext<
#hasExpose = new UmbBooleanState(undefined);
readonly hasExpose = this.#hasExpose.asObservable();
#actionsVisibility = new UmbBooleanState(true);
readonly actionsVisibility = this.#actionsVisibility.asObservable();
hideActions() {
this.#actionsVisibility.setValue(false);
}
showActions() {
this.#actionsVisibility.setValue(true);
}
public readonly readOnlyGuard = new UmbReadOnlyVariantGuardManager(this);
// Workspace alike methods, to enables editing of data without the need of a workspace (Custom views and block grid inline editing mode for example).