Revert "gr-key-binding-display to lit element"
This reverts commit 9c0c0553b4b5106cd9e914c23a5eb192ad125f98.
Reason for revert: This is a temporary revert. Internal google build
rules must be updated before submit.
Change-Id: I9480cd13179c0fcaef0dd8f9fd7237e92b8d7483
diff --git a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.css.ts b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.css.ts
deleted file mode 100644
index ccba289..0000000
--- a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.css.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * 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.
- */
-import {css} from 'lit-element';
-
-export const cssTemplate = css`
- .key {
- background-color: var(--chip-background-color);
- color: var(--primary-text-color);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- display: inline-block;
- font-weight: var(--font-weight-bold);
- padding: var(--spacing-xxs) var(--spacing-m);
- text-align: center;
- }
-`;
diff --git a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.ts b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.ts
index 091684f..796a167 100644
--- a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.ts
+++ b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.ts
@@ -14,11 +14,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {html} from 'lit-html';
-import {GrLitElement} from '../../lit/gr-lit-element';
-import {customElement, property} from 'lit-element';
-import {cssTemplate} from './gr-key-binding-display.css';
-import {sharedStyles} from '../../../styles/shared-styles';
+import '../../../styles/shared-styles';
+import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
+import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
+import {PolymerElement} from '@polymer/polymer/polymer-element';
+import {htmlTemplate} from './gr-key-binding-display_html';
+import {customElement, property} from '@polymer/decorators';
declare global {
interface HTMLElementTagNameMap {
@@ -27,30 +28,21 @@
}
@customElement('gr-key-binding-display')
-export class GrKeyBindingDisplay extends GrLitElement {
- static get styles() {
- return [sharedStyles, cssTemplate];
- }
-
- render() {
- const items = this.binding.map((binding, index) => [
- index > 0 ? html` or ` : html``,
- this._computeModifiers(binding).map(
- modifier => html`<span class="key modifier">${modifier}</span> `
- ),
- html`<span class="key">${this._computeKey(binding)}</span>`,
- ]);
- return html`${items}`;
+export class GrKeyBindingDisplay extends GestureEventListeners(
+ LegacyElementMixin(PolymerElement)
+) {
+ static get template() {
+ return htmlTemplate;
}
@property({type: Array})
binding: string[][] = [];
- _computeModifiers(binding: string[]) {
+ _computeModifiers(binding: string[][]) {
return binding.slice(0, binding.length - 1);
}
- _computeKey(binding: string[]) {
+ _computeKey(binding: string[][]) {
return binding[binding.length - 1];
}
}
diff --git a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_html.ts b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_html.ts
new file mode 100644
index 0000000..251e30f
--- /dev/null
+++ b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_html.ts
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (C) 2020 The Android Open Source Project
+ *
+ * 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.
+ */
+import {html} from '@polymer/polymer/lib/utils/html-tag';
+
+export const htmlTemplate = html`
+ <style include="shared-styles">
+ .key {
+ background-color: var(--chip-background-color);
+ color: var(--primary-text-color);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ display: inline-block;
+ font-weight: var(--font-weight-bold);
+ padding: var(--spacing-xxs) var(--spacing-m);
+ text-align: center;
+ }
+ </style>
+ <template is="dom-repeat" items="[[binding]]">
+ <template is="dom-if" if="[[index]]">
+ or
+ </template>
+ <template is="dom-repeat" items="[[_computeModifiers(item)]]" as="modifier">
+ <span class="key modifier">[[modifier]]</span>
+ </template>
+ <span class="key">[[_computeKey(item)]]</span>
+ </template>
+`;
diff --git a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.ts b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.js
similarity index 86%
rename from polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.ts
rename to polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.js
index 875cde8..0c25e6e 100644
--- a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.js
@@ -17,12 +17,11 @@
import '../../../test/common-test-setup-karma.js';
import './gr-key-binding-display.js';
-import {GrKeyBindingDisplay} from './gr-key-binding-display.js';
const basicFixture = fixtureFromElement('gr-key-binding-display');
suite('gr-key-binding-display tests', () => {
- let element: GrKeyBindingDisplay;
+ let element;
setup(() => {
element = basicFixture.instantiate();
@@ -46,10 +45,10 @@
test('key with modifiers', () => {
assert.deepEqual(element._computeModifiers(['Ctrl', 'x']), ['Ctrl']);
- assert.deepEqual(element._computeModifiers(['Shift', 'Meta', 'x']), [
- 'Shift',
- 'Meta',
- ]);
+ assert.deepEqual(
+ element._computeModifiers(['Shift', 'Meta', 'x']),
+ ['Shift', 'Meta']);
});
});
});
+
diff --git a/polygerrit-ui/app/styles/shared-styles.ts b/polygerrit-ui/app/styles/shared-styles.ts
index c2baaa9..695ae24 100644
--- a/polygerrit-ui/app/styles/shared-styles.ts
+++ b/polygerrit-ui/app/styles/shared-styles.ts
@@ -15,8 +15,6 @@
* limitations under the License.
*/
-import {css} from 'lit-element';
-
// Mark the file as a module. Otherwise typescript assumes this is a script
// and $_documentContainer is a global variable.
// See: https://www.typescriptlang.org/docs/handbook/modules.html
@@ -24,276 +22,189 @@
const $_documentContainer = document.createElement('template');
-export const sharedStyles = css`
- /* CSS reset */
-
- html,
- body,
- button,
- div,
- span,
- applet,
- object,
- iframe,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p,
- blockquote,
- pre,
- a,
- abbr,
- acronym,
- address,
- big,
- cite,
- code,
- del,
- dfn,
- em,
- img,
- ins,
- kbd,
- q,
- s,
- samp,
- small,
- strike,
- strong,
- sub,
- sup,
- tt,
- var,
- b,
- u,
- i,
- center,
- dl,
- dt,
- dd,
- ol,
- ul,
- li,
- fieldset,
- form,
- label,
- legend,
- table,
- caption,
- tbody,
- tfoot,
- thead,
- tr,
- th,
- td,
- article,
- aside,
- canvas,
- details,
- embed,
- figure,
- figcaption,
- footer,
- header,
- hgroup,
- main,
- menu,
- nav,
- output,
- ruby,
- section,
- summary,
- time,
- mark,
- audio,
- video {
- border: 0;
- box-sizing: border-box;
- font-size: 100%;
- font: inherit;
- margin: 0;
- padding: 0;
- vertical-align: baseline;
- }
- *::after,
- *::before {
- box-sizing: border-box;
- }
- input {
- background-color: var(--background-color-primary);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- box-sizing: border-box;
- color: var(--primary-text-color);
- margin: 0;
- padding: var(--spacing-s);
- }
- iron-autogrow-textarea {
- background-color: inherit;
- color: var(--primary-text-color);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- padding: 0;
- box-sizing: border-box;
- /* iron-autogrow-textarea has a "-webkit-appearance: textarea" :host
- css rule, which prevents overriding the border color. Clear that. */
- -webkit-appearance: none;
-
- --iron-autogrow-textarea: {
- box-sizing: border-box;
- padding: var(--spacing-s);
- }
- }
- a {
- color: var(--link-color);
- }
- input,
- textarea,
- select,
- button {
- font: inherit;
- }
- ol,
- ul {
- list-style: none;
- }
- blockquote,
- q {
- quotes: none;
- }
- blockquote:before,
- blockquote:after,
- q:before,
- q:after {
- content: '';
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
-
- /* Fonts */
-
- .font-normal {
- font-size: var(--font-size-normal);
- font-weight: var(--font-weight-normal);
- line-height: var(--line-height-normal);
- }
- .font-small {
- font-size: var(--font-size-small);
- font-weight: var(--font-weight-normal);
- line-height: var(--line-height-small);
- }
- .heading-1 {
- font-family: var(--header-font-family);
- font-size: var(--font-size-h1);
- font-weight: var(--font-weight-h1);
- line-height: var(--line-height-h1);
- }
- .heading-2 {
- font-family: var(--header-font-family);
- font-size: var(--font-size-h2);
- font-weight: var(--font-weight-h2);
- line-height: var(--line-height-h2);
- }
- .heading-3 {
- font-family: var(--header-font-family);
- font-size: var(--font-size-h3);
- font-weight: var(--font-weight-h3);
- line-height: var(--line-height-h3);
- }
- iron-icon {
- color: var(--deemphasized-text-color);
- --iron-icon-height: 20px;
- --iron-icon-width: 20px;
- }
-
- /* Stopgap solution until we remove hidden$ attributes. */
-
- :host([hidden]),
- [hidden] {
- display: none !important;
- }
- .separator {
- border-left: 1px solid var(--border-color);
- height: 20px;
- margin: 0 8px;
- }
- .separator.transparent {
- border-color: transparent;
- }
- paper-toggle-button {
- --paper-toggle-button-checked-bar-color: var(--link-color);
- --paper-toggle-button-checked-button-color: var(--link-color);
- }
- paper-tabs {
- font-size: var(--font-size-h3);
- font-weight: var(--font-weight-h3);
- line-height: var(--line-height-h3);
- --paper-font-common-base: {
- font-family: var(--header-font-family);
- -webkit-font-smoothing: initial;
- }
- --paper-tab-content-focused: {
- /* paper-tabs uses 700 here, which can look awkward */
- font-weight: var(--font-weight-h3);
- }
- --paper-tab-content-unselected: {
- /* paper-tabs uses 0.8 here, but we want to control the color directly */
- opacity: 1;
- color: var(--deemphasized-text-color);
- }
- }
- iron-autogrow-textarea {
- /** This is needed for firefox */
- --iron-autogrow-textarea_-_white-space: pre-wrap;
- }
- strong {
- font-weight: var(--font-weight-bold);
- }
-
- .assistive-tech-only {
- user-select: none;
- clip: rect(1px, 1px, 1px, 1px);
- height: 1px;
- margin: 0;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
- z-index: -1000;
- }
-
- /** BEGIN: loading spiner */
- .loadingSpin {
- border: 2px solid var(--disabled-button-background-color);
- border-top: 2px solid var(--primary-button-background-color);
- border-radius: 50%;
- width: 10px;
- height: 10px;
- animation: spin 2s linear infinite;
- margin-right: var(--spacing-s);
- }
- @keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- /** END: loading spiner */
-`;
-
$_documentContainer.innerHTML = `<dom-module id="shared-styles">
<template>
<style>
- ${sharedStyles.cssText}
+
+ /* CSS reset */
+
+ html, body, button, div, span, applet, object, iframe, h1, h2, h3,
+ h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,
+ code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub,
+ sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
+ label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
+ aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
+ main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+ border: 0;
+ box-sizing: border-box;
+ font-size: 100%;
+ font: inherit;
+ margin: 0;
+ padding: 0;
+ vertical-align: baseline;
+ }
+ *::after,
+ *::before {
+ box-sizing: border-box;
+ }
+ input {
+ background-color: var(--background-color-primary);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ box-sizing: border-box;
+ color: var(--primary-text-color);
+ margin: 0;
+ padding: var(--spacing-s);
+ }
+ iron-autogrow-textarea {
+ background-color: inherit;
+ color: var(--primary-text-color);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ padding: 0;
+ box-sizing: border-box;
+ /* iron-autogrow-textarea has a "-webkit-appearance: textarea" :host
+ css rule, which prevents overriding the border color. Clear that. */
+ -webkit-appearance: none;
+
+ --iron-autogrow-textarea: {
+ box-sizing: border-box;
+ padding: var(--spacing-s);
+ };
+ }
+ a {
+ color: var(--link-color);
+ }
+ input,
+ textarea,
+ select,
+ button {
+ font: inherit;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+
+ /* Fonts */
+
+ .font-normal {
+ font-size: var(--font-size-normal);
+ font-weight: var(--font-weight-normal);
+ line-height: var(--line-height-normal);
+ }
+ .font-small {
+ font-size: var(--font-size-small);
+ font-weight: var(--font-weight-normal);
+ line-height: var(--line-height-small);
+ }
+ .heading-1 {
+ font-family: var(--header-font-family);
+ font-size: var(--font-size-h1);
+ font-weight: var(--font-weight-h1);
+ line-height: var(--line-height-h1);
+ }
+ .heading-2 {
+ font-family: var(--header-font-family);
+ font-size: var(--font-size-h2);
+ font-weight: var(--font-weight-h2);
+ line-height: var(--line-height-h2);
+ }
+ .heading-3 {
+ font-family: var(--header-font-family);
+ font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
+ }
+ iron-icon {
+ color: var(--deemphasized-text-color);
+ --iron-icon-height: 20px;
+ --iron-icon-width: 20px;
+ }
+
+ /* Stopgap solution until we remove hidden$ attributes. */
+
+ :host([hidden]),
+ [hidden] {
+ display: none !important;
+ }
+ .separator {
+ border-left: 1px solid var(--border-color);
+ height: 20px;
+ margin: 0 8px;
+ }
+ .separator.transparent {
+ border-color: transparent;
+ }
+ paper-toggle-button {
+ --paper-toggle-button-checked-bar-color: var(--link-color);
+ --paper-toggle-button-checked-button-color: var(--link-color);
+ }
+ paper-tabs {
+ font-size: var(--font-size-h3);
+ font-weight: var(--font-weight-h3);
+ line-height: var(--line-height-h3);
+ --paper-font-common-base: {
+ font-family: var(--header-font-family);
+ -webkit-font-smoothing: initial;
+ };
+ --paper-tab-content-focused: {
+ /* paper-tabs uses 700 here, which can look awkward */
+ font-weight: var(--font-weight-h3);
+ };
+ --paper-tab-content-unselected: {
+ /* paper-tabs uses 0.8 here, but we want to control the color directly */
+ opacity: 1;
+ color: var(--deemphasized-text-color);
+ };
+ }
+ iron-autogrow-textarea {
+ /** This is needed for firefox */
+ --iron-autogrow-textarea_-_white-space: pre-wrap;
+ }
+ strong {
+ font-weight: var(--font-weight-bold);
+ }
+
+ .assistive-tech-only {
+ user-select: none;
+ clip: rect(1px, 1px, 1px, 1px);
+ height: 1px;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ z-index: -1000;
+ }
+
+ /** BEGIN: loading spiner */
+ .loadingSpin {
+ border: 2px solid var(--disabled-button-background-color);
+ border-top: 2px solid var(--primary-button-background-color);
+ border-radius: 50%;
+ width: 10px;
+ height: 10px;
+ animation: spin 2s linear infinite;
+ margin-right: var(--spacing-s);
+ }
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+ /** END: loading spiner */
</style>
</template>
</dom-module>`;
