Merge changes I07519d1a,I451244bf,I59eec44f,Ib9f25f77 * changes: UI: Replace paper-card with md-filled-card UI: Replace paper-dropdown-menu with md-filled-select UI: Replace paper-icon-button with md-icon-button UI: Replace paper-fab with md-fab
diff --git a/Documentation/js_licenses.txt b/Documentation/js_licenses.txt index 135ee7a..cc6fc01 100644 --- a/Documentation/js_licenses.txt +++ b/Documentation/js_licenses.txt
@@ -834,14 +834,10 @@ * @polymer/neon-animation * @polymer/paper-behaviors * @polymer/paper-button -* @polymer/paper-card -* @polymer/paper-dropdown-menu -* @polymer/paper-fab * @polymer/paper-icon-button * @polymer/paper-input * @polymer/paper-item * @polymer/paper-listbox -* @polymer/paper-menu-button * @polymer/paper-tabs * @polymer/paper-tooltip @@ -885,51 +881,6 @@ ---- -[[Polymer-2016]] -Polymer-2016 - -* @polymer/iron-image - -[[Polymer-2016_license]] ----- -Copyright (c) 2016 The Polymer Project Authors. All rights reserved. - -This code may only be used under the BSD style license found at -http://polymer.github.io/LICENSE.txt The complete set of authors may be found at -http://polymer.github.io/AUTHORS.txt The complete set of contributors may be -found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as -part of the polymer project is also subject to an additional IP rights grant -found at http://polymer.github.io/PATENTS.txt - -Redistribution and use in source and binary forms, with or without -modification, are permitted provided that the following conditions are -met: - - * Redistributions of source code must retain the above copyright -notice, this list of conditions and the following disclaimer. - * Redistributions in binary form must reproduce the above -copyright notice, this list of conditions and the following disclaimer -in the documentation and/or other materials provided with the -distribution. - * Neither the name of Google Inc. nor the names of its -contributors may be used to endorse or promote products derived from -this software without specific prior written permission. - -THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - ----- - - [[Polymer-2017]] Polymer-2017
diff --git a/Documentation/licenses.txt b/Documentation/licenses.txt index ba04103..b686df5 100644 --- a/Documentation/licenses.txt +++ b/Documentation/licenses.txt
@@ -3439,14 +3439,10 @@ * @polymer/neon-animation * @polymer/paper-behaviors * @polymer/paper-button -* @polymer/paper-card -* @polymer/paper-dropdown-menu -* @polymer/paper-fab * @polymer/paper-icon-button * @polymer/paper-input * @polymer/paper-item * @polymer/paper-listbox -* @polymer/paper-menu-button * @polymer/paper-tabs * @polymer/paper-tooltip @@ -3490,51 +3486,6 @@ ---- -[[Polymer-2016]] -Polymer-2016 - -* @polymer/iron-image - -[[Polymer-2016_license]] ----- -Copyright (c) 2016 The Polymer Project Authors. All rights reserved. - -This code may only be used under the BSD style license found at -http://polymer.github.io/LICENSE.txt The complete set of authors may be found at -http://polymer.github.io/AUTHORS.txt The complete set of contributors may be -found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as -part of the polymer project is also subject to an additional IP rights grant -found at http://polymer.github.io/PATENTS.txt - -Redistribution and use in source and binary forms, with or without -modification, are permitted provided that the following conditions are -met: - - * Redistributions of source code must retain the above copyright -notice, this list of conditions and the following disclaimer. - * Redistributions in binary form must reproduce the above -copyright notice, this list of conditions and the following disclaimer -in the documentation and/or other materials provided with the -distribution. - * Neither the name of Google Inc. nor the names of its -contributors may be used to endorse or promote products derived from -this software without specific prior written permission. - -THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - ----- - - [[Polymer-2017]] Polymer-2017
diff --git a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.ts b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.ts deleted file mode 100644 index 0cad1ec..0000000 --- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.ts +++ /dev/null
@@ -1,22 +0,0 @@ -/** - * @license - * Copyright 2017 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ -import '@polymer/iron-iconset-svg/iron-iconset-svg'; -const $_documentContainer = document.createElement('template'); - -$_documentContainer.innerHTML = `<iron-iconset-svg name="gr-icons" size="24"> - <svg> - <defs> - <!-- This SVG is a copy from material.io https://fonts.google.com/icons?selected=Material+Icons&icon.query=swap_horiz--> - <g id="swapHoriz"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></g> - <!-- This SVG is a copy from material.io https://fonts.google.com/icons?selected=Material%20Icons%3Aplay_arrow--> - <g id="playArrow"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></g> - <!-- This SVG is a copy from material.io https://fonts.google.com/icons?selected=Material%20Icons%3Apause--> - <g id="pause"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></g> - </defs> - </svg> -</iron-iconset-svg>`; - -document.head.appendChild($_documentContainer.content);
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts index 909853a..46bf12d 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts
@@ -5,27 +5,22 @@ */ import '@material/web/button/text-button'; import '@material/web/checkbox/checkbox'; -import '@polymer/paper-card/paper-card'; -import '@polymer/paper-dropdown-menu/paper-dropdown-menu'; -import '@polymer/paper-fab/paper-fab'; -import '@polymer/paper-icon-button/paper-icon-button'; -import '@polymer/paper-item/paper-item'; -import '@polymer/paper-listbox/paper-listbox'; import './gr-overview-image'; import './gr-zoomed-image'; -import '../../../elements/shared/gr-icons/gr-icons'; - +import '@material/web/labs/card/filled-card'; +import '@material/web/fab/fab'; +import '@material/web/icon/icon'; +import '@material/web/iconbutton/icon-button'; +import '@material/web/select/filled-select'; +import '@material/web/select/select-option'; import {GrLibLoader} from '../../../elements/shared/gr-lib-loader/gr-lib-loader'; import {RESEMBLEJS_LIBRARY_CONFIG} from '../../../elements/shared/gr-lib-loader/resemblejs_config'; - import {css, html, LitElement, PropertyValues} from 'lit'; import {customElement, property, query, state} from 'lit/decorators.js'; import {ifDefined} from 'lit/directives/if-defined.js'; import {classMap} from 'lit/directives/class-map.js'; import {StyleInfo, styleMap} from 'lit/directives/style-map.js'; - import {Dimensions, fitToFrame, FrameConstrainer, Point, Rect} from './util'; -import {ValueChangedEvent} from '../../../types/events'; import {fire} from '../../../utils/event-util'; import {ImageDiffAction} from '../../../api/diff'; @@ -195,16 +190,20 @@ gr-zoomed-image.revision { border-color: var(--revision-image-border-color, rgb(170, 242, 170)); } + md-icon[filled] { + font-variation-settings: 'FILL' 1; + } #automatic-blink-button { position: absolute; right: var(--spacing-xl); bottom: var(--spacing-xl); opacity: 0; transition: opacity 200ms ease; - --paper-fab-background: var(--primary-button-background-color); - --paper-fab-keyboard-focus-background: var( + --md-sys-color-primary-container: var( --primary-button-background-color ); + --md-sys-color-on-primary-container: #ffffff; + --md-fab-container-shape: 50px; } #automatic-blink-button.show, #automatic-blink-button:focus-visible { @@ -242,6 +241,9 @@ padding: var(--spacing-xxs) var(--spacing-s); } .controls { + font-family: var(--header-font-family); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); grid-column-start: 2; flex-grow: 0; display: flex; @@ -249,6 +251,9 @@ align-self: flex-start; margin: var(--spacing-m); padding-bottom: var(--spacing-xl); + --md-sys-color-surface-container-highest: var( + --card-surface-container-highest + ); } md-text-button { padding: var(--spacing-m); @@ -276,22 +281,28 @@ flex-grow: 1; margin: 0; /* - The floating action button below overlaps part of the version buttons. - This min-width ensures the button text still appears somewhat balanced. - */ + The floating action button below overlaps part of the version buttons. + This min-width ensures the button text still appears somewhat balanced. + */ min-width: 7rem; } - #version-switcher paper-fab { + #version-switcher md-fab { /* Round button overlaps Base and Revision buttons. */ z-index: 1; margin: 0 -12px; /* Styled as an outlined button. */ color: var(--primary-button-background-color); border: 1px solid var(--primary-button-background-color); - --paper-fab-background: var(--primary-background-color); - --paper-fab-keyboard-focus-background: var( - --primary-background-color + border-radius: 50%; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); + --md-sys-color-primary-container: var(--primary-background-color); + --md-sys-color-on-primary-container: var( + --primary-button-background-color ); + --md-fab-container-shape: 50px; + --md-fab-container-height: 40px; + --md-fab-container-width: 40px; } #version-explanation { color: var(--deemphasized-text-color); @@ -307,13 +318,23 @@ margin-top: var(--spacing-m); } #zoom-control { - margin: 0 var(--spacing-xl); + margin: var(--spacing-m) var(--spacing-xl) 0; } - paper-item { + md-filled-select::part(field) { cursor: pointer; } - paper-item:hover { - background-color: var(--hover-background-color); + md-filled-select { + --md-sys-color-surface-container: var(--select-surface-container); + --md-sys-color-surface-container-highest: var( + --select-surface-container-highest + ); + --md-sys-color-on-surface: var(--select-on-surface); + --md-sys-color-on-surface-variant: var(--select-on-surface-variant); + --md-sys-color-primary: var(--select-primary); + --md-sys-color-secondary-container: var(--select-secondary-container); + --md-sys-color-on-secondary-container: var( + --select-on-secondary-container + ); } #follow-mouse { margin: var(--spacing-m) var(--spacing-xl); @@ -346,6 +367,7 @@ border-color: var(--outline-color-focus); } .color-picker-button .color { + display: flex; border: 1px solid var(--border-color); border-radius: 50%; width: 100%; @@ -387,11 +409,12 @@ selected, })} > - <paper-icon-button + <md-icon-button class="color" + touch-target="none" style=${styleMap({backgroundColor: color})} @click=${colorPicked} - ></paper-icon-button> + > </div> `; } @@ -404,11 +427,11 @@ selected: this.checkerboardSelected, })} > - <paper-icon-button - class="color checkerboard" - @click=${this.pickCheckerboard} - > - </paper-icon-button> + <md-icon-button + class="color checkerboard" + touch-target="none" + @click=${this.pickCheckerboard} + > </div> `; } @@ -475,15 +498,17 @@ > Base </md-text-button> - <paper-fab + <md-fab mini - icon="gr-icons:swapHoriz" title=${this.baseSelected ? 'switch to Revision version' : 'switch to Base version'} + variant="primary" + touch-target="none" @click=${this.manualBlink} > - </paper-fab> + <md-icon slot="icon" filled>swap_horiz</md-icon> + </md-fab> <md-text-button class=${classMap(rightClasses)} touch-target="none" @@ -531,22 +556,24 @@ `; const zoomControl = html` - <paper-dropdown-menu id="zoom-control" label="Zoom"> - <paper-listbox - slot="dropdown-content" - selected="fit" - .attrForSelected=${'value'} - @selected-changed=${this.zoomControlChanged} - > - ${this.zoomLevels.map( - zoomLevel => html` - <paper-item value=${zoomLevel}> + <md-filled-select + id="zoom-control" + label="Zoom" + @change=${this.zoomControlChanged} + > + ${this.zoomLevels.map( + zoomLevel => html` + <md-select-option + ?selected=${zoomLevel === 'fit'} + value=${zoomLevel} + > + <div slot="headline"> ${zoomLevel === 'fit' ? 'Fit' : `${zoomLevel * 100}%`} - </paper-item> - ` - )} - </paper-listbox> - </paper-dropdown-menu> + </div> + </md-select-option> + ` + )} + </md-filled-select> `; const followMouse = html` @@ -596,41 +623,21 @@ `; const automaticBlink = html` - <paper-fab + <md-fab id="automatic-blink-button" class=${classMap({show: this.automaticBlinkShown})} title="Automatic blink" - icon="gr-icons:${this.automaticBlink ? 'pause' : 'playArrow'}" + variant="primary" + touch-target="none" @click=${this.toggleAutomaticBlink} > - </paper-fab> - `; - - // To pass CSS mixins for @apply to Polymer components, they need to appear - // in <style> inside the template. - /* eslint-disable lit/prefer-static-styles */ - const customStyle = html` - <style> - /* prettier formatter removes semi-colons after css mixins. */ - /* prettier-ignore */ - paper-item { - --paper-item-min-height: 48; - --paper-item: { - min-height: 48px; - padding: 0 var(--spacing-xl); - }; - --paper-item-focused-before: { - background-color: var(--selection-background-color); - }; - --paper-item-focused: { - background-color: var(--selection-background-color); - }; - } - </style> + <md-icon slot="icon" filled + >${this.automaticBlink ? 'pause' : 'play_arrow'}</md-icon + > + </md-fab> `; return html` - ${customStyle} <div class="imageArea" @mousemove=${this.mousemoveImageArea} @@ -662,10 +669,10 @@ ${this.imageSize.width} x ${this.imageSize.height} </div> - <paper-card class="controls"> + <md-filled-card class="controls"> ${versionSwitcher} ${highlightSwitcher} ${overviewImage} ${zoomControl} ${!this.scaledSelected ? followMouse : ''} ${backgroundPicker} - </paper-card> + </md-filled-card> `; } @@ -791,8 +798,8 @@ }); } - zoomControlChanged(event: ValueChangedEvent<string>) { - const scaleString = event.detail.value; + zoomControlChanged(event: Event) { + const scaleString = (event.target as HTMLSelectElement).value; if (!scaleString) return; if (scaleString === 'fit') { this.scaledSelected = true;
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer_test.ts b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer_test.ts new file mode 100644 index 0000000..2ea26af --- /dev/null +++ b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer_test.ts
@@ -0,0 +1,118 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +import '../../../test/common-test-setup'; +import './gr-image-viewer'; +import {assert, fixture, html} from '@open-wc/testing'; +import {GrImageViewer} from './gr-image-viewer'; + +suite('gr-image-viewer tests', () => { + let element: GrImageViewer; + + setup(async () => { + element = await fixture<GrImageViewer>( + html`<gr-image-viewer></gr-image-viewer>` + ); + await element.updateComplete; + }); + + test('renders', () => { + assert.shadowDom.equal( + element, + /* HTML */ ` + <div class="imageArea"> + <gr-zoomed-image class="base" style="cursor:pointer;"> + <div id="source-plus-highlight-container"> + <img + class="checkerboard" + id="source-image" + src="" + style="background-color:;" + /> + <img + id="highlight-image" + style="opacity:0;pointer-events:none;" + /> + </div> + </gr-zoomed-image> + <div id="spacer" style="width:0px;height:0px;"></div> + </div> + <div class="dimensions">0 x 0</div> + <md-filled-card class="controls"> + <div id="version-explanation">This file is being deleted.</div> + <gr-overview-image> + <img class="checkerboard" src="" style="background-color:;" /> + </gr-overview-image> + <md-filled-select id="zoom-control" label="Zoom"> + <md-select-option + data-aria-selected="true" + md-menu-item="" + selected="" + tabindex="0" + value="fit" + > + <div slot="headline">Fit</div> + </md-select-option> + <md-select-option md-menu-item="" tabindex="-1" value="1"> + <div slot="headline">100%</div> + </md-select-option> + <md-select-option md-menu-item="" tabindex="-1" value="1.25"> + <div slot="headline">125%</div> + </md-select-option> + <md-select-option md-menu-item="" tabindex="-1" value="1.5"> + <div slot="headline">150%</div> + </md-select-option> + <md-select-option md-menu-item="" tabindex="-1" value="1.75"> + <div slot="headline">175%</div> + </md-select-option> + <md-select-option md-menu-item="" tabindex="-1" value="2"> + <div slot="headline">200%</div> + </md-select-option> + </md-filled-select> + <div class="color-picker"> + <div class="label">Background</div> + <div class="options"> + <div class="color-picker-button selected"> + <md-icon-button + class="checkerboard color" + touch-target="none" + value="" + > + </md-icon-button> + </div> + <div class="color-picker-button"> + <md-icon-button + class="color" + style="background-color:#fff;" + touch-target="none" + value="" + > + </md-icon-button> + </div> + <div class="color-picker-button"> + <md-icon-button + class="color" + style="background-color:#000;" + touch-target="none" + value="" + > + </md-icon-button> + </div> + <div class="color-picker-button"> + <md-icon-button + class="color" + style="background-color:#aaa;" + touch-target="none" + value="" + > + </md-icon-button> + </div> + </div> + </div> + </md-filled-card> + ` + ); + }); +});
diff --git a/polygerrit-ui/app/node_modules_licenses/licenses.ts b/polygerrit-ui/app/node_modules_licenses/licenses.ts index f413d81..0911f97 100644 --- a/polygerrit-ui/app/node_modules_licenses/licenses.ts +++ b/polygerrit-ui/app/node_modules_licenses/licenses.ts
@@ -56,12 +56,6 @@ sharedLicenseFile: 'polymer-2015.txt', }; - public static Polymer2016: LicenseInfo = { - name: 'Polymer-2016', - type: LicenseTypes.Bsd3, - sharedLicenseFile: 'polymer-2016.txt', - }; - public static Polymer2017: LicenseInfo = { name: 'Polymer-2017', type: LicenseTypes.Bsd3, @@ -181,10 +175,6 @@ license: SharedLicenses.Polymer2015, }, { - name: '@polymer/iron-image', - license: SharedLicenses.Polymer2016, - }, - { name: '@polymer/iron-input', license: SharedLicenses.Polymer2015, }, @@ -225,18 +215,6 @@ license: SharedLicenses.Polymer2015, }, { - name: '@polymer/paper-card', - license: SharedLicenses.Polymer2015, - }, - { - name: '@polymer/paper-dropdown-menu', - license: SharedLicenses.Polymer2015, - }, - { - name: '@polymer/paper-fab', - license: SharedLicenses.Polymer2015, - }, - { name: '@polymer/paper-icon-button', license: SharedLicenses.Polymer2015, }, @@ -253,10 +231,6 @@ license: SharedLicenses.Polymer2015, }, { - name: '@polymer/paper-menu-button', - license: SharedLicenses.Polymer2015, - }, - { name: '@polymer/paper-ripple', license: SharedLicenses.Polymer2014, },
diff --git a/polygerrit-ui/app/node_modules_licenses/licenses/polymer-2016.txt b/polygerrit-ui/app/node_modules_licenses/licenses/polymer-2016.txt deleted file mode 100644 index 077af5e..0000000 --- a/polygerrit-ui/app/node_modules_licenses/licenses/polymer-2016.txt +++ /dev/null
@@ -1,34 +0,0 @@ -Copyright (c) 2016 The Polymer Project Authors. All rights reserved. - -This code may only be used under the BSD style license found at -http://polymer.github.io/LICENSE.txt The complete set of authors may be found at -http://polymer.github.io/AUTHORS.txt The complete set of contributors may be -found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as -part of the polymer project is also subject to an additional IP rights grant -found at http://polymer.github.io/PATENTS.txt - -Redistribution and use in source and binary forms, with or without -modification, are permitted provided that the following conditions are -met: - - * Redistributions of source code must retain the above copyright -notice, this list of conditions and the following disclaimer. - * Redistributions in binary form must reproduce the above -copyright notice, this list of conditions and the following disclaimer -in the documentation and/or other materials provided with the -distribution. - * Neither the name of Google Inc. nor the names of its -contributors may be used to endorse or promote products derived from -this software without specific prior written permission. - -THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/polygerrit-ui/app/package.json b/polygerrit-ui/app/package.json index bca4f76..dc2aee8 100644 --- a/polygerrit-ui/app/package.json +++ b/polygerrit-ui/app/package.json
@@ -10,13 +10,9 @@ "@polymer/iron-autogrow-textarea": "^3.0.3", "@polymer/iron-dropdown": "^3.0.1", "@polymer/iron-fit-behavior": "^3.1.0", - "@polymer/iron-iconset-svg": "^3.0.1", "@polymer/iron-input": "^3.0.1", "@polymer/iron-selector": "^3.0.1", "@polymer/paper-button": "^3.0.1", - "@polymer/paper-card": "^3.0.1", - "@polymer/paper-dropdown-menu": "^3.2.0", - "@polymer/paper-fab": "^3.0.1", "@polymer/paper-input": "^3.2.1", "@polymer/paper-item": "^3.0.1", "@polymer/paper-listbox": "^3.0.1",
diff --git a/polygerrit-ui/app/styles/themes/app-theme.ts b/polygerrit-ui/app/styles/themes/app-theme.ts index b327318..06832c1 100644 --- a/polygerrit-ui/app/styles/themes/app-theme.ts +++ b/polygerrit-ui/app/styles/themes/app-theme.ts
@@ -536,12 +536,24 @@ --paper-tooltip-opacity: 1; --paper-tooltip-text-color: var(--tooltip-text-color); + /* md-filled-card (colours originate from paper-card) */ + --card-surface-container-highest: #f8f9fa; + /* md-checkbox (colours from paper-checkbox but adapted using material/web theme selector) */ --checkbox-primary: #273a9f; --checkbox-on-primary: #ffffff; --checkbox-on-surface: #1a1b22; --checkbox-on-surface-variant: #3f4948; + /* md-filled-select (colour originates from paper-listbox but generated by material-web using the hex */ + --select-surface-container: #f8f9fa; + --select-surface-container-highest: #f8f9fa; + --select-on-surface: #1c1b1b; + --select-on-surface-variant: #444749; + --select-primary: #5c5f60; + --select-secondary-container: #e5e3e3; + --select-on-secondary-container: #484949; + /* 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;
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.ts b/polygerrit-ui/app/styles/themes/dark-theme.ts index 6e71f0f..97e3601 100644 --- a/polygerrit-ui/app/styles/themes/dark-theme.ts +++ b/polygerrit-ui/app/styles/themes/dark-theme.ts
@@ -288,12 +288,24 @@ /* rules applied to html */ background-color: var(--view-background-color); + /* md-filled-card (colours originate from paper-card) */ + --card-surface-container-highest: #2f3034; + /* md-checkbox (colours from paper-checkbox but adapted using material/web theme selector) */ --checkbox-primary: #bac3ff; --checkbox-on-primary: #08218a; --checkbox-on-surface: #e3e1ea; --checkbox-on-surface-variant: #c5c5d4; + /* md-filled-select (colour originates from paper-listbox but generated by material-web using the hex */ + --select-surface-container: #201f20; + --select-surface-container-highest: #2f3034; + --select-on-surface: #e5e2e1; + --select-on-surface-variant: #c7c6cb; + --select-primary: #c7c6cb; + --select-secondary-container: #3d3d3f; + --select-on-secondary-container: #d2d0d2; + /* 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;
diff --git a/polygerrit-ui/app/yarn.lock b/polygerrit-ui/app/yarn.lock index 94e6ca5..2368c9f 100644 --- a/polygerrit-ui/app/yarn.lock +++ b/polygerrit-ui/app/yarn.lock
@@ -95,7 +95,7 @@ "@polymer/iron-validatable-behavior" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/iron-dropdown@^3.0.0-pre.26", "@polymer/iron-dropdown@^3.0.1": +"@polymer/iron-dropdown@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@polymer/iron-dropdown/-/iron-dropdown-3.0.1.tgz#c573faa1a08c179d201ae877c1c726018314bff3" integrity sha512-22yLhepfcKjuQMfFmRHi/9MPKTqkzgRrmWWW0P5uqK++xle53k2QBO5VYUAYiCN3ZcxIi9lEhZ9YWGeQj2JBig== @@ -135,7 +135,7 @@ "@polymer/iron-meta" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/iron-iconset-svg@^3.0.0-pre.26", "@polymer/iron-iconset-svg@^3.0.1": +"@polymer/iron-iconset-svg@^3.0.0-pre.26": version "3.0.1" resolved "https://registry.yarnpkg.com/@polymer/iron-iconset-svg/-/iron-iconset-svg-3.0.1.tgz#568d6e7dbc120299dae63be3600aeba0d30ddbea" integrity sha512-XNwURbNHRw6u2fJe05O5fMYye6GSgDlDqCO+q6K1zAnKIrpgZwf2vTkBd5uCcZwsN0FyCB3mvNZx4jkh85dRDw== @@ -143,13 +143,6 @@ "@polymer/iron-meta" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/iron-image@^3.0.0-pre.26": - version "3.0.2" - resolved "https://registry.yarnpkg.com/@polymer/iron-image/-/iron-image-3.0.2.tgz#425ee6269634e024dbea726a91a61724ae4402b6" - integrity sha512-VyYtnewGozDb5sUeoLR1OvKzlt5WAL6b8Od7fPpio5oYL+9t061/nTV8+ZMrpMgF2WgB0zqM/3K53o3pbK5v8Q== - dependencies: - "@polymer/polymer" "^3.0.0" - "@polymer/iron-input@^3.0.0-pre.26", "@polymer/iron-input@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@polymer/iron-input/-/iron-input-3.0.1.tgz#dc866a25107f9b38d9ca4512dd9a3e51b78b4915" @@ -237,44 +230,6 @@ "@polymer/paper-styles" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/paper-card@^3.0.1": - version "3.0.1" - resolved "https://registry.yarnpkg.com/@polymer/paper-card/-/paper-card-3.0.1.tgz#fb5960b3e55fab56d20b7c1c3dee08f0d052ff2a" - integrity sha512-ZYzfA4kzP9niRO22wSOBL2RS+URZNUP5XmUCwN91fYPIGO0Qbimh7d1O2HpJD4cRCZhvGYn2CJMDMVmDm35vIg== - dependencies: - "@polymer/iron-flex-layout" "^3.0.0-pre.26" - "@polymer/iron-image" "^3.0.0-pre.26" - "@polymer/paper-styles" "^3.0.0-pre.26" - "@polymer/polymer" "^3.0.0" - -"@polymer/paper-dropdown-menu@^3.2.0": - version "3.2.0" - resolved "https://registry.yarnpkg.com/@polymer/paper-dropdown-menu/-/paper-dropdown-menu-3.2.0.tgz#17f507ef864dc18365a92e256bde628c2d352956" - integrity sha512-2ohwSHF+RLSK6kA0UkkMiMQF6EZcaEYWAA25kfisI6DWie7yozKrpQNsqvwfOEHU6DdDMIotrOtH1TM88YS8Zg== - dependencies: - "@polymer/iron-a11y-keys-behavior" "^3.0.0-pre.26" - "@polymer/iron-form-element-behavior" "^3.0.0-pre.26" - "@polymer/iron-icon" "^3.0.0-pre.26" - "@polymer/iron-iconset-svg" "^3.0.0-pre.26" - "@polymer/iron-validatable-behavior" "^3.0.0-pre.26" - "@polymer/paper-behaviors" "^3.0.0-pre.27" - "@polymer/paper-input" "^3.1.0" - "@polymer/paper-menu-button" "^3.1.0" - "@polymer/paper-ripple" "^3.0.0-pre.26" - "@polymer/paper-styles" "^3.0.0-pre.26" - "@polymer/polymer" "^3.3.1" - -"@polymer/paper-fab@^3.0.1": - version "3.0.1" - resolved "https://registry.yarnpkg.com/@polymer/paper-fab/-/paper-fab-3.0.1.tgz#2636359e7fb70dd5a549ed92ba9b3bdb9ff86bf8" - integrity sha512-LO8ckgd72MnAtC1WiPd5CFR27WC/dEuY/lOIQuHYdEjwI62+iiV7Bmr7uoQ9wvvV71qMFdMIOyq/03KklsuAzw== - dependencies: - "@polymer/iron-flex-layout" "^3.0.0-pre.26" - "@polymer/iron-icon" "^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-icon-button@^3.0.0-pre.26": version "3.0.2" resolved "https://registry.yarnpkg.com/@polymer/paper-icon-button/-/paper-icon-button-3.0.2.tgz#a1254faadc2c8dd135ce1ae33bcc161a94c31f65" @@ -285,7 +240,7 @@ "@polymer/paper-styles" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/paper-input@^3.1.0", "@polymer/paper-input@^3.2.1": +"@polymer/paper-input@^3.2.1": version "3.2.1" resolved "https://registry.yarnpkg.com/@polymer/paper-input/-/paper-input-3.2.1.tgz#0fd0d30de3b43ba7d2c8d5d76f870d257b667ebf" integrity sha512-6ghgwQKM6mS0hAQxQqj+tkeEY1VUBqAsrasAm8V5RpNcfSWQC/hhRFxU0beGuKTAhndzezDzWYP6Zz4b8fExGg== @@ -318,19 +273,6 @@ "@polymer/paper-styles" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/paper-menu-button@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@polymer/paper-menu-button/-/paper-menu-button-3.1.0.tgz#3eb2fb88ba3cdaa4c39be6ae3530efa40b1eccf3" - integrity sha512-q0G0/rvYD/FFmIBMGCQWjfXzRqwFw9+WHSYV4uOQzM1Ln8LMXSAd+2CENsbVwtMh6fmBePj15ZlU8SM2dt1WDQ== - dependencies: - "@polymer/iron-a11y-keys-behavior" "^3.0.0-pre.26" - "@polymer/iron-behaviors" "^3.0.0-pre.26" - "@polymer/iron-dropdown" "^3.0.0-pre.26" - "@polymer/iron-fit-behavior" "^3.1.0" - "@polymer/neon-animation" "^3.0.0-pre.26" - "@polymer/paper-styles" "^3.0.0-pre.26" - "@polymer/polymer" "^3.0.0" - "@polymer/paper-ripple@^3.0.0-pre.26": version "3.0.2" resolved "https://registry.yarnpkg.com/@polymer/paper-ripple/-/paper-ripple-3.0.2.tgz#52566f5ee367942022ceaa991368105d21403de5" @@ -372,7 +314,7 @@ "@polymer/paper-styles" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/polymer@3.5.2", "@polymer/polymer@^3.0.0", "@polymer/polymer@^3.0.2", "@polymer/polymer@^3.0.5", "@polymer/polymer@^3.3.1": +"@polymer/polymer@3.5.2", "@polymer/polymer@^3.0.0", "@polymer/polymer@^3.0.2", "@polymer/polymer@^3.0.5": version "3.5.2" resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-3.5.2.tgz#af0e7e13976df53ace6728e841121c36aca351de" integrity sha512-fWwImY/UH4bb2534DVSaX+Azs2yKg8slkMBHOyGeU2kKx7Xmxp6Lee0jP8p6B3d7c1gFUPB2Z976dTUtX81pQA==