static: add elements for sidebar brand and sidebar user

This commit is contained in:
Jens Langhammer 2020-11-22 19:37:09 +01:00
parent 3c311ca527
commit 07773ed934
7 changed files with 247 additions and 139 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -4,4 +4,11 @@ export interface User {
name: string;
is_superuser: boolean;
email: boolean;
avatar: string;
}
export function me(): Promise<User> {
return fetch("/api/v2beta/core/users/me/")
.then((r) => r.json())
.then((r) => <User>r);
}

View file

@ -12,16 +12,31 @@ import PageStyle from "@patternfly/patternfly/components/Page/page.css";
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
import { User } from "../api/user";
import { me, User } from "../api/user";
export interface SidebarItem {
name: string;
path?: string;
children?: SidebarItem[];
condition?: (sb: SideBar) => boolean;
condition?: (sb: Sidebar) => boolean;
}
export const SIDEBAR_ITEMS: SidebarItem[] = [
{
name: "Library",
path: "/-/overview/",
},
{
name: "Monitor",
path: "/audit/audit/",
condition: (sb: Sidebar) => {
return sb.user?.is_superuser!;
},
},
{
name: "Administration",
children: [
{
name: "General",
children: [
@ -110,31 +125,15 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
name: "Tokens",
path: "administration/tokens",
},
];
export const ROOT_ITEMS: SidebarItem[] = [
{
name: "Library",
path: "/-/overview/",
},
{
name: "Monitor",
path: "/audit/audit/",
condition: (sb: SideBar) => {
return sb.user?.is_superuser!;
},
},
{
name: "Administration",
children: SIDEBAR_ITEMS,
condition: (sb: SideBar) => {
],
condition: (sb: Sidebar) => {
return sb.user?.is_superuser!;
},
},
];
@customElement("pb-sidebar")
export class SideBar extends LitElement {
export class Sidebar extends LitElement {
@property()
activePath: string;
@ -161,21 +160,11 @@ export class SideBar extends LitElement {
.pf-c-nav__subnav {
--pf-c-nav__subnav--PaddingBottom: 0px;
}
.pb-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;
.pf-c-nav__item-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin: 0 1rem;
margin-bottom: 1.5rem;
}
.pb-brand img {
max-height: 60px;
margin-right: 8px;
}
`,
];
@ -183,28 +172,13 @@ export class SideBar extends LitElement {
constructor() {
super();
fetch("/api/v2beta/core/users/me/")
.then((r) => r.json())
.then((r) => (this.user = <User>r));
me().then((u) => (this.user = u));
this.activePath = window.location.hash.slice(1, Infinity);
window.addEventListener("hashchange", (e) => {
this.activePath = window.location.hash.slice(1, Infinity);
});
}
renderBrand(): TemplateResult {
return html`<li class="pf-c-nav__item">
<a href="#/" class="pf-c-page__header-brand-link">
<div class="pf-c-brand pb-brand">
<img src="${this.brandLogo}" alt="passbook icon" />
${this.brandTitle
? html`<span>${this.brandTitle}</span>`
: ""}
</div>
</a>
</li>`;
}
renderItem(item: SidebarItem): TemplateResult {
if (item.condition) {
const result = item.condition(this);
@ -247,8 +221,16 @@ export class SideBar extends LitElement {
return html`<div class="pf-c-page__sidebar-body">
<nav class="pf-c-nav" aria-label="Global">
<ul class="pf-c-nav__list">
${this.renderBrand()}
${ROOT_ITEMS.map((i) => this.renderItem(i))}
<li class="pf-c-nav__item">
<pb-sidebar-brand
.brandLogo=${this.brandLogo}
.brandTitle=${this.brandTitle}
></pb-sidebar-brand>
</li>
${SIDEBAR_ITEMS.map((i) => this.renderItem(i))}
<li class="pf-c-nav__item pf-c-nav__item-bottom">
<pb-sidebar-user .user=${this.user}></pb-sidebar-user>
</li>
</ul>
</nav>
</div>`;

View file

@ -0,0 +1,48 @@
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";
@customElement("pb-sidebar-brand")
export class SidebarBrand extends LitElement {
@property()
brandLogo?: string;
@property()
brandTitle?: string;
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;
}
`,
];
}
render() {
return html` <a href="#/" class="pf-c-page__header-brand-link">
<div class="pf-c-brand pb-brand">
<img src="${this.brandLogo}" alt="passbook icon" />
${this.brandTitle ? html`<span>${this.brandTitle}</span>` : ""}
</div>
</a>`;
}
}

View file

@ -0,0 +1,69 @@
import { css, customElement, html, LitElement, property } from "lit-element";
// @ts-ignore
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
import fa from "@fortawesome/fontawesome-free/css/all.css";
// @ts-ignore
import AvatarStyle from "@patternfly/patternfly/components/Avatar/avatar.css";
import { User } from "../api/user";
@customElement("pb-sidebar-user")
export class SidebarUser extends LitElement {
@property()
user?: User;
static get styles() {
return [
fa,
NavStyle,
AvatarStyle,
css`
:host {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.pf-c-nav__link {
align-items: center;
}
.user-avatar {
display: flex;
flex-direction: row;
}
.user-avatar > span {
line-height: var(--pf-c-avatar--Height);
padding-left: var(--pf-global--spacer--sm);
font-size: var(--pf-global--FontSize--lg);
}
.user-logout {
flex-shrink: 3;
max-width: 75px;
}
`,
];
}
render() {
if (!this.user) {
return html``;
}
return html`
<a
href="/-/user/"
class="pf-c-nav__link user-avatar"
id="user-settings"
>
<img class="pf-c-avatar" src="${this.user?.avatar}" alt="" />
<span>${this.user?.username}</span>
</a>
<a
href="/-/default/invalidation/"
class="pf-c-nav__link user-logout"
id="logout"
>
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
</a>
`;
}
}

View file

@ -2,6 +2,8 @@ import "./legacy.js";
import "./elements/ActionButton";
import "./elements/Sidebar";
import "./elements/SidebarBrand";
import "./elements/SidebarUser";
import "./elements/CodeMirror";
import "./elements/Dropdown";
import "./elements/FetchFillSlot";