Add support for "searching" on mobile
As of gerrit 3.0, users on mobile cannot switch back to GWTUI to search on mobile.
This change will fix this by allowing users to use a mobile search bar
in PolyGerrit.
Bug: Issue 6053
Change-Id: I968fb1b483a6adc8b98ce9ef97aa2ea7cd888f91
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
index 06e52c3..c2b28d6 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -148,6 +148,9 @@
background-color: var(--view-background-color);
box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}
+ #mobileSearch {
+ display: none;
+ }
@media screen and (max-width: 50em) {
.bigTitle {
font-size: var(--font-size-large);
@@ -159,6 +162,9 @@
.links > li.hideOnMobile {
display: none;
}
+ #mobileSearch {
+ display: inline-flex;
+ }
.accountContainer {
margin-left: .5em !important;
}
@@ -196,6 +202,7 @@
class="hideOnMobile"
name="header-browse-source"></gr-endpoint-decorator>
<div class="accountContainer" id="accountContainer">
+ <iron-icon id="mobileSearch" icon="gr-icons:search" on-tap='_onMobileSearchTap'></iron-icon>
<div class$="[[_computeIsInvisible(_registerURL)]]">
<a
class="registerButton"
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.js b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.js
index 1f2c720..537ea95 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.js
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.js
@@ -323,5 +323,10 @@
_generateSettingsLink() {
return this.getBaseUrl() + '/settings/';
},
+
+ _onMobileSearchTap(e) {
+ e.preventDefault();
+ this.fire('mobile-search', null, {bubbles: false});
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index e537ac4..ac00fcf 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -62,6 +62,7 @@
<link rel="import" href="./core/gr-navigation/gr-navigation.html">
<link rel="import" href="./core/gr-reporting/gr-reporting.html">
<link rel="import" href="./core/gr-router/gr-router.html">
+<link rel="import" href="./core/gr-smart-search/gr-smart-search.html">
<link rel="import" href="./diff/gr-diff-view/gr-diff-view.html">
<link rel="import" href="./edit/gr-editor-view/gr-editor-view.html">
<link rel="import" href="./plugins/gr-endpoint-decorator/gr-endpoint-decorator.html">
@@ -155,10 +156,16 @@
<gr-main-header
id="mainHeader"
search-query="{{params.query}}"
- class$="[[_computeShadowClass(_isShadowDom)]]">
+ class$="[[_computeShadowClass(_isShadowDom)]]"
+ on-mobile-search="_mobileSearchToggle">
</gr-main-header>
</gr-fixed-panel>
<main>
+ <gr-smart-search
+ id="search"
+ search-query="{{params.query}}"
+ hidden="[[!mobileSearch]]">
+ </gr-smart-search>
<template is="dom-if" if="[[_showChangeListView]]" restamp="true">
<gr-change-list-view
params="[[params]]"
diff --git a/polygerrit-ui/app/elements/gr-app.js b/polygerrit-ui/app/elements/gr-app.js
index a2a495b..de9a6ad 100644
--- a/polygerrit-ui/app/elements/gr-app.js
+++ b/polygerrit-ui/app/elements/gr-app.js
@@ -92,6 +92,11 @@
value: 'https://bugs.chromium.org/p/gerrit/issues/entry' +
'?template=PolyGerrit%20Issue',
},
+ // Used to allow searching on mobile
+ mobileSearch: {
+ type: Boolean,
+ value: false,
+ },
},
listeners: {
@@ -449,5 +454,9 @@
this.$.reporting.reportRpcTiming(e.detail.anonymizedUrl,
e.detail.elapsed);
},
+
+ _mobileSearchToggle(e) {
+ this.mobileSearch = !this.mobileSearch;
+ },
});
})();
