web/user: allow custom font-awesome icons for applications

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

#1189
This commit is contained in:
Jens Langhammer 2021-12-06 21:20:15 +01:00
parent b14c22cbff
commit a91204e5b9
6 changed files with 32 additions and 10 deletions

View File

@ -262,7 +262,7 @@ class Application(PolicyBindingModel):
it is returned as-is"""
if not self.meta_icon:
return None
if self.meta_icon.name.startswith("http") or self.meta_icon.name.startswith("/static"):
if "://" in self.meta_icon.name or self.meta_icon.name.startswith("/static"):
return self.meta_icon.name
return self.meta_icon.url

View File

@ -1580,6 +1580,10 @@ msgstr "Edit Stage"
msgid "Edit User"
msgstr "Edit User"
#: src/pages/applications/ApplicationForm.ts
msgid "Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon \"fa-test\"."
msgstr "Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon \"fa-test\"."
#: src/user/LibraryPage.ts
msgid "Either no applications are defined, or you don't have access to any."
msgstr "Either no applications are defined, or you don't have access to any."

View File

@ -1568,6 +1568,10 @@ msgstr "Éditer l'étap"
msgid "Edit User"
msgstr "Éditer l'utilisateur"
#: src/pages/applications/ApplicationForm.ts
msgid "Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon \"fa-test\"."
msgstr ""
#: src/user/LibraryPage.ts
msgid "Either no applications are defined, or you don't have access to any."
msgstr "Soit aucune application n'est définie, soit vous n'en avez accès à aucune."

View File

@ -1572,6 +1572,10 @@ msgstr ""
msgid "Edit User"
msgstr ""
#: src/pages/applications/ApplicationForm.ts
msgid "Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon \"fa-test\"."
msgstr ""
#: src/user/LibraryPage.ts
msgid "Either no applications are defined, or you don't have access to any."
msgstr ""

View File

@ -266,6 +266,9 @@ export class ApplicationForm extends ModelForm<Application, string> {
value="${first(this.instance?.metaIcon, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon "fa-test".`}
</p>
</ak-form-element-horizontal>`;
}),
)}

View File

@ -62,6 +62,21 @@ export class LibraryApplication extends LitElement {
];
}
renderIcon(): TemplateResult {
if (this.application?.metaIcon) {
if (this.application.metaIcon.startsWith("fa://")) {
const icon = this.application.metaIcon.replaceAll("fa://", "");
return html`<i class="fas ${icon}"></i>`;
}
return html`<img
class="app-icon pf-c-avatar"
src="${ifDefined(this.application.metaIcon)}"
alt="${t`Application Icon`}"
/>`;
}
return html`<i class="fas fa-share-square"></i>`;
}
render(): TemplateResult {
if (!this.application) {
return html`<ak-spinner></ak-spinner>`;
@ -73,15 +88,7 @@ export class LibraryApplication extends LitElement {
style="background: ${this.background} !important"
>
<div class="pf-c-card__header">
<a href="${ifDefined(this.application.launchUrl ?? "")}">
${this.application.metaIcon
? html`<img
class="app-icon pf-c-avatar"
src="${ifDefined(this.application.metaIcon)}"
alt="${t`Application Icon`}"
/>`
: html`<i class="fas fa-share-square"></i>`}
</a>
<a href="${ifDefined(this.application.launchUrl ?? "")}"> ${this.renderIcon()} </a>
${until(
uiConfig().then((config) => {
if (!config.enabledFeatures.applicationEdit) {