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

Explore: updates live button to responsive button

Browse Source
This commit is contained in:
Łukasz Siatka 2019-10-10 22:16:04 +02:00 committed by Lukas Siatka
parent 8d9197bed2
commit f0264ebe43
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/explore/ExploreToolbar.tsx
View File

@ -304,6 +304,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
<LiveTailControls exploreId={exploreId}> <LiveTailControls exploreId={exploreId}>
{controls => ( {controls => (
<LiveTailButton <LiveTailButton
splitted={splitted}
isLive={isLive} isLive={isLive}
isPaused={isPaused} isPaused={isPaused}
start={controls.start} start={controls.start}

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

@ -4,6 +4,7 @@ import { css } from 'emotion';
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import { CSSTransition } from 'react-transition-group'; import { CSSTransition } from 'react-transition-group';
import { ResponsiveButton } from './ResponsiveButton';
import { GrafanaTheme, useTheme, Tooltip } from '@grafana/ui'; import { GrafanaTheme, useTheme, Tooltip } from '@grafana/ui';
@ -96,6 +97,7 @@ const defaultLiveTooltip = () => {
}; };
type LiveTailButtonProps = { type LiveTailButtonProps = {
splitted: boolean;
start: () => void; start: () => void;
stop: () => void; stop: () => void;
pause: () => void; pause: () => void;
@ -104,7 +106,7 @@ type LiveTailButtonProps = {
isPaused: boolean; isPaused: boolean;
}; };
export function LiveTailButton(props: LiveTailButtonProps) { 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 theme = useTheme();
const styles = getStyles(theme); const styles = getStyles(theme);
@ -113,17 +115,17 @@ export function LiveTailButton(props: LiveTailButtonProps) {
return ( return (
<> <>
<Tooltip content={defaultLiveTooltip} placement="bottom"> <Tooltip content={defaultLiveTooltip} placement="bottom">
<button <ResponsiveButton
className={classNames('btn navbar-button', styles.liveButton, { splitted={splitted}
buttonClassName={classNames('btn navbar-button', styles.liveButton, {
[`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive, [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive,
[styles.isLive]: isLive && !isPaused, [styles.isLive]: isLive && !isPaused,
[styles.isPaused]: isLive && isPaused, [styles.isPaused]: isLive && isPaused,
})} })}
iconClassName={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')}
onClick={onClickMain} onClick={onClickMain}
> title={'\xa0Live'}
<i className={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')} /> />
<span>&nbsp; Live</span>
</button>
</Tooltip> </Tooltip>
<CSSTransition <CSSTransition
mountOnEnter={true} mountOnEnter={true}