habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/user: allow customisable background colour

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/user/LibraryApplication.ts
View File

@ -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

92
web/src/user/LibraryPage.ts
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 "./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,45 +105,49 @@ export class LibraryPage extends LitElement {
}
render(): TemplateResult {
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(
uiConfig().then((config) => {
if (!config.enabledFeatures.search) {
return html``;
}
return html` <input
@input=${(ev: InputEvent) => {
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...`}
/>`;
}),
)}
</div>
<section class="pf-c-page__main-section">
${loading(
this.apps,
html`${(this.apps?.results.length || 0) > 0
? this.renderApps()
: this.renderEmptyState()}`,
)}
</section>
</main>`;
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>
${config.enabledFeatures.search
? html`<input
@input=${(ev: InputEvent) => {
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``}
</div>
<section class="pf-c-page__main-section">
${loading(
this.apps,
html`${(this.apps?.results.length || 0) > 0
? this.renderApps(config)
: this.renderEmptyState()}`,
)}
</section>
</main>`;
}),
)}`;
}
}

8
web/src/user/config.ts
View File

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