web/admin: more consistent label usage, use compact labels
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
7e44de2da9
commit
5132f0f876
|
@ -5,6 +5,7 @@ import "@goauthentik/admin/outposts/OutpostHealth";
|
|||
import "@goauthentik/admin/outposts/OutpostHealthSimple";
|
||||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { uiConfig } from "@goauthentik/common/ui/config";
|
||||
import { PFColor } from "@goauthentik/elements/Label";
|
||||
import { PFSize } from "@goauthentik/elements/Spinner";
|
||||
import "@goauthentik/elements/buttons/SpinnerButton";
|
||||
import "@goauthentik/elements/forms/DeleteBulkForm";
|
||||
|
@ -83,12 +84,12 @@ export class OutpostListPage extends TablePage<Outpost> {
|
|||
return [
|
||||
html`<div>${item.name}</div>
|
||||
${item.config.authentik_host === ""
|
||||
? html`<i class="pf-icon pf-icon-warning-triangle"></i>
|
||||
<small
|
||||
>${t`Warning: authentik Domain is not configured, authentication will not work.`}</small
|
||||
>`
|
||||
: html`<i class="pf-icon pf-icon-ok"></i>
|
||||
<small> ${t`Logging in via ${item.config.authentik_host}.`} </small>`}`,
|
||||
? html`<ak-label color=${PFColor.Orange} ?compact=${true}>
|
||||
${t`Warning: authentik Domain is not configured, authentication will not work.`}
|
||||
</ak-label>`
|
||||
: html`<ak-label color=${PFColor.Green} ?compact=${true}>
|
||||
${t`Logging in via ${item.config.authentik_host}.`}
|
||||
</ak-label>`}`,
|
||||
html`${TypeToLabel(item.type)}`,
|
||||
html`<ul>
|
||||
${item.providersObj?.map((p) => {
|
||||
|
|
|
@ -72,10 +72,10 @@ export class PolicyListPage extends TablePage<Policy> {
|
|||
return [
|
||||
html`<div>${item.name}</div>
|
||||
${(item.boundTo || 0) > 0
|
||||
? html`<ak-label color=${PFColor.Green}>
|
||||
? html`<ak-label color=${PFColor.Green} ?compact=${true}>
|
||||
${t`Assigned to ${item.boundTo} object(s).`}
|
||||
</ak-label>`
|
||||
: html`<ak-label color=${PFColor.Orange}>
|
||||
: html`<ak-label color=${PFColor.Orange} ?compact=${true}>
|
||||
${t`Warning: Policy is not assigned.`}
|
||||
</ak-label>`}`,
|
||||
html`${item.verboseName}`,
|
||||
|
|
|
@ -5,6 +5,7 @@ import "@goauthentik/admin/sources/plex/PlexSourceForm";
|
|||
import "@goauthentik/admin/sources/saml/SAMLSourceForm";
|
||||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { uiConfig } from "@goauthentik/common/ui/config";
|
||||
import { PFColor } from "@goauthentik/elements/Label";
|
||||
import "@goauthentik/elements/forms/DeleteBulkForm";
|
||||
import "@goauthentik/elements/forms/ModalForm";
|
||||
import "@goauthentik/elements/forms/ProxyForm";
|
||||
|
@ -82,7 +83,11 @@ export class SourceListPage extends TablePage<Source> {
|
|||
return [
|
||||
html`<a href="#/core/sources/${item.slug}">
|
||||
<div>${item.name}</div>
|
||||
${item.enabled ? html`` : html`<small>${t`Disabled`}</small>`}
|
||||
${item.enabled
|
||||
? html``
|
||||
: html`<ak-label color=${PFColor.Orange} ?compact=${true}>
|
||||
${t`Disabled`}</ak-label
|
||||
>`}
|
||||
</a>`,
|
||||
html`${item.verboseName}`,
|
||||
html` <ak-forms-modal>
|
||||
|
@ -105,10 +110,10 @@ export class SourceListPage extends TablePage<Source> {
|
|||
|
||||
rowInbuilt(item: Source): TemplateResult[] {
|
||||
return [
|
||||
html`<span>
|
||||
html`<div>
|
||||
<div>${item.name}</div>
|
||||
<small>${t`Built-in`}</small>
|
||||
</span>`,
|
||||
<ak-label color=${PFColor.Grey} ?compact=${true}> ${t`Built-in`}</ak-label>
|
||||
</div>`,
|
||||
html`${t`Built-in`}`,
|
||||
html``,
|
||||
];
|
||||
|
|
|
@ -22,6 +22,9 @@ export class Label extends AKElement {
|
|||
@property()
|
||||
icon?: string;
|
||||
|
||||
@property({ type: Boolean })
|
||||
compact = false;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFLabel, AKGlobal];
|
||||
}
|
||||
|
@ -35,14 +38,14 @@ export class Label extends AKElement {
|
|||
case PFColor.Red:
|
||||
return "fa-times";
|
||||
case PFColor.Grey:
|
||||
return "fa-question-circle";
|
||||
return "fa-info-circle";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<span class="pf-c-label ${this.color}">
|
||||
return html`<span class="pf-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}">
|
||||
<span class="pf-c-label__content">
|
||||
<span class="pf-c-label__icon">
|
||||
<i
|
||||
|
|
Reference in a new issue