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

web/user: add column layouts

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-04-05 23:28:00 +02:00
parent 79ad356d90
commit f2b540ed8a
2 changed files with 57 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/common/config.ts
View file

@ -3,9 +3,15 @@ import { UserSelf } from "@goauthentik/api";
import { me } from "../api/Users";
export enum UserDisplay {
"username",
"name",
"email",
username = "username",
name = "name",
email = "email",
}
export enum LayoutType {
row = "row",
column_2 = "2-column",
column_3 = "3-column",
}
export interface UIConfig {
@ -31,6 +37,9 @@ export interface UIConfig {
pagination: {
perPage: number;
};
layout: {
type: LayoutType;
};
locale: string;
}
@ -42,6 +51,9 @@ export class DefaultUIConfig implements UIConfig {
applicationEdit: true,
search: true,
};
layout = {
type: LayoutType.row,
};
navbar = {
userDisplay: UserDisplay.username,
};

62
web/src/user/LibraryPage.ts
View file

@ -19,7 +19,7 @@ import { Application, CoreApi } from "@goauthentik/api";
import { AKResponse } from "../api/Client";
import { DEFAULT_CONFIG } from "../api/Config";
import { UIConfig, uiConfig } from "../common/config";
import { LayoutType, UIConfig, uiConfig } from "../common/config";
import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
import { groupBy, loading } from "../utils";
import "./LibraryApplication";
@ -79,6 +79,9 @@ export class LibraryPage extends LitElement {
.header input:focus {
outline: 0;
}
.pf-c-page__main {
overflow: hidden;
}
.pf-c-page__main-section {
background-color: transparent;
}
@ -119,25 +122,44 @@ export class LibraryPage extends LitElement {
}
renderApps(config: UIConfig): TemplateResult {
return html`${this.getApps().map(([group, apps]) => {
return html`
<div class="pf-c-content app-group-header">
<h2>${group}</h2>
</div>
<div
class="pf-l-grid pf-m-gutter pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-5-col-on-lg pf-m-all-2-col-on-xl"
>
${apps.map((app) => {
return html`<ak-library-app
class="pf-l-grid__item"
.application=${app}
background=${config.color.cardBackground}
?selected=${app.slug === this.selectedApp?.slug}
></ak-library-app>`;
})}
</div>
`;
})}`;
let groupClass = "";
let groupGrid = "";
switch (config.layout.type) {
case LayoutType.row:
groupClass = "pf-m-12-col";
groupGrid =
"pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-5-col-on-lg pf-m-all-2-col-on-xl";
break;
case LayoutType.column_2:
groupClass = "pf-m-6-col";
groupGrid =
"pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-4-col-on-lg pf-m-all-4-col-on-xl";
break;
case LayoutType.column_3:
groupClass = "pf-m-4-col";
groupGrid =
"pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl";
break;
}
return html`<div class="pf-l-grid pf-m-gutter">
${this.getApps().map(([group, apps]) => {
return html`<div class="pf-l-grid__item ${groupClass}">
<div class="pf-c-content app-group-header">
<h2>${group}</h2>
</div>
<div class="pf-l-grid pf-m-gutter ${groupGrid}">
${apps.map((app) => {
return html`<ak-library-app
class="pf-l-grid__item"
.application=${app}
background=${config.color.cardBackground}
?selected=${app.slug === this.selectedApp?.slug}
></ak-library-app>`;
})}
</div>
</div> `;
})}
</div>`;
}
render(): TemplateResult {