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

web/admin: move SidebarHamburger into PageHeader 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-10 17:30:23 +02:00
parent 6f7fb4c919
commit f6b8dc5cea
7 changed files with 59 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/authentik.css
View File

@ -118,6 +118,9 @@ body {
.pf-c-page__main-section { .pf-c-page__main-section {
--pf-c-page__main-section--BackgroundColor: var(--ak-dark-background); --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
} }
.sidebar-trigger {
background-color: var(--ak-dark-background-light) !important;
}
.pf-c-page__main-section.pf-m-light { .pf-c-page__main-section.pf-m-light {
background-color: var(--ak-dark-background-light); background-color: var(--ak-dark-background-light);
} }

31
web/src/elements/PageHeader.ts
View File

@ -1,9 +1,10 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../authentik.css"; import AKGlobal from "../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { TITLE_SUFFIX } from "../constants"; import { EVENT_SIDEBAR_TOGGLE, TITLE_SUFFIX } from "../constants";
@customElement("ak-page-header") @customElement("ak-page-header")
export class PageHeader extends LitElement { export class PageHeader extends LitElement {
@ -34,7 +35,15 @@ export class PageHeader extends LitElement {
_header = ""; _header = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFPage, PFContent, AKGlobal]; return [PFBase, PFButton, PFPage, PFContent, AKGlobal, css`
:host {
display: flex;
flex-direction: row;
}
button.sidebar-trigger {
background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
}
`];
} }
renderIcon(): TemplateResult { renderIcon(): TemplateResult {
@ -48,14 +57,26 @@ export class PageHeader extends LitElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light"> return html`<button
class="sidebar-trigger pf-c-button pf-m-plain"
@click=${() => {
this.dispatchEvent(
new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
bubbles: true,
composed: true,
})
);
}}>
<i class="fas fa-bars"></i>
</button>
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
<h1> <h1>
${this.renderIcon()} ${this.renderIcon()}
${this.header} ${this.header}
</h1> </h1>
${this.description ? ${this.description ?
html`<p>${this.description}</p>`: html``} html`<p>${this.description}</p>` : html``}
</div> </div>
</section>`; </section>`;
} }

4
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -28,8 +28,8 @@ export class SidebarBrand extends LitElement {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 82px; height: 114px;
min-height: 82px; min-height: 114px;
} }
.pf-c-brand img { .pf-c-brand img {
width: 100%; width: 100%;

38
web/src/elements/sidebar/SidebarHamburger.ts
View File

@ -1,38 +0,0 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import AKGlobal from "../../authentik.css";
import { EVENT_SIDEBAR_TOGGLE } from "../../constants";
@customElement("ak-sidebar-hamburger")
export class SidebarHamburger extends LitElement {
static get styles(): CSSResult[] {
return [PFBase, PFButton, AKGlobal].concat(
css`
:host {
position: absolute;
top: var(--pf-c-page__main-section--PaddingTop);
right: var(--pf-c-page__main-section--PaddingRight);
z-index: 250;
}
`
);
}
onClick(): void {
this.dispatchEvent(
new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
bubbles: true,
composed: true,
})
);
}
render(): TemplateResult {
return html`<button @click=${() => (this.onClick())} class="pf-c-button pf-m-plain" type="button">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>`;
}
}

3
web/src/interfaces/Interface.ts
View File

@ -8,7 +8,6 @@ import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
import "../elements/router/RouterOutlet"; import "../elements/router/RouterOutlet";
import "../elements/messages/MessageContainer"; import "../elements/messages/MessageContainer";
import "../elements/sidebar/SidebarHamburger";
import "../elements/notifications/NotificationDrawer"; import "../elements/notifications/NotificationDrawer";
import "../elements/Banner"; import "../elements/Banner";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
@ -61,8 +60,6 @@ export abstract class Interface extends LitElement {
return html``; return html``;
}))} }))}
<div class="pf-c-page"> <div class="pf-c-page">
<ak-sidebar-hamburger>
</ak-sidebar-hamburger>
<ak-sidebar class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}" .items=${this.sidebar}> <ak-sidebar class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}" .items=${this.sidebar}>
</ak-sidebar> </ak-sidebar>
<div class="pf-c-page__drawer"> <div class="pf-c-page__drawer">

