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

View file

@ -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);
}

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 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,7 +57,19 @@ export class PageHeader extends LitElement {
}
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">
<h1>
${this.renderIcon()}

View file

@ -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%;

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>`;
}
}

View file

@ -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``;
}))}
<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>
<div class="pf-c-page__drawer">

View file

@ -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}."

View file

@ -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 ""