mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
grafana/ui: Add synced timepickers styling to TimePicker (#21598)
This commit is contained in:
parent
e84a047a67
commit
dfeee3dd4a
@ -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" />}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user