web/admin: move SidebarHamburger into PageHeader
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
6f7fb4c919
commit
f6b8dc5cea
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`<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()}
|
||||
${this.header}
|
||||
</h1>
|
||||
${this.description ?
|
||||
html`<p>${this.description}</p>`: html``}
|
||||
html`<p>${this.description}</p>` : html``}
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}."
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ""
|
||||
|
||||
|
|
|
|||
Reference in New Issue