IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

updated live tail button - responsive fold

Browse Source
This commit is contained in:
Łukasz Siatka 2019-10-07 23:30:07 +02:00 committed by Lukas Siatka
parent 33f8b36b44
commit f8cef9b900
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/app/features/explore/LiveTailButton.tsx
View File

@ -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}

12
public/sass/pages/_explore.scss
View File

@ -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 {