28
web/src/locales/en.po
View File

@ -455,7 +455,7 @@ msgstr "Change password"
msgid "Change your password" msgid "Change your password"
msgstr "Change your password" msgstr "Change your password"
#: src/pages/applications/ApplicationViewPage.ts:116 #: src/pages/applications/ApplicationViewPage.ts:118
#: src/pages/flows/FlowViewPage.ts:110 #: src/pages/flows/FlowViewPage.ts:110
#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:136 #: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:136
#: src/pages/providers/proxy/ProxyProviderViewPage.ts:135 #: src/pages/providers/proxy/ProxyProviderViewPage.ts:135
@ -1002,8 +1002,8 @@ msgid "Each provider has a different issuer, based on the application slug."
msgstr "Each provider has a different issuer, based on the application slug." msgstr "Each provider has a different issuer, based on the application slug."
#: src/pages/applications/ApplicationListPage.ts:90 #: src/pages/applications/ApplicationListPage.ts:90
#: src/pages/applications/ApplicationViewPage.ts:92 #: src/pages/applications/ApplicationViewPage.ts:94
#: src/pages/applications/ApplicationViewPage.ts:106 #: src/pages/applications/ApplicationViewPage.ts:108
#: src/pages/crypto/CertificateKeyPairListPage.ts:74 #: src/pages/crypto/CertificateKeyPairListPage.ts:74
#: src/pages/events/RuleListPage.ts:70 #: src/pages/events/RuleListPage.ts:70
#: src/pages/events/TransportListPage.ts:74 #: src/pages/events/TransportListPage.ts:74
@ -1662,7 +1662,7 @@ msgstr "Library"
#: src/flows/stages/identification/IdentificationStage.ts:134 #: src/flows/stages/identification/IdentificationStage.ts:134
#: src/flows/stages/password/PasswordStage.ts:31 #: src/flows/stages/password/PasswordStage.ts:31
#: src/flows/stages/prompt/PromptStage.ts:126 #: src/flows/stages/prompt/PromptStage.ts:126
#: src/pages/applications/ApplicationViewPage.ts:57 #: src/pages/applications/ApplicationViewPage.ts:59
#: src/pages/user-settings/UserDetailsPage.ts:38 #: src/pages/user-settings/UserDetailsPage.ts:38
#: src/utils.ts:40 #: src/utils.ts:40
msgid "Loading" msgid "Loading"
@ -1742,7 +1742,7 @@ msgid "Logins"
msgstr "Logins" msgstr "Logins"
#: src/pages/admin-overview/AdminOverviewPage.ts:39 #: src/pages/admin-overview/AdminOverviewPage.ts:39
#: src/pages/applications/ApplicationViewPage.ts:65 #: src/pages/applications/ApplicationViewPage.ts:67
msgid "Logins over the last 24 hours" msgid "Logins over the last 24 hours"
msgstr "Logins over the last 24 hours" msgstr "Logins over the last 24 hours"
@ -2166,7 +2166,7 @@ msgid "Outposts are deployments of authentik components to support different env
msgstr "Outposts are deployments of authentik components to support different environments and protocols, like reverse proxies." msgstr "Outposts are deployments of authentik components to support different environments and protocols, like reverse proxies."
#: src/interfaces/AdminInterface.ts:17 #: src/interfaces/AdminInterface.ts:17
#: src/pages/applications/ApplicationViewPage.ts:62 #: src/pages/applications/ApplicationViewPage.ts:64
#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:65 #: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:65
#: src/pages/providers/proxy/ProxyProviderViewPage.ts:56 #: src/pages/providers/proxy/ProxyProviderViewPage.ts:56
#: src/pages/providers/saml/SAMLProviderViewPage.ts:58 #: src/pages/providers/saml/SAMLProviderViewPage.ts:58
@ -2246,7 +2246,7 @@ msgstr "Policy"
msgid "Policy / User / Group" msgid "Policy / User / Group"
msgstr "Policy / User / Group" msgstr "Policy / User / Group"
#: src/pages/applications/ApplicationViewPage.ts:127 #: src/pages/applications/ApplicationViewPage.ts:129
#: src/pages/flows/FlowViewPage.ts:101 #: src/pages/flows/FlowViewPage.ts:101
#: src/pages/sources/oauth/OAuthSourceViewPage.ts:143 #: src/pages/sources/oauth/OAuthSourceViewPage.ts:143
#: src/pages/sources/saml/SAMLSourceViewPage.ts:150 #: src/pages/sources/saml/SAMLSourceViewPage.ts:150
@ -2365,7 +2365,7 @@ msgstr "Provide support for protocols like SAML and OAuth to assigned applicatio
#: src/elements/oauth/UserRefreshList.ts:29 #: src/elements/oauth/UserRefreshList.ts:29
#: src/pages/applications/ApplicationForm.ts:100 #: src/pages/applications/ApplicationForm.ts:100
#: src/pages/applications/ApplicationListPage.ts:59 #: src/pages/applications/ApplicationListPage.ts:59
#: src/pages/applications/ApplicationViewPage.ts:79 #: src/pages/applications/ApplicationViewPage.ts:81
#: src/pages/providers/ProviderListPage.ts:34 #: src/pages/providers/ProviderListPage.ts:34
msgid "Provider" msgid "Provider"
msgstr "Provider" msgstr "Provider"
@ -2479,7 +2479,7 @@ msgstr "Register device"
msgid "Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression." msgid "Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression."
msgstr "Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression." msgstr "Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression."
#: src/pages/applications/ApplicationViewPage.ts:73 #: src/pages/applications/ApplicationViewPage.ts:75
#: src/pages/flows/FlowViewPage.ts:64 #: src/pages/flows/FlowViewPage.ts:64
msgid "Related" msgid "Related"
msgstr "Related" msgstr "Related"
@ -2891,7 +2891,7 @@ msgstr "Status: Disabled"
msgid "Status: Enabled" msgid "Status: Enabled"
msgstr "Status: Enabled" msgstr "Status: Enabled"
#: src/interfaces/Interface.ts:52 #: src/interfaces/Interface.ts:51
msgid "Stop impersonation" msgid "Stop impersonation"
msgstr "Stop impersonation" msgstr "Stop impersonation"
@ -3274,7 +3274,7 @@ msgstr ""
msgid "These policies control when this stage will be applied to the flow." msgid "These policies control when this stage will be applied to the flow."
msgstr "These policies control when this stage will be applied to the flow." msgstr "These policies control when this stage will be applied to the flow."
#: src/pages/applications/ApplicationViewPage.ts:129 #: src/pages/applications/ApplicationViewPage.ts:131
msgid "These policies control which users can access this application." msgid "These policies control which users can access this application."
msgstr "These policies control which users can access this application." msgstr "These policies control which users can access this application."
@ -3427,7 +3427,7 @@ msgid "Up-to-date!"
msgstr "Up-to-date!" msgstr "Up-to-date!"
#: src/pages/applications/ApplicationListPage.ts:82 #: src/pages/applications/ApplicationListPage.ts:82
#: src/pages/applications/ApplicationViewPage.ts:98 #: src/pages/applications/ApplicationViewPage.ts:100
#: src/pages/crypto/CertificateKeyPairListPage.ts:66 #: src/pages/crypto/CertificateKeyPairListPage.ts:66
#: src/pages/events/RuleListPage.ts:62 #: src/pages/events/RuleListPage.ts:62
#: src/pages/events/TransportListPage.ts:66 #: src/pages/events/TransportListPage.ts:66
@ -3465,7 +3465,7 @@ msgid "Update"
msgstr "Update" msgstr "Update"
#: src/pages/applications/ApplicationListPage.ts:85 #: src/pages/applications/ApplicationListPage.ts:85
#: src/pages/applications/ApplicationViewPage.ts:101 #: src/pages/applications/ApplicationViewPage.ts:103
msgid "Update Application" msgid "Update Application"
msgstr "Update Application" msgstr "Update Application"
@ -3825,7 +3825,7 @@ msgstr "X509 Subject"
msgid "Yes" msgid "Yes"
msgstr "Yes" msgstr "Yes"
#: src/interfaces/Interface.ts:50 #: src/interfaces/Interface.ts:49
msgid "You're currently impersonating {0}." msgid "You're currently impersonating {0}."
msgstr "You're currently impersonating {0}." msgstr "You're currently impersonating {0}."

