From b1c849162f29706777e352e9c730525b6d666ec8 Mon Sep 17 00:00:00 2001 From: Sander Bruens Date: Wed, 25 Oct 2023 13:15:08 -0400 Subject: [PATCH] feat(www): change style to filled fields to stay consistent with other text fields (#1751) * Change style to filled fields without color background to stay consistent with our Material 1 text fields. * Fix tests. * More style changes based on design review. * Fix test. * Add container class. --- src/www/ui_components/server-rename-dialog.js | 17 ++- src/www/views/contact_view/index.spec.ts | 8 +- src/www/views/contact_view/index.ts | 105 ++++++++-------- .../views/contact_view/support_form/index.ts | 118 +++++++++--------- src/www/views/shared/card/index.ts | 66 ---------- src/www/views/shared/card/stories.ts | 64 ---------- 6 files changed, 121 insertions(+), 257 deletions(-) delete mode 100644 src/www/views/shared/card/index.ts delete mode 100644 src/www/views/shared/card/stories.ts diff --git a/src/www/ui_components/server-rename-dialog.js b/src/www/ui_components/server-rename-dialog.js index b02e1c29e4..2efed30e4f 100644 --- a/src/www/ui_components/server-rename-dialog.js +++ b/src/www/ui_components/server-rename-dialog.js @@ -14,6 +14,7 @@ limitations under the License. */ +import '@material/mwc-textfield'; import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; import {html} from '@polymer/polymer/lib/utils/html-tag.js'; import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js'; @@ -21,23 +22,19 @@ import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js'; Polymer({ _template: html`

[[localize('server-rename')]]

- +
[[localize('cancel')]] [[localize('save')]]
-`, + `, is: 'server-rename-dialog', @@ -50,7 +47,7 @@ Polymer({ __serverId: String, }, - open: function(serverName, serverId) { + open: function (serverName, serverId) { // Store the initial serverName so we can know if it changed, and // store the serverId so we can emit the rename request event. this.__serverName = serverName; @@ -63,10 +60,10 @@ Polymer({ }); }, - _saveRename: function() { + _saveRename: function () { const newName = this.$.serverNameInput.value; if (newName !== this.__serverName) { this.fire('RenameRequested', {serverId: this.__serverId, newName: newName}); } - } + }, }); diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts index 5e8a95dd13..d65fa84ae8 100644 --- a/src/www/views/contact_view/index.spec.ts +++ b/src/www/views/contact_view/index.spec.ts @@ -56,7 +56,7 @@ describe('ContactView client variant', () => { radioButton.click(); await nextFrame(); - const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!; + const exitCard = el.shadowRoot!.querySelector('.exit')!; expect(exitCard.textContent).toContain('experiencing high support volume'); }); @@ -68,7 +68,7 @@ describe('ContactView client variant', () => { el.reset(); await nextFrame(); - const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!; + const exitCard = el.shadowRoot!.querySelector('.exit')!; expect(exitCard).toBeNull(); }); @@ -128,7 +128,7 @@ describe('ContactView client variant', () => { issue.click(); await nextFrame(); - const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!; + const exitCard = el.shadowRoot!.querySelector('.exit')!; expect(exitCard.textContent).toContain(expectedMsg); }); } @@ -190,7 +190,7 @@ describe('ContactView client variant', () => { await nextFrame(); - expect(el.shadowRoot?.querySelector('h1')?.textContent).toContain('Tell us how we can help.'); + expect(el.shadowRoot?.querySelector('p.intro')?.textContent).toContain('Tell us how we can help.'); expect(el.shadowRoot?.querySelector('support-form')).toBeNull(); }); }); diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts index 4bd195b026..2b0b0c209c 100644 --- a/src/www/views/contact_view/index.ts +++ b/src/www/views/contact_view/index.ts @@ -26,7 +26,6 @@ import {Radio} from '@material/mwc-radio'; import {SingleSelectedEvent} from '@material/mwc-list/mwc-list'; import './support_form'; -import {CardType} from '../shared/card'; import {IssueType, UNSUPPORTED_ISSUE_TYPE_HELPPAGES} from './issue_type'; import {AppType} from './app_type'; import {FormValues, SupportForm, ValidFormValues} from './support_form'; @@ -45,15 +44,20 @@ export class ContactView extends LitElement { static styles = [ css` :host { + background: #fff; color: var(--outline-text-color); - display: block; font-family: var(--outline-font-family); - margin: 0 auto; - max-width: var(--contact-view-max-width); padding: var(--contact-view-gutter, var(--outline-gutter)); width: 100%; } + main { + display: block; + margin-left: auto; + margin-right: auto; + max-width: var(--contact-view-max-width); + } + mwc-circular-progress { left: 50%; position: absolute; @@ -66,17 +70,13 @@ export class ContactView extends LitElement { margin-bottom: var(--contact-view-gutter, var(--outline-gutter)); } - outline-card { - width: 100%; - } - p { margin-top: .25rem; } ol { list-style-type: none; - margin: .25rem 0; + margin: 1.5rem 0; padding-inline-start: 0; } @@ -89,8 +89,9 @@ export class ContactView extends LitElement { * this issue. */ --mdc-menu-max-height: 200px; - --mdc-menu-max-width: calc(100vw - calc(var(--outline-gutter) * 4)); + --mdc-menu-max-width: min(calc(100vw - calc(var(--outline-gutter) * 4)), var(--contact-view-max-width)); margin-top: 1rem; + max-width: var(--contact-view-max-width); width: 100%; } @@ -99,6 +100,7 @@ export class ContactView extends LitElement { } mwc-list-item { + line-height: 1.25rem; /** * The default styling of list items that wrap to 3+ lines is bad, and * our items here are quite long and tend to wrap that much. To allow @@ -231,7 +233,7 @@ export class ContactView extends LitElement { } private get renderIntroTemplate(): TemplateResult { - return html`

${this.localize('contact-view-intro')}

`; + return html`

${this.localize('contact-view-intro')}

`; } private get renderForm(): TemplateResult | typeof nothing { @@ -253,14 +255,14 @@ export class ContactView extends LitElement { `; } - render() { + private get renderMainContent(): TemplateResult { switch (this.step) { case Step.FORM: { return html` ${this.renderIntroTemplate} ${this.renderForm} `; } case Step.EXIT: { - return html` ${this.exitTemplate} `; + return html`

${this.exitTemplate}

`; } case Step.ISSUE_WIZARD: @@ -268,46 +270,47 @@ export class ContactView extends LitElement { return html` ${this.renderIntroTemplate} - -

${this.localize('contact-view-open-ticket')}

- -
    - ${this.openTicketSelectionOptions.map( - element => html` -
  1. - - - - -
    2. - ` - )} -
- - - ${ContactView.ISSUES[this.variant].map(value => { - return html` - - ${this.localize(`contact-view-issue-${value}`)} - - `; - })} - - +

${this.localize('contact-view-open-ticket')}

+ +
    + ${this.openTicketSelectionOptions.map( + element => html` +
  1. + + + + +
    2. + ` + )} +
+ + + ${ContactView.ISSUES[this.variant].map(value => { + return html` + + ${this.localize(`contact-view-issue-${value}`)} + + `; + })} + `; } } } + + render() { + return html`
${this.renderMainContent}
`; + } } diff --git a/src/www/views/contact_view/support_form/index.ts b/src/www/views/contact_view/support_form/index.ts index aea0eb49fc..2eb421f7d8 100644 --- a/src/www/views/contact_view/support_form/index.ts +++ b/src/www/views/contact_view/support_form/index.ts @@ -22,7 +22,6 @@ import '@material/mwc-button'; import '@material/mwc-select'; import '@material/mwc-textarea'; import '@material/mwc-textfield'; -import {CardType} from '../../shared/card'; import {AppType} from '../app_type'; import {TextField} from '@material/mwc-textfield'; import {SelectedDetail} from '@material/mwc-menu/mwc-menu-base'; @@ -57,10 +56,7 @@ export class SupportForm extends LitElement { css` :host { font-family: var(--outline-font-family); - } - - outline-card { - min-width: 100%; + width: 100%; } mwc-select { @@ -78,6 +74,11 @@ export class SupportForm extends LitElement { font-size: 0.8rem; text-align: end; } + + .actions { + display: flex; + justify-content: end; + } `, ]; @@ -159,7 +160,6 @@ export class SupportForm extends LitElement { .value=${live(this.values.cloudProvider ?? '')} .disabled=${this.disabled} required - outlined @selected=${(e: CustomEvent>) => { if (e.detail.index !== -1) { this.values.cloudProvider = providers[e.detail.index].value; @@ -183,7 +183,6 @@ export class SupportForm extends LitElement { .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT} .disabled=${this.disabled} required - outlined @input=${this.handleTextInput} @blur=${this.checkFormValidity} > @@ -193,61 +192,56 @@ export class SupportForm extends LitElement { render() { return html`
- - - - ${this.renderCloudProviderInputField} ${this.renderAccessKeySourceInputField} - - - - - -

* = ${this.localize('support-form-required-field')}

- - - - - - + + + ${this.renderCloudProviderInputField} ${this.renderAccessKeySourceInputField} + + + + + +

* = ${this.localize('support-form-required-field')}

+ + + + +
`; } diff --git a/src/www/views/shared/card/index.ts b/src/www/views/shared/card/index.ts deleted file mode 100644 index 9141a25849..0000000000 --- a/src/www/views/shared/card/index.ts +++ /dev/null @@ -1,66 +0,0 @@ -import {html, css, LitElement, unsafeCSS} from 'lit'; -import {customElement, property, queryAssignedNodes, state} from 'lit/decorators.js'; - -/** The card style types available. */ -export enum CardType { - Elevated = 'elevated', - Outlined = 'outlined', -} - -@customElement('outline-card') -export class Card extends LitElement { - static styles = [ - css` - :host { - display: inline-block; - font-family: var(--outline-font-family); - } - - :host([type='${unsafeCSS(CardType.Elevated)}']) { - background: var(--outline-card-background); - border-radius: var(--outline-corner); - box-shadow: var(--outline-elevation); - } - - :host([type='${unsafeCSS(CardType.Outlined)}']) { - border: var(--outline-hairline); - } - - article { - padding: var(--outline-gutter); - } - - footer { - background: var(--outline-card-footer); - border-top: var(--outline-hairline); - box-sizing: border-box; - padding: var(--outline-mini-gutter) var(--outline-gutter); - text-align: end; - } - `, - ]; - - @property({type: String, reflect: true}) - type: CardType = CardType.Outlined; - - @queryAssignedNodes({slot: 'card-actions', flatten: true}) - private cardActionItems!: Array; - - @state() - private hasActions = false; - - private onCardActionsSlotChange() { - this.hasActions = !!this.cardActionItems.length; - } - - render() { - return html` -
- -
-
- -
- `; - } -} diff --git a/src/www/views/shared/card/stories.ts b/src/www/views/shared/card/stories.ts deleted file mode 100644 index dda6385022..0000000000 --- a/src/www/views/shared/card/stories.ts +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Copyright 2023 The Outline Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* tslint:disable */ - -import {TemplateResult, html, nothing} from 'lit'; - -import '@material/mwc-button'; - -import './index'; -import {CardType} from './index'; - -export default { - title: 'Shared/Card', - component: 'outline-card', - argTypes: { - variant: { - description: 'Style variant of the card.', - defaultValue: CardType.Elevated, - options: Object.values(CardType), - control: { - type: 'radio', - defaultValue: CardType.Elevated, - }, - }, - withActions: { - description: 'Show action button.', - defaultValue: true, - control: { - type: 'boolean', - defaultValue: true, - }, - }, - }, -}; - -function getFooter(withActions: boolean): TemplateResult | typeof nothing { - return withActions - ? html` - Confirm - ` - : nothing; -} - -export const Example = ({variant, withActions}: {variant: CardType; withActions: boolean}) => - html` - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio turpis, mattis nec elit nec, dapibus - malesuada ligula. ${getFooter(withActions)} - - `;