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

web/admin: theme adjustments (#5944)

Browse Source 
* web/admin: theme adjustments

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update locale

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-06-13 15:41:48 +02:00
committed by GitHub
parent c71a70a2e5
commit 16454af1c0
14 changed files with 151 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/admin/AdminInterface.ts
View File

@ -30,7 +30,7 @@ import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { AdminApi, SessionUser, Version } from "@goauthentik/api";
import { AdminApi, SessionUser, UiThemeEnum, Version } from "@goauthentik/api";
autoDetectLanguage();
@ -116,7 +116,11 @@ export class AdminInterface extends Interface {
render(): TemplateResult {
return html` <div class="pf-c-page">
<ak-sidebar
class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}"
class="pf-c-page__sidebar ${this.sidebarOpen
? "pf-m-expanded"
: "pf-m-collapsed"} ${this.activeTheme === UiThemeEnum.Light
? "pf-m-light"
: ""}"
>
${this.renderSidebarItems()}
</ak-sidebar>
@ -203,18 +207,18 @@ export class AdminInterface extends Interface {
</ak-sidebar-item>
<ak-sidebar-item>
<span slot="label">${msg("Applications")}</span>
<ak-sidebar-item
path="/core/applications"
.activeWhen=${[`^/core/applications/(?<slug>${SLUG_REGEX})$`]}
>
<span slot="label">${msg("Applications")}</span>
</ak-sidebar-item>
<ak-sidebar-item
path="/core/providers"
.activeWhen=${[`^/core/providers/(?<id>${ID_REGEX})$`]}
>
<span slot="label">${msg("Providers")}</span>
</ak-sidebar-item>
<ak-sidebar-item
path="/core/applications"
.activeWhen=${[`^/core/applications/(?<slug>${SLUG_REGEX})$`]}
>
<span slot="label">${msg("Applications")}</span>
</ak-sidebar-item>
<ak-sidebar-item path="/outpost/outposts">
<span slot="label">${msg("Outposts")}</span>
</ak-sidebar-item>

1
web/src/elements/Base.ts
View File

@ -160,6 +160,7 @@ export class AKElement extends LitElement {
root.adoptedStyleSheets = root.adoptedStyleSheets.filter((v) => v !== oldStylesheet);
}
this._activeTheme = theme;
this.requestUpdate();
}
disconnectedCallback() {

10
web/src/elements/sidebar/Sidebar.ts
View File

@ -9,6 +9,8 @@ import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { UiThemeEnum } from "@goauthentik/api";
@customElement("ak-sidebar")
export class Sidebar extends AKElement {
static get styles(): CSSResult[] {
@ -25,6 +27,9 @@ export class Sidebar extends AKElement {
.pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
--pf-c-nav__link--m-current--after--BorderColor: #fd4b2d;
}
:host([theme="light"]) {
border-right-color: transparent !important;
}
.pf-c-nav__section + .pf-c-nav__section {
--pf-c-nav__section--section--MarginTop: var(--pf-global--spacer--sm);
@ -61,7 +66,10 @@ export class Sidebar extends AKElement {
}
render(): TemplateResult {
return html`<nav class="pf-c-nav" aria-label="Global">
return html`<nav
class="pf-c-nav ${this.activeTheme === UiThemeEnum.Light ? "pf-m-light" : ""}"
aria-label="Global"
>
<ak-sidebar-brand></ak-sidebar-brand>
<ul class="pf-c-nav__list">
<slot></slot>