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: use GrafanaTheme2 (LiveTailButton component) (#37516)

Browse Source 
* Explore: use GrafanaTheme2 in LiveTailsButton

* Remove unused theme
This commit is contained in:
Olof Bourghardt 2021-08-19 16:17:28 +02:00 committed by GitHub
parent d43d9207ee
commit 28cf93e42c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { CSSTransition } from 'react-transition-group'; import { CSSTransition } from 'react-transition-group';
import { useTheme, Tooltip, stylesFactory, ButtonGroup, ToolbarButton } from '@grafana/ui'; import { Tooltip, ButtonGroup, ToolbarButton } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
type LiveTailButtonProps = { type LiveTailButtonProps = {
splitted: boolean; splitted: boolean;
@ -16,8 +15,6 @@ type LiveTailButtonProps = {
export function LiveTailButton(props: LiveTailButtonProps) { export function LiveTailButton(props: LiveTailButtonProps) {
const { start, pause, resume, isLive, isPaused, stop, splitted } = props; const { start, pause, resume, isLive, isPaused, stop, splitted } = props;
const theme = useTheme();
const styles = getStyles(theme);
const buttonVariant = isLive && !isPaused ? 'active' : 'default'; const buttonVariant = isLive && !isPaused ? 'active' : 'default';
const onClickMain = isLive ? (isPaused ? resume : pause) : start; const onClickMain = isLive ? (isPaused ? resume : pause) : start;
@ -57,29 +54,27 @@ export function LiveTailButton(props: LiveTailButtonProps) {
); );
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => { const styles = {
return { stopButtonEnter: css`
stopButtonEnter: css` label: stopButtonEnter;
label: stopButtonEnter; width: 0;
width: 0; opacity: 0;
opacity: 0; overflow: hidden;
overflow: hidden; `,
`, stopButtonEnterActive: css`
stopButtonEnterActive: css` label: stopButtonEnterActive;
label: stopButtonEnterActive; opacity: 1;
opacity: 1; width: 32px;
width: 32px; `,
`, stopButtonExit: css`
stopButtonExit: css` label: stopButtonExit;
label: stopButtonExit; width: 32px;
width: 32px; opacity: 1;
opacity: 1; overflow: hidden;
overflow: hidden; `,
`, stopButtonExitActive: css`
stopButtonExitActive: css` label: stopButtonExitActive;
label: stopButtonExitActive; opacity: 0;
opacity: 0; width: 0;
width: 0; `,
`, };
};
});