trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests 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
Show stats 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--BackgroundColor: var(--ak-dark-background);
}
.sidebar-trigger {
.sidebar-trigger,
.notification-trigger {
background-color: var(--ak-dark-background-light) !important;
}
.pf-c-page__main-section.pf-m-light {

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