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

12
web/src/elements/Expand.ts
View File

@ -1,7 +1,7 @@
import { AKElement } from "@goauthentik/elements/Base";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";
@ -19,7 +19,15 @@ export class Expand extends AKElement {
textClosed = msg("Show more");
static get styles(): CSSResult[] {
return [PFBase, PFExpandableSection];
return [
PFBase,
PFExpandableSection,
css`
.pf-c-expandable-section.pf-m-display-lg {
background-color: var(--pf-global--BackgroundColor--100);
}
`,
];
}
render(): TemplateResult {

13
web/src/elements/PageHeader.ts
View File

@ -91,6 +91,11 @@ export class PageHeader extends AKElement {
.notification-trigger.has-notifications {
color: var(--pf-global--active-color--100);
}
h1 {
display: flex;
flex-direction: row;
align-items: center !important;
}
`,
];
}
@ -120,10 +125,10 @@ export class PageHeader extends AKElement {
renderIcon(): TemplateResult {
if (this.icon) {
if (this.iconImage && !this.icon.startsWith("fa://")) {
return html`<img class="pf-icon" src="${this.icon}" alt="page icon" />&nbsp;`;
return html`<img class="pf-icon" src="${this.icon}" alt="page icon" />`;
}
const icon = this.icon.replaceAll("fa://", "fa ");
return html`<i class=${icon}></i>&nbsp;`;
return html`<i class=${icon}></i>`;
}
return html``;
}
@ -147,8 +152,8 @@ export class PageHeader extends AKElement {
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>
${this.renderIcon()}
<slot name="header"> ${this.header} </slot>
<slot name="icon">${this.renderIcon()}</slot>&nbsp;
<slot name="header">${this.header}</slot>
</h1>
${this.description ? html`<p>${this.description}</p>` : html``}
</div>