static: add elements for sidebar brand and sidebar user
This commit is contained in:
Jens Langhammer
parent
3c311ca527
commit
07773ed934
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,107 +12,17 @@ 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: "General",
|
||||
children: [
|
||||
{
|
||||
name: "Overview",
|
||||
path: "administration/overview",
|
||||
},
|
||||
{
|
||||
name: "System Tasks",
|
||||
path: "administration/tasks",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Applications",
|
||||
path: "administration/applications",
|
||||
},
|
||||
{
|
||||
name: "Sources",
|
||||
path: "administration/sources",
|
||||
},
|
||||
{
|
||||
name: "Providers",
|
||||
path: "administration/providers",
|
||||
},
|
||||
{
|
||||
name: "User Management",
|
||||
children: [
|
||||
{
|
||||
name: "User",
|
||||
path: "administration/users",
|
||||
},
|
||||
{
|
||||
name: "Groups",
|
||||
path: "administration/groups",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Outposts",
|
||||
children: [
|
||||
{
|
||||
name: "Outposts",
|
||||
path: "administration/outposts",
|
||||
},
|
||||
{
|
||||
name: "Service Connections",
|
||||
path: "administration/outposts/service_connections",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Policies",
|
||||
path: "administration/policies",
|
||||
},
|
||||
{
|
||||
name: "Property Mappings",
|
||||
path: "administration/property_mappings",
|
||||
},
|
||||
{
|
||||
name: "Flows",
|
||||
children: [
|
||||
{
|
||||
name: "Flows",
|
||||
path: "administration/flows",
|
||||
},
|
||||
{
|
||||
name: "Stages",
|
||||
path: "administration/stages",
|
||||
},
|
||||
{
|
||||
name: "Prompts",
|
||||
path: "administration/stages/prompts",
|
||||
},
|
||||
{
|
||||
name: "Invitations",
|
||||
path: "administration/stages/invitations",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Certificates",
|
||||
path: "administration/crypto/certificates",
|
||||
},
|
||||
{
|
||||
name: "Tokens",
|
||||
path: "administration/tokens",
|
||||
},
|
||||
];
|
||||
|
||||
export const ROOT_ITEMS: SidebarItem[] = [
|
||||
{
|
||||
name: "Library",
|
||||
path: "/-/overview/",
|
||||
|
|
@ -120,21 +30,110 @@ export const ROOT_ITEMS: SidebarItem[] = [
|
|||
{
|
||||
name: "Monitor",
|
||||
path: "/audit/audit/",
|
||||
condition: (sb: SideBar) => {
|
||||
condition: (sb: Sidebar) => {
|
||||
return sb.user?.is_superuser!;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Administration",
|
||||
children: SIDEBAR_ITEMS,
|
||||
condition: (sb: SideBar) => {
|
||||
children: [
|
||||
{
|
||||
name: "General",
|
||||
children: [
|
||||
{
|
||||
name: "Overview",
|
||||
path: "administration/overview",
|
||||
},
|
||||
{
|
||||
name: "System Tasks",
|
||||
path: "administration/tasks",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Applications",
|
||||
path: "administration/applications",
|
||||
},
|
||||
{
|
||||
name: "Sources",
|
||||
path: "administration/sources",
|
||||
},
|
||||
{
|
||||
name: "Providers",
|
||||
path: "administration/providers",
|
||||
},
|
||||
{
|
||||
name: "User Management",
|
||||
children: [
|
||||
{
|
||||
name: "User",
|
||||
path: "administration/users",
|
||||
},
|
||||
{
|
||||
name: "Groups",
|
||||
path: "administration/groups",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Outposts",
|
||||
children: [
|
||||
{
|
||||
name: "Outposts",
|
||||
path: "administration/outposts",
|
||||
},
|
||||
{
|
||||
name: "Service Connections",
|
||||
path: "administration/outposts/service_connections",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Policies",
|
||||
path: "administration/policies",
|
||||
},
|
||||
{
|
||||
name: "Property Mappings",
|
||||
path: "administration/property_mappings",
|
||||
},
|
||||
{
|
||||
name: "Flows",
|
||||
children: [
|
||||
{
|
||||
name: "Flows",
|
||||
path: "administration/flows",
|
||||
},
|
||||
{
|
||||
name: "Stages",
|
||||
path: "administration/stages",
|
||||
},
|
||||
{
|
||||
name: "Prompts",
|
||||
path: "administration/stages/prompts",
|
||||
},
|
||||
{
|
||||
name: "Invitations",
|
||||
path: "administration/stages/invitations",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Certificates",
|
||||
path: "administration/crypto/certificates",
|
||||
},
|
||||
{
|
||||
name: "Tokens",
|
||||
path: "administration/tokens",
|
||||
},
|
||||
],
|
||||
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>`;
|
||||
|
|
|
|||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
Reference in New Issue