From be5aa42285ee06cfc2b9b678b9c1ca38296fd718 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 21 May 2024 17:17:28 +0200 Subject: [PATCH] feat: make the header apps inherit from the default header app button so we can define the style in one place --- .../header-app/header-app-button.element.ts | 11 ++++-- .../search/umb-search-header-app.element.ts | 34 ++++--------------- .../current-user-header-app.element.ts | 8 ++--- 3 files changed, 18 insertions(+), 35 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/header-app/header-app-button.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/header-app/header-app-button.element.ts index c3b915fcc2..1ec7d1de7c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/header-app/header-app-button.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/header-app/header-app-button.element.ts @@ -1,11 +1,12 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; -import { css, html, LitElement, customElement, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import type { ManifestHeaderAppButtonKind, UmbBackofficeManifestKind, } from '@umbraco-cms/backoffice/extension-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; const manifest: UmbBackofficeManifestKind = { type: 'kind', @@ -21,7 +22,7 @@ const manifest: UmbBackofficeManifestKind = { umbExtensionsRegistry.register(manifest); @customElement('umb-header-app-button') -export class UmbHeaderAppButtonElement extends LitElement { +export class UmbHeaderAppButtonElement extends UmbLitElement { public manifest?: ManifestHeaderAppButtonKind; render() { @@ -41,7 +42,11 @@ export class UmbHeaderAppButtonElement extends LitElement { css` uui-button { font-size: 18px; - --uui-button-background-color: transparent; + --uui-button-background-color: var(--umb-header-app-button-background-color, transparent); + --uui-button-background-color-hover: var( + --umb-header-app-button-background-color-hover, + var(--uui-color-emphasis) + ); } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/umb-search-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/umb-search-header-app.element.ts index f1d7b604ad..4e17d9896a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/umb-search-header-app.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/umb-search-header-app.element.ts @@ -1,25 +1,13 @@ import { UMB_SEARCH_MODAL } from './search-modal/search-modal.token.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; -import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; +import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbHeaderAppButtonElement } from '@umbraco-cms/backoffice/components'; @customElement('umb-search-header-app') -export class UmbSearchHeaderAppElement extends UmbLitElement { - private _modalContext?: UmbModalManagerContext; - - constructor() { - super(); - - this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => { - this._modalContext = _instance; - }); - } - - #onSearchClick() { - this._modalContext?.open(this, UMB_SEARCH_MODAL); +export class UmbSearchHeaderAppElement extends UmbHeaderAppButtonElement { + async #onSearchClick() { + const context = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + context.open(this, UMB_SEARCH_MODAL); } render() { @@ -30,15 +18,7 @@ export class UmbSearchHeaderAppElement extends UmbLitElement { `; } - static styles: CSSResultGroup = [ - UmbTextStyles, - css` - uui-button { - font-size: 18px; - --uui-button-background-color: transparent; - } - `, - ]; + static styles = UmbHeaderAppButtonElement.styles; } export default UmbSearchHeaderAppElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user-header-app.element.ts index d0e5aaa917..5e8f763901 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user-header-app.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user-header-app.element.ts @@ -1,13 +1,12 @@ import { UMB_CURRENT_USER_MODAL } from './modals/current-user/current-user-modal.token.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_CURRENT_USER_CONTEXT, type UmbCurrentUserModel } from '@umbraco-cms/backoffice/current-user'; +import { UmbHeaderAppButtonElement } from '@umbraco-cms/backoffice/components'; @customElement('umb-current-user-header-app') -export class UmbCurrentUserHeaderAppElement extends UmbLitElement { +export class UmbCurrentUserHeaderAppElement extends UmbHeaderAppButtonElement { @state() private _currentUser?: UmbCurrentUserModel; @@ -96,11 +95,10 @@ export class UmbCurrentUserHeaderAppElement extends UmbLitElement { } static styles: CSSResultGroup = [ - UmbTextStyles, + UmbHeaderAppButtonElement.styles, css` uui-button { font-size: 14px; - --uui-button-background-color: transparent; } `, ];