trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web: fix app icon rendering, style refinements (#6409)

Browse source 
* add very slight drop shadow to icons so dark colours are better visible, fix expand text

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

* web/admin: fix rendering of icons for admin interface

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 11:09:11 +02:00 committed by GitHub
parent e5322a6dd3
commit 5803c39e91
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/admin/applications/ApplicationListPage.ts
View file

@ -59,6 +59,10 @@ export class ApplicationListPage extends TablePage<Application> {
PFAvatar, PFAvatar,
PFCard, PFCard,
css` css`
:host {
--icon-height: 2rem;
--icon-border: 0.25rem;
}
/* Fix alignment issues with images in tables */ /* Fix alignment issues with images in tables */
.pf-c-table tbody > tr > * { .pf-c-table tbody > tr > * {
vertical-align: middle; vertical-align: middle;
@ -72,6 +76,14 @@ export class ApplicationListPage extends TablePage<Application> {
.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * { .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2); 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));
}
`, `,
); );
} }
@ -129,15 +141,15 @@ export class ApplicationListPage extends TablePage<Application> {
if (item?.metaIcon) { if (item?.metaIcon) {
if (item.metaIcon.startsWith("fa://")) { if (item.metaIcon.startsWith("fa://")) {
const icon = item.metaIcon.replaceAll("fa://", ""); const icon = item.metaIcon.replaceAll("fa://", "");
return html`<i class="fas ${icon}"></i>`; return html`<i class="icon fas ${icon}"></i>`;
} }
return html`<img return html`<img
class="app-icon pf-c-avatar" class="icon pf-c-avatar"
src="${ifDefined(item.metaIcon)}" src="${ifDefined(item.metaIcon)}"
alt="${msg("Application Icon")}" alt="${msg("Application Icon")}"
/>`; />`;
} }
return html`<i class="fas fa-share-square"></i>`; return html`<span class="icon">${item?.name.charAt(0).toUpperCase()}</span>`;
} }
row(item: Application): TemplateResult[] { row(item: Application): TemplateResult[] {

5
web/src/user/LibraryApplication.ts
View file

@ -64,6 +64,7 @@ export class LibraryApplication extends AKElement {
padding: var(--icon-border); padding: var(--icon-border);
max-height: calc(var(--icon-height) + var(--icon-border) + 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)); line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
filter: drop-shadow(5px 5px 5px rgba(128, 128, 128, 0.25));
} }
.expander { .expander {
flex-grow: 1; flex-grow: 1;
@ -86,7 +87,7 @@ export class LibraryApplication extends AKElement {
return html`<i class="icon fas ${icon}"></i>`; return html`<i class="icon fas ${icon}"></i>`;
} }
return html`<img return html`<img
class="app-icon pf-c-avatar" class="icon pf-c-avatar"
src="${ifDefined(this.application.metaIcon)}" src="${ifDefined(this.application.metaIcon)}"
alt="${msg("Application Icon")}" alt="${msg("Application Icon")}"
/>`; />`;
@ -121,7 +122,7 @@ export class LibraryApplication extends AKElement {
> >
</div> </div>
<div class="expander"></div> <div class="expander"></div>
<ak-expand> <ak-expand textOpen=${msg("Less details")} textClosed=${msg("More details")}>
<div class="pf-c-content"> <div class="pf-c-content">
<small>${this.application.metaPublisher}</small> <small>${this.application.metaPublisher}</small>
</div> </div>