Skip to content

Commit c35e248

Browse files
iOvergaardiOvergaard
authored
Merge pull request #1849 from umbraco/feature/user-defined-css
Feature: User defined CSS
2 parents 73107b8 + 3c35244 commit c35e248

File tree

8 files changed

+24
-37
lines changed

8 files changed

+24
-37
lines changed

‎index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en-us" dir="ltr">
33
<head>
44
<base href="/" />
@@ -7,6 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>Umbraco</title>
99
<script src="node_modules/msw/lib/iife/index.js"></script>
10+
<link rel="stylesheet" href="src/css/user-defined.css" />
1011
<link rel="stylesheet" href="node_modules/@umbraco-ui/uui-css/dist/uui-css.css" />
1112
<link rel="stylesheet" href="src/css/umb-css.css" />
1213
<script type="module" src="index.ts"></script>

‎src/apps/backoffice/components/backoffice-header-logo.element.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
4444
UmbTextStyles,
4545
css`
4646
#logo {
47+
display: var(--umb-header-logo-display, inline);
4748
--uui-button-padding-top-factor: 1;
4849
--uui-button-padding-bottom-factor: 0.5;
4950
margin-right: var(--uui-size-space-2);

‎src/apps/backoffice/components/backoffice-header.element.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export class UmbBackofficeHeaderElement extends UmbLitElement {
2020
}
2121
2222
#appHeader {
23-
background-color: var(--uui-color-header-surface);
23+
background-color: var(--umb-header-background-color, var(--uui-color-header-surface));
2424
display: flex;
2525
align-items: center;
2626
justify-content: space-between;

‎src/css/user-defined.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* This file can be overridden by placing a file with the same name in the /wwwroot/umbraco/backoffice/css folder of the website */

‎src/packages/core/components/header-app/header-app-button.element.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
22
import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
3-
import { css, html, LitElement, customElement, ifDefined } from '@umbraco-cms/backoffice/external/lit';
3+
import { css, html, customElement, ifDefined } from '@umbraco-cms/backoffice/external/lit';
44
import type {
55
ManifestHeaderAppButtonKind,
66
UmbBackofficeManifestKind,
77
} from '@umbraco-cms/backoffice/extension-registry';
88
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
9+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
910

1011
const manifest: UmbBackofficeManifestKind = {
1112
type: 'kind',
@@ -21,7 +22,7 @@ const manifest: UmbBackofficeManifestKind = {
2122
umbExtensionsRegistry.register(manifest);
2223

2324
@customElement('umb-header-app-button')
24-
export class UmbHeaderAppButtonElement extends LitElement {
25+
export class UmbHeaderAppButtonElement extends UmbLitElement {
2526
public manifest?: ManifestHeaderAppButtonKind;
2627

2728
render() {
@@ -41,7 +42,11 @@ export class UmbHeaderAppButtonElement extends LitElement {
4142
css`
4243
uui-button {
4344
font-size: 18px;
44-
--uui-button-background-color: transparent;
45+
--uui-button-background-color: var(--umb-header-app-button-background-color, transparent);
46+
--uui-button-background-color-hover: var(
47+
--umb-header-app-button-background-color-hover,
48+
var(--uui-color-emphasis)
49+
);
4550
}
4651
`,
4752
];

‎src/packages/search/umb-search-header-app.element.ts

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
import { UMB_SEARCH_MODAL } from './search-modal/search-modal.token.js';
2-
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
3-
import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
4-
import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
5-
import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
2+
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
63
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
7-
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import { UmbHeaderAppButtonElement } from '@umbraco-cms/backoffice/components';
85

96
@customElement('umb-search-header-app')
10-
export class UmbSearchHeaderAppElement extends UmbLitElement {
11-
private _modalContext?: UmbModalManagerContext;
12-
13-
constructor() {
14-
super();
15-
16-
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => {
17-
this._modalContext = _instance;
18-
});
19-
}
20-
21-
#onSearchClick() {
22-
this._modalContext?.open(this, UMB_SEARCH_MODAL);
7+
export class UmbSearchHeaderAppElement extends UmbHeaderAppButtonElement {
8+
async #onSearchClick() {
9+
const context = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
10+
context.open(this, UMB_SEARCH_MODAL);
2311
}
2412

2513
render() {
@@ -30,15 +18,7 @@ export class UmbSearchHeaderAppElement extends UmbLitElement {
3018
`;
3119
}
3220

33-
static styles: CSSResultGroup = [
34-
UmbTextStyles,
35-
css`
36-
uui-button {
37-
font-size: 18px;
38-
--uui-button-background-color: transparent;
39-
}
40-
`,
41-
];
21+
static styles = UmbHeaderAppButtonElement.styles;
4222
}
4323

4424
export default UmbSearchHeaderAppElement;

‎src/packages/user/current-user/current-user-header-app.element.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { UMB_CURRENT_USER_MODAL } from './modals/current-user/current-user-modal.token.js';
2-
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
32
import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
43
import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
54
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
6-
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
75
import { UMB_CURRENT_USER_CONTEXT, type UmbCurrentUserModel } from '@umbraco-cms/backoffice/current-user';
6+
import { UmbHeaderAppButtonElement } from '@umbraco-cms/backoffice/components';
87

98
@customElement('umb-current-user-header-app')
10-
export class UmbCurrentUserHeaderAppElement extends UmbLitElement {
9+
export class UmbCurrentUserHeaderAppElement extends UmbHeaderAppButtonElement {
1110
@state()
1211
private _currentUser?: UmbCurrentUserModel;
1312

@@ -96,11 +95,10 @@ export class UmbCurrentUserHeaderAppElement extends UmbLitElement {
9695
}
9796

9897
static styles: CSSResultGroup = [
99-
UmbTextStyles,
98+
UmbHeaderAppButtonElement.styles,
10099
css`
101100
uui-button {
102101
font-size: 14px;
103-
--uui-button-background-color: transparent;
104102
}
105103
`,
106104
];

‎web-test-runner.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export default {
5050
window.__UMBRACO_TEST_RUN_A11Y_TEST = ${(!devMode).toString()};
5151
</script>
5252
<script src="/node_modules/msw/lib/iife/index.js"></script>
53+
<link rel="stylesheet" href="src/css/user-defined.css">
5354
<link rel="stylesheet" href="node_modules/@umbraco-ui/uui-css/dist/uui-css.css">
5455
<link rel="stylesheet" href="src/css/umb-css.css">
5556
</head>

0 commit comments

Comments
 (0)