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

feat: make the header apps inherit from the default header app button so we can define the style in one place

Browse Source
This commit is contained in:
Jacob Overgaard
2024-05-21 17:17:28 +02:00
parent 1c1ab3068c
commit be5aa42285
3 changed files with 18 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Umbraco.Web.UI.Client/src/packages/core/components/header-app/header-app-button.element.ts
View File

@@ -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)
);
}
`,
];

34
src/Umbraco.Web.UI.Client/src/packages/search/umb-search-header-app.element.ts
View File

@@ -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;

8
src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user-header-app.element.ts
View File

@@ -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;
}
`,
];