web/user: experiment with some slightly different styles (#6405)
* web/user: experiment with some slightly different styles Signed-off-by: Jens Langhammer <jens@goauthentik.io> * rework application card Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix color and expand Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix expansion Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
GitHub
parent
a2714ab1f1
commit
de16988cac
|
|
@ -9,6 +9,9 @@
|
|||
--ak-dark-background-light: #1c1e21;
|
||||
--ak-dark-background-light-ish: #212427;
|
||||
--ak-dark-background-lighter: #2b2e33;
|
||||
|
||||
/* PatternFly likes to override global variables for some reason */
|
||||
--ak-global--Color--100: var(--pf-global--Color--100);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
body {
|
||||
background-color: var(--ak-dark-background) !important;
|
||||
}
|
||||
:root {
|
||||
--pf-global--Color--100: var(--ak-dark-foreground) !important;
|
||||
--ak-global--Color--100: var(--ak-dark-foreground) !important;
|
||||
--pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
|
||||
--pf-global--link--Color: var(--ak-dark-foreground-link) !important;
|
||||
}
|
||||
body {
|
||||
background-color: var(--ak-dark-background) !important;
|
||||
}
|
||||
.pf-c-radio {
|
||||
--pf-c-radio__label--Color: var(--ak-dark-foreground);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { truncateWords } from "@goauthentik/common/utils";
|
||||
import { AKElement, rootInterface } from "@goauthentik/elements/Base";
|
||||
import "@goauthentik/elements/Expand";
|
||||
import { UserInterface } from "@goauthentik/user/UserInterface";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
|
|
@ -32,27 +33,47 @@ export class LibraryApplication extends AKElement {
|
|||
PFButton,
|
||||
PFAvatar,
|
||||
css`
|
||||
.pf-c-card {
|
||||
height: 100%;
|
||||
:host {
|
||||
--icon-height: 4rem;
|
||||
--icon-border: 0.25rem;
|
||||
}
|
||||
i.pf-icon {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.pf-c-card {
|
||||
--pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
|
||||
}
|
||||
.pf-c-avatar {
|
||||
--pf-c-avatar--BorderRadius: 0;
|
||||
--pf-c-avatar--Height: calc(
|
||||
var(--icon-height) + var(--icon-border) + var(--icon-border)
|
||||
);
|
||||
--pf-c-avatar--Width: calc(
|
||||
var(--icon-height) + var(--icon-border) + var(--icon-border)
|
||||
);
|
||||
}
|
||||
.pf-c-card__header {
|
||||
min-height: 60px;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
.pf-c-card__header a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
.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));
|
||||
}
|
||||
.expander {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.pf-c-card__title {
|
||||
text-align: center;
|
||||
/* This is not ideal as it hard limits us to 2 lines of text for the title
|
||||
of the application. In theory that should be fine for most cases, but ideally
|
||||
we don't do this */
|
||||
height: 48px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
@ -62,7 +83,7 @@ export class LibraryApplication extends AKElement {
|
|||
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`<i class="icon fas ${icon}"></i>`;
|
||||
}
|
||||
return html`<img
|
||||
class="app-icon pf-c-avatar"
|
||||
|
|
@ -70,7 +91,7 @@ export class LibraryApplication extends AKElement {
|
|||
alt="${msg("Application Icon")}"
|
||||
/>`;
|
||||
}
|
||||
return html`<i class="fas fa-share-square"></i>`;
|
||||
return html`<span class="icon">${this.application?.name.charAt(0).toUpperCase()}</span>`;
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
|
|
@ -82,7 +103,7 @@ export class LibraryApplication extends AKElement {
|
|||
class="pf-c-card pf-m-hoverable pf-m-compact ${this.selected
|
||||
? "pf-m-selectable pf-m-selected"
|
||||
: ""}"
|
||||
style="background: ${this.background} !important"
|
||||
style=${this.background !== "" ? `background: ${this.background} !important` : ""}
|
||||
>
|
||||
<div class="pf-c-card__header">
|
||||
<a
|
||||
|
|
@ -91,32 +112,31 @@ export class LibraryApplication extends AKElement {
|
|||
>
|
||||
${this.renderIcon()}
|
||||
</a>
|
||||
${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser
|
||||
? html`
|
||||
<a
|
||||
class="pf-c-button pf-m-control pf-m-small"
|
||||
href="/if/admin/#/core/applications/${this.application?.slug}"
|
||||
>
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
</a>
|
||||
`
|
||||
: html``}
|
||||
</div>
|
||||
<div class="pf-c-card__title">
|
||||
<p>
|
||||
<a
|
||||
href="${ifDefined(this.application.launchUrl ?? "")}"
|
||||
target="${ifDefined(this.application.openInNewTab ? "_blank" : undefined)}"
|
||||
>${this.application.name}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="expander"></div>
|
||||
<ak-expand>
|
||||
<div class="pf-c-content">
|
||||
<small>${this.application.metaPublisher}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
${truncateWords(this.application.metaDescription || "", 35)}
|
||||
</div>
|
||||
${truncateWords(this.application.metaDescription || "", 10)}
|
||||
${rootInterface()?.uiConfig?.enabledFeatures.applicationEdit && me?.user.isSuperuser
|
||||
? html`
|
||||
<a
|
||||
class="pf-c-button pf-m-control pf-m-small pf-m-block"
|
||||
href="/if/admin/#/core/applications/${this.application?.slug}"
|
||||
>
|
||||
<i class="fas fa-pencil-alt"></i> ${msg("Edit")}
|
||||
</a>
|
||||
`
|
||||
: html``}
|
||||
</ak-expand>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,12 +73,22 @@ export class UserInterface extends Interface {
|
|||
z-index: auto !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.pf-c-page__header {
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: black !important;
|
||||
}
|
||||
:host([theme="dark"]) .pf-c-page__header {
|
||||
color: var(--ak-dark-foreground) !important;
|
||||
}
|
||||
.pf-c-page__header-tools-item .fas,
|
||||
.pf-c-notification-badge__count,
|
||||
.pf-c-page__header-tools-group .pf-c-button {
|
||||
color: var(--ak-global--Color--100) !important;
|
||||
}
|
||||
.pf-c-page {
|
||||
background-color: transparent;
|
||||
}
|
||||
.background-wrapper {
|
||||
background-color: var(--pf-c-page--BackgroundColor) !important;
|
||||
}
|
||||
.display-none {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -96,6 +106,15 @@ export class UserInterface extends Interface {
|
|||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--pf-c-page--BackgroundColor) !important;
|
||||
}
|
||||
.background-default-slant {
|
||||
background-color: white; /*var(--ak-accent);*/
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
|
||||
height: 50vh;
|
||||
}
|
||||
:host([theme="dark"]) .background-default-slant {
|
||||
background-color: black;
|
||||
}
|
||||
ak-locale-context {
|
||||
display: flex;
|
||||
|
|
@ -158,7 +177,11 @@ export class UserInterface extends Interface {
|
|||
return html` <ak-locale-context>
|
||||
<ak-enterprise-status interface="user"></ak-enterprise-status>
|
||||
<div class="pf-c-page">
|
||||
<div class="background-wrapper" style="${this.uiConfig.theme.background}"></div>
|
||||
<div class="background-wrapper" style="${this.uiConfig.theme.background}">
|
||||
${this.uiConfig.theme.background === ""
|
||||
? html`<div class="background-default-slant"></div>`
|
||||
: html``}
|
||||
</div>
|
||||
<header class="pf-c-page__header">
|
||||
<div class="pf-c-page__header-brand">
|
||||
<a href="#/" class="pf-c-page__header-brand-link">
|
||||
|
|
@ -215,7 +238,7 @@ export class UserInterface extends Interface {
|
|||
? "pf-m-unread"
|
||||
: ""}"
|
||||
>
|
||||
<i class="pf-icon-bell" aria-hidden="true"></i>
|
||||
<i class="fas fa-bell" aria-hidden="true"></i>
|
||||
<span class="pf-c-notification-badge__count"
|
||||
>${this.notificationsCount}</span
|
||||
>
|
||||
|
|
@ -244,7 +267,7 @@ export class UserInterface extends Interface {
|
|||
</div>
|
||||
${this.me.user.isSuperuser
|
||||
? html`<a
|
||||
class="pf-c-button pf-m-primary pf-m-small pf-u-display-none pf-u-display-block-on-md"
|
||||
class="pf-c-button pf-m-secondary pf-m-small pf-u-display-none pf-u-display-block-on-md"
|
||||
href="/if/admin"
|
||||
>
|
||||
${msg("Admin interface")}
|
||||
|
|
|
|||
Reference in New Issue