28
web/src/locales/pseudo-LOCALE.po
View File

@ -451,7 +451,7 @@ msgstr ""
msgid "Change your password" msgid "Change your password"
msgstr "" msgstr ""
#: src/pages/applications/ApplicationViewPage.ts:116 #: src/pages/applications/ApplicationViewPage.ts:118
#: src/pages/flows/FlowViewPage.ts:110 #: src/pages/flows/FlowViewPage.ts:110
#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:136 #: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:136
#: src/pages/providers/proxy/ProxyProviderViewPage.ts:135 #: src/pages/providers/proxy/ProxyProviderViewPage.ts:135
@ -994,8 +994,8 @@ msgid "Each provider has a different issuer, based on the application slug."
msgstr "" msgstr ""
#: src/pages/applications/ApplicationListPage.ts:90 #: src/pages/applications/ApplicationListPage.ts:90
#: src/pages/applications/ApplicationViewPage.ts:92 #: src/pages/applications/ApplicationViewPage.ts:94
#: src/pages/applications/ApplicationViewPage.ts:106 #: src/pages/applications/ApplicationViewPage.ts:108
#: src/pages/crypto/CertificateKeyPairListPage.ts:74 #: src/pages/crypto/CertificateKeyPairListPage.ts:74
#: src/pages/events/RuleListPage.ts:70 #: src/pages/events/RuleListPage.ts:70
#: src/pages/events/TransportListPage.ts:74 #: src/pages/events/TransportListPage.ts:74
@ -1654,7 +1654,7 @@ msgstr ""
#: src/flows/stages/identification/IdentificationStage.ts:134 #: src/flows/stages/identification/IdentificationStage.ts:134
#: src/flows/stages/password/PasswordStage.ts:31 #: src/flows/stages/password/PasswordStage.ts:31
#: src/flows/stages/prompt/PromptStage.ts:126 #: src/flows/stages/prompt/PromptStage.ts:126
#: src/pages/applications/ApplicationViewPage.ts:57 #: src/pages/applications/ApplicationViewPage.ts:59
#: src/pages/user-settings/UserDetailsPage.ts:38 #: src/pages/user-settings/UserDetailsPage.ts:38
#: src/utils.ts:40 #: src/utils.ts:40
msgid "Loading" msgid "Loading"
@ -1734,7 +1734,7 @@ msgid "Logins"
msgstr "" msgstr ""
#: src/pages/admin-overview/AdminOverviewPage.ts:39 #: src/pages/admin-overview/AdminOverviewPage.ts:39
#: src/pages/applications/ApplicationViewPage.ts:65 #: src/pages/applications/ApplicationViewPage.ts:67
msgid "Logins over the last 24 hours" msgid "Logins over the last 24 hours"
msgstr "" msgstr ""
@ -2158,7 +2158,7 @@ msgid "Outposts are deployments of authentik components to support different env
msgstr "" msgstr ""
#: src/interfaces/AdminInterface.ts:17 #: src/interfaces/AdminInterface.ts:17
#: src/pages/applications/ApplicationViewPage.ts:62 #: src/pages/applications/ApplicationViewPage.ts:64
#: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:65 #: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:65
#: src/pages/providers/proxy/ProxyProviderViewPage.ts:56 #: src/pages/providers/proxy/ProxyProviderViewPage.ts:56
#: src/pages/providers/saml/SAMLProviderViewPage.ts:58 #: src/pages/providers/saml/SAMLProviderViewPage.ts:58
@ -2238,7 +2238,7 @@ msgstr ""
msgid "Policy / User / Group" msgid "Policy / User / Group"
msgstr "" msgstr ""
#: src/pages/applications/ApplicationViewPage.ts:127 #: src/pages/applications/ApplicationViewPage.ts:129
#: src/pages/flows/FlowViewPage.ts:101 #: src/pages/flows/FlowViewPage.ts:101
#: src/pages/sources/oauth/OAuthSourceViewPage.ts:143 #: src/pages/sources/oauth/OAuthSourceViewPage.ts:143
#: src/pages/sources/saml/SAMLSourceViewPage.ts:150 #: src/pages/sources/saml/SAMLSourceViewPage.ts:150
@ -2357,7 +2357,7 @@ msgstr ""
#: src/elements/oauth/UserRefreshList.ts:29 #: src/elements/oauth/UserRefreshList.ts:29
#: src/pages/applications/ApplicationForm.ts:100 #: src/pages/applications/ApplicationForm.ts:100
#: src/pages/applications/ApplicationListPage.ts:59 #: src/pages/applications/ApplicationListPage.ts:59
#: src/pages/applications/ApplicationViewPage.ts:79 #: src/pages/applications/ApplicationViewPage.ts:81
#: src/pages/providers/ProviderListPage.ts:34 #: src/pages/providers/ProviderListPage.ts:34
msgid "Provider" msgid "Provider"
msgstr "" msgstr ""
@ -2471,7 +2471,7 @@ msgstr ""
msgid "Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression." msgid "Regular expressions for which authentication is not required. Each new line is interpreted as a new Regular Expression."
msgstr "" msgstr ""
#: src/pages/applications/ApplicationViewPage.ts:73 #: src/pages/applications/ApplicationViewPage.ts:75
#: src/pages/flows/FlowViewPage.ts:64 #: src/pages/flows/FlowViewPage.ts:64
msgid "Related" msgid "Related"
msgstr "" msgstr ""
@ -2883,7 +2883,7 @@ msgstr ""
msgid "Status: Enabled" msgid "Status: Enabled"
msgstr "" msgstr ""
#: src/interfaces/Interface.ts:52 #: src/interfaces/Interface.ts:51
msgid "Stop impersonation" msgid "Stop impersonation"
msgstr "" msgstr ""
@ -3264,7 +3264,7 @@ msgstr ""
msgid "These policies control when this stage will be applied to the flow." msgid "These policies control when this stage will be applied to the flow."
msgstr "" msgstr ""
#: src/pages/applications/ApplicationViewPage.ts:129 #: src/pages/applications/ApplicationViewPage.ts:131
msgid "These policies control which users can access this application." msgid "These policies control which users can access this application."
msgstr "" msgstr ""
@ -3417,7 +3417,7 @@ msgid "Up-to-date!"
msgstr "" msgstr ""
#: src/pages/applications/ApplicationListPage.ts:82 #: src/pages/applications/ApplicationListPage.ts:82
#: src/pages/applications/ApplicationViewPage.ts:98 #: src/pages/applications/ApplicationViewPage.ts:100
#: src/pages/crypto/CertificateKeyPairListPage.ts:66 #: src/pages/crypto/CertificateKeyPairListPage.ts:66
#: src/pages/events/RuleListPage.ts:62 #: src/pages/events/RuleListPage.ts:62
#: src/pages/events/TransportListPage.ts:66 #: src/pages/events/TransportListPage.ts:66
@ -3455,7 +3455,7 @@ msgid "Update"
msgstr "" msgstr ""
#: src/pages/applications/ApplicationListPage.ts:85 #: src/pages/applications/ApplicationListPage.ts:85
#: src/pages/applications/ApplicationViewPage.ts:101 #: src/pages/applications/ApplicationViewPage.ts:103
msgid "Update Application" msgid "Update Application"
msgstr "" msgstr ""
@ -3813,7 +3813,7 @@ msgstr ""
msgid "Yes" msgid "Yes"
msgstr "" msgstr ""
#: src/interfaces/Interface.ts:50 #: src/interfaces/Interface.ts:49
msgid "You're currently impersonating {0}." msgid "You're currently impersonating {0}."
msgstr "" msgstr ""