From dfeee3dd4a5882900b19cf7dd9551dbfba6a83ec Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 20 Jan 2020 09:59:35 +0100
Subject: [PATCH] grafana/ui: Add synced timepickers styling to TimePicker
(#21598)
---
.../src/components/TimePicker/TimePicker.tsx | 34 ++++++++++++++-----
.../app/features/explore/TimeSyncButton.tsx | 10 +++++-
.../TimeSyncButton.test.tsx.snap | 2 +-
3 files changed, 36 insertions(+), 10 deletions(-)
diff --git a/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
index c679baa85be..22615c2f93c 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
@@ -1,7 +1,6 @@
// Libraries
import React, { PureComponent, memo, FormEvent } from 'react';
-import { css } from 'emotion';
-import classNames from 'classnames';
+import { css, cx } from 'emotion';
// Components
import { Tooltip } from '../Tooltip/Tooltip';
@@ -70,6 +69,23 @@ 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;
+ `,
};
});
@@ -140,6 +156,12 @@ export class UnthemedTimePicker extends PureComponent<Props, State> {
const { isOpen } = this.state;
const styles = getStyles(theme);
const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
+ const syncedTimePicker = timeSyncButton && isSynced;
+ const timePickerIconClass = cx('fa fa-clock-o fa-fw', { ['icon-brand-gradient']: syncedTimePicker });
+ const timePickerButtonClass = cx('btn navbar-button navbar-button--zoom', {
+ [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: !!timeSyncButton,
+ [`explore-active-button-glow ${styles.syncedTimePicker}`]: syncedTimePicker,
+ });
return (
<div className={styles.container}>
@@ -151,12 +173,8 @@ export class UnthemedTimePicker extends PureComponent<Props, State> {
)}
<div>
<Tooltip content={<TimePickerTooltip timeRange={value} />} placement="bottom">
- <button
- aria-label="TimePicker Open Button"
- className="btn navbar-button navbar-button--zoom"
- onClick={this.onOpen}
- >
- <i className={classNames('fa fa-clock-o fa-fw', isSynced && timeSyncButton && 'icon-brand-gradient')} />
+ <button aria-label="TimePicker Open Button" className={timePickerButtonClass} onClick={this.onOpen}>
+ <i className={timePickerIconClass} />
<TimePickerButtonLabel {...this.props} />
<span className={styles.caretIcon}>
{isOpen ? <i className="fa fa-caret-up fa-fw" /> : <i className="fa fa-caret-down fa-fw" />}
diff --git a/public/app/features/explore/TimeSyncButton.tsx b/public/app/features/explore/TimeSyncButton.tsx
index 93e0a07fdad..ab2d3788497 100644
--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
@@ -24,6 +24,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
label: noRightBorderStyle;
border-right: 0;
`,
+ /*
+ * Required top-padding, otherwise is fa-link icon in active state
+ * cut off on top due to fontAwesome icon position
+ */
+ topPadding: css`
+ label: topPadding;
+ padding-top: 1px;
+ `,
};
});
@@ -52,7 +60,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
onClick={() => onClick()}
>
- <i className={classNames('fa fa-link', isSynced && 'icon-brand-gradient')} />
+ <i className={classNames('fa fa-link', styles.topPadding, isSynced && 'icon-brand-gradient')} />
</button>
</Tooltip>
);
diff --git a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
index a569d62af9e..c785c72386a 100644
--- a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`TimeSyncButton should render component 1`] = `
onMouseLeave={[Function]}
>
<i
- className="fa fa-link icon-brand-gradient"
+ className="fa fa-link css-xmj56l-topPadding icon-brand-gradient"
/>
</button>
</PopoverController>