From 76e571ea0aa78731259deb087637ce657cf6e2c6 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Mon, 29 Mar 2021 10:09:43 +0200 Subject: [PATCH] web: use custom-element as wrapper Signed-off-by: Jens Langhammer --- web/package-lock.json | 108 ++++++++++++++++++ web/package.json | 1 + .../elements/forms/HorizontalFormElement.ts | 62 ++++++++++ web/src/elements/forms/utils.ts | 16 --- web/src/pages/groups/GroupForm.ts | 72 ++++++------ 5 files changed, 207 insertions(+), 52 deletions(-) create mode 100644 web/src/elements/forms/HorizontalFormElement.ts delete mode 100644 web/src/elements/forms/utils.ts diff --git a/web/package-lock.json b/web/package-lock.json index 90af1fe52..be1559cb1 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -133,6 +133,27 @@ "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.90.5.tgz", "integrity": "sha512-Fe0C8UkzSjtacQ+fHXlFB/LHzrv/c2K4z479C6dboOgkGQE1FyB0wt1NBfxij0D++rhOy04OOYdE+Tr0JSlZKw==" }, + "@polymer/font-roboto": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz", + "integrity": "sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA==" + }, + "@polymer/iron-a11y-announcer": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-3.1.0.tgz", + "integrity": "sha512-lc5i4NKB8kSQHH0Hwu8WS3ym93m+J69OHJWSSBxwd17FI+h2wmgxDzeG9LI4ojMMck17/uc2pLe7g/UHt5/K/A==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-a11y-keys-behavior": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.1.tgz", + "integrity": "sha512-lnrjKq3ysbBPT/74l0Fj0U9H9C35Tpw2C/tpJ8a+5g8Y3YJs1WSZYnEl1yOkw6sEyaxOq/1DkzH0+60gGu5/PQ==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, "@polymer/iron-ajax": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-ajax/-/iron-ajax-3.0.1.tgz", @@ -141,6 +162,34 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/iron-autogrow-textarea": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@polymer/iron-autogrow-textarea/-/iron-autogrow-textarea-3.0.3.tgz", + "integrity": "sha512-5r0VkWrIlm0JIp5E5wlnvkw7slK72lFRZXncmrsLZF+6n1dg2rI8jt7xpFzSmUWrqpcyXwyKaGaDvUjl3j4JLA==", + "requires": { + "@polymer/iron-behaviors": "^3.0.0-pre.26", + "@polymer/iron-flex-layout": "^3.0.0-pre.26", + "@polymer/iron-validatable-behavior": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-behaviors": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-3.0.1.tgz", + "integrity": "sha512-IMEwcv1lhf1HSQxuyWOUIL0lOBwmeaoSTpgCJeP9IBYnuB1SPQngmfRuHKgK6/m9LQ9F9miC7p3HeQQUdKAE0w==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-flex-layout": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.1.tgz", + "integrity": "sha512-7gB869czArF+HZcPTVSgvA7tXYFze9EKckvM95NB7SqYF+NnsQyhoXgKnpFwGyo95lUjUW9TFDLUwDXnCYFtkw==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, "@polymer/iron-form": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-form/-/iron-form-3.0.1.tgz", @@ -150,6 +199,65 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/iron-form-element-behavior": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.1.tgz", + "integrity": "sha512-G/e2KXyL5AY7mMjmomHkGpgS0uAf4ovNpKhkuUTRnMuMJuf589bKqE85KN4ovE1Tzhv2hJoh/igyD6ekHiYU1A==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-input": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-input/-/iron-input-3.0.1.tgz", + "integrity": "sha512-WLx13kEcbH9GKbj9+pWR6pbJkA5kxn3796ynx6eQd2rueMyUfVTR3GzOvadBKsciUuIuzrxpBWZ2+3UcueVUQQ==", + "requires": { + "@polymer/iron-a11y-announcer": "^3.0.0-pre.26", + "@polymer/iron-validatable-behavior": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-meta": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.1.tgz", + "integrity": "sha512-pWguPugiLYmWFV9UWxLWzZ6gm4wBwQdDy4VULKwdHCqR7OP7u98h+XDdGZsSlDPv6qoryV/e3tGHlTIT0mbzJA==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-validatable-behavior": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.1.tgz", + "integrity": "sha512-wwpYh6wOa4fNI+jH5EYKC7TVPYQ2OfgQqocWat7GsNWcsblKYhLYbwsvEY5nO0n2xKqNfZzDLrUom5INJN7msQ==", + "requires": { + "@polymer/iron-meta": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/paper-input": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-3.2.1.tgz", + "integrity": "sha512-6ghgwQKM6mS0hAQxQqj+tkeEY1VUBqAsrasAm8V5RpNcfSWQC/hhRFxU0beGuKTAhndzezDzWYP6Zz4b8fExGg==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/iron-autogrow-textarea": "^3.0.0-pre.26", + "@polymer/iron-behaviors": "^3.0.0-pre.26", + "@polymer/iron-form-element-behavior": "^3.0.0-pre.26", + "@polymer/iron-input": "^3.0.0-pre.26", + "@polymer/paper-styles": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/paper-styles": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.1.tgz", + "integrity": "sha512-y6hmObLqlCx602TQiSBKHqjwkE7xmDiFkoxdYGaNjtv4xcysOTdVJsDR/R9UHwIaxJ7gHlthMSykir1nv78++g==", + "requires": { + "@polymer/font-roboto": "^3.0.1", + "@polymer/iron-flex-layout": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, "@polymer/polymer": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.4.1.tgz", diff --git a/web/package.json b/web/package.json index 669cb25ec..8add33fd6 100644 --- a/web/package.json +++ b/web/package.json @@ -13,6 +13,7 @@ "@fortawesome/fontawesome-free": "^5.15.3", "@patternfly/patternfly": "^4.90.5", "@polymer/iron-form": "^3.0.1", + "@polymer/paper-input": "^3.2.1", "@sentry/browser": "^6.2.3", "@sentry/tracing": "^6.2.3", "@types/chart.js": "^2.9.31", diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts new file mode 100644 index 000000000..20c03a174 --- /dev/null +++ b/web/src/elements/forms/HorizontalFormElement.ts @@ -0,0 +1,62 @@ +import { customElement, LitElement, CSSResult, property, css } from "lit-element"; +import { TemplateResult, html } from "lit-html"; +import PFForm from "@patternfly/patternfly/components/Form/form.css"; +import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; + +@customElement("ak-form-element-horizontal") +export class HorizontalFormElement extends LitElement { + + static get styles(): CSSResult[] { + return [PFForm, PFFormControl, css` + slot { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + } + .pf-c-form__group { + display: grid; + grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth); + } + .pf-c-form__group-label { + padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop); + } + `]; + } + + @property() + label: string = ""; + + @property({ type: Boolean }) + required = false; + + @property() + errorMessage: string = ""; + + @property() + invalid: boolean = false; + + updated(): void { + this.querySelectorAll("input[autofocus]").forEach(input => { + input.focus(); + }); + } + + render(): TemplateResult { + return html`
+
+ +
+
+
+ + ${this.invalid ? html`

${this.errorMessage}

` : html``} +
+
+
`; + } + +} diff --git a/web/src/elements/forms/utils.ts b/web/src/elements/forms/utils.ts deleted file mode 100644 index 79ff0dc68..000000000 --- a/web/src/elements/forms/utils.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TemplateResult, html } from "lit-html"; - -export function formGroup(label: string, body: TemplateResult): TemplateResult { - return html`
-
- -
-
-
- ${body} -
-
-
`; -} diff --git a/web/src/pages/groups/GroupForm.ts b/web/src/pages/groups/GroupForm.ts index 996f016d4..0770351c8 100644 --- a/web/src/pages/groups/GroupForm.ts +++ b/web/src/pages/groups/GroupForm.ts @@ -5,8 +5,8 @@ import { html, TemplateResult } from "lit-html"; import { DEFAULT_CONFIG } from "../../api/Config"; import { Form } from "../../elements/forms/Form"; import { until } from "lit-html/directives/until"; -import { formGroup } from "../../elements/forms/utils"; import { ifDefined } from "lit-html/directives/if-defined"; +import "../../elements/forms/HorizontalFormElement"; @customElement("ak-group-form") export class GroupForm extends Form { @@ -31,42 +31,42 @@ export class GroupForm extends Form { renderForm(): TemplateResult { return html`
- ${formGroup(gettext("Name"), html` - - `)} - ${formGroup("", html` -
- - -
-

${gettext("Users added to this group will be superusers.")}

- `)} - ${formGroup(gettext("Parent"), html` - + + +
+ + +
+

${gettext("Users added to this group will be superusers.")}

+ + + + + + - `)} - ${formGroup(gettext("Members"), html` - -

${gettext("Hold control/command to select multiple items.")}

- `)} - `; + return html``; + }); + }))} + +

${gettext("Hold control/command to select multiple items.")}

+
+ `; } }