diff --git a/web/src/admin/AdminInterface/index.entrypoint.ts b/web/src/admin/AdminInterface/index.entrypoint.ts index f07e4d5a06..1fc674eec5 100644 --- a/web/src/admin/AdminInterface/index.entrypoint.ts +++ b/web/src/admin/AdminInterface/index.entrypoint.ts @@ -4,7 +4,6 @@ import { ROUTES } from "@goauthentik/admin/Routes"; import { EVENT_API_DRAWER_TOGGLE, EVENT_NOTIFICATION_DRAWER_TOGGLE, - EVENT_SIDEBAR_TOGGLE, } from "@goauthentik/common/constants"; import { configureSentry } from "@goauthentik/common/sentry"; import { me } from "@goauthentik/common/users"; @@ -26,7 +25,7 @@ import "@goauthentik/elements/sidebar/Sidebar"; import "@goauthentik/elements/sidebar/SidebarItem"; import { CSSResult, TemplateResult, css, html, nothing } from "lit"; -import { customElement, property, query, state } from "lit/decorators.js"; +import { customElement, eventOptions, property, query } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; @@ -37,6 +36,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css"; import { LicenseSummaryStatusEnum, SessionUser, UiThemeEnum } from "@goauthentik/api"; +import { SidebarToggleEventDetail } from "../../elements/PageHeader.js"; import { AdminSidebarEnterpriseEntries, AdminSidebarEntries, @@ -52,28 +52,33 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) { //#region Properties @property({ type: Boolean }) - notificationDrawerOpen = getURLParam("notificationDrawerOpen", false); + public notificationDrawerOpen = getURLParam("notificationDrawerOpen", false); @property({ type: Boolean }) - apiDrawerOpen = getURLParam("apiDrawerOpen", false); + public apiDrawerOpen = getURLParam("apiDrawerOpen", false); - ws: WebsocketClient; + protected readonly ws: WebsocketClient; - @state() - user?: SessionUser; + @property({ + type: Object, + attribute: false, + reflect: false, + }) + public user?: SessionUser; @query("ak-about-modal") - aboutModal?: AboutModal; + public aboutModal?: AboutModal; @property({ type: Boolean, reflect: true }) public sidebarOpen: boolean; - #toggleSidebar = () => { - this.sidebarOpen = !this.sidebarOpen; - }; + @eventOptions({ passive: true }) + protected sidebarListener(event: CustomEvent) { + this.sidebarOpen = !!event.detail.open; + } #sidebarMatcher: MediaQueryList; - #sidebarListener = (event: MediaQueryListEvent) => { + #sidebarMediaQueryListener = (event: MediaQueryListEvent) => { this.sidebarOpen = event.matches; }; @@ -141,8 +146,6 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) { public connectedCallback() { super.connectedCallback(); - window.addEventListener(EVENT_SIDEBAR_TOGGLE, this.#toggleSidebar); - window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => { this.notificationDrawerOpen = !this.notificationDrawerOpen; updateURLParams({ @@ -157,13 +160,14 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) { }); }); - this.#sidebarMatcher.addEventListener("change", this.#sidebarListener); + this.#sidebarMatcher.addEventListener("change", this.#sidebarMediaQueryListener, { + passive: true, + }); } public disconnectedCallback(): void { super.disconnectedCallback(); - window.removeEventListener(EVENT_SIDEBAR_TOGGLE, this.#toggleSidebar); - this.#sidebarMatcher.removeEventListener("change", this.#sidebarListener); + this.#sidebarMatcher.removeEventListener("change", this.#sidebarMediaQueryListener); } async firstUpdated(): Promise { @@ -196,7 +200,7 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) { return html`
- + diff --git a/web/src/common/constants.ts b/web/src/common/constants.ts index 93232ac487..405e061c94 100644 --- a/web/src/common/constants.ts +++ b/web/src/common/constants.ts @@ -11,7 +11,6 @@ export const EVENT_REFRESH = "ak-refresh"; export const EVENT_NOTIFICATION_DRAWER_TOGGLE = "ak-notification-toggle"; export const EVENT_API_DRAWER_TOGGLE = "ak-api-drawer-toggle"; export const EVENT_FLOW_INSPECTOR_TOGGLE = "ak-flow-inspector-toggle"; -export const EVENT_SIDEBAR_TOGGLE = "ak-sidebar-toggle"; export const EVENT_WS_MESSAGE = "ak-ws-message"; export const EVENT_FLOW_ADVANCE = "ak-flow-advance"; export const EVENT_LOCALE_CHANGE = "ak-locale-change"; diff --git a/web/src/common/styles/theme-dark.css b/web/src/common/styles/theme-dark.css index 985046a905..240a21f9ed 100644 --- a/web/src/common/styles/theme-dark.css +++ b/web/src/common/styles/theme-dark.css @@ -256,8 +256,13 @@ input[type="date"]::-webkit-calendar-picker-indicator { color: var(--ak-dark-background-lighter); } -.pf-c-button.pf-m-plain:hover { - color: var(--ak-dark-foreground); +.pf-c-button.pf-m-plain { + --pf-c-button--m-plain--focus--Color: var(--pf-global--Color--200); + --pf-c-button--m-plain--hover--Color: var(--ak-dark-foreground); + + &:focus:hover { + color: var(--pf-c-button--m-plain--hover--Color); + } } .pf-c-button.pf-m-control { diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts index 796e3115e4..909fd8599c 100644 --- a/web/src/elements/PageHeader.ts +++ b/web/src/elements/PageHeader.ts @@ -1,8 +1,4 @@ -import { - EVENT_SIDEBAR_TOGGLE, - EVENT_WS_MESSAGE, - TITLE_DEFAULT, -} from "@goauthentik/common/constants"; +import { EVENT_WS_MESSAGE, TITLE_DEFAULT } from "@goauthentik/common/constants"; import { globalAK } from "@goauthentik/common/global"; import { UIConfig, UserDisplay, getConfigForUser } from "@goauthentik/common/ui/config"; import { DefaultBrand } from "@goauthentik/common/ui/config"; @@ -29,6 +25,14 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css"; import { SessionUser } from "@goauthentik/api"; +//#region Events + +export interface SidebarToggleEventDetail { + open?: boolean; +} + +//#endregion + //#region Page Navbar export interface PageNavbarDetails { @@ -45,7 +49,10 @@ export interface PageNavbarDetails { * dispatched by the `ak-page-header` component. */ @customElement("ak-page-navbar") -export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavbarDetails { +export class AKPageNavbar + extends WithBrandConfig(AKElement) + implements PageNavbarDetails, SidebarToggleEventDetail +{ //#region Static Properties private static elementRef: AKPageNavbar | null = null; @@ -260,29 +267,31 @@ export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavb //#region Properties - @property({ type: String }) + @state() icon?: string; - @property({ type: Boolean }) + @state() iconImage = false; - @property({ type: String }) + @state() header?: string; - @property({ type: String }) + @state() description?: string; - @property({ type: Boolean }) + @state() hasIcon = true; - @property({ type: Boolean }) - open = true; + @property({ + type: Boolean, + }) + public open?: boolean; @state() - session?: SessionUser; + protected session?: SessionUser; @state() - uiConfig!: UIConfig; + protected uiConfig!: UIConfig; //#endregion @@ -305,9 +314,10 @@ export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavb this.open = !this.open; this.dispatchEvent( - new CustomEvent(EVENT_SIDEBAR_TOGGLE, { + new CustomEvent("sidebar-toggle", { bubbles: true, composed: true, + detail: { open: this.open }, }), ); }