From 3e28ce94eb9063b1ee936f76184998e55be5b083 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 19 Dec 2017 13:19:44 +0100
Subject: [PATCH] ux: Add icon to selected option in PageHeader navigation on
 small screens, update select boxes for Firefox so the arrow to the right is
 aligned with the other select boxes (#10190)

---
 .../core/components/PageHeader/PageHeader.tsx | 15 ++++++---
 .../manage_dashboards/manage_dashboards.html  | 32 +++++++++++--------
 public/sass/components/_gf-form.scss          | 24 ++++++++++++--
 public/sass/components/_page_header.scss      |  3 +-
 4 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx
index fb09ed29085..095100fcff9 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
@@ -41,7 +41,7 @@ function SelectOption(navItem: NavModelItem) {
 
 function Navigation({main}: {main: NavModelItem}) {
   return (<nav>
-    <SelectNav customCss="page-header__select_nav" main={main} />
+    <SelectNav customCss="page-header__select-nav" main={main} />
     <Tabs customCss="page-header__tabs" main={main} />
   </nav>);
 }
@@ -57,10 +57,15 @@ function SelectNav({main, customCss}: {main: NavModelItem, customCss: string}) {
     appEvents.emit('location-change', {href: url});
   };
 
-  return (<select
-    className={`gf-select-nav ${customCss}`}
-    defaultValue={defaultSelectedItem.url}
-    onChange={gotoUrl}>{main.children.map(SelectOption)}</select>);
+  return (
+    <div className={`gf-form-select-wrapper width-20 ${customCss}`}>
+      <label className={`gf-form-select-icon ${defaultSelectedItem.icon}`} htmlFor="page-header-select-nav" />{/* Label to make it clickable */}
+        <select
+          className="gf-select-nav gf-form-input"
+          defaultValue={defaultSelectedItem.url}
+          onChange={gotoUrl}
+          id="page-header-select-nav">{main.children.map(SelectOption)}</select>
+    </div>);
 }
 
 function Tabs({main, customCss}: {main: NavModelItem, customCss: string}) {
diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html
index f8c96a78b2e..90091f3032c 100644
--- a/public/app/core/components/manage_dashboards/manage_dashboards.html
+++ b/public/app/core/components/manage_dashboards/manage_dashboards.html
@@ -60,20 +60,24 @@
         switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
       />
       <div class="search-results-filter-row__filters">
-        <select
-          class="search-results-filter-row__filters-item gf-form-input"
-          ng-model="ctrl.selectedStarredFilter"
-          ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
-          ng-change="ctrl.onStarredFilterChange()"
-          ng-show="!(ctrl.canMove || ctrl.canDelete)"
-        />
-        <select
-          class="search-results-filter-row__filters-item gf-form-input"
-          ng-model="ctrl.selectedTagFilter"
-          ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
-          ng-change="ctrl.onTagFilterChange()"
-          ng-show="!(ctrl.canMove || ctrl.canDelete)"
-        />
+        <div class="gf-form-select-wrapper">
+          <select
+            class="search-results-filter-row__filters-item gf-form-input"
+            ng-model="ctrl.selectedStarredFilter"
+            ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
+            ng-change="ctrl.onStarredFilterChange()"
+            ng-show="!(ctrl.canMove || ctrl.canDelete)"
+          />
+        </div>
+        <div class="gf-form-select-wrapper">
+          <select
+            class="search-results-filter-row__filters-item gf-form-input"
+            ng-model="ctrl.selectedTagFilter"
+            ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
+            ng-change="ctrl.onTagFilterChange()"
+            ng-show="!(ctrl.canMove || ctrl.canDelete)"
+          />
+        </div>
         <div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">
           <button	type="button"
             class="btn gf-form-button btn-inverse"
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 8c04bcd3c2a..cc167c1d30b 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -242,12 +242,30 @@ $input-border: 1px solid $input-border-color;
   position: relative;
   background-color: $input-bg;
 
+  .gf-form-select-icon {
+    position: absolute;
+    z-index: 1;
+    left: $input-padding-x;
+    top: 50%;
+    margin-top: -7px;
+
+    & + .gf-form-input {
+      position: relative;
+      z-index: 2;
+      padding-left: $input-padding-x*3;
+      background-color: transparent;
+
+      option { // Firefox
+        color: $black;
+      }
+    }
+  }
+
+
   select.gf-form-input {
     text-indent: .01px;
     text-overflow: '';
-    padding-right: $input-padding-x*4;
-    -webkit-appearance: none;
-    -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
+    padding-right: $input-padding-x*3;
     appearance: none;
 
     &:-moz-focusring {
diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss
index 774b7d760a2..dac030a3d36 100644
--- a/public/sass/components/_page_header.scss
+++ b/public/sass/components/_page_header.scss
@@ -70,8 +70,9 @@
   text-transform: uppercase;
 }
 
-.page-header__select_nav {
+.page-header__select-nav {
   margin-bottom: 10px;
+  max-width: 100%;
 
   @include media-breakpoint-up(lg) {
     display: none;