From f0264ebe437764ea0c1a461b3d5cf0c8d46778b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Siatka?= <lukasz.siatka@grafana.com>
Date: Thu, 10 Oct 2019 22:16:04 +0200
Subject: [PATCH] Explore: updates live button to responsive button

---
 public/app/features/explore/ExploreToolbar.tsx |  1 +
 public/app/features/explore/LiveTailButton.tsx | 16 +++++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx
index bfc810db4c7..7f055600fe2 100644
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -304,6 +304,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
                 <LiveTailControls exploreId={exploreId}>
                   {controls => (
                     <LiveTailButton
+                      splitted={splitted}
                       isLive={isLive}
                       isPaused={isPaused}
                       start={controls.start}
diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx
index 800af983059..5fd1d9bd692 100644
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -4,6 +4,7 @@ import { css } from 'emotion';
 import memoizeOne from 'memoize-one';
 import tinycolor from 'tinycolor2';
 import { CSSTransition } from 'react-transition-group';
+import { ResponsiveButton } from './ResponsiveButton';
 
 import { GrafanaTheme, useTheme, Tooltip } from '@grafana/ui';
 
@@ -96,6 +97,7 @@ const defaultLiveTooltip = () => {
 };
 
 type LiveTailButtonProps = {
+  splitted: boolean;
   start: () => void;
   stop: () => void;
   pause: () => void;
@@ -104,7 +106,7 @@ type LiveTailButtonProps = {
   isPaused: boolean;
 };
 export function LiveTailButton(props: LiveTailButtonProps) {
-  const { start, pause, resume, isLive, isPaused, stop } = props;
+  const { start, pause, resume, isLive, isPaused, stop, splitted } = props;
   const theme = useTheme();
   const styles = getStyles(theme);
 
@@ -113,17 +115,17 @@ export function LiveTailButton(props: LiveTailButtonProps) {
   return (
     <>
       <Tooltip content={defaultLiveTooltip} placement="bottom">
-        <button
-          className={classNames('btn navbar-button', styles.liveButton, {
+        <ResponsiveButton
+          splitted={splitted}
+          buttonClassName={classNames('btn navbar-button', styles.liveButton, {
             [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive,
             [styles.isLive]: isLive && !isPaused,
             [styles.isPaused]: isLive && isPaused,
           })}
+          iconClassName={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')}
           onClick={onClickMain}
-        >
-          <i className={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')} />
-          <span>&nbsp; Live</span>
-        </button>
+          title={'\xa0Live'}
+        />
       </Tooltip>
       <CSSTransition
         mountOnEnter={true}