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

Merge pull request #1849 from umbraco/feature/user-defined-css

Browse Source 
Feature: User defined CSS
This commit is contained in:
Jacob Overgaard
2024-05-21 17:54:04 +02:00
committed by GitHub
parent aa6d541faa be5aa42285
commit 392c65fdd7
8 changed files with 24 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en-us" dir="ltr">
<head>
<base href="/" />
@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Umbraco</title>
<script src="node_modules/msw/lib/iife/index.js"></script>
<link rel="stylesheet" href="src/css/user-defined.css" />
<link rel="stylesheet" href="node_modules/@umbraco-ui/uui-css/dist/uui-css.css" />
<link rel="stylesheet" href="src/css/umb-css.css" />
<script type="module" src="index.ts"></script>

1
src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-logo.element.ts
View File

@@ -44,6 +44,7 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
UmbTextStyles,
css`
#logo {
display: var(--umb-header-logo-display, inline);
--uui-button-padding-top-factor: 1;
--uui-button-padding-bottom-factor: 0.5;
margin-right: var(--uui-size-space-2);

2
src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header.element.ts
View File

@@ -20,7 +20,7 @@ export class UmbBackofficeHeaderElement extends UmbLitElement {
}
#appHeader {
background-color: var(--uui-color-header-surface);
background-color: var(--umb-header-background-color, var(--uui-color-header-surface));
display: flex;
align-items: center;
justify-content: space-between;

1
src/Umbraco.Web.UI.Client/src/css/user-defined.css Normal file
View File

@@ -0,0 +1 @@
/* This file can be overridden by placing a file with the same name in the /wwwroot/umbraco/backoffice/css folder of the website */

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

1
src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
View File

@@ -50,6 +50,7 @@ export default {
window.__UMBRACO_TEST_RUN_A11Y_TEST = ${(!devMode).toString()};
</script>
<script src="/node_modules/msw/lib/iife/index.js"></script>
<link rel="stylesheet" href="src/css/user-defined.css">
<link rel="stylesheet" href="node_modules/@umbraco-ui/uui-css/dist/uui-css.css">
<link rel="stylesheet" href="src/css/umb-css.css">
</head>