web: app icons v2 (#6410)

* 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

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>