IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 08:56:43 -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 { css } from '@emotion/css';
import { CSSTransition } from 'react-transition-group';
import { useTheme, Tooltip, stylesFactory, ButtonGroup, ToolbarButton } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { Tooltip, ButtonGroup, ToolbarButton } from '@grafana/ui';
type LiveTailButtonProps = {
splitted: boolean;
@ -16,8 +15,6 @@ type LiveTailButtonProps = {
export function LiveTailButton(props: LiveTailButtonProps) {
const { start, pause, resume, isLive, isPaused, stop, splitted } = props;
const theme = useTheme();
const styles = getStyles(theme);
const buttonVariant = isLive && !isPaused ? 'active' : 'default';
const onClickMain = isLive ? (isPaused ? resume : pause) : start;
@ -57,29 +54,27 @@ export function LiveTailButton(props: LiveTailButtonProps) {
);
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
stopButtonEnter: css`
label: stopButtonEnter;
width: 0;
opacity: 0;
overflow: hidden;
`,
stopButtonEnterActive: css`
label: stopButtonEnterActive;
opacity: 1;
width: 32px;
`,
stopButtonExit: css`
label: stopButtonExit;
width: 32px;
opacity: 1;
overflow: hidden;
`,
stopButtonExitActive: css`
label: stopButtonExitActive;
opacity: 0;
width: 0;
`,
};
});
const styles = {
stopButtonEnter: css`
label: stopButtonEnter;
width: 0;
opacity: 0;
overflow: hidden;
`,
stopButtonEnterActive: css`
label: stopButtonEnterActive;
opacity: 1;
width: 32px;
`,
stopButtonExit: css`
label: stopButtonExit;
width: 32px;
opacity: 1;
overflow: hidden;
`,
stopButtonExitActive: css`
label: stopButtonExitActive;
opacity: 0;
width: 0;
`,
};