From e38d03b30480cae387a74295a9f4751ee434a2e2 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 5 Apr 2022 23:47:15 +0200
Subject: [PATCH] web/user: make more themable
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
web/src/common/config.ts | 4 ++--
web/src/interfaces/UserInterface.ts | 14 +++++++++-----
web/src/user/LibraryPage.ts | 13 ++++++++-----
3 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/web/src/common/config.ts b/web/src/common/config.ts
index 23da2fbaa..36521aad0 100644
--- a/web/src/common/config.ts
+++ b/web/src/common/config.ts
@@ -30,7 +30,7 @@ export interface UIConfig {
navbar: {
userDisplay: UserDisplay;
};
- color: {
+ theme: {
background: string;
cardBackground: string;
};
@@ -57,7 +57,7 @@ export class DefaultUIConfig implements UIConfig {
navbar = {
userDisplay: UserDisplay.username,
};
- color = {
+ theme = {
background: "",
cardBackground: "",
};
diff --git a/web/src/interfaces/UserInterface.ts b/web/src/interfaces/UserInterface.ts
index 61e924684..8e2ac0eb0 100644
--- a/web/src/interfaces/UserInterface.ts
+++ b/web/src/interfaces/UserInterface.ts
@@ -75,7 +75,7 @@ export class UserInterface extends LitElement {
background-color: transparent !important;
}
.pf-c-page {
- background-color: var(--pf-c-page--BackgroundColor) !important;
+ background-color: transparent !important;
}
.display-none {
display: none;
@@ -87,6 +87,12 @@ export class UserInterface extends LitElement {
.has-notifications {
color: #2b9af3;
}
+ .background-wrapper {
+ height: 100vh;
+ width: 100vw;
+ position: absolute;
+ z-index: -1;
+ }
`,
];
}
@@ -128,10 +134,8 @@ export class UserInterface extends LitElement {
render(): TemplateResult {
return html`${until(
uiConfig().then((config) => {
- return html`<div
- class="pf-c-page"
- style="background: ${config.color.background} !important"
- >
+ return html`<div class="pf-c-page">
+ <div class="background-wrapper" style="${config.theme.background}"></div>
<header class="pf-c-page__header">
<div class="pf-c-page__header-brand">
<a href="#/" class="pf-c-page__header-brand-link">
diff --git a/web/src/user/LibraryPage.ts b/web/src/user/LibraryPage.ts
index f24399fc3..90662393d 100644
--- a/web/src/user/LibraryPage.ts
+++ b/web/src/user/LibraryPage.ts
@@ -89,6 +89,9 @@ export class LibraryPage extends LitElement {
margin-bottom: 1em;
margin-top: 1.2em;
}
+ .text-shadow {
+ text-shadow: 2px 2px 5px var(--ak-dark-background-light);
+ }
`);
}
@@ -138,21 +141,21 @@ export class LibraryPage extends LitElement {
case LayoutType.column_3:
groupClass = "pf-m-4-col";
groupGrid =
- "pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl";
+ "pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-6-col-on-xl";
break;
}
return html`<div class="pf-l-grid pf-m-gutter">
${this.getApps().map(([group, apps]) => {
return html`<div class="pf-l-grid__item ${groupClass}">
<div class="pf-c-content app-group-header">
- <h2>${group}</h2>
+ <h2 class="text-shadow">${group}</h2>
</div>
<div class="pf-l-grid pf-m-gutter ${groupGrid}">
${apps.map((app) => {
return html`<ak-library-app
class="pf-l-grid__item"
.application=${app}
- background=${config.color.cardBackground}
+ background=${config.theme.cardBackground}
?selected=${app.slug === this.selectedApp?.slug}
></ak-library-app>`;
})}
@@ -172,7 +175,7 @@ export class LibraryPage extends LitElement {
id="main-content"
>
<div class="pf-c-content header">
- <h1>${t`My applications`}</h1>
+ <h1 class="text-shadow">${t`My applications`}</h1>
${config.enabledFeatures.search
? html`<input
@input=${(ev: InputEvent) => {
@@ -198,7 +201,7 @@ export class LibraryPage extends LitElement {
}
}}
type="text"
- class="pf-u-display-none pf-u-display-block-on-md"
+ class="pf-u-display-none pf-u-display-block-on-md text-shadow"
autofocus
placeholder=${t`Search...`}
/>`