habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

static: rewrite modal to use shadowroot and import css

Browse Source
This commit is contained in:
Jens Langhammer
2020-11-21 11:28:00 +01:00
parent a2c7921c1f
commit 59e7d9b81e
6 changed files with 101 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
passbook/admin/templates/administration/application/list.html
View File

@ -56,8 +56,18 @@
</span>
</td>
<td>
<a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:application-update' pk=application.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
<a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:application-delete' pk=application.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
<pb-modal-button href="{% url 'passbook_admin:application-update' pk=application.pk %}?back={{ request.get_full_path }}">
<button slot="trigger" class="pf-c-button pf-m-secondary">
{% trans 'Edit' %}
</button>
<div slot="modal"></div>
</pb-modal-button>
<pb-modal-button href="{% url 'passbook_admin:application-delete' pk=application.pk %}?back={{ request.get_full_path }}">
<button slot="trigger" class="pf-c-button pf-m-danger">
{% trans 'Delete' %}
</button>
<div slot="modal"></div>
</pb-modal-button>
</td>
</tr>
{% endfor %}

16
passbook/admin/templates/generic/form.html
View File

@ -30,26 +30,20 @@
<div class="pf-l-stack__item">
<div class="pf-c-card">
<div class="pf-c-card__body">
<form action="" method="post" class="pf-c-form pf-m-horizontal" enctype="multipart/form-data">
<form id="main-form" action="" method="post" class="pf-c-form pf-m-horizontal" enctype="multipart/form-data">
{% include 'partials/form_horizontal.html' with form=form %}
{% block beneath_form %}
{% endblock %}
<div class="pf-c-form__group pf-m-action">
<div class="pf-c-form__group-control">
<div class="pf-c-form__horizontal-group">
<div class="pf-c-form__actions">
<input class="pf-c-button pf-m-primary" type="submit" value="{% block action %}{% endblock %}" />
<a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<footer class="pf-c-modal-box__footer">
<input class="pf-c-button pf-m-primary" type="submit" form="main-form" value="{% block action %}{% endblock %}" />
<a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
</footer>
{% endblock %}
{% block scripts %}

27
passbook/static/static/package-lock.json generated
View File

@ -432,8 +432,7 @@
"picomatch": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
"dev": true
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
},
"randombytes": {
"version": "2.1.0",
@ -480,6 +479,30 @@
"rollup-pluginutils": "^2.8.1"
}
},
"rollup-plugin-cssimport": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-cssimport/-/rollup-plugin-cssimport-1.0.2.tgz",
"integrity": "sha512-HT24rkJN1jUOiVzyAxYkTkh1g+dIMMVTC9qP7KeZolGQh8BDA0nnsbeND9LjNNOmjcZMIlLIqyrtDRjkVeHHFA==",
"requires": {
"@rollup/pluginutils": "^4.0.0"
},
"dependencies": {
"@rollup/pluginutils": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
"integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
"requires": {
"estree-walker": "^2.0.1",
"picomatch": "^2.2.2"
}
},
"estree-walker": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz",
"integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg=="
}
}
},
"rollup-plugin-minify-html-literals": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/rollup-plugin-minify-html-literals/-/rollup-plugin-minify-html-literals-1.2.5.tgz",

1
passbook/static/static/package.json
View File

@ -13,6 +13,7 @@
"lit-element": "^2.4.0",
"lit-html": "^1.3.0",
"rollup": "^2.33.2",
"rollup-plugin-cssimport": "^1.0.2",
"tslib": "^2.0.3"
},
"devDependencies": {

2
passbook/static/static/rollup.config.js
View File

@ -4,6 +4,7 @@ import minifyHTML from 'rollup-plugin-minify-html-literals';
import { terser } from 'rollup-plugin-terser';
import sourcemaps from 'rollup-plugin-sourcemaps';
import typescript from '@rollup/plugin-typescript';
import cssimport from "rollup-plugin-cssimport";
export default [{
input: './src/main.ts',
@ -15,6 +16,7 @@ export default [{
}
],
plugins: [
cssimport(),
typescript(),
resolve({browser: true}),
commonjs(),

89
passbook/static/static/src/ModalButton.ts
View File

@ -1,4 +1,10 @@
import { customElement, html, LitElement, property } from "lit-element";
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import ModalBoxStyle from "@patternfly/patternfly/components/ModalBox/modal-box.css";
// @ts-ignore
import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
// @ts-ignore
import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css";
const PRIMARY_CLASS = "pf-m-primary";
const SUCCESS_CLASS = "pf-m-success";
@ -11,48 +17,65 @@ export class ModalButton extends LitElement {
@property()
href: string = "";
constructor() {
super();
this.addEventListener('click', e => this.callAction(e));
@property()
open: boolean = false;
static get styles() {
return [ModalBoxStyle, BullseyeStyle, BackdropStyle]
}
getModal() {
onClick(e: MouseEvent) {
const request = new Request(
this.href,
);
fetch(request, {
mode: 'same-origin',
}).then(r => r.text()).then((t) => {
this.querySelector("[slot=modal]")!.innerHTML = t;
// Ensure links close the modal
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach(a => {
// Make click on a close the modal
a.addEventListener("click", e => {
this.open = false;
});
});
// Ensure input type submit submits the form without reloading the page
this.querySelectorAll<HTMLInputElement>("[slot=modal] input[type=submit]").forEach(i => {
i.form?.addEventListener("submit", e => {
e.preventDefault();
return false;
});
i.addEventListener("click", e => {
console.log("on submit");
e.preventDefault();
i.form?.submit();
this.open = false;
});
});
this.open = true;
}).catch(e => {
console.error(e);
});
}
renderModal() {
return html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye">
<div class="pf-c-modal-box pf-m-md" role="dialog" aria-modal="true" aria-labelledby="modal-md-title" aria-describedby="modal-md-description">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
<header class="pf-c-modal-box__header">
<h1 class="pf-c-modal-box__title" id="modal-md-title">This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
</header>
<div class="pf-c-modal-box__body">
<p id="modal-md-description">The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-c-modal-box__body"</p>
<p>Form here</p>
</div>
<footer class="pf-c-modal-box__footer">
<button class="pf-c-button pf-m-primary" type="button">Save</button>
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
</footer>
<button class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
<slot name="modal">
</slot>
</div>
</div>
</div>`;
}
callAction(e: MouseEvent) {
e.preventDefault();
const request = new Request(
this.href,
);
fetch(request, {
method: "POST",
mode: 'same-origin',
}).then(r => {
// this.
}).catch(() => {
// this.setDone(ERROR_CLASS);
});
render() {
return html`
<slot name="trigger" @click=${(e: any) => this.onClick(e)}></slot>
${this.open ? this.renderModal() : ""}`;
}
}