From f6b8dc5cead23bebade0e8aa76b0b04e65e4b7ea Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sat, 10 Apr 2021 17:30:23 +0200 Subject: [PATCH] web/admin: move SidebarHamburger into PageHeader Signed-off-by: Jens Langhammer --- web/src/authentik.css | 3 ++ web/src/elements/PageHeader.ts | 31 +++++++++++++--- web/src/elements/sidebar/SidebarBrand.ts | 4 +-- web/src/elements/sidebar/SidebarHamburger.ts | 38 -------------------- web/src/interfaces/Interface.ts | 3 -- web/src/locales/en.po | 28 +++++++-------- web/src/locales/pseudo-LOCALE.po | 28 +++++++-------- 7 files changed, 59 insertions(+), 76 deletions(-) delete mode 100644 web/src/elements/sidebar/SidebarHamburger.ts diff --git a/web/src/authentik.css b/web/src/authentik.css index 14a6d976e..a1a7bebc1 100644 --- a/web/src/authentik.css +++ b/web/src/authentik.css @@ -118,6 +118,9 @@ body { .pf-c-page__main-section { --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 { background-color: var(--ak-dark-background-light); } diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts index 6efceb649..cdd1cbabc 100644 --- a/web/src/elements/PageHeader.ts +++ b/web/src/elements/PageHeader.ts @@ -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 PFContent from "@patternfly/patternfly/components/Content/content.css"; import AKGlobal from "../authentik.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; -import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -import { TITLE_SUFFIX } from "../constants"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; +import { EVENT_SIDEBAR_TOGGLE, TITLE_SUFFIX } from "../constants"; @customElement("ak-page-header") export class PageHeader extends LitElement { @@ -34,7 +35,15 @@ export class PageHeader extends LitElement { _header = ""; 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 { @@ -48,14 +57,26 @@ export class PageHeader extends LitElement { } render(): TemplateResult { - return html`
+ return html` +

${this.renderIcon()} ${this.header}

${this.description ? - html`

${this.description}

`: html``} + html`

${this.description}

` : html``}
`; } diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts index c55884d45..3a74edd06 100644 --- a/web/src/elements/sidebar/SidebarBrand.ts +++ b/web/src/elements/sidebar/SidebarBrand.ts @@ -28,8 +28,8 @@ export class SidebarBrand extends LitElement { display: flex; flex-direction: column; align-items: center; - height: 82px; - min-height: 82px; + height: 114px; + min-height: 114px; } .pf-c-brand img { width: 100%; diff --git a/web/src/elements/sidebar/SidebarHamburger.ts b/web/src/elements/sidebar/SidebarHamburger.ts deleted file mode 100644 index 0dd8131bd..000000000 --- a/web/src/elements/sidebar/SidebarHamburger.ts +++ /dev/null @@ -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``; - } - -} diff --git a/web/src/interfaces/Interface.ts b/web/src/interfaces/Interface.ts index a6f67d4c4..bfa47f3f7 100644 --- a/web/src/interfaces/Interface.ts +++ b/web/src/interfaces/Interface.ts @@ -8,7 +8,6 @@ import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css"; import "../elements/router/RouterOutlet"; import "../elements/messages/MessageContainer"; -import "../elements/sidebar/SidebarHamburger"; import "../elements/notifications/NotificationDrawer"; import "../elements/Banner"; import { until } from "lit-html/directives/until"; @@ -61,8 +60,6 @@ export abstract class Interface extends LitElement { return html``; }))}
- -
diff --git a/web/src/locales/en.po b/web/src/locales/en.po index 7e0225751..481862205 100644 --- a/web/src/locales/en.po +++ b/web/src/locales/en.po @@ -455,7 +455,7 @@ msgstr "Change password" msgid "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/providers/oauth2/OAuth2ProviderViewPage.ts:136 #: 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." #: src/pages/applications/ApplicationListPage.ts:90 -#: src/pages/applications/ApplicationViewPage.ts:92 -#: src/pages/applications/ApplicationViewPage.ts:106 +#: src/pages/applications/ApplicationViewPage.ts:94 +#: src/pages/applications/ApplicationViewPage.ts:108 #: src/pages/crypto/CertificateKeyPairListPage.ts:74 #: src/pages/events/RuleListPage.ts:70 #: src/pages/events/TransportListPage.ts:74 @@ -1662,7 +1662,7 @@ msgstr "Library" #: src/flows/stages/identification/IdentificationStage.ts:134 #: src/flows/stages/password/PasswordStage.ts:31 #: 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/utils.ts:40 msgid "Loading" @@ -1742,7 +1742,7 @@ msgid "Logins" msgstr "Logins" #: 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" 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." #: 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/proxy/ProxyProviderViewPage.ts:56 #: src/pages/providers/saml/SAMLProviderViewPage.ts:58 @@ -2246,7 +2246,7 @@ msgstr "Policy" msgid "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/sources/oauth/OAuthSourceViewPage.ts:143 #: 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/pages/applications/ApplicationForm.ts:100 #: src/pages/applications/ApplicationListPage.ts:59 -#: src/pages/applications/ApplicationViewPage.ts:79 +#: src/pages/applications/ApplicationViewPage.ts:81 #: src/pages/providers/ProviderListPage.ts:34 msgid "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." 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 msgid "Related" msgstr "Related" @@ -2891,7 +2891,7 @@ msgstr "Status: Disabled" msgid "Status: Enabled" msgstr "Status: Enabled" -#: src/interfaces/Interface.ts:52 +#: src/interfaces/Interface.ts:51 msgid "Stop impersonation" msgstr "Stop impersonation" @@ -3274,7 +3274,7 @@ msgstr "" 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." -#: src/pages/applications/ApplicationViewPage.ts:129 +#: src/pages/applications/ApplicationViewPage.ts:131 msgid "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!" #: 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/events/RuleListPage.ts:62 #: src/pages/events/TransportListPage.ts:66 @@ -3465,7 +3465,7 @@ msgid "Update" msgstr "Update" #: src/pages/applications/ApplicationListPage.ts:85 -#: src/pages/applications/ApplicationViewPage.ts:101 +#: src/pages/applications/ApplicationViewPage.ts:103 msgid "Update Application" msgstr "Update Application" @@ -3825,7 +3825,7 @@ msgstr "X509 Subject" msgid "Yes" msgstr "Yes" -#: src/interfaces/Interface.ts:50 +#: src/interfaces/Interface.ts:49 msgid "You're currently impersonating {0}." msgstr "You're currently impersonating {0}." diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po index d05da5ced..f70b9b91b 100644 --- a/web/src/locales/pseudo-LOCALE.po +++ b/web/src/locales/pseudo-LOCALE.po @@ -451,7 +451,7 @@ msgstr "" msgid "Change your password" msgstr "" -#: src/pages/applications/ApplicationViewPage.ts:116 +#: src/pages/applications/ApplicationViewPage.ts:118 #: src/pages/flows/FlowViewPage.ts:110 #: src/pages/providers/oauth2/OAuth2ProviderViewPage.ts:136 #: src/pages/providers/proxy/ProxyProviderViewPage.ts:135 @@ -994,8 +994,8 @@ msgid "Each provider has a different issuer, based on the application slug." msgstr "" #: src/pages/applications/ApplicationListPage.ts:90 -#: src/pages/applications/ApplicationViewPage.ts:92 -#: src/pages/applications/ApplicationViewPage.ts:106 +#: src/pages/applications/ApplicationViewPage.ts:94 +#: src/pages/applications/ApplicationViewPage.ts:108 #: src/pages/crypto/CertificateKeyPairListPage.ts:74 #: src/pages/events/RuleListPage.ts:70 #: src/pages/events/TransportListPage.ts:74 @@ -1654,7 +1654,7 @@ msgstr "" #: src/flows/stages/identification/IdentificationStage.ts:134 #: src/flows/stages/password/PasswordStage.ts:31 #: 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/utils.ts:40 msgid "Loading" @@ -1734,7 +1734,7 @@ msgid "Logins" msgstr "" #: 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" msgstr "" @@ -2158,7 +2158,7 @@ msgid "Outposts are deployments of authentik components to support different env msgstr "" #: 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/proxy/ProxyProviderViewPage.ts:56 #: src/pages/providers/saml/SAMLProviderViewPage.ts:58 @@ -2238,7 +2238,7 @@ msgstr "" msgid "Policy / User / Group" msgstr "" -#: src/pages/applications/ApplicationViewPage.ts:127 +#: src/pages/applications/ApplicationViewPage.ts:129 #: src/pages/flows/FlowViewPage.ts:101 #: src/pages/sources/oauth/OAuthSourceViewPage.ts:143 #: src/pages/sources/saml/SAMLSourceViewPage.ts:150 @@ -2357,7 +2357,7 @@ msgstr "" #: src/elements/oauth/UserRefreshList.ts:29 #: src/pages/applications/ApplicationForm.ts:100 #: src/pages/applications/ApplicationListPage.ts:59 -#: src/pages/applications/ApplicationViewPage.ts:79 +#: src/pages/applications/ApplicationViewPage.ts:81 #: src/pages/providers/ProviderListPage.ts:34 msgid "Provider" 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." msgstr "" -#: src/pages/applications/ApplicationViewPage.ts:73 +#: src/pages/applications/ApplicationViewPage.ts:75 #: src/pages/flows/FlowViewPage.ts:64 msgid "Related" msgstr "" @@ -2883,7 +2883,7 @@ msgstr "" msgid "Status: Enabled" msgstr "" -#: src/interfaces/Interface.ts:52 +#: src/interfaces/Interface.ts:51 msgid "Stop impersonation" msgstr "" @@ -3264,7 +3264,7 @@ msgstr "" msgid "These policies control when this stage will be applied to the flow." msgstr "" -#: src/pages/applications/ApplicationViewPage.ts:129 +#: src/pages/applications/ApplicationViewPage.ts:131 msgid "These policies control which users can access this application." msgstr "" @@ -3417,7 +3417,7 @@ msgid "Up-to-date!" msgstr "" #: 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/events/RuleListPage.ts:62 #: src/pages/events/TransportListPage.ts:66 @@ -3455,7 +3455,7 @@ msgid "Update" msgstr "" #: src/pages/applications/ApplicationListPage.ts:85 -#: src/pages/applications/ApplicationViewPage.ts:101 +#: src/pages/applications/ApplicationViewPage.ts:103 msgid "Update Application" msgstr "" @@ -3813,7 +3813,7 @@ msgstr "" msgid "Yes" msgstr "" -#: src/interfaces/Interface.ts:50 +#: src/interfaces/Interface.ts:49 msgid "You're currently impersonating {0}." msgstr ""