web: fix icon flashing in header, fix notification header icon in dark mode
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
5ff3e9b418
commit
a4b051fcc1
|
@ -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 {
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Reference in New Issue