From f8dee091073848e73bcf098bd01b05d0bce2f5f9 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Mon, 20 Sep 2021 12:29:32 +0200 Subject: [PATCH] web/user: allow customisable background colour Signed-off-by: Jens Langhammer --- web/src/elements/router/RouterOutlet.ts | 7 +- web/src/interfaces/AdminInterface.ts | 10 + web/src/interfaces/UserInterface.ts | 348 ++++++++++++------------ web/src/user/LibraryApplication.ts | 4 + web/src/user/LibraryPage.ts | 92 ++++--- web/src/user/config.ts | 8 + 6 files changed, 250 insertions(+), 219 deletions(-) diff --git a/web/src/elements/router/RouterOutlet.ts b/web/src/elements/router/RouterOutlet.ts index f66d6c7fb..2aeb4493a 100644 --- a/web/src/elements/router/RouterOutlet.ts +++ b/web/src/elements/router/RouterOutlet.ts @@ -53,12 +53,7 @@ export class RouterOutlet extends LitElement { css` :host { height: 100vh; - background-color: var(--pf-global--BackgroundColor--light-300) !important; - } - @media (prefers-color-scheme: dark) { - :host { - background-color: var(--ak-dark-background) !important; - } + background-color: transparent !important; } *:first-child { flex-direction: column; diff --git a/web/src/interfaces/AdminInterface.ts b/web/src/interfaces/AdminInterface.ts index 795a89d0b..32d0b8014 100644 --- a/web/src/interfaces/AdminInterface.ts +++ b/web/src/interfaces/AdminInterface.ts @@ -62,10 +62,20 @@ export class AdminInterface extends LitElement { .pf-c-drawer__content, .pf-c-page__drawer { z-index: auto !important; + background-color: transparent; } .display-none { display: none; } + .pf-c-page { + background-color: var(--pf-global--BackgroundColor--light-300) !important; + } + @media (prefers-color-scheme: dark) { + /* Global page background colour */ + .pf-c-page { + --pf-c-page--BackgroundColor: var(--ak-dark-background); + } + } `, ]; } diff --git a/web/src/interfaces/UserInterface.ts b/web/src/interfaces/UserInterface.ts index 89f0091c1..ab2e4cced 100644 --- a/web/src/interfaces/UserInterface.ts +++ b/web/src/interfaces/UserInterface.ts @@ -72,6 +72,10 @@ export class UserInterface extends LitElement { .pf-c-drawer__content, .pf-c-page__drawer { z-index: auto !important; + background-color: transparent !important; + } + .pf-c-page { + background-color: var(--pf-global--BackgroundColor--light-300) !important; } .display-none { display: none; @@ -114,185 +118,187 @@ export class UserInterface extends LitElement { } render(): TemplateResult { - return html`
-
-
- - ${(this.tenant.brandingTitle, DefaultTenant.brandingTitle)} - -
-
-
- ${until( - uiConfig().then((config) => { - if (!config.enabledFeatures.apiDrawer) { - return html``; - } - return html`
{ + return html`
+
+
+ + ${(this.tenant.brandingTitle, + DefaultTenant.brandingTitle)} + +
+
+
+ ${config.enabledFeatures.apiDrawer + ? html`
+ +
` + : html``} + ${config.enabledFeatures.notificationDrawer + ? html` + + ` + : html``} + ${config.enabledFeatures.settings + ? html`
+ + + +
` + : html``} + - -
`; - }), - )} - ${until( - uiConfig().then((config) => { - if (!config.enabledFeatures.notificationDrawer) { - return html``; - } - return html` - - `; - }), - )} - ${until( - uiConfig().then((config) => { - if (!config.enabledFeatures.settings) { - return html``; - } - return html`
- - - -
`; - }), - )} - - - - ${until( - me().then((u) => { - if (!u.user.isSuperuser) return html``; - return html` - - ${t`Admin interface`} - - `; - }), - )} -
- ${until( - me().then((u) => { - if (u.original) { - return html`
-
- - ${t`Stop impersonation`} - -
-
`; - } - return html``; - }), - )} -
-
+ ${t`Admin interface`} + + `; + }), + )} +
${until( - uiConfig().then((config) => { - return me().then((me) => { - switch (config.navbar.userDisplay) { - case "username": - return me.user.username; - case "name": - return me.user.name; - case "email": - return me.user.email; - default: - return me.user.username; - } - }); + me().then((u) => { + if (u.original) { + return html`
+
+ + ${t`Stop impersonation`} + +
+
`; + } + return html``; + }), + )} +
+
+ ${until( + me().then((me) => { + switch (config.navbar.userDisplay) { + case "username": + return me.user.username; + case "name": + return me.user.name; + case "email": + return me.user.email; + default: + return me.user.username; + } + }), + )} +
+
+ ${until( + me().then((me) => { + return html`${t`Avatar image`}`; }), )}
-
- ${until( - me().then((me) => { - return html`${t`Avatar image`}`; - }), - )} -
-
-
-
-
-
-
-
- - -
+ +
+
+
+
+
+
+ + +
+
+
+ +
- -
-
-
-
`; +
`; + }), + )}`; } } diff --git a/web/src/user/LibraryApplication.ts b/web/src/user/LibraryApplication.ts index d23f9f780..b9f05fbea 100644 --- a/web/src/user/LibraryApplication.ts +++ b/web/src/user/LibraryApplication.ts @@ -28,6 +28,9 @@ export class LibraryApplication extends LitElement { @property({ type: Boolean }) selected = false; + @property() + background: string = ""; + static get styles(): CSSResult[] { return [ PFBase, @@ -70,6 +73,7 @@ export class LibraryApplication extends LitElement { class="pf-c-card pf-m-hoverable pf-m-compact ${this.selected ? "pf-m-selectable pf-m-selected" : ""}" + style="background: ${this.background} !important" >
${this.application.metaIcon diff --git a/web/src/user/LibraryPage.ts b/web/src/user/LibraryPage.ts index bc20c9cbb..055a2fe2d 100644 --- a/web/src/user/LibraryPage.ts +++ b/web/src/user/LibraryPage.ts @@ -21,7 +21,7 @@ import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; import "./LibraryApplication"; import { until } from "lit-html/directives/until"; -import { uiConfig } from "./config"; +import { UIConfig, uiConfig } from "./config"; @customElement("ak-library") export class LibraryPage extends LitElement { @@ -71,6 +71,9 @@ export class LibraryPage extends LitElement { .header input:focus { outline: 0; } + .pf-c-page__main-section { + background-color: transparent; + } `); } @@ -86,7 +89,7 @@ export class LibraryPage extends LitElement {
`; } - renderApps(): TemplateResult { + renderApps(config: UIConfig): TemplateResult { return html`
${this.apps?.results .filter((app) => app.launchUrl) @@ -94,6 +97,7 @@ export class LibraryPage extends LitElement { (app) => html``, )} @@ -101,45 +105,49 @@ export class LibraryPage extends LitElement { } render(): TemplateResult { - return html`
-
-

${t`My applications`}

- ${until( - uiConfig().then((config) => { - if (!config.enabledFeatures.search) { - return html``; - } - return html` { - const query = (ev.target as HTMLInputElement).value; - if (!this.fuse) return; - const apps = this.fuse.search(query); - if (apps.length < 1) return; - this.selectedApp = apps[0].item; - }} - @keydown=${(ev: KeyboardEvent) => { - if (ev.key === "Enter" && this.selectedApp?.launchUrl) { - window.location.assign(this.selectedApp.launchUrl); - } else if (ev.key === "Escape") { - (ev.target as HTMLInputElement).value = ""; - this.selectedApp = undefined; - } - }} - type="text" - autofocus - placeholder=${t`Search...`} - />`; - }), - )} -
-
- ${loading( - this.apps, - html`${(this.apps?.results.length || 0) > 0 - ? this.renderApps() - : this.renderEmptyState()}`, - )} -
-
`; + return html`${until( + uiConfig().then((config) => { + return html`
+
+

${t`My applications`}

+ ${config.enabledFeatures.search + ? html` { + const query = (ev.target as HTMLInputElement).value; + if (!this.fuse) return; + const apps = this.fuse.search(query); + if (apps.length < 1) return; + this.selectedApp = apps[0].item; + }} + @keydown=${(ev: KeyboardEvent) => { + if (ev.key === "Enter" && this.selectedApp?.launchUrl) { + window.location.assign(this.selectedApp.launchUrl); + } else if (ev.key === "Escape") { + (ev.target as HTMLInputElement).value = ""; + this.selectedApp = undefined; + } + }} + type="text" + autofocus + placeholder=${t`Search...`} + />` + : html``} +
+
+ ${loading( + this.apps, + html`${(this.apps?.results.length || 0) > 0 + ? this.renderApps(config) + : this.renderEmptyState()}`, + )} +
+
`; + }), + )}`; } } diff --git a/web/src/user/config.ts b/web/src/user/config.ts index 1139deb14..66e7838c9 100644 --- a/web/src/user/config.ts +++ b/web/src/user/config.ts @@ -14,6 +14,10 @@ export interface UIConfig { navbar: { userDisplay: "username" | "name" | "email"; }; + color: { + background: string; + cardBackground: string; + }; } export const DefaultUIConfig: UIConfig = { @@ -27,6 +31,10 @@ export const DefaultUIConfig: UIConfig = { navbar: { userDisplay: "name", }, + color: { + background: "", + cardBackground: "", + }, }; export function uiConfig(): Promise {