trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

static: add navbar items to sidebar

Browse source
This commit is contained in:
Jens Langhammer 2020-11-22 13:13:45 +01:00
parent 30bf4f5747
commit 372e51ee07
7 changed files with 132 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
passbook/static/static/dist/main.js vendored
View file

File diff suppressed because one or more lines are too long

2
passbook/static/static/dist/main.js.map vendored
View file

File diff suppressed because one or more lines are too long

7
passbook/static/static/passbook/passbook.css
View file

@ -7,6 +7,13 @@
font-display: swap;
}
html {
--pf-c-nav__link--PaddingTop: 0.5rem;
--pf-c-nav__link--PaddingRight: 0.5rem;
--pf-c-nav__link--PaddingBottom: 0.5rem;
--pf-c-nav__link--PaddingLeft: 0.5rem;
}
.pb-brand {
font-family: "DIN 1451 Std";
font-size: 4em;

135
passbook/static/static/src/elements/AdminSidebar.ts → passbook/static/static/src/elements/Sidebar.ts
View file

@ -1,4 +1,5 @@
import {
css,
customElement,
html,
LitElement,
@ -19,9 +20,23 @@ export interface SidebarItem {
}
export const SIDEBAR_ITEMS: SidebarItem[] = [
{
name: "Overview",
path: "overview",
name: "",
path: "",
},
{
name: "General",
children: [
{
name: "Overview",
path: "overview",
},
{
name: "System Tasks",
path: "tasks",
},
],
},
{
name: "Applications",
@ -35,6 +50,19 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
name: "Providers",
path: "providers",
},
{
name: "User Management",
children: [
{
name: "User",
path: "users",
},
{
name: "Groups",
path: "groups",
},
],
},
{
name: "Outposts",
children: [
@ -48,6 +76,10 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
},
],
},
{
name: "Policies",
path: "policies",
},
{
name: "Property Mappings",
path: "property_mappings",
@ -59,10 +91,6 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
name: "Flows",
path: "flows",
},
{
name: "Bindings",
path: "stages/bindings",
},
{
name: "Stages",
path: "stages",
@ -77,19 +105,6 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
},
],
},
{
name: "Policies",
children: [
{
name: "Policies",
path: "policies",
},
{
name: "Bindings",
path: "policies/bindings",
},
],
},
{
name: "Certificates",
path: "crypto/certificates",
@ -98,27 +113,65 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
name: "Tokens",
path: "tokens",
},
{
name: "User",
path: "users",
},
{
name: "Groups",
path: "groups",
},
{
name: "System Tasks",
path: "tasks",
},
];
@customElement("pb-admin-sidebar")
export class AdminSideBar extends LitElement {
export const ROOT_ITEMS: SidebarItem[] = [
{
name: "Library",
path: "/-/overview/",
},
{
name: "Monitor",
path: "/audit/audit/",
},
{
name: "Administration",
children: SIDEBAR_ITEMS
}
];
@customElement("pb-sidebar")
export class SideBar extends LitElement {
@property()
activePath: string;
@property()
brandLogo?: string;
@property()
brandTitle?: string;
static get styles() {
return [GlobalsStyle, PageStyle, NavStyle];
return [
GlobalsStyle,
PageStyle,
NavStyle,
css`
.pf-c-nav__link {
--pf-c-nav__link--PaddingTop: 0.5rem;
--pf-c-nav__link--PaddingRight: 0.5rem;
--pf-c-nav__link--PaddingBottom: 0.5rem;
}
.pf-c-nav__subnav {
--pf-c-nav__subnav--PaddingBottom: 0px;
}
.pb-brand {
font-family: "DIN 1451 Std";
line-height: 60px;
display: flex;
font-size: 3rem;
flex-direction: row;
align-items: center;
margin-right: 0.5em;
color: var(--pf-c-nav__link--m-current--Color);
text-align: center;
}
.pb-brand img {
margin: 0 0.5rem;
max-height: 60px;
}
`,
];
}
constructor() {
@ -129,6 +182,17 @@ export class AdminSideBar extends LitElement {
});
}
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 {
return html` <li
class="pf-c-nav__item ${item.children
@ -165,7 +229,8 @@ export class AdminSideBar 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">
${SIDEBAR_ITEMS.map((i) => this.renderItem(i))}
${this.renderBrand()}
${ROOT_ITEMS.map((i) => this.renderItem(i))}
</ul>
</nav>
</div>`;

2
passbook/static/static/src/main.ts
View file

@ -1,7 +1,7 @@
import "./legacy.js";
import "./elements/ActionButton";
import "./elements/AdminSidebar";
import "./elements/Sidebar";
import "./elements/CodeMirror";
import "./elements/Dropdown";
import "./elements/FetchFillSlot";

13
passbook/static/static/src/pages/RouterOutlet.ts
View file

@ -33,18 +33,27 @@ export class RouterOutlet extends LitElement {
@property()
activeRoute?: Route;
@property()
defaultUrl?: string;
static get styles() {
return [PF, PFAddons];
}
constructor() {
super();
this.navigate();
window.addEventListener("hashchange", (e) => this.navigate());
}
firstUpdated() {
this.navigate();
}
navigate() {
const activeUrl = window.location.hash.slice(1, Infinity);
let activeUrl = window.location.hash.slice(1, Infinity);
if (activeUrl === "") {
activeUrl = this.defaultUrl!;
}
ROUTES.forEach((route) => {
let selectedRoute: Route | null = null;
if (route.url.exec(activeUrl)) {

24
passbook/static/static/src/pages/SiteShell.ts
View file

@ -97,19 +97,17 @@ export class SiteShell extends LitElement {
render() {
return html` ${this.loading
? html` <div class="pf-c-backdrop">
<div class="pf-l-bullseye">
<div class="pf-l-bullseye__item">
<span
class="pf-c-spinner pf-m-xl"
role="progressbar"
aria-valuetext="Loading..."
>
<span class="pf-c-spinner__clipper"></span>
<span class="pf-c-spinner__lead-ball"></span>
<span class="pf-c-spinner__tail-ball"></span>
</span>
</div>
? html` <div class="pf-l-bullseye">
<div class="pf-l-bullseye__item">
<span
class="pf-c-spinner pf-m-xl"
role="progressbar"
aria-valuetext="Loading..."
>
<span class="pf-c-spinner__clipper"></span>
<span class="pf-c-spinner__lead-ball"></span>
<span class="pf-c-spinner__tail-ball"></span>
</span>
</div>
</div>`
: ""}