2020-11-22 18:37:09 +00:00
|
|
|
import { css, customElement, html, LitElement, property } from "lit-element";
|
|
|
|
// @ts-ignore
|
|
|
|
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
|
|
|
|
// @ts-ignore
|
|
|
|
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
|
2020-11-29 21:14:48 +00:00
|
|
|
import { Config } from "../../api/config";
|
2020-11-22 18:37:09 +00:00
|
|
|
|
2020-12-01 12:16:13 +00:00
|
|
|
export const DefaultConfig: Config = {
|
|
|
|
branding_logo: " /static/dist/assets/images/logo.svg",
|
|
|
|
branding_title: "passbook",
|
|
|
|
};
|
|
|
|
|
2020-11-22 18:37:09 +00:00
|
|
|
@customElement("pb-sidebar-brand")
|
|
|
|
export class SidebarBrand extends LitElement {
|
|
|
|
@property()
|
2020-12-01 12:16:13 +00:00
|
|
|
config: Config = DefaultConfig;
|
2020-11-22 18:37:09 +00:00
|
|
|
|
|
|
|
static get styles() {
|
|
|
|
return [
|
|
|
|
GlobalsStyle,
|
|
|
|
PageStyle,
|
|
|
|
css`
|
|
|
|
.pf-c-brand {
|
|
|
|
font-family: "DIN 1451 Std";
|
|
|
|
line-height: 60px;
|
|
|
|
font-size: 3rem;
|
|
|
|
color: var(--pf-c-nav__link--m-current--Color);
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
|
|
margin: 0 1rem;
|
|
|
|
margin-bottom: 1.5rem;
|
|
|
|
}
|
|
|
|
.pf-c-brand img {
|
|
|
|
max-height: 60px;
|
|
|
|
margin-right: 8px;
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
2020-11-23 10:50:38 +00:00
|
|
|
constructor() {
|
|
|
|
super();
|
2020-11-26 21:37:41 +00:00
|
|
|
Config.get().then((c) => (this.config = c));
|
2020-11-23 10:50:38 +00:00
|
|
|
}
|
|
|
|
|
2020-11-22 18:37:09 +00:00
|
|
|
render() {
|
2020-11-23 11:32:01 +00:00
|
|
|
if (!this.config) {
|
|
|
|
return html``;
|
|
|
|
}
|
2020-12-01 12:16:13 +00:00
|
|
|
return html` <a href="#/" class="pf-c-page__header-brand-link">
|
2020-11-22 18:37:09 +00:00
|
|
|
<div class="pf-c-brand pb-brand">
|
2020-12-01 12:16:13 +00:00
|
|
|
<img src="${this.config.branding_logo}" alt="passbook icon" loading="lazy" />
|
|
|
|
${this.config.branding_title
|
2020-12-01 12:59:59 +00:00
|
|
|
? html`<span>${this.config.branding_title}</span>`
|
|
|
|
: ""}
|
2020-11-22 18:37:09 +00:00
|
|
|
</div>
|
|
|
|
</a>`;
|
|
|
|
}
|
|
|
|
}
|