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: Refactor active buttons css (#22124)

Browse Source
This commit is contained in:
Ivana Huckova
2020-02-12 20:11:40 +01:00
committed by GitHub
parent ef36276584
commit 2be4d8dfd0
5 changed files with 20 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -124,7 +124,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
<ResponsiveButton
splitted={splitted}
buttonClassName={classNames('btn navbar-button', styles.liveButton, {
[`btn--radius-right-0 explore-active-button-glow ${styles.noRightBorderStyle}`]: isLive,
[`btn--radius-right-0 explore-active-button ${styles.noRightBorderStyle}`]: isLive,
[styles.isLive]: isLive && !isPaused,
[styles.isPaused]: isLive && isPaused,
})}
@@ -151,7 +151,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
>
<div>
<button
className={`btn navbar-button navbar-button--attached explore-active-button-glow ${styles.isLive}`}
className={`btn navbar-button navbar-button--attached explore-active-button ${styles.isLive}`}
onClick={stop}
>
<i className={classNames('fa fa-stop icon-brand-gradient')} />

15
public/app/features/explore/TimeSyncButton.tsx
View File

@@ -7,19 +7,6 @@ import { GrafanaTheme } from '@grafana/data';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
timePickerSynced: css`
label: timePickerSynced;
border-color: ${theme.colors.orangeDark};
background-image: none;
background-color: transparent;
color: ${theme.colors.orangeDark};
&:focus,
:hover {
color: ${theme.colors.orangeDark};
background-image: none;
background-color: transparent;
}
`,
noRightBorderStyle: css`
label: noRightBorderStyle;
border-right: 0;
@@ -55,7 +42,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
<Tooltip content={syncTimesTooltip} placement="bottom">
<button
className={classNames('btn navbar-button navbar-button--attached', {
[`explore-active-button-glow ${styles.timePickerSynced}`]: isSynced,
[`explore-active-button`]: isSynced,
})}
aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
onClick={() => onClick()}

2
public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
View File

@@ -15,7 +15,7 @@ exports[`TimeSyncButton should render component 1`] = `
>
<button
aria-label="Synced times"
className="btn navbar-button navbar-button--attached explore-active-button-glow css-1tn4rnx-timePickerSynced"
className="btn navbar-button navbar-button--attached explore-active-button"
onClick={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}