From f8cef9b9007cfe56a39aed32ac7a0730d14bbc70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Siatka?= <lukasz.siatka@grafana.com>
Date: Mon, 7 Oct 2019 23:30:07 +0200
Subject: [PATCH] updated live tail button - responsive fold

---
 .../app/features/explore/LiveTailButton.tsx   | 30 +++++++++++--------
 public/sass/pages/_explore.scss               | 12 ++++++++
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx
index dab4b210af4..c22879b2f5d 100644
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -5,7 +5,7 @@ import memoizeOne from 'memoize-one';
 import tinycolor from 'tinycolor2';
 import { CSSTransition } from 'react-transition-group';
 
-import { GrafanaTheme, useTheme } from '@grafana/ui';
+import { GrafanaTheme, useTheme, Tooltip } from '@grafana/ui';
 
 const getStyles = memoizeOne((theme: GrafanaTheme) => {
   const orangeLighter = tinycolor(theme.colors.orangeDark)
@@ -91,6 +91,10 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
   };
 });
 
+const defaultZoomOutTooltip = () => {
+  return <>Live tailing</>;
+};
+
 type LiveTailButtonProps = {
   start: () => void;
   stop: () => void;
@@ -108,17 +112,19 @@ export function LiveTailButton(props: LiveTailButtonProps) {
 
   return (
     <>
-      <button
-        className={classNames('btn navbar-button', styles.liveButton, {
-          [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive,
-          [styles.isLive]: isLive && !isPaused,
-          [styles.isPaused]: isLive && isPaused,
-        })}
-        onClick={onClickMain}
-      >
-        <i className={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')} />
-        &nbsp; Live tailing
-      </button>
+      <Tooltip content={defaultZoomOutTooltip} placement="bottom">
+        <button
+          className={classNames('btn navbar-button', styles.liveButton, {
+            [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive,
+            [styles.isLive]: isLive && !isPaused,
+            [styles.isPaused]: isLive && isPaused,
+          })}
+          onClick={onClickMain}
+        >
+          <i className={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')} />
+          <span>&nbsp; Live tailing</span>
+        </button>
+      </Tooltip>
       <CSSTransition
         mountOnEnter={true}
         unmountOnExit={true}
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 3ed5735c942..6482b7ce96a 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -108,6 +108,18 @@
   }
 }
 
+@media only screen and (max-width: 1400px) {
+  .explore-toolbar.splitted {
+    .explore-toolbar-content-item {
+      .navbar-button {
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 @media only screen and (max-width: 1070px) {
   .timepicker {
     .timepicker-rangestring {