UI: Replace paper-toggle-button with md-switch We have to introduce css variables for this because there's more work to change the theme colours. Screenshot light theme: https://imgur.com/a/DWJ2pNC Screenshot dark theme: https://imgur.com/a/TC8IGB4 Release-Notes: UI: Replace paper-toggle-button Change-Id: I9b625af15acb52d24b9543ba68af55d86560c63f
diff --git a/Documentation/js_licenses.txt b/Documentation/js_licenses.txt index f0b8582..e7840bc 100644 --- a/Documentation/js_licenses.txt +++ b/Documentation/js_licenses.txt
@@ -843,7 +843,6 @@ * @polymer/paper-listbox * @polymer/paper-menu-button * @polymer/paper-tabs -* @polymer/paper-toggle-button * @polymer/paper-tooltip [[Polymer-2015_license]]
diff --git a/Documentation/licenses.txt b/Documentation/licenses.txt index 2b852b3..a5aa473 100644 --- a/Documentation/licenses.txt +++ b/Documentation/licenses.txt
@@ -3448,7 +3448,6 @@ * @polymer/paper-listbox * @polymer/paper-menu-button * @polymer/paper-tabs -* @polymer/paper-toggle-button * @polymer/paper-tooltip [[Polymer-2015_license]]
diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts index 17d39ad..fb05bc3 100644 --- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts +++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
@@ -3,7 +3,7 @@ * Copyright 2017 Google LLC * SPDX-License-Identifier: Apache-2.0 */ -import '@polymer/paper-toggle-button/paper-toggle-button'; +import '@material/web/switch/switch'; import '../../shared/gr-autocomplete/gr-autocomplete'; import '../../shared/gr-button/gr-button'; import '../gr-rule-editor/gr-rule-editor'; @@ -44,6 +44,7 @@ ValueChangedEvent, } from '../../../types/events'; import {throwingErrorCallback} from '../../shared/gr-rest-api-interface/gr-rest-apis/gr-rest-api-helper'; +import {MdSwitch} from '@material/web/switch/switch'; const MAX_AUTOCOMPLETE_RESULTS = 20; @@ -226,14 +227,12 @@ this.section ), () => html` - <paper-toggle-button + <md-switch id="exclusiveToggle" - ?checked=${this.permission?.value.exclusive} + ?selected=${this.permission?.value.exclusive} ?disabled=${!this.editing} @change=${this.handleValueChange} - @click=${this.onTapExclusiveToggle} - @tap=${this.onTapExclusiveToggle} - ></paper-toggle-button + ></md-switch >${this.computeExclusiveLabel(this.permission?.value)} ` )} @@ -355,7 +354,7 @@ return; } this.permission.value.modified = true; - this.permission.value.exclusive = (e.target as HTMLInputElement).checked; + this.permission.value.exclusive = (e.target as MdSwitch).selected; // Allows overall access page to know a change has been made. fire(this, 'access-modified', {}); } @@ -554,13 +553,6 @@ return permission?.exclusive ? 'Exclusive' : 'Not Exclusive'; } - /** - * Work around a issue on iOS when clicking turns into double tap - */ - private onTapExclusiveToggle(e: Event) { - e.preventDefault(); - } - // TODO: Do not use generic `CustomEvent`. // There is something fishy going on here though. // `e.detail.value` is of type `Rule`, but `splice()` expects a `number`.
diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.ts b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.ts index 5eebd9c..2cdf90f 100644 --- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.ts +++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.ts
@@ -15,7 +15,7 @@ import {GrRuleEditor} from '../gr-rule-editor/gr-rule-editor'; import {GrButton} from '../../shared/gr-button/gr-button'; import {assert, fixture, html} from '@open-wc/testing'; -import {PaperToggleButtonElement} from '@polymer/paper-toggle-button'; +import {MdSwitch} from '@material/web/switch/switch'; import {AutocompleteCommitEventDetail} from '../../../types/events'; suite('gr-permission tests', () => { @@ -324,17 +324,7 @@ <div class="header"> <span class="title"> Priority </span> <div class="right"> - <paper-toggle-button - aria-disabled="true" - aria-pressed="false" - disabled="" - id="exclusiveToggle" - role="button" - style="pointer-events: none; touch-action: none;" - tabindex="-1" - toggles="" - > - </paper-toggle-button> + <md-switch disabled="" id="exclusiveToggle"> </md-switch> Not Exclusive <gr-button aria-disabled="false" @@ -372,13 +362,7 @@ </gr-button> </div> </section> - `, - // touch-action varies on paper-toggle-button between local and CI - { - ignoreAttributes: [ - {tags: ['paper-toggle-button'], attributes: ['style']}, - ], - } + ` ); }); @@ -491,10 +475,7 @@ assert.isFalse(element.originalExclusiveValue); assert.isNotOk(element.permission!.value.modified); - queryAndAssert<PaperToggleButtonElement>( - element, - '#exclusiveToggle' - ).click(); + queryAndAssert<MdSwitch>(element, '#exclusiveToggle').click(); await element.updateComplete; assert.isTrue(element.permission!.value.exclusive); assert.isTrue(element.permission!.value.modified); @@ -513,10 +494,7 @@ element.addEventListener('access-modified', modifiedHandler); await element.updateComplete; assert.isNotOk(element.permission.value.modified); - queryAndAssert<PaperToggleButtonElement>( - element, - '#exclusiveToggle' - ).click(); + queryAndAssert<MdSwitch>(element, '#exclusiveToggle').click(); await element.updateComplete; assert.isTrue(element.permission.value.modified); assert.isTrue(modifiedHandler.called);
diff --git a/polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config.ts b/polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config.ts index dfb82bd..41862dc 100644 --- a/polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config.ts +++ b/polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config.ts
@@ -4,7 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ import '@polymer/iron-input/iron-input'; -import '@polymer/paper-toggle-button/paper-toggle-button'; +import '@material/web/switch/switch'; import {grFormStyles} from '../../../styles/gr-form-styles'; import {sharedStyles} from '../../../styles/shared-styles'; import {subpageStyles} from '../../../styles/gr-subpage-styles'; @@ -18,7 +18,6 @@ ConfigParameterInfo, PluginParameterToConfigParameterInfoMap, } from '../../../types/common'; -import {PaperToggleButtonElement} from '@polymer/paper-toggle-button/paper-toggle-button'; import {IronInputElement} from '@polymer/iron-input/iron-input'; import { PluginConfigOptionsChangedEventDetail, @@ -26,6 +25,7 @@ } from './gr-repo-plugin-config-types'; import {paperStyles} from '../../../styles/gr-paper-styles'; import {fire} from '../../../utils/event-util'; +import {MdSwitch} from '@material/web/switch/switch'; export interface ConfigChangeInfo { _key: string; // parameterName of PluginParameterToConfigParameterInfoMap @@ -81,7 +81,7 @@ override render() { // Render can be called prior to pluginData being updated. const pluginConfigOptions = this.pluginData - ? this._computePluginConfigOptions(this.pluginData) + ? this.computePluginConfigOptions(this.pluginData) : []; return html` @@ -133,27 +133,25 @@ if (option.info.type === ConfigParameterInfoType.ARRAY) { return html` <gr-plugin-config-array-editor - @plugin-config-option-changed=${this._handleArrayChange} + @plugin-config-option-changed=${this.handleArrayChange} .pluginOption=${option} ?disabled=${this.disabled || !option.info.editable} ></gr-plugin-config-array-editor> `; } else if (option.info.type === ConfigParameterInfoType.BOOLEAN) { return html` - <paper-toggle-button - ?checked=${this._computeChecked(option.info.value)} - @change=${this._handleBooleanChange} + <md-switch + ?selected=${this.computeChecked(option.info.value)} + @change=${this.handleBooleanChange} data-option-key=${option._key} ?disabled=${this.disabled || !option.info.editable} - @click=${this.onTapPluginBoolean} - @tap=${this.onTapPluginBoolean} - ></paper-toggle-button> + ></md-switch> `; } else if (option.info.type === ConfigParameterInfoType.LIST) { return html` <gr-select .bindValue=${option.info.value} - @change=${this._handleListChange} + @change=${this.handleListChange} > <select data-option-key=${option._key} @@ -173,13 +171,13 @@ return html` <iron-input .bindValue=${option.info.value ?? ''} - @input=${this._handleStringChange} + @input=${this.handleStringChange} data-option-key=${option._key} > <input is="iron-input" .value=${option.info.value ?? ''} - @input=${this._handleStringChange} + @input=${this.handleStringChange} data-option-key=${option._key} ?disabled=${this.disabled || !option.info.editable} /> @@ -190,45 +188,47 @@ } } - _computePluginConfigOptions(pluginData: PluginData) { + // Private but used in test + computePluginConfigOptions(pluginData: PluginData) { const config = pluginData.config; return Object.keys(config).map(_key => { return {_key, info: config[_key]}; }); } - _computeChecked(value = 'false') { + private computeChecked(value = 'false') { return JSON.parse(value) as boolean; } - _handleStringChange(e: Event) { + private handleStringChange(e: Event) { const el = e.target as IronInputElement; // In the template, the data-option-key is assigned to each editor const _key = el.getAttribute('data-option-key')!; - const configChangeInfo = this._buildConfigChangeInfo(el.value, _key); - this._handleChange(configChangeInfo); + const configChangeInfo = this.buildConfigChangeInfo(el.value, _key); + this.handleChange(configChangeInfo); } - _handleListChange(e: Event) { + private handleListChange(e: Event) { const el = e.target as HTMLOptionElement; // In the template, the data-option-key is assigned to each editor const _key = el.getAttribute('data-option-key')!; - const configChangeInfo = this._buildConfigChangeInfo(el.value, _key); - this._handleChange(configChangeInfo); + const configChangeInfo = this.buildConfigChangeInfo(el.value, _key); + this.handleChange(configChangeInfo); } - _handleBooleanChange(e: Event) { - const el = e.target as PaperToggleButtonElement; + private handleBooleanChange(e: Event) { + const el = e.target as MdSwitch; // In the template, the data-option-key is assigned to each editor - const _key = el.getAttribute('data-option-key')!; - const configChangeInfo = this._buildConfigChangeInfo( - JSON.stringify(el.checked), - _key + const key = el.getAttribute('data-option-key')!; + const configChangeInfo = this.buildConfigChangeInfo( + JSON.stringify(el.selected), + key ); - this._handleChange(configChangeInfo); + this.handleChange(configChangeInfo); } - _buildConfigChangeInfo( + // Private but used in test + buildConfigChangeInfo( value: string | null | undefined, _key: string ): ConfigChangeInfo { @@ -242,11 +242,13 @@ }; } - _handleArrayChange(e: CustomEvent<PluginConfigOptionsChangedEventDetail>) { - this._handleChange(e.detail); + // Private but used in test + handleArrayChange(e: CustomEvent<PluginConfigOptionsChangedEventDetail>) { + this.handleChange(e.detail); } - _handleChange({_key, info}: ConfigChangeInfo) { + // Private but used in test + handleChange({_key, info}: ConfigChangeInfo) { // If pluginData is not set, editors are not created and this method // can't be called const {name, config} = this.pluginData!; @@ -258,13 +260,6 @@ }; fire(this, 'plugin-config-changed', detail); } - - /** - * Work around a issue on iOS when clicking turns into double tap - */ - private onTapPluginBoolean(e: Event) { - e.preventDefault(); - } } declare global {
diff --git a/polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config_test.ts b/polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config_test.ts index 251ad07..5bedc1a 100644 --- a/polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config_test.ts +++ b/polygerrit-ui/app/elements/admin/gr-repo-plugin-config/gr-repo-plugin-config_test.ts
@@ -11,7 +11,7 @@ import {ConfigParameterInfoType} from '../../../constants/constants'; import {queryAndAssert} from '../../../test/test-utils'; import {GrPluginConfigArrayEditor} from '../gr-plugin-config-array-editor/gr-plugin-config-array-editor'; -import {PaperToggleButtonElement} from '@polymer/paper-toggle-button/paper-toggle-button'; +import {MdSwitch} from '@material/web/switch/switch'; import {assert, fixture, html} from '@open-wc/testing'; suite('gr-repo-plugin-config tests', () => { @@ -54,9 +54,9 @@ ); }); - test('_computePluginConfigOptions', () => { + test('computePluginConfigOptions', () => { assert.deepEqual( - element._computePluginConfigOptions({ + element.computePluginConfigOptions({ name: 'testInfo', config: { testKey: {display_name: 'testInfo plugin', type: 'STRING'}, @@ -74,7 +74,7 @@ ); }); - test('_handleChange', () => { + test('handleChange', () => { const eventStub = sinon.stub(element, 'dispatchEvent'); element.pluginData = { name: 'testName', @@ -82,7 +82,7 @@ plugin: {type: 'STRING' as ConfigParameterInfoType, value: 'test'}, }, }; - element._handleChange({ + element.handleChange({ _key: 'plugin', info: {type: 'STRING' as ConfigParameterInfoType, value: 'newTest'}, }); @@ -101,8 +101,8 @@ let buildStub: sinon.SinonStub; setup(() => { - changeStub = sinon.stub(element, '_handleChange'); - buildStub = sinon.stub(element, '_buildConfigChangeInfo'); + changeStub = sinon.stub(element, 'handleChange'); + buildStub = sinon.stub(element, 'buildConfigChangeInfo'); }); test('ARRAY type option', async () => { @@ -123,7 +123,7 @@ 'gr-plugin-config-array-editor' ); assert.ok(editor); - element._handleArrayChange({detail: 'test'} as CustomEvent); + element.handleArrayChange({detail: 'test'} as CustomEvent); assert.isTrue(changeStub.called); assert.equal(changeStub.lastCall.args[0], 'test'); }); @@ -141,10 +141,7 @@ }; await element.updateComplete; - const toggle = queryAndAssert<PaperToggleButtonElement>( - element, - 'paper-toggle-button' - ); + const toggle = queryAndAssert<MdSwitch>(element, 'md-switch'); assert.ok(toggle); toggle.click(); await element.updateComplete; @@ -210,14 +207,14 @@ }); }); - test('_buildConfigChangeInfo', () => { + test('buildConfigChangeInfo', () => { element.pluginData = { name: 'testName', config: { plugin: {type: 'STRING' as ConfigParameterInfoType, value: 'test'}, }, }; - const detail = element._buildConfigChangeInfo('newTest', 'plugin'); + const detail = element.buildConfigChangeInfo('newTest', 'plugin'); assert.equal(detail._key, 'plugin'); assert.deepEqual(detail.info, { type: 'STRING' as ConfigParameterInfoType,
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.ts b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.ts index f79840c..fa56c49 100644 --- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.ts +++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.ts
@@ -3,7 +3,7 @@ * Copyright 2020 Google LLC * SPDX-License-Identifier: Apache-2.0 */ -import '@polymer/paper-toggle-button/paper-toggle-button'; +import '@material/web/switch/switch'; import '../../shared/gr-button/gr-button'; import '../gr-message/gr-message'; import '../../../styles/gr-paper-styles'; @@ -46,6 +46,7 @@ } from '../../../services/shortcuts/shortcuts-service'; import {GrFormattedText} from '../../shared/gr-formatted-text/gr-formatted-text'; import {waitUntil} from '../../../utils/async-util'; +import {MdSwitch} from '@material/web/switch/switch'; /** * The content of the enum is also used in the UI for the button text. @@ -389,15 +390,13 @@ ${when( this.combinedMessages.some(m => !m.isImportant), () => html` - <paper-toggle-button + <md-switch class="showAllActivityToggle" - ?checked=${this.showAllActivity} + ?selected=${this.showAllActivity} @change=${this.handleShowAllActivityChanged} aria-labelledby="showAllEntriesLabel" role="switch" - @click=${this.onTapShowAllActivityToggle} - @tap=${this.onTapShowAllActivityToggle} - ></paper-toggle-button> + ></md-switch> <div id="showAllEntriesLabel" aria-hidden="true"> <span>Show all entries</span> <span class="hiddenEntries" ?hidden=${this.showAllActivity}> @@ -453,7 +452,7 @@ } private handleShowAllActivityChanged(e: Event) { - this.showAllActivity = (e.target as HTMLInputElement).checked ?? false; + this.showAllActivity = (e.target as MdSwitch).selected ?? false; } private refreshMessages() { @@ -554,13 +553,6 @@ } return extremes; } - - /** - * Work around a issue on iOS when clicking turns into double tap - */ - private onTapShowAllActivityToggle(e: Event) { - e.preventDefault(); - } } declare global {
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.ts b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.ts index 2c87f02..d5f4e52 100644 --- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.ts +++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.ts
@@ -32,7 +32,7 @@ import {html} from 'lit'; import {assert, fixture} from '@open-wc/testing'; import {GrButton} from '../../shared/gr-button/gr-button'; -import {PaperToggleButtonElement} from '@polymer/paper-toggle-button'; +import {MdSwitch} from '@material/web/switch/switch'; import {testResolver} from '../../../test/common-test-setup'; import {TEST_PROJECT_NAME} from '../../../test/test-data-generators'; import { @@ -572,7 +572,7 @@ test('unimportant messages hidden after toggle', async () => { element.showAllActivity = true; await element.updateComplete; - const toggle = queryAndAssert<PaperToggleButtonElement>( + const toggle = queryAndAssert<MdSwitch>( element, '.showAllActivityToggle' ); @@ -586,7 +586,7 @@ test('unimportant messages shown after toggle', async () => { element.showAllActivity = false; await element.updateComplete; - const toggle = queryAndAssert<PaperToggleButtonElement>( + const toggle = queryAndAssert<MdSwitch>( element, '.showAllActivityToggle' );
diff --git a/polygerrit-ui/app/package.json b/polygerrit-ui/app/package.json index 8c23f07..55504dc 100644 --- a/polygerrit-ui/app/package.json +++ b/polygerrit-ui/app/package.json
@@ -23,7 +23,6 @@ "@polymer/paper-listbox": "^3.0.1", "@polymer/paper-styles": "^3.0.1", "@polymer/paper-tabs": "^3.1.0", - "@polymer/paper-toggle-button": "^3.0.1", "@polymer/paper-tooltip": "^3.0.1", "@polymer/polymer": "3.5.2", "@types/resemblejs": "^4.1.3",
diff --git a/polygerrit-ui/app/styles/gr-paper-styles.ts b/polygerrit-ui/app/styles/gr-paper-styles.ts index 301c02d..4686ee2 100644 --- a/polygerrit-ui/app/styles/gr-paper-styles.ts +++ b/polygerrit-ui/app/styles/gr-paper-styles.ts
@@ -6,6 +6,20 @@ import {css} from 'lit'; export const paperStyles = css` + md-switch { + --md-sys-color-surface-container-highest: var( + --switch-color-surface-container-highest + ); + --md-sys-color-on-surface: var(--switch-color-on-surface); + --md-sys-color-on-surface-variant: var(--switch-color-on-surface-variant); + --md-sys-color-outline: var(--switch-color-outline); + --md-sys-color-primary: var(--switch-color-primary); + --md-sys-color-on-primary: var(--switch-color-on-primary); + --md-sys-color-primary-container: var(--switch-color-primary-container); + + padding-right: 0.5em; + } + paper-toggle-button { --paper-toggle-button-checked-bar-color: var(--link-color); --paper-toggle-button-checked-button-color: var(--link-color);
diff --git a/polygerrit-ui/app/styles/themes/app-theme.ts b/polygerrit-ui/app/styles/themes/app-theme.ts index 8f69e26..8604d8c 100644 --- a/polygerrit-ui/app/styles/themes/app-theme.ts +++ b/polygerrit-ui/app/styles/themes/app-theme.ts
@@ -535,6 +535,16 @@ --paper-tooltip-background: var(--tooltip-background-color); --paper-tooltip-opacity: 1; --paper-tooltip-text-color: var(--tooltip-text-color); + + /* md-switch (colour originates from paper-toggle-button but generated by material-web using the hex */ + --switch-color-surface-container-highest: #e0e2ea; + --switch-color-on-surface: #181c22; + --switch-color-on-surface-variant: #404752; + --switch-color-outline: #707783; + --switch-color-primary: #005290; + --switch-color-on-primary: #ffffff; + --switch-color-primary-container: #0077ce; + --switch-color-on-primary-container: #ffffff; } @media screen and (max-width: 50em) { html {
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.ts b/polygerrit-ui/app/styles/themes/dark-theme.ts index ee43f15..3d18d3c 100644 --- a/polygerrit-ui/app/styles/themes/dark-theme.ts +++ b/polygerrit-ui/app/styles/themes/dark-theme.ts
@@ -287,6 +287,16 @@ /* rules applied to html */ background-color: var(--view-background-color); + + /* md-switch (colour originates from paper-toggle-button but generated by material-web using the hex */ + --switch-color-surface-container-highest: #31353b; + --switch-color-on-surface: #e0e2ea; + --switch-color-on-surface-variant: #c0c7d4; + --switch-color-outline: #8a919e; + --switch-color-primary: #a2c9ff; + --switch-color-on-primary: #00315b; + --switch-color-primary-container: #0077ce; + --switch-color-on-primary-container: #ffffff; } `;
diff --git a/polygerrit-ui/app/yarn.lock b/polygerrit-ui/app/yarn.lock index 5b7d9ca..ab5b397 100644 --- a/polygerrit-ui/app/yarn.lock +++ b/polygerrit-ui/app/yarn.lock
@@ -374,16 +374,6 @@ "@polymer/paper-styles" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/paper-toggle-button@^3.0.1": - version "3.0.1" - resolved "https://registry.yarnpkg.com/@polymer/paper-toggle-button/-/paper-toggle-button-3.0.1.tgz#7d855420f0df96e7f812a9f1bdcfbc5ab082e819" - integrity sha512-jadZB60fycT7YnSAH0H23LYo6/2HYmMZTtNr9LpdSIRFPLX6mqqxewex92cFz019bMKaRJgORn308hRlJo2u6A== - dependencies: - "@polymer/iron-checked-element-behavior" "^3.0.0-pre.26" - "@polymer/paper-behaviors" "^3.0.0-pre.27" - "@polymer/paper-styles" "^3.0.0-pre.26" - "@polymer/polymer" "^3.0.0" - "@polymer/paper-tooltip@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@polymer/paper-tooltip/-/paper-tooltip-3.0.1.tgz#cdbb06442737513f081437c6302842170ce714dc"