IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
View File

@ -69,19 +69,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
font-size: ${theme.typography.size.md};
}
`,
syncedTimePicker: css`
label: syncedTimePicker;
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;
@ -160,7 +147,7 @@ export class UnthemedTimePicker extends PureComponent<Props, State> {
const timePickerIconClass = cx('fa fa-clock-o fa-fw', { ['icon-brand-gradient']: syncedTimePicker });
const timePickerButtonClass = cx('btn navbar-button navbar-button--tight', {
[`btn--radius-right-0 ${styles.noRightBorderStyle}`]: !!timeSyncButton,
[`explore-active-button-glow ${styles.syncedTimePicker}`]: syncedTimePicker,
[`explore-active-button`]: syncedTimePicker,
});
return (

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]}

16
public/sass/pages/_explore.scss
View File

@ -22,8 +22,22 @@
}
}
.explore-active-button-glow {
.explore-active-button {
box-shadow: $btn-active-box-shadow;
border-color: $orange-dark;
background-image: none;
background-color: transparent;
color: $orange-dark !important;
&:focus {
background-color: transparent;
}
i {
text-shadow: none;
background: linear-gradient(180deg, #f05a28 30%, #fbca0a 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
}
.explore-ds-picker {
min-width: 200px;