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 */ /* tabs */
.pf-c-tabs { .pf-c-tabs {
background-color: var(--ak-dark-background-light);
}
.pf-c-tabs.pf-m-vertical {
background-color: transparent; background-color: transparent;
} }
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before { .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); color: var(--ak-dark-foreground);
} }
/* modal */ /* modal */
.pf-c-modal-box__header { .pf-c-modal-box,
background-color: var(--ak-dark-background-light); .pf-c-modal-box__header,
} .pf-c-modal-box__footer,
.pf-c-modal-box__body { .pf-c-modal-box__body {
background-color: var(--ak-dark-background-light); background-color: var(--ak-dark-background);
}
.pf-c-modal-box__footer {
background-color: var(--ak-dark-background-light);
} }
/* sidebar */ /* sidebar */
.pf-c-nav { .pf-c-nav {

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

@ -55,14 +55,14 @@ export class ConfirmationForm extends ModalButton {
} }
renderModalInner(): TemplateResult { 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"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl"> <h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot> <slot name="header"></slot>
</h1> </h1>
</div> </div>
</section> </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"> <form class="pf-c-form pf-m-horizontal">
<slot class="pf-c-content" name="body"></slot> <slot class="pf-c-content" name="body"></slot>
</form> </form>

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

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

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

@ -71,12 +71,12 @@ export class DeleteForm extends ModalButton {
} else { } else {
objName = ""; 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"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1> <h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
</div> </div>
</section> </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"> <form class="pf-c-form pf-m-horizontal">
<p>${t`Are you sure you want to delete ${this.objectLabel} ${objName} ?`}</p> <p>${t`Are you sure you want to delete ${this.objectLabel} ${objName} ?`}</p>
</form> </form>
@ -88,7 +88,7 @@ export class DeleteForm extends ModalButton {
return html``; return html``;
} }
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"> <form class="pf-c-form pf-m-horizontal">
<p>${t`The following objects use ${objName} `}</p> <p>${t`The following objects use ${objName} `}</p>
<ul class="pf-c-list"> <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 return html`${this.loading
? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>` ? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>`
: html``} : 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"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl"> <h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot> <slot name="header"></slot>
</h1> </h1>
</div> </div>
</section> </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> <slot name="form"></slot>
</section> </section>
<footer class="pf-c-modal-box__footer"> <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/elements/oauth/UserRefreshList.ts
#: src/pages/applications/ApplicationCheckAccessForm.ts #: src/pages/applications/ApplicationCheckAccessForm.ts
#: src/pages/crypto/CertificateKeyPairListPage.ts
#: src/pages/groups/GroupListPage.ts #: src/pages/groups/GroupListPage.ts
#: src/pages/groups/MemberSelectModal.ts #: src/pages/groups/MemberSelectModal.ts
#: src/pages/outposts/ServiceConnectionListPage.ts #: src/pages/outposts/ServiceConnectionListPage.ts
@ -5974,6 +5973,10 @@ msgstr "X509 Subject"
msgid "Yes" msgid "Yes"
msgstr "Yes" msgstr "Yes"
#: src/pages/crypto/CertificateKeyPairListPage.ts
msgid "Yes ({0})"
msgstr "Yes ({0})"
#: src/pages/outposts/OutpostForm.ts #: src/pages/outposts/OutpostForm.ts
msgid "You can only select providers that match the type of the outpost." 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." 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/elements/oauth/UserRefreshList.ts
#: src/pages/applications/ApplicationCheckAccessForm.ts #: src/pages/applications/ApplicationCheckAccessForm.ts
#: src/pages/crypto/CertificateKeyPairListPage.ts
#: src/pages/groups/GroupListPage.ts #: src/pages/groups/GroupListPage.ts
#: src/pages/groups/MemberSelectModal.ts #: src/pages/groups/MemberSelectModal.ts
#: src/pages/outposts/ServiceConnectionListPage.ts #: src/pages/outposts/ServiceConnectionListPage.ts
@ -5911,6 +5910,10 @@ msgstr "Sujet X509"
msgid "Yes" msgid "Yes"
msgstr "Oui" msgstr "Oui"
#: src/pages/crypto/CertificateKeyPairListPage.ts
msgid "Yes ({0})"
msgstr ""
#: src/pages/outposts/OutpostForm.ts #: src/pages/outposts/OutpostForm.ts
msgid "You can only select providers that match the type of the outpost." 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." 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/elements/oauth/UserRefreshList.ts
#: src/pages/applications/ApplicationCheckAccessForm.ts #: src/pages/applications/ApplicationCheckAccessForm.ts
#: src/pages/crypto/CertificateKeyPairListPage.ts
#: src/pages/groups/GroupListPage.ts #: src/pages/groups/GroupListPage.ts
#: src/pages/groups/MemberSelectModal.ts #: src/pages/groups/MemberSelectModal.ts
#: src/pages/outposts/ServiceConnectionListPage.ts #: src/pages/outposts/ServiceConnectionListPage.ts
@ -5952,6 +5951,10 @@ msgstr ""
msgid "Yes" msgid "Yes"
msgstr "" msgstr ""
#: src/pages/crypto/CertificateKeyPairListPage.ts
msgid "Yes ({0})"
msgstr ""
#: src/pages/outposts/OutpostForm.ts #: src/pages/outposts/OutpostForm.ts
msgid "You can only select providers that match the type of the outpost." msgid "You can only select providers that match the type of the outpost."
msgstr "" msgstr ""

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

@ -63,12 +63,14 @@ export class MemberSelectTable extends TableModal<User> {
} }
renderModalInner(): TemplateResult { 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"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Select users to add`}</h1> <h1 class="pf-c-title pf-m-2xl">${t`Select users to add`}</h1>
</div> </div>
</section> </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"> <footer class="pf-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {

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

@ -61,12 +61,14 @@ export class GroupSelectModal extends TableModal<Group> {
} }
renderModalInner(): TemplateResult { 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"> <div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Select groups to add user to`}</h1> <h1 class="pf-c-title pf-m-2xl">${t`Select groups to add user to`}</h1>
</div> </div>
</section> </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"> <footer class="pf-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {

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

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