Simplified some styles and dom elements

public/app/features/explore/ExploreToolbar.tsx

@@ -20,6 +20,41 @@ interface Props {
   onSplit: () => void;
 }
 
+const createDatasourcePicker = (props: Props) => {
+  const { exploreDatasources, selectedDatasource } = props;
+
+  return (
+    <DataSourcePicker
+      onChange={props.onChangeDatasource}
+      datasources={exploreDatasources}
+      current={selectedDatasource}
+    />
+  );
+};
+
+const createResponsiveButton = (options: {
+  splitted: boolean;
+  title: string;
+  onClick: () => void;
+  buttonClassName?: string;
+  iconClassName?: string;
+}) => {
+  const { title, onClick, buttonClassName, iconClassName, splitted } = options;
+
+  return (
+    <button className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`} onClick={onClick}>
+      <span className="btn-title">{!splitted ? title : ''}</span>
+      {iconClassName ? <i className={iconClassName} /> : null}
+    </button>
+  );
+};
+
+const createSplittedClassName = (options: { splitted: boolean; className: string }) => {
+  const { className, splitted } = options;
+
+  return splitted ? `${className}-splitted` : className;
+};
+
 export class ExploreToolbar extends PureComponent<Props, {}> {
   /**
    * Timepicker to control scanning
@@ -29,58 +64,14 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
   constructor(props) {
     super(props);
     this.timepickerRef = React.createRef();
-    this.createResponsiveButton = this.createResponsiveButton.bind(this);
-    this.createDatasourcePicker = this.createDatasourcePicker.bind(this);
-    this.createSplittedClassName = this.createSplittedClassName.bind(this);
-  }
-
-  createDatasourcePicker() {
-    const { exploreDatasources, selectedDatasource } = this.props;
-
-    return (
-      <DataSourcePicker
-        onChange={this.props.onChangeDatasource}
-        datasources={exploreDatasources}
-        current={selectedDatasource}
-      />
-    );
-  }
-
-  createResponsiveButton(options: {
-    title: string;
-    onClick: () => void;
-    buttonClassName?: string;
-    iconClassName?: string;
-  }) {
-    const { splitted } = this.props;
-    const { title, onClick, buttonClassName, iconClassName } = options;
-
-    return (
-      <>
-        <button className={`btn navbar-button large-screens ${buttonClassName && buttonClassName}`} onClick={onClick}>
-          {!splitted ? title : ''}
-          {iconClassName && <i className={iconClassName} />}
-        </button>
-        <button className={`btn navbar-button small-screens ${buttonClassName && buttonClassName}`} onClick={onClick}>
-          {iconClassName && <i className={iconClassName} />}
-        </button>
-      </>
-    );
-  }
-
-  createSplittedClassName(className: string) {
-    const { splitted } = this.props;
-
-    return splitted ? `${className}-splitted` : className;
   }
 
   render() {
     const { datasourceMissing, exploreId, loading, range, splitted } = this.props;
-    const toolbar = this.createSplittedClassName('toolbar');
-    const toolbarItem = this.createSplittedClassName('toolbar-item');
-    const toolbarHeader = this.createSplittedClassName('toolbar-header');
-    const timepickerLarge = this.createSplittedClassName('toolbar-content-item timepicker-large-screens');
-    const timepickerSmall = this.createSplittedClassName('toolbar-content-item timepicker-small-screens');
+    const toolbar = createSplittedClassName({ splitted, className: 'toolbar' });
+    const toolbarItem = createSplittedClassName({ splitted, className: 'toolbar-item' });
+    const toolbarHeader = createSplittedClassName({ splitted, className: 'toolbar-header' });
+    const timepicker = createSplittedClassName({ splitted, className: 'toolbar-content-item timepicker' });
 
     return (
       <div className={toolbar}>
@@ -88,7 +79,7 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
           <div className={toolbarHeader}>
             <div className="toolbar-header-title">
               {exploreId === 'left' && (
-                <a>
+                <a className="navbar-page-btn">
                   <i className="fa fa-rocket fa-fw" />
                   Explore
                 </a>
@@ -96,7 +87,7 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
             </div>
             <div className="toolbar-header-datasource large-screens">
               <div className="datasource-picker">
-                {!datasourceMissing && !splitted ? this.createDatasourcePicker() : null}
+                {!datasourceMissing && !splitted ? createDatasourcePicker(this.props) : null}
               </div>
             </div>
             <div className="toolbar-header-close">
@@ -110,40 +101,28 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
         </div>
         <div className={toolbarItem}>
           {!datasourceMissing && splitted ? (
-            <div className="datasource-picker">{this.createDatasourcePicker()}</div>
+            <div className="datasource-picker">{createDatasourcePicker(this.props)}</div>
           ) : null}
         </div>
         <div className={toolbarItem}>
           <div className="toolbar-content">
             {!datasourceMissing && !splitted ? (
               <div className="toolbar-content-item small-screens">
-                <div className="datasource-picker">{this.createDatasourcePicker()}</div>
+                <div className="datasource-picker">{createDatasourcePicker(this.props)}</div>
               </div>
             ) : null}
             {exploreId === 'left' && !splitted ? (
               <div className="toolbar-content-item">
-                {this.createResponsiveButton({
+                {createResponsiveButton({
+                  splitted,
                   title: 'Split',
                   onClick: this.props.onSplit,
                   iconClassName: 'fa fa-fw fa-columns',
                 })}
               </div>
             ) : null}
-            <div className={timepickerLarge}>
-              <TimePicker
-                ref={this.timepickerRef}
-                range={range}
-                onChangeTime={this.props.onChangeTime}
-                iconOnly={false}
-              />
-            </div>
-            <div className={timepickerSmall}>
-              <TimePicker
-                ref={this.timepickerRef}
-                range={range}
-                onChangeTime={this.props.onChangeTime}
-                iconOnly={true}
-              />
+            <div className={timepicker}>
+              <TimePicker ref={this.timepickerRef} range={range} onChangeTime={this.props.onChangeTime} />
             </div>
             <div className="toolbar-content-item">
               <button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
@@ -151,7 +130,8 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
               </button>
             </div>
             <div className="toolbar-content-item">
-              {this.createResponsiveButton({
+              {createResponsiveButton({
+                splitted,
                 title: 'Run Query',
                 onClick: this.props.onRunQuery,
                 buttonClassName: 'navbar-button--primary',

public/app/features/explore/TimePicker.tsx

@@ -39,7 +39,6 @@ interface TimePickerProps {
   isUtc?: boolean;
   range?: RawTimeRange;
   onChangeTime?: (range: RawTimeRange, scanning?: boolean) => void;
-  iconOnly?: boolean;
 }
 
 interface TimePickerState {
@@ -293,7 +292,6 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
   }
 
   render() {
-    const { iconOnly } = this.props;
     const { isUtc, rangeString, refreshInterval } = this.state;
 
     return (
@@ -302,18 +300,12 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
           <button className="btn navbar-button navbar-button--tight timepicker-left" onClick={this.handleClickLeft}>
             <i className="fa fa-chevron-left" />
           </button>
-          {iconOnly ? (
-            <button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
-              <i className="fa fa-clock-o" />
-            </button>
-          ) : (
-            <button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
-              <i className="fa fa-clock-o" />
-              <span className="timepicker-rangestring">{rangeString}</span>
-              {isUtc ? <span className="gf-timepicker-utc">UTC</span> : null}
-              {refreshInterval ? <span className="text-warning">&nbsp; Refresh every {refreshInterval}</span> : null}
-            </button>
-          )}
+          <button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
+            <i className="fa fa-clock-o" />
+            <span className="timepicker-rangestring">{rangeString}</span>
+            {isUtc ? <span className="gf-timepicker-utc">UTC</span> : null}
+            {refreshInterval ? <span className="text-warning">&nbsp; Refresh every {refreshInterval}</span> : null}
+          </button>
           <button className="btn navbar-button navbar-button--tight timepicker-right" onClick={this.handleClickRight}>
             <i className="fa fa-chevron-right" />
           </button>

public/sass/pages/_explore.scss

@@ -1,5 +1,3 @@
-.timepicker-small-screens,
-.timepicker-small-screens-splitted,
 .small-screens {
   display: none;
 }
@@ -13,8 +11,10 @@
 }
 
 .datasource-picker {
-  min-width: 200px;
-  max-width: 200px;
+  .ds-picker {
+    min-width: 200px;
+    max-width: 200px;
+  }
 }
 
 .sidemenu-open {
@@ -69,6 +69,11 @@
 
 .toolbar-header-title {
   color: darken($link-color, 5%);
+  .fa {
+    font-size: 100%;
+    opacity: 0.75;
+    margin-right: 0.5em;
+  }
 }
 
 .toolbar-header-datasource {
@@ -94,26 +99,22 @@
 }
 
 @media only screen and (max-width: 1545px) {
-  .timepicker-large-screens-splitted {
-    display: none;
-  }
-
-  .timepicker-small-screens-splitted {
-    display: inline-block;
+  .timepicker-splitted {
+    .timepicker-rangestring {
+      display: none;
+    }
   }
 }
 
 @media only screen and (max-width: 1070px) {
-  .timepicker-large-screens {
-    display: none;
-  }
-
-  .timepicker-small-screens {
-    display: inline-block;
+  .timepicker {
+    .timepicker-rangestring {
+      display: none;
+    }
   }
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 800px) {
   .large-screens {
     display: none;
   }
@@ -147,9 +148,10 @@
     padding: 5px 2px;
   }
 
-  .datasource-picker > div > .ds-picker {
-    min-width: 160px;
-    max-width: 160px;
+  .btn.navbar-button {
+    .btn-title {
+      display: none;
+    }
   }
 }
 
@@ -450,178 +452,3 @@
   margin: $panel-margin/2 0;
   cursor: pointer;
 }
-
-// .explore {
-//   flex: 1 1 auto;
-
-//   &-container {
-//     padding: $dashboard-padding;
-//   }
-
-//   &-wrapper {
-//     display: flex;
-
-//     > .explore-split {
-//       width: 50%;
-//     }
-//   }
-
-//   // Push split button a bit
-//   .explore-first-button {
-//     margin-left: 15px;
-//   }
-
-//   .explore-panel {
-//     margin-top: $panel-margin;
-//   }
-
-//   .explore-panel__body {
-//     padding: $panel-padding;
-//   }
-
-//   .explore-panel__header {
-//     padding: $panel-padding;
-//     padding-top: 5px;
-//     padding-bottom: 0;
-//     display: flex;
-//     cursor: pointer;
-//     margin-bottom: 5px;
-//     transition: all 0.1s linear;
-//   }
-
-//   .explore-panel__header-label {
-//     font-weight: 500;
-//     margin-right: $panel-margin;
-//     font-size: $font-size-h6;
-//     box-shadow: $text-shadow-faint;
-//   }
-
-//   .explore-panel__header-buttons {
-//     margin-right: $panel-margin;
-//     font-size: $font-size-lg;
-//     line-height: $font-size-h6;
-//   }
-
-//   // Make sure wrap buttons around on small screens
-//   .navbar {
-//     flex-wrap: wrap;
-//     height: auto;
-//   }
-
-//   .navbar-page-btn {
-//     margin-right: 1rem;
-
-//     // Explore icon in header
-//     .fa {
-//       font-size: 100%;
-//       opacity: 0.75;
-//       margin-right: 0.5em;
-//     }
-//   }
-
-//   // Toggle mode
-//   .navbar-button.active {
-//     color: $btn-active-text-color;
-//     background-color: $btn-active-bg;
-//   }
-
-//   .navbar-button--no-icon {
-//     line-height: 18px;
-//   }
-
-//   .result-options {
-//     margin: 2 * $panel-margin 0;
-//   }
-
-//   .time-series-disclaimer {
-//     width: 300px;
-//     margin: $panel-margin auto;
-//     padding: 10px 0;
-//     border-radius: $border-radius;
-//     text-align: center;
-//     background-color: $panel-bg;
-
-//     .disclaimer-icon {
-//       color: $yellow;
-//       margin-right: $panel-margin/2;
-//     }
-
-//     .show-all-time-series {
-//       cursor: pointer;
-//       color: $external-link-color;
-//     }
-//   }
-
-//   .navbar .elapsed-time {
-//     position: absolute;
-//     left: 0;
-//     right: 0;
-//     top: 3.5rem;
-//     text-align: center;
-//     font-size: 0.8rem;
-//   }
-
-//   .graph-legend {
-//     flex-wrap: wrap;
-//   }
-
-//   .explore-panel__loader {
-//     height: 2px;
-//     position: relative;
-//     overflow: hidden;
-//     background: none;
-//     margin: $panel-margin / 2;
-//     transition: background-color 1s ease;
-//   }
-
-//   .explore-panel__loader--active {
-//     background: $text-color-faint;
-//   }
-
-//   .explore-panel__loader--active:after {
-//     content: ' ';
-//     display: block;
-//     width: 25%;
-//     top: 0;
-//     top: -50%;
-//     height: 250%;
-//     position: absolute;
-//     animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
-//     animation-iteration-count: 100;
-//     background: $blue;
-//   }
-
-//   @keyframes loader {
-//     from {
-//       left: -25%;
-//     }
-//     to {
-//       left: 100%;
-//     }
-//   }
-
-//   .datasource-picker {
-//     min-width: 200px;
-//   }
-
-//   .timepicker {
-//     display: flex;
-
-//     &-rangestring {
-//       margin-left: 0.5em;
-//     }
-//   }
-
-//   .run-icon {
-//     margin-left: 0.25em;
-//     transform: rotate(90deg);
-//   }
-
-//   .relative {
-//     position: relative;
-//   }
-
-//   .link {
-//     text-decoration: underline;
-//   }
-// }