From eb18506cbb44c4b466e9c93cda04872ba0236a04 Mon Sep 17 00:00:00 2001 From: Sander Bruens Date: Mon, 9 Oct 2023 19:16:29 -0400 Subject: [PATCH 1/5] Change style to filled fields without color background to stay consistent with our Material 1 text fields. --- src/www/views/contact_view/index.ts | 98 +++++++------- .../views/contact_view/support_form/index.ts | 120 +++++++++--------- src/www/views/shared/card/index.ts | 66 ---------- src/www/views/shared/card/stories.ts | 64 ---------- 4 files changed, 107 insertions(+), 241 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/views/contact_view/index.ts b/src/www/views/contact_view/index.ts index 4bd195b026..ccff92ac8c 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%; } + :host > * { + display: block; + margin-left: auto; + margin-right: auto; + max-width: var(--contact-view-max-width); + } + mwc-circular-progress { left: 50%; position: absolute; @@ -66,10 +70,6 @@ export class ContactView extends LitElement { margin-bottom: var(--contact-view-gutter, var(--outline-gutter)); } - outline-card { - width: 100%; - } - p { margin-top: .25rem; } @@ -89,8 +89,11 @@ 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)); + --mdc-ripple-color: none; + --mdc-select-fill-color: none; margin-top: 1rem; + max-width: var(--contact-view-max-width); width: 100%; } @@ -231,7 +234,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 { @@ -260,7 +263,7 @@ export class ContactView extends LitElement { } case Step.EXIT: { - return html` ${this.exitTemplate} `; + return html`

${this.exitTemplate}

`; } case Step.ISSUE_WIZARD: @@ -268,44 +271,41 @@ 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}`)} + + `; + })} + `; } } diff --git a/src/www/views/contact_view/support_form/index.ts b/src/www/views/contact_view/support_form/index.ts index aea0eb49fc..4f73ab0eb7 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'; @@ -56,11 +55,10 @@ export class SupportForm extends LitElement { static styles = [ css` :host { + --mdc-ripple-color: none; + --mdc-text-field-fill-color: none; font-family: var(--outline-font-family); - } - - outline-card { - min-width: 100%; + width: 100%; } mwc-select { @@ -78,6 +76,11 @@ export class SupportForm extends LitElement { font-size: 0.8rem; text-align: end; } + + .actions { + display: flex; + justify-content: end; + } `, ]; @@ -159,7 +162,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 +185,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 +194,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)} - - `; From a9827321c782c387cd5596b9406d149ce2e01ba1 Mon Sep 17 00:00:00 2001 From: Sander Bruens Date: Tue, 10 Oct 2023 13:53:11 -0400 Subject: [PATCH 2/5] Fix tests. --- src/www/views/contact_view/index.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts index 5e8a95dd13..e3b8854d51 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); }); } From 7577fd6610f6aa2d77bdd62e6ce56e7d50d57a45 Mon Sep 17 00:00:00 2001 From: Sander Bruens Date: Tue, 24 Oct 2023 16:25:30 -0400 Subject: [PATCH 3/5] More style changes based on design review. --- src/www/ui_components/server-rename-dialog.js | 17 +++++++---------- src/www/views/contact_view/index.ts | 5 ++--- .../views/contact_view/support_form/index.ts | 2 -- 3 files changed, 9 insertions(+), 15 deletions(-) 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.ts b/src/www/views/contact_view/index.ts index ccff92ac8c..373f2dd8ff 100644 --- a/src/www/views/contact_view/index.ts +++ b/src/www/views/contact_view/index.ts @@ -76,7 +76,7 @@ export class ContactView extends LitElement { ol { list-style-type: none; - margin: .25rem 0; + margin: 1.5rem 0; padding-inline-start: 0; } @@ -90,8 +90,6 @@ export class ContactView extends LitElement { */ --mdc-menu-max-height: 200px; --mdc-menu-max-width: min(calc(100vw - calc(var(--outline-gutter) * 4)), var(--contact-view-max-width)); - --mdc-ripple-color: none; - --mdc-select-fill-color: none; margin-top: 1rem; max-width: var(--contact-view-max-width); width: 100%; @@ -102,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 diff --git a/src/www/views/contact_view/support_form/index.ts b/src/www/views/contact_view/support_form/index.ts index 4f73ab0eb7..2eb421f7d8 100644 --- a/src/www/views/contact_view/support_form/index.ts +++ b/src/www/views/contact_view/support_form/index.ts @@ -55,8 +55,6 @@ export class SupportForm extends LitElement { static styles = [ css` :host { - --mdc-ripple-color: none; - --mdc-text-field-fill-color: none; font-family: var(--outline-font-family); width: 100%; } From 41d617e936028d1177cdaf6238ee6c0d5c62d933 Mon Sep 17 00:00:00 2001 From: Sander Bruens Date: Tue, 24 Oct 2023 16:34:15 -0400 Subject: [PATCH 4/5] Fix test. --- src/www/views/contact_view/index.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts index e3b8854d51..d65fa84ae8 100644 --- a/src/www/views/contact_view/index.spec.ts +++ b/src/www/views/contact_view/index.spec.ts @@ -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(); }); }); From 934210a0ccb995a69f7886a4e82fd3b377891937 Mon Sep 17 00:00:00 2001 From: Sander Bruens Date: Tue, 24 Oct 2023 17:01:37 -0400 Subject: [PATCH 5/5] Add container class. --- src/www/views/contact_view/index.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts index 373f2dd8ff..2b0b0c209c 100644 --- a/src/www/views/contact_view/index.ts +++ b/src/www/views/contact_view/index.ts @@ -51,7 +51,7 @@ export class ContactView extends LitElement { width: 100%; } - :host > * { + main { display: block; margin-left: auto; margin-right: auto; @@ -255,7 +255,7 @@ export class ContactView extends LitElement { `; } - render() { + private get renderMainContent(): TemplateResult { switch (this.step) { case Step.FORM: { return html` ${this.renderIntroTemplate} ${this.renderForm} `; @@ -309,4 +309,8 @@ export class ContactView extends LitElement { } } } + + render() { + return html`
${this.renderMainContent}
`; + } }