IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-30 12:44:10 -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}>
{controls => (
<LiveTailButton
splitted={splitted}
isLive={isLive}
isPaused={isPaused}
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 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}