habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: app icons v2 (#6410)

Browse Source 
* fix more icons stuff

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* refactor app icon into separate component

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update locale

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* make app icon work correctly in admin list and app view page

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-07-28 14:25:56 +02:00
committed by GitHub
parent 5803c39e91
commit 782d95b4a3
17 changed files with 301 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/admin/applications/ApplicationListPage.ts
View File

@ -1,5 +1,6 @@
import "@goauthentik/admin/applications/ApplicationForm";
import "@goauthentik/admin/applications/wizard/ApplicationWizard";
import { PFSize } from "@goauthentik/app/elements/Spinner";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import MDApplication from "@goauthentik/docs/core/applications.md";
@ -11,13 +12,12 @@ import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { TableColumn } from "@goauthentik/elements/table/Table";
import { TablePage } from "@goauthentik/elements/table/TablePage";
import "@goauthentik/user/LibraryApplication/AppIcon";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import { Application, CoreApi } from "@goauthentik/api";
@ -56,13 +56,8 @@ export class ApplicationListPage extends TablePage<Application> {
static get styles(): CSSResult[] {
return super.styles.concat(
PFAvatar,
PFCard,
css`
:host {
--icon-height: 2rem;
--icon-border: 0.25rem;
}
/* Fix alignment issues with images in tables */
.pf-c-table tbody > tr > * {
vertical-align: middle;
@ -76,14 +71,6 @@ export class ApplicationListPage extends TablePage<Application> {
.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2);
}
.icon {
font-size: var(--icon-height);
color: var(--ak-global--Color--100);
padding: var(--icon-border);
max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
filter: drop-shadow(5px 5px 5px rgba(128, 128, 128, 0.25));
}
`,
);
}
@ -137,24 +124,9 @@ export class ApplicationListPage extends TablePage<Application> {
</ak-forms-delete-bulk>`;
}
renderIcon(item: Application): TemplateResult {
if (item?.metaIcon) {
if (item.metaIcon.startsWith("fa://")) {
const icon = item.metaIcon.replaceAll("fa://", "");
return html`<i class="icon fas ${icon}"></i>`;
}
return html`<img
class="icon pf-c-avatar"
src="${ifDefined(item.metaIcon)}"
alt="${msg("Application Icon")}"
/>`;
}
return html`<span class="icon">${item?.name.charAt(0).toUpperCase()}</span>`;
}
row(item: Application): TemplateResult[] {
return [
this.renderIcon(item),
html`<ak-app-icon size=${PFSize.Medium} .app=${item}></ak-app-icon>`,
html`<a href="#/core/applications/${item.slug}">
<div>${item.name}</div>
${item.metaPublisher ? html`<small>${item.metaPublisher}</small>` : html``}

8
web/src/admin/applications/ApplicationViewPage.ts
View File

@ -2,6 +2,7 @@ import "@goauthentik/admin/applications/ApplicationAuthorizeChart";
import "@goauthentik/admin/applications/ApplicationCheckAccessForm";
import "@goauthentik/admin/applications/ApplicationForm";
import "@goauthentik/admin/policies/BoundPoliciesList";
import { PFSize } from "@goauthentik/app/elements/Spinner";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/EmptyState";
@ -9,6 +10,7 @@ import "@goauthentik/elements/PageHeader";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/events/ObjectChangelog";
import "@goauthentik/user/LibraryApplication/AppIcon";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
@ -80,11 +82,15 @@ export class ApplicationViewPage extends AKElement {
render(): TemplateResult {
return html`<ak-page-header
icon=${this.application?.metaIcon || ""}
header=${this.application?.name || msg("Loading")}
description=${ifDefined(this.application?.metaPublisher)}
.iconImage=${true}
>
<ak-app-icon
size=${PFSize.Small}
slot="icon"
.app=${this.application}
></ak-app-icon>
</ak-page-header>
${this.renderApp()}`;
}