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

web: fix icon flashing in header, fix notification header icon in dark mode

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-07-23 20:57:06 +02:00
parent 5ff3e9b418
commit a4b051fcc1
2 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/authentik.css
View File

@ -127,7 +127,8 @@ body {
.pf-c-page__main-section { .pf-c-page__main-section {
--pf-c-page__main-section--BackgroundColor: var(--ak-dark-background); --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
} }
.sidebar-trigger { .sidebar-trigger,
.notification-trigger {
background-color: var(--ak-dark-background-light) !important; background-color: var(--ak-dark-background-light) !important;
} }
.pf-c-page__main-section.pf-m-light { .pf-c-page__main-section.pf-m-light {

23
web/src/elements/PageHeader.ts
View File

@ -6,7 +6,6 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants"; import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants";
import { DEFAULT_CONFIG, tenant } from "../api/Config"; import { DEFAULT_CONFIG, tenant } from "../api/Config";
import { until } from "lit-html/directives/until";
import { EventsApi } from "../../api/dist"; import { EventsApi } from "../../api/dist";
@customElement("ak-page-header") @customElement("ak-page-header")
@ -18,6 +17,9 @@ export class PageHeader extends LitElement {
@property({type: Boolean}) @property({type: Boolean})
iconImage = false iconImage = false
@property({type: Boolean})
hasNotifications = false;
@property() @property()
set header(value: string) { set header(value: string) {
tenant().then(tenant => { tenant().then(tenant => {
@ -79,6 +81,16 @@ export class PageHeader extends LitElement {
return html``; return html``;
} }
firstUpdated(): void {
new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
seen: false,
ordering: "-created",
pageSize: 1,
}).then(r => {
this.hasNotifications = r.pagination.count > 0;
});
}
render(): TemplateResult { render(): TemplateResult {
return html`<button return html`<button
class="sidebar-trigger pf-c-button pf-m-plain" class="sidebar-trigger pf-c-button pf-m-plain"
@ -102,14 +114,8 @@ export class PageHeader extends LitElement {
html`<p>${this.description}</p>` : html``} html`<p>${this.description}</p>` : html``}
</div> </div>
</section> </section>
${until(new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
seen: false,
ordering: "-created",
pageSize: 1,
}).then(r => {
return html`
<button <button
class="notification-trigger pf-c-button pf-m-plain ${r.pagination.count > 0 ? "has-notifications" : ""}" class="notification-trigger pf-c-button pf-m-plain ${this.hasNotifications ? "has-notifications" : ""}"
@click=${() => { @click=${() => {
this.dispatchEvent( this.dispatchEvent(
new CustomEvent(EVENT_NOTIFICATION_TOGGLE, { new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
@ -120,7 +126,6 @@ export class PageHeader extends LitElement {
}}> }}>
<i class="fas fa-bell"></i> <i class="fas fa-bell"></i>
</button>`; </button>`;
}))}`;
} }
} }