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"; import { me } from "../api/Users";
export enum UserDisplay { export enum UserDisplay {
"username", username = "username",
"name", name = "name",
"email", email = "email",
}
export enum LayoutType {
row = "row",
column_2 = "2-column",
column_3 = "3-column",
} }
export interface UIConfig { export interface UIConfig {
@ -31,6 +37,9 @@ export interface UIConfig {
pagination: { pagination: {
perPage: number; perPage: number;
}; };
layout: {
type: LayoutType;
};
locale: string; locale: string;
} }
@ -42,6 +51,9 @@ export class DefaultUIConfig implements UIConfig {
applicationEdit: true, applicationEdit: true,
search: true, search: true,
}; };
layout = {
type: LayoutType.row,
};
navbar = { navbar = {
userDisplay: UserDisplay.username, 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 { AKResponse } from "../api/Client";
import { DEFAULT_CONFIG } from "../api/Config"; 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 { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
import { groupBy, loading } from "../utils"; import { groupBy, loading } from "../utils";
import "./LibraryApplication"; import "./LibraryApplication";
@ -79,6 +79,9 @@ export class LibraryPage extends LitElement {
.header input:focus { .header input:focus {
outline: 0; outline: 0;
} }
.pf-c-page__main {
overflow: hidden;
}
.pf-c-page__main-section { .pf-c-page__main-section {
background-color: transparent; background-color: transparent;
} }
@ -119,25 +122,44 @@ export class LibraryPage extends LitElement {
} }
renderApps(config: UIConfig): TemplateResult { renderApps(config: UIConfig): TemplateResult {
return html`${this.getApps().map(([group, apps]) => { let groupClass = "";
return html` let groupGrid = "";
<div class="pf-c-content app-group-header"> switch (config.layout.type) {
<h2>${group}</h2> case LayoutType.row:
</div> groupClass = "pf-m-12-col";
<div groupGrid =
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" "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;
${apps.map((app) => { case LayoutType.column_2:
return html`<ak-library-app groupClass = "pf-m-6-col";
class="pf-l-grid__item" groupGrid =
.application=${app} "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";
background=${config.color.cardBackground} break;
?selected=${app.slug === this.selectedApp?.slug} case LayoutType.column_3:
></ak-library-app>`; groupClass = "pf-m-4-col";
})} groupGrid =
</div> "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 { render(): TemplateResult {