diff --git a/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list.js b/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list.js index c2dbf3f21a..a8c3e2b392 100644 --- a/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list.js +++ b/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list.js @@ -197,7 +197,7 @@ }, _handleInputKeydown(e) { - const input = e.detail.input; + const input = e.detail.input.inputElement; if (input.selectionStart !== input.selectionEnd || input.selectionStart !== 0) { return; diff --git a/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list_test.html b/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list_test.html index a3a3c6446e..7097b86ecc 100644 --- a/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list_test.html +++ b/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list_test.html @@ -336,15 +336,17 @@ limitations under the License. sandbox.stub(element, '_computeRemovable').returns(true); // Next line is a workaround for Firefix not moving cursor // on input field update - assert.equal(input.$.input.selectionStart, 0); + assert.equal(input.$.input.inputElement.selectionStart, 0); input.text = 'test'; MockInteractions.focus(input.$.input); flushAsynchronousOperations(); assert.equal(element.accounts.length, 2); - MockInteractions.pressAndReleaseKeyOn(input.$.input, 8); // Backspace + MockInteractions.pressAndReleaseKeyOn( + input.$.input.inputElement, 8); // Backspace assert.equal(element.accounts.length, 2); input.text = ''; - MockInteractions.pressAndReleaseKeyOn(input.$.input, 8); // Backspace + MockInteractions.pressAndReleaseKeyOn( + input.$.input.inputElement, 8); // Backspace assert.equal(element.accounts.length, 1); }); diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html index 559157db99..d31d74e5c3 100644 --- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html +++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html @@ -127,7 +127,7 @@ limitations under the License. .title, .value { display: table-cell; - vertical-align: top; + vertical-align: middle; } .title { padding-right: .5em; diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html index 6208e78403..d5b394c4ab 100644 --- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html +++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html @@ -19,7 +19,6 @@ limitations under the License. - @@ -39,16 +38,12 @@ limitations under the License. flex: 1; font: inherit; outline: none; - padding: 0 .25em 0 .25em; - } - gr-button { - background-color: #f1f2f3; - border-radius: 0 2px 2px 0; - border-left-width: 0; + padding: .25em; }
- Search + tab-complete + vertical-offset="30">
diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.js b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.js index f811e9e34f..ba7aad3201 100644 --- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.js +++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.js @@ -103,10 +103,6 @@ Gerrit.URLEncodingBehavior, ], - listeners: { - 'searchButton.tap': '_preventDefaultAndNavigateToInputVal', - }, - keyBindings: { '/': '_handleForwardSlashKey', }, diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.html b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.html index b5cdcd0c8e..8c889e94ed 100644 --- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.html +++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.html @@ -59,17 +59,6 @@ limitations under the License. document.activeElement; }; - test('tap on search button triggers nav', done => { - sandbox.stub(page, 'show', () => { - page.show.restore(); - assert.notEqual(getActiveElement(), element.$.searchInput); - assert.notEqual(getActiveElement(), element.$.searchButton); - done(); - }); - element.value = 'test'; - MockInteractions.tap(element.$.searchButton); - }); - test('enter in search input triggers nav', done => { sandbox.stub(page, 'show', () => { page.show.restore(); diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html index 7aa7abf194..4d46ff46e0 100644 --- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html +++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html @@ -15,54 +15,88 @@ limitations under the License. --> - + + diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js index 092f859c18..dc638e133b 100644 --- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js +++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js @@ -71,6 +71,16 @@ allowNonSuggestedValues: Boolean, borderless: Boolean, disabled: Boolean, + showSearchIcon: { + type: Boolean, + value: false, + }, + // Vertical offset needed for a 1em font-size with no vertical padding. + // Inputs with additional padding will need to increase vertical offset. + verticalOffset: { + type: Number, + value: 20, + }, text: { type: String, @@ -162,7 +172,8 @@ }, selectAll() { - this.$.input.setSelectionRange(0, this.$.input.value.length); + const nativeInputElement = this.$.input.inputElement; + nativeInputElement.setSelectionRange(0, this.$.input.value.length); }, clear() { @@ -194,11 +205,15 @@ this._focused = true; this._updateSuggestions(); this.$.input.classList.remove('warnUncommitted'); + // Needed so that --paper-input-container-input updated style is applied. + this.updateStyles(); }, _onInputBlur() { this.$.input.classList.toggle('warnUncommitted', this.warnUncommitted && this.text.length && !this._focused); + // Needed so that --paper-input-container-input updated style is applied. + this.updateStyles(); }, _updateSuggestions() { @@ -362,5 +377,9 @@ this._textChangedSinceCommit = false; }, + + _computeShowSearchIconClass(showSearchIcon) { + return showSearchIcon ? 'showSearchIcon' : ''; + }, }); })(); diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html index 5bb1d2b878..605eaf7bd3 100644 --- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html +++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html @@ -283,13 +283,27 @@ limitations under the License. test('_focused flag properly triggered', done => { flush(() => { assert.isFalse(element._focused); - const input = element.$$('input'); + const input = element.$$('paper-input').inputElement; MockInteractions.focus(input); assert.isTrue(element._focused); done(); }); }); + test('search icon shows with showSearchIcon property', () => { + assert.equal(getComputedStyle(element.$$('iron-icon')).display, + 'none'); + element.showSearchIcon = true; + assert.notEqual(getComputedStyle(element.$$('iron-icon')).display, + 'none'); + }); + + test('vertical offset overridden by param if it exists', () => { + assert.equal(element.$.suggestions.verticalOffset, 20); + element.verticalOffset = 30; + assert.equal(element.$.suggestions.verticalOffset, 30); + }); + test('_focused flag shows/hides the suggestions', () => { const openStub = sandbox.stub(element.$.suggestions, 'open'); const closedStub = sandbox.stub(element.$.suggestions, 'close'); @@ -449,8 +463,12 @@ limitations under the License. element.text = 'blah blah blah'; MockInteractions.blur(element.$.input); assert.isTrue(inputClassList.contains('warnUncommitted')); + assert.equal(getComputedStyle(element.$.input.inputElement).color, + 'rgb(255, 0, 0)'); MockInteractions.focus(element.$.input); assert.isFalse(inputClassList.contains('warnUncommitted')); + assert.notEqual(getComputedStyle(element.$.input.inputElement).color, + 'rgb(255, 0, 0)ed'); }); test('disabled', () => { diff --git a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html index fce10a7fb6..4e3e04548c 100644 --- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html +++ b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html @@ -19,6 +19,8 @@ limitations under the License. + +