Merge remote-tracking branch 'origin/10190_fix_select_icon_and_firefox'

public/app/core/components/PageHeader/PageHeader.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { NavModel, NavModelItem } from '../../nav_model_srv';
-import classNames from 'classnames';
-import appEvents from 'app/core/app_events';
+import React from "react";
+import { NavModel, NavModelItem } from "../../nav_model_srv";
+import classNames from "classnames";
+import appEvents from "app/core/app_events";
 
 export interface IProps {
   model: NavModel;
@@ -9,12 +9,12 @@ export interface IProps {
 
 function TabItem(tab: NavModelItem) {
   if (tab.hideFromTabs) {
-    return (null);
+    return null;
   }
 
   let tabClasses = classNames({
-    'gf-tabs-link': true,
-    active: tab.active,
+    "gf-tabs-link": true,
+    active: tab.active
   });
 
   return (
@@ -28,8 +28,9 @@ function TabItem(tab: NavModelItem) {
 }
 
 function SelectOption(navItem: NavModelItem) {
-  if (navItem.hideFromTabs) { // TODO: Rename hideFromTabs => hideFromNav
-    return (null);
+  if (navItem.hideFromTabs) {
+    // TODO: Rename hideFromTabs => hideFromNav
+    return null;
   }
 
   return (
@@ -39,14 +40,22 @@ function SelectOption(navItem: NavModelItem) {
   );
 }
 
-function Navigation({main}: {main: NavModelItem}) {
-  return (<nav>
-    <SelectNav customCss="page-header__select_nav" main={main} />
-    <Tabs customCss="page-header__tabs" main={main} />
-  </nav>);
+function Navigation({ main }: { main: NavModelItem }) {
+  return (
+    <nav>
+      <SelectNav customCss="page-header__select-nav" main={main} />
+      <Tabs customCss="page-header__tabs" main={main} />
+    </nav>
+  );
 }
 
-function SelectNav({main, customCss}: {main: NavModelItem, customCss: string}) {
+function SelectNav({
+  main,
+  customCss
+}: {
+  main: NavModelItem;
+  customCss: string;
+}) {
   const defaultSelectedItem = main.children.find(navItem => {
     return navItem.active === true;
   });
@@ -54,17 +63,32 @@ function SelectNav({main, customCss}: {main: NavModelItem, customCss: string}) {
   const gotoUrl = evt => {
     var element = evt.target;
     var url = element.options[element.selectedIndex].value;
-    appEvents.emit('location-change', {href: url});
+    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}) {
-  return <ul className={`gf-tabs ${customCss}`}>{main.children.map(TabItem)}</ul>;
+function Tabs({ main, customCss }: { main: NavModelItem; customCss: string }) {
+  return (
+    <ul className={`gf-tabs ${customCss}`}>{main.children.map(TabItem)}</ul>
+  );
 }
 
 export default class PageHeader extends React.Component<IProps, any> {
@@ -77,7 +101,11 @@ export default class PageHeader extends React.Component<IProps, any> {
     for (let i = 0; i < breadcrumbs.length; i++) {
       const bc = breadcrumbs[i];
       if (bc.url) {
-        breadcrumbsResult.push(<a className="text-link" key={i} href={bc.url}>{bc.title}</a>);
+        breadcrumbsResult.push(
+          <a className="text-link" key={i} href={bc.url}>
+            {bc.title}
+          </a>
+        );
       } else {
         breadcrumbsResult.push(<span key={i}> / {bc.title}</span>);
       }
@@ -95,12 +123,15 @@ export default class PageHeader extends React.Component<IProps, any> {
 
         <div className="page-header__info-block">
           {main.text && <h1 className="page-header__title">{main.text}</h1>}
-          {main.breadcrumbs && main.breadcrumbs.length > 0 && (
-            <h1 className="page-header__title">
-              {this.renderBreadcrumb(main.breadcrumbs)}
-            </h1>)
-          }
-          {main.subTitle && <div className="page-header__sub-title">{main.subTitle}</div>}
+          {main.breadcrumbs &&
+            main.breadcrumbs.length > 0 && (
+              <h1 className="page-header__title">
+                {this.renderBreadcrumb(main.breadcrumbs)}
+              </h1>
+            )}
+          {main.subTitle && (
+            <div className="page-header__sub-title">{main.subTitle}</div>
+          )}
           {main.subType && (
             <div className="page-header__stamps">
               <i className={main.subType.icon} />

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"

public/sass/components/_gf-form.scss

@@ -111,7 +111,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   &:disabled {
-    color: $text-color-weak
+    color: $text-color-weak;
   }
 }
 
@@ -248,12 +248,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: 0.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 {

public/sass/components/_page_header.scss

@@ -69,8 +69,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;