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

web: fix styling for modals, ensure correct classes are used

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-25 20:30:35 +01:00
parent 74eba04735
commit f93f7e635b
11 changed files with 36 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/authentik.css
View file

@ -170,9 +170,6 @@ html > form > input {
}
/* tabs */
.pf-c-tabs {
background-color: var(--ak-dark-background-light);
}
.pf-c-tabs.pf-m-vertical {
background-color: transparent;
}
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
@ -294,14 +291,11 @@ html > form > input {
color: var(--ak-dark-foreground);
}
/* modal */
.pf-c-modal-box__header {
background-color: var(--ak-dark-background-light);
}
.pf-c-modal-box,
.pf-c-modal-box__header,
.pf-c-modal-box__footer,
.pf-c-modal-box__body {
background-color: var(--ak-dark-background-light);
}
.pf-c-modal-box__footer {
background-color: var(--ak-dark-background-light);
background-color: var(--ak-dark-background);
}
/* sidebar */
.pf-c-nav {

4
web/src/elements/forms/ConfirmationForm.ts
View file

@ -55,14 +55,14 @@ export class ConfirmationForm extends ModalButton {
}
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot>
</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<section class="pf-c-modal-box__body pf-c-page__main-section">
<form class="pf-c-form pf-m-horizontal">
<slot class="pf-c-content" name="body"></slot>
</form>

6
web/src/elements/forms/DeleteBulkForm.ts
View file

@ -177,12 +177,12 @@ export class DeleteBulkForm extends ModalButton {
}
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<section class="pf-c-modal-box__body pf-c-page__main-section">
<form class="pf-c-form pf-m-horizontal">
<p class="pf-c-title">
${t`Are you sure you want to delete ${this.objects.length} ${this.objectLabel}?`}
@ -190,7 +190,7 @@ export class DeleteBulkForm extends ModalButton {
<slot name="notice"></slot>
</form>
</section>
<section class="pf-c-page__main-section">
<section class="pf-c-modal-box__body pf-c-page__main-section">
<ak-delete-objects-table
.objects=${this.objects}
.usedBy=${this.usedBy}

6
web/src/elements/forms/DeleteForm.ts
View file

@ -71,12 +71,12 @@ export class DeleteForm extends ModalButton {
} else {
objName = "";
}
return html`<section class="pf-c-page__main-section pf-m-light">
return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<section class="pf-c-modal-box__body pf-c-page__main-section">
<form class="pf-c-form pf-m-horizontal">
<p>${t`Are you sure you want to delete ${this.objectLabel} ${objName} ?`}</p>
</form>
@ -88,7 +88,7 @@ export class DeleteForm extends ModalButton {
return html``;
}
return html`
<section class="pf-c-page__main-section">
<section class="pf-c-modal-box__body pf-c-page__main-section">
<form class="pf-c-form pf-m-horizontal">
<p>${t`The following objects use ${objName} `}</p>
<ul class="pf-c-list">

4
web/src/elements/forms/ModalForm.ts
View file

@ -58,14 +58,14 @@ export class ModalForm extends ModalButton {
return html`${this.loading
? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>`
: html``}
<section class="pf-c-page__main-section pf-m-light">
<section class="pf-c-modal-box__header pf-c-page__main-section">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot>
</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<section class="pf-c-modal-box__body pf-c-page__main-section">
<slot name="form"></slot>
</section>
<footer class="pf-c-modal-box__footer">

5
web/src/locales/en.po
View file

@ -5959,7 +5959,6 @@ msgstr "X509 Subject"
#: src/elements/oauth/UserRefreshList.ts
#: src/pages/applications/ApplicationCheckAccessForm.ts
#: src/pages/crypto/CertificateKeyPairListPage.ts
#: src/pages/groups/GroupListPage.ts
#: src/pages/groups/MemberSelectModal.ts
#: src/pages/outposts/ServiceConnectionListPage.ts
@ -5974,6 +5973,10 @@ msgstr "X509 Subject"
msgid "Yes"
msgstr "Yes"
#: src/pages/crypto/CertificateKeyPairListPage.ts
msgid "Yes ({0})"
msgstr "Yes ({0})"
#: src/pages/outposts/OutpostForm.ts
msgid "You can only select providers that match the type of the outpost."
msgstr "You can only select providers that match the type of the outpost."

5
web/src/locales/fr_FR.po
View file

@ -5896,7 +5896,6 @@ msgstr "Sujet X509"
#: src/elements/oauth/UserRefreshList.ts
#: src/pages/applications/ApplicationCheckAccessForm.ts
#: src/pages/crypto/CertificateKeyPairListPage.ts
#: src/pages/groups/GroupListPage.ts
#: src/pages/groups/MemberSelectModal.ts
#: src/pages/outposts/ServiceConnectionListPage.ts
@ -5911,6 +5910,10 @@ msgstr "Sujet X509"
msgid "Yes"
msgstr "Oui"
#: src/pages/crypto/CertificateKeyPairListPage.ts
msgid "Yes ({0})"
msgstr ""
#: src/pages/outposts/OutpostForm.ts
msgid "You can only select providers that match the type of the outpost."
msgstr "Vous pouvez uniquement sélectionner des fournisseurs qui correspondent au type d'avant-poste."

5
web/src/locales/pseudo-LOCALE.po
View file

@ -5937,7 +5937,6 @@ msgstr ""
#: src/elements/oauth/UserRefreshList.ts
#: src/pages/applications/ApplicationCheckAccessForm.ts
#: src/pages/crypto/CertificateKeyPairListPage.ts
#: src/pages/groups/GroupListPage.ts
#: src/pages/groups/MemberSelectModal.ts
#: src/pages/outposts/ServiceConnectionListPage.ts
@ -5952,6 +5951,10 @@ msgstr ""
msgid "Yes"
msgstr ""
#: src/pages/crypto/CertificateKeyPairListPage.ts
msgid "Yes ({0})"
msgstr ""
#: src/pages/outposts/OutpostForm.ts
msgid "You can only select providers that match the type of the outpost."
msgstr ""

6
web/src/pages/groups/MemberSelectModal.ts
View file

@ -63,12 +63,14 @@ export class MemberSelectTable extends TableModal<User> {
}
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Select users to add`}</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">${this.renderTable()}</section>
<section class="pf-c-modal-box__body pf-c-page__main-section">
${this.renderTable()}
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {

6
web/src/pages/users/GroupSelectModal.ts
View file

@ -61,12 +61,14 @@ export class GroupSelectModal extends TableModal<Group> {
}
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Select groups to add user to`}</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">${this.renderTable()}</section>
<section class="pf-c-modal-box__body pf-c-page__main-section">
${this.renderTable()}
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {

4
web/src/pages/users/UserActiveForm.ts
View file

@ -25,12 +25,12 @@ export class UserActiveForm extends DeleteForm {
}
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
return html`<section class="pf-c-modal-box__header pf-c-page__main-section">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Update ${this.objectLabel}`}</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<section class="pf-c-modal-box__body pf-c-page__main-section">
<form class="pf-c-form pf-m-horizontal">
<p>
${t`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`}