web/user: allow customisable background colour

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

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;
+                    background-color: transparent !important;
-                }
-                @media (prefers-color-scheme: dark) {
-                    :host {
-                        background-color: var(--ak-dark-background) !important;
-                    }
                 }
                 *:first-child {
                     flex-direction: column;

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

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,25 +118,30 @@ export class UserInterface extends LitElement {
     }
 
     render(): TemplateResult {
-        return html` <div class="pf-c-page">
+        return html`${until(
+            uiConfig().then((config) => {
+                return html`<div
+                    class="pf-c-page"
+                    style="background: ${config.color.background} !important"
+                >
                     <header class="pf-c-page__header">
                         <div class="pf-c-page__header-brand">
                             <a href="#/" class="pf-c-page__header-brand-link">
                                 <img
                                     class="pf-c-brand"
-                            src="${first(this.tenant.brandingLogo, DefaultTenant.brandingLogo)}"
+                                    src="${first(
-                            alt="${(this.tenant.brandingTitle, DefaultTenant.brandingTitle)}"
+                                        this.tenant.brandingLogo,
+                                        DefaultTenant.brandingLogo,
+                                    )}"
+                                    alt="${(this.tenant.brandingTitle,
+                                    DefaultTenant.brandingTitle)}"
                                 />
                             </a>
                         </div>
                         <div class="pf-c-page__header-tools">
                             <div class="pf-c-page__header-tools-group">
-                        ${until(
+                                ${config.enabledFeatures.apiDrawer
-                            uiConfig().then((config) => {
+                                    ? html`<div
-                                if (!config.enabledFeatures.apiDrawer) {
-                                    return html``;
-                                }
-                                return html`<div
                                           class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
                                       >
                                           <button
@@ -144,15 +153,10 @@ export class UserInterface extends LitElement {
                                           >
                                               <i class="fas fa-code" aria-hidden="true"></i>
                                           </button>
-                                </div>`;
+                                      </div>`
-                            }),
+                                    : html``}
-                        )}
+                                ${config.enabledFeatures.notificationDrawer
-                        ${until(
+                                    ? html`
-                            uiConfig().then((config) => {
-                                if (!config.enabledFeatures.notificationDrawer) {
-                                    return html``;
-                                }
-                                return html`
                                           <button
                                               class="pf-c-button pf-m-plain"
                                               type="button"
@@ -173,15 +177,10 @@ export class UserInterface extends LitElement {
                                                   >
                                               </span>
                                           </button>
-                                `;
+                                      `
-                            }),
+                                    : html``}
-                        )}
+                                ${config.enabledFeatures.settings
-                        ${until(
+                                    ? html` <div
-                            uiConfig().then((config) => {
-                                if (!config.enabledFeatures.settings) {
-                                    return html``;
-                                }
-                                return html` <div
                                           class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
                                       >
                                           <a
@@ -191,17 +190,22 @@ export class UserInterface extends LitElement {
                                           >
                                               <i class="fas fa-cog" aria-hidden="true"></i>
                                           </a>
-                                </div>`;
+                                      </div>`
-                            }),
+                                    : html``}
-                        )}
+                                <a
-                        <a href="/flows/-/default/invalidation/" class="pf-c-button pf-m-plain">
+                                    href="/flows/-/default/invalidation/"
+                                    class="pf-c-button pf-m-plain"
+                                >
                                     <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
                                 </a>
                                 ${until(
                                     me().then((u) => {
                                         if (!u.user.isSuperuser) return html``;
                                         return html`
-                                    <a class="pf-c-button pf-m-primary pf-m-small" href="/if/admin">
+                                            <a
+                                                class="pf-c-button pf-m-primary pf-m-small"
+                                                href="/if/admin"
+                                            >
                                                 ${t`Admin interface`}
                                             </a>
                                         `;
@@ -226,10 +230,11 @@ export class UserInterface extends LitElement {
                                 }),
                             )}
                             <div class="pf-c-page__header-tools-group">
-                        <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
+                                <div
+                                    class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
+                                >
                                     ${until(
-                                uiConfig().then((config) => {
+                                        me().then((me) => {
-                                    return me().then((me) => {
                                             switch (config.navbar.userDisplay) {
                                                 case "username":
                                                     return me.user.username;
@@ -240,7 +245,6 @@ export class UserInterface extends LitElement {
                                                 default:
                                                     return me.user.username;
                                             }
-                                    });
                                         }),
                                     )}
                                 </div>
@@ -294,5 +298,7 @@ export class UserInterface extends LitElement {
                         </div>
                     </div>
                 </div>`;
+            }),
+        )}`;
     }
 }

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"
         >
             <div class="pf-c-card__header">
                 ${this.application.metaIcon

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 {
         </div>`;
     }
 
-    renderApps(): TemplateResult {
+    renderApps(config: UIConfig): TemplateResult {
         return html`<div class="pf-l-gallery pf-m-gutter">
             ${this.apps?.results
                 .filter((app) => app.launchUrl)
@@ -94,6 +97,7 @@ export class LibraryPage extends LitElement {
                     (app) =>
                         html`<ak-library-app
                             .application=${app}
+                            background=${config.color.cardBackground}
                             ?selected=${app.slug === this.selectedApp?.slug}
                         ></ak-library-app>`,
                 )}
@@ -101,15 +105,18 @@ export class LibraryPage extends LitElement {
     }
 
     render(): TemplateResult {
-        return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
+        return html`${until(
+            uiConfig().then((config) => {
+                return html`<main
+                    role="main"
+                    class="pf-c-page__main"
+                    tabindex="-1"
+                    id="main-content"
+                >
                     <div class="pf-c-content header">
                         <h1>${t`My applications`}</h1>
-                ${until(
+                        ${config.enabledFeatures.search
-                    uiConfig().then((config) => {
+                            ? html`<input
-                        if (!config.enabledFeatures.search) {
-                            return html``;
-                        }
-                        return html` <input
                                   @input=${(ev: InputEvent) => {
                                       const query = (ev.target as HTMLInputElement).value;
                                       if (!this.fuse) return;
@@ -128,18 +135,19 @@ export class LibraryPage extends LitElement {
                                   type="text"
                                   autofocus
                                   placeholder=${t`Search...`}
-                        />`;
+                              />`
-                    }),
+                            : html``}
-                )}
                     </div>
                     <section class="pf-c-page__main-section">
                         ${loading(
                             this.apps,
                             html`${(this.apps?.results.length || 0) > 0
-                        ? this.renderApps()
+                                ? this.renderApps(config)
                                 : this.renderEmptyState()}`,
                         )}
                     </section>
                 </main>`;
+            }),
+        )}`;
     }
 }

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<UIConfig> {