web/user: allow customisable background colour

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-09-20 12:29:32 +02:00
parent 84a800583c
commit f8dee09107
6 changed files with 250 additions and 219 deletions

View File

@ -53,12 +53,7 @@ export class RouterOutlet extends LitElement {
css` css`
:host { :host {
height: 100vh; 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 { *:first-child {
flex-direction: column; flex-direction: column;

View File

@ -62,10 +62,20 @@ export class AdminInterface extends LitElement {
.pf-c-drawer__content, .pf-c-drawer__content,
.pf-c-page__drawer { .pf-c-page__drawer {
z-index: auto !important; z-index: auto !important;
background-color: transparent;
} }
.display-none { .display-none {
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);
}
}
`, `,
]; ];
} }

View File

@ -72,6 +72,10 @@ export class UserInterface extends LitElement {
.pf-c-drawer__content, .pf-c-drawer__content,
.pf-c-page__drawer { .pf-c-page__drawer {
z-index: auto !important; z-index: auto !important;
background-color: transparent !important;
}
.pf-c-page {
background-color: var(--pf-global--BackgroundColor--light-300) !important;
} }
.display-none { .display-none {
display: none; display: none;
@ -114,185 +118,187 @@ export class UserInterface extends LitElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html` <div class="pf-c-page"> return html`${until(
<header class="pf-c-page__header"> uiConfig().then((config) => {
<div class="pf-c-page__header-brand"> return html`<div
<a href="#/" class="pf-c-page__header-brand-link"> class="pf-c-page"
<img style="background: ${config.color.background} !important"
class="pf-c-brand" >
src="${first(this.tenant.brandingLogo, DefaultTenant.brandingLogo)}" <header class="pf-c-page__header">
alt="${(this.tenant.brandingTitle, DefaultTenant.brandingTitle)}" <div class="pf-c-page__header-brand">
/> <a href="#/" class="pf-c-page__header-brand-link">
</a> <img
</div> class="pf-c-brand"
<div class="pf-c-page__header-tools"> src="${first(
<div class="pf-c-page__header-tools-group"> this.tenant.brandingLogo,
${until( DefaultTenant.brandingLogo,
uiConfig().then((config) => { )}"
if (!config.enabledFeatures.apiDrawer) { alt="${(this.tenant.brandingTitle,
return html``; DefaultTenant.brandingTitle)}"
} />
return html`<div </a>
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg" </div>
<div class="pf-c-page__header-tools">
<div class="pf-c-page__header-tools-group">
${config.enabledFeatures.apiDrawer
? html`<div
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
>
<button
class="pf-c-button pf-m-plain"
type="button"
@click=${() => {
this.apiDrawerOpen = !this.apiDrawerOpen;
}}
>
<i class="fas fa-code" aria-hidden="true"></i>
</button>
</div>`
: html``}
${config.enabledFeatures.notificationDrawer
? html`
<button
class="pf-c-button pf-m-plain"
type="button"
aria-label="${t`Unread notifications`}"
@click=${() => {
this.notificationOpen = !this.notificationOpen;
}}
>
<span
class="pf-c-notification-badge ${this
.notificationsCount > 0
? "pf-m-unread"
: ""}"
>
<i class="pf-icon-bell" aria-hidden="true"></i>
<span class="pf-c-notification-badge__count"
>${this.notificationsCount}</span
>
</span>
</button>
`
: html``}
${config.enabledFeatures.settings
? html` <div
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
>
<a
class="pf-c-button pf-m-plain"
type="button"
href="#/settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</a>
</div>`
: html``}
<a
href="/flows/-/default/invalidation/"
class="pf-c-button pf-m-plain"
> >
<button <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
class="pf-c-button pf-m-plain" </a>
type="button" ${until(
@click=${() => { me().then((u) => {
this.apiDrawerOpen = !this.apiDrawerOpen; if (!u.user.isSuperuser) return html``;
}} return html`
> <a
<i class="fas fa-code" aria-hidden="true"></i> class="pf-c-button pf-m-primary pf-m-small"
</button> href="/if/admin"
</div>`;
}),
)}
${until(
uiConfig().then((config) => {
if (!config.enabledFeatures.notificationDrawer) {
return html``;
}
return html`
<button
class="pf-c-button pf-m-plain"
type="button"
aria-label="${t`Unread notifications`}"
@click=${() => {
this.notificationOpen = !this.notificationOpen;
}}
>
<span
class="pf-c-notification-badge ${this
.notificationsCount > 0
? "pf-m-unread"
: ""}"
>
<i class="pf-icon-bell" aria-hidden="true"></i>
<span class="pf-c-notification-badge__count"
>${this.notificationsCount}</span
> >
</span> ${t`Admin interface`}
</button> </a>
`; `;
}), }),
)} )}
${until( </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
class="pf-c-button pf-m-plain"
type="button"
href="#/settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</a>
</div>`;
}),
)}
<a 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">
${t`Admin interface`}
</a>
`;
}),
)}
</div>
${until(
me().then((u) => {
if (u.original) {
return html`<div class="pf-c-page__header-tools">
<div class="pf-c-page__header-tools-group">
<a
class="pf-c-button pf-m-warning pf-m-small"
href=${`/-/impersonation/end/?back=${window.location.pathname}%23${window.location.hash}`}
>
${t`Stop impersonation`}
</a>
</div>
</div>`;
}
return html``;
}),
)}
<div class="pf-c-page__header-tools-group">
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
${until( ${until(
uiConfig().then((config) => { me().then((u) => {
return me().then((me) => { if (u.original) {
switch (config.navbar.userDisplay) { return html`<div class="pf-c-page__header-tools">
case "username": <div class="pf-c-page__header-tools-group">
return me.user.username; <a
case "name": class="pf-c-button pf-m-warning pf-m-small"
return me.user.name; href=${`/-/impersonation/end/?back=${window.location.pathname}%23${window.location.hash}`}
case "email": >
return me.user.email; ${t`Stop impersonation`}
default: </a>
return me.user.username; </div>
} </div>`;
}); }
return html``;
}),
)}
<div class="pf-c-page__header-tools-group">
<div
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
>
${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;
}
}),
)}
</div>
</div>
${until(
me().then((me) => {
return html`<img
class="pf-c-avatar"
src=${me.user.avatar}
alt="${t`Avatar image`}"
/>`;
}), }),
)} )}
</div> </div>
</div> </header>
${until( <div class="pf-c-page__drawer">
me().then((me) => { <div
return html`<img class="pf-c-drawer ${this.notificationOpen || this.apiDrawerOpen
class="pf-c-avatar" ? "pf-m-expanded"
src=${me.user.avatar} : "pf-m-collapsed"}"
alt="${t`Avatar image`}" >
/>`; <div class="pf-c-drawer__main">
}), <div class="pf-c-drawer__content">
)} <div class="pf-c-drawer__body">
</div> <main class="pf-c-page__main">
</header> <ak-router-outlet
<div class="pf-c-page__drawer"> role="main"
<div class="pf-l-bullseye__item pf-c-page__main"
class="pf-c-drawer ${this.notificationOpen || this.apiDrawerOpen tabindex="-1"
? "pf-m-expanded" id="main-content"
: "pf-m-collapsed"}" defaultUrl="/library"
> .routes=${ROUTES}
<div class="pf-c-drawer__main"> >
<div class="pf-c-drawer__content"> </ak-router-outlet>
<div class="pf-c-drawer__body"> </main>
<main class="pf-c-page__main"> </div>
<ak-router-outlet </div>
role="main" <ak-notification-drawer
class="pf-l-bullseye__item pf-c-page__main" class="pf-c-drawer__panel pf-m-width-33 ${this.notificationOpen
tabindex="-1" ? ""
id="main-content" : "display-none"}"
defaultUrl="/library" ?hidden=${!this.notificationOpen}
.routes=${ROUTES} ></ak-notification-drawer>
> <ak-api-drawer
</ak-router-outlet> class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen
</main> ? ""
: "display-none"}"
?hidden=${!this.apiDrawerOpen}
></ak-api-drawer>
</div> </div>
</div> </div>
<ak-notification-drawer
class="pf-c-drawer__panel pf-m-width-33 ${this.notificationOpen
? ""
: "display-none"}"
?hidden=${!this.notificationOpen}
></ak-notification-drawer>
<ak-api-drawer
class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen
? ""
: "display-none"}"
?hidden=${!this.apiDrawerOpen}
></ak-api-drawer>
</div> </div>
</div> </div>`;
</div> }),
</div>`; )}`;
} }
} }

View File

@ -28,6 +28,9 @@ export class LibraryApplication extends LitElement {
@property({ type: Boolean }) @property({ type: Boolean })
selected = false; selected = false;
@property()
background: string = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
PFBase, PFBase,
@ -70,6 +73,7 @@ export class LibraryApplication extends LitElement {
class="pf-c-card pf-m-hoverable pf-m-compact ${this.selected class="pf-c-card pf-m-hoverable pf-m-compact ${this.selected
? "pf-m-selectable pf-m-selected" ? "pf-m-selectable pf-m-selected"
: ""}" : ""}"
style="background: ${this.background} !important"
> >
<div class="pf-c-card__header"> <div class="pf-c-card__header">
${this.application.metaIcon ${this.application.metaIcon

View File

@ -21,7 +21,7 @@ import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import "./LibraryApplication"; import "./LibraryApplication";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { uiConfig } from "./config"; import { UIConfig, uiConfig } from "./config";
@customElement("ak-library") @customElement("ak-library")
export class LibraryPage extends LitElement { export class LibraryPage extends LitElement {
@ -71,6 +71,9 @@ export class LibraryPage extends LitElement {
.header input:focus { .header input:focus {
outline: 0; outline: 0;
} }
.pf-c-page__main-section {
background-color: transparent;
}
`); `);
} }
@ -86,7 +89,7 @@ export class LibraryPage extends LitElement {
</div>`; </div>`;
} }
renderApps(): TemplateResult { renderApps(config: UIConfig): TemplateResult {
return html`<div class="pf-l-gallery pf-m-gutter"> return html`<div class="pf-l-gallery pf-m-gutter">
${this.apps?.results ${this.apps?.results
.filter((app) => app.launchUrl) .filter((app) => app.launchUrl)
@ -94,6 +97,7 @@ export class LibraryPage extends LitElement {
(app) => (app) =>
html`<ak-library-app html`<ak-library-app
.application=${app} .application=${app}
background=${config.color.cardBackground}
?selected=${app.slug === this.selectedApp?.slug} ?selected=${app.slug === this.selectedApp?.slug}
></ak-library-app>`, ></ak-library-app>`,
)} )}
@ -101,45 +105,49 @@ export class LibraryPage extends LitElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content"> return html`${until(
<div class="pf-c-content header"> uiConfig().then((config) => {
<h1>${t`My applications`}</h1> return html`<main
${until( role="main"
uiConfig().then((config) => { class="pf-c-page__main"
if (!config.enabledFeatures.search) { tabindex="-1"
return html``; id="main-content"
} >
return html` <input <div class="pf-c-content header">
@input=${(ev: InputEvent) => { <h1>${t`My applications`}</h1>
const query = (ev.target as HTMLInputElement).value; ${config.enabledFeatures.search
if (!this.fuse) return; ? html`<input
const apps = this.fuse.search(query); @input=${(ev: InputEvent) => {
if (apps.length < 1) return; const query = (ev.target as HTMLInputElement).value;
this.selectedApp = apps[0].item; if (!this.fuse) return;
}} const apps = this.fuse.search(query);
@keydown=${(ev: KeyboardEvent) => { if (apps.length < 1) return;
if (ev.key === "Enter" && this.selectedApp?.launchUrl) { this.selectedApp = apps[0].item;
window.location.assign(this.selectedApp.launchUrl); }}
} else if (ev.key === "Escape") { @keydown=${(ev: KeyboardEvent) => {
(ev.target as HTMLInputElement).value = ""; if (ev.key === "Enter" && this.selectedApp?.launchUrl) {
this.selectedApp = undefined; window.location.assign(this.selectedApp.launchUrl);
} } else if (ev.key === "Escape") {
}} (ev.target as HTMLInputElement).value = "";
type="text" this.selectedApp = undefined;
autofocus }
placeholder=${t`Search...`} }}
/>`; type="text"
}), autofocus
)} placeholder=${t`Search...`}
</div> />`
<section class="pf-c-page__main-section"> : html``}
${loading( </div>
this.apps, <section class="pf-c-page__main-section">
html`${(this.apps?.results.length || 0) > 0 ${loading(
? this.renderApps() this.apps,
: this.renderEmptyState()}`, html`${(this.apps?.results.length || 0) > 0
)} ? this.renderApps(config)
</section> : this.renderEmptyState()}`,
</main>`; )}
</section>
</main>`;
}),
)}`;
} }
} }

View File

@ -14,6 +14,10 @@ export interface UIConfig {
navbar: { navbar: {
userDisplay: "username" | "name" | "email"; userDisplay: "username" | "name" | "email";
}; };
color: {
background: string;
cardBackground: string;
};
} }
export const DefaultUIConfig: UIConfig = { export const DefaultUIConfig: UIConfig = {
@ -27,6 +31,10 @@ export const DefaultUIConfig: UIConfig = {
navbar: { navbar: {
userDisplay: "name", userDisplay: "name",
}, },
color: {
background: "",
cardBackground: "",
},
}; };
export function uiConfig(): Promise<UIConfig> { export function uiConfig(): Promise<UIConfig> {