From 9298876ef0720a824f323ed251273ab8d0e9be2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Mon, 28 Jan 2019 12:21:04 +0100
Subject: [PATCH] Changes after PR Comments

---
 .../app/features/explore/ExploreToolbar.tsx   | 45 +++++++++-----
 public/sass/pages/_explore.scss               | 62 +++++++++++--------
 2 files changed, 66 insertions(+), 41 deletions(-)

diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx
index a12871c50af..35f06d11c81 100644
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -9,19 +9,30 @@ import { StoreState } from 'app/types/store';
 import { changeDatasource, clearQueries, splitClose, runQueries, splitOpen } from './state/actions';
 import TimePicker from './TimePicker';
 
+enum IconSide {
+  left = 'left',
+  right = 'right',
+}
+
 const createResponsiveButton = (options: {
   splitted: boolean;
   title: string;
   onClick: () => void;
   buttonClassName?: string;
   iconClassName?: string;
+  iconSide?: IconSide;
 }) => {
-  const { title, onClick, buttonClassName, iconClassName, splitted } = options;
+  const defaultOptions = {
+    iconSide: IconSide.left,
+  };
+  const props = { ...options, defaultOptions };
+  const { title, onClick, buttonClassName, iconClassName, splitted, iconSide } = props;
 
   return (
     <button className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`} onClick={onClick}>
+      {iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName} icon-margin-right`} /> : null}
       <span className="btn-title">{!splitted ? title : ''}</span>
-      {iconClassName ? <i className={iconClassName} /> : null}
+      {iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName} icon-margin-left`} /> : null}
     </button>
   );
 };
@@ -81,10 +92,10 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
     } = this.props;
 
     return (
-      <div className={splitted ? 'toolbar splitted' : 'toolbar'}>
-        <div className="toolbar-item">
-          <div className="toolbar-header">
-            <div className="toolbar-header-title">
+      <div className={splitted ? 'explore-toolbar splitted' : 'explore-toolbar'}>
+        <div className="explore-toolbar-item">
+          <div className="explore-toolbar-header">
+            <div className="explore-toolbar-header-title">
               {exploreId === 'left' && (
                 <a className="navbar-page-btn">
                   <i className="fa fa-rocket fa-fw" />
@@ -92,19 +103,19 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
                 </a>
               )}
             </div>
-            <div className="toolbar-header-close">
+            <div className="explore-toolbar-header-close">
               {exploreId === 'right' && (
                 <a onClick={this.props.closeSplit}>
-                  <i className="fa fa-window-close fa-fw" />
+                  <i className="fa fa-times fa-fw" />
                 </a>
               )}
             </div>
           </div>
         </div>
-        <div className="toolbar-item">
-          <div className="toolbar-content">
+        <div className="explore-toolbar-item">
+          <div className="explore-toolbar-content">
             {!datasourceMissing ? (
-              <div className="toolbar-content-item">
+              <div className="explore-toolbar-content-item">
                 <div className="datasource-picker">
                   <DataSourcePicker
                     onChange={this.onChangeDatasource}
@@ -115,30 +126,32 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
               </div>
             ) : null}
             {exploreId === 'left' && !splitted ? (
-              <div className="toolbar-content-item">
+              <div className="explore-toolbar-content-item">
                 {createResponsiveButton({
                   splitted,
                   title: 'Split',
                   onClick: this.props.split,
-                  iconClassName: 'fa fa-fw fa-columns',
+                  iconClassName: 'fa fa-fw fa-columns icon-margin-right',
+                  iconSide: IconSide.left,
                 })}
               </div>
             ) : null}
-            <div className="toolbar-content-item timepicker">
+            <div className="explore-toolbar-content-item timepicker">
               <TimePicker ref={timepickerRef} range={range} onChangeTime={this.props.onChangeTime} />
             </div>
-            <div className="toolbar-content-item">
+            <div className="explore-toolbar-content-item">
               <button className="btn navbar-button navbar-button--no-icon" onClick={this.onClearAll}>
                 Clear All
               </button>
             </div>
-            <div className="toolbar-content-item">
+            <div className="explore-toolbar-content-item">
               {createResponsiveButton({
                 splitted,
                 title: 'Run Query',
                 onClick: this.onRunQuery,
                 buttonClassName: 'navbar-button--primary',
                 iconClassName: loading ? 'fa fa-spinner fa-fw fa-spin run-icon' : 'fa fa-level-down fa-fw run-icon',
+                iconSide: IconSide.right,
               })}
             </div>
           </div>
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 062387fdf67..db542530885 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -1,3 +1,15 @@
+.icon-margin-right {
+  margin-right: 0.25em;
+}
+
+.icon-margin-left {
+  margin-left: 0.25em;
+}
+
+.run-icon {
+  transform: rotate(90deg);
+}
+
 .timepicker {
   display: flex;
 }
@@ -14,19 +26,19 @@
 }
 
 .sidemenu-open {
-  .toolbar-header {
+  .explore-toolbar-header {
     padding: 0;
     margin-left: 0;
   }
 
-  .toolbar-header-title {
+  .explore-toolbar-header-title {
     .navbar-page-btn {
       padding-left: 0;
     }
   }
 }
 
-.toolbar {
+.explore-toolbar {
   background: inherit;
   display: flex;
   flex-flow: row wrap;
@@ -39,27 +51,27 @@
   transition-property: box-shadow, border-bottom;
 }
 
-.toolbar-item {
+.explore-toolbar-item {
   position: relative;
   align-self: center;
 }
 
-.toolbar.splitted {
-  .toolbar-item {
+.explore-toolbar.splitted {
+  .explore-toolbar-item {
     flex: 1 1 100%;
   }
 
-  .toolbar-content-item:first-child {
+  .explore-toolbar-content-item:first-child {
     padding-left: 0;
     margin-right: auto;
   }
 }
 
-.toolbar-item:last-child {
+.explore-toolbar-item:last-child {
   flex: auto;
 }
 
-.toolbar-header {
+.explore-toolbar-header {
   display: flex;
   flex: 1 1 0;
   flex-flow: row nowrap;
@@ -70,12 +82,12 @@
   margin-left: $panel-margin * 3;
 }
 
-.toolbar-header {
+.explore-toolbar-header {
   justify-content: space-between;
   align-items: center;
 }
 
-.toolbar-header-title {
+.explore-toolbar-header-title {
   color: darken($link-color, 5%);
 
   .navbar-page-btn {
@@ -89,28 +101,28 @@
   }
 }
 
-.toolbar-header-close {
+.explore-toolbar-header-close {
   margin-left: auto;
 }
 
-.toolbar-content {
+.explore-toolbar-content {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-between;
 }
 
-.toolbar-content-item {
+.explore-toolbar-content-item {
   padding: 10px 2px;
 }
 
-.toolbar-content-item:first-child {
+.explore-toolbar-content-item:first-child {
   padding-left: $dashboard-padding;
   margin-right: auto;
 }
 
 @media only screen and (max-width: 1545px) {
-  .toolbar.splitted {
+  .explore-toolbar.splitted {
     .timepicker-rangestring {
       display: none;
     }
@@ -124,25 +136,25 @@
     }
   }
 
-  .toolbar-content {
+  .explore-toolbar-content {
     justify-content: flex-start;
   }
 
-  .toolbar.splitted {
-    .toolbar-content-item {
+  .explore-toolbar.splitted {
+    .explore-toolbar-content-item {
       padding: 2px 0;
       margin: 0;
     }
   }
 
-  .toolbar-content-item {
+  .explore-toolbar-content-item {
     padding: 2px 2px;
   }
 }
 
 @media only screen and (max-width: 803px) {
   .sidemenu-open {
-    .toolbar-header-title {
+    .explore-toolbar-header-title {
       .navbar-page-btn {
         padding-left: 0;
         margin-left: 0;
@@ -150,7 +162,7 @@
     }
   }
 
-  .toolbar-header-title {
+  .explore-toolbar-header-title {
     .navbar-page-btn {
       padding-left: 0;
       margin-left: $dashboard-padding;
@@ -163,7 +175,7 @@
 }
 
 @media only screen and (max-width: 702px) {
-  .toolbar-content-item:first-child {
+  .explore-toolbar-content-item:first-child {
     padding-left: 2px;
     margin-right: 0;
   }
@@ -171,7 +183,7 @@
 
 @media only screen and (max-width: 544px) {
   .sidemenu-open {
-    .toolbar-header-title {
+    .explore-toolbar-header-title {
       .navbar-page-btn {
         padding-left: 0;
         margin-left: $dashboard-padding;
@@ -179,7 +191,7 @@
     }
   }
 
-  .toolbar-header-title {
+  .explore-toolbar-header-title {
     .navbar-page-btn {
       padding-left: 0;
       margin-left: $dashboard-padding;