IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-16 18:34:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana-UI: update date picker (#22414)

Browse Source 
* Grafana UI: Add new styles

* Grafana UI: add picker focus styles

* Grafana UI: use formInputBg

* Grafana UI: remove extra box-shadow

* Grafana UI: Tweak overlay position

* Grafana UI: Tweak overlay borders

* Grafana UI: Align overlay with input
This commit is contained in:
Alex Khomenko 2020-02-26 13:56:01 +02:00 committed by GitHub
parent eb98d9c15b
commit bb6a6d795f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import RcTimePicker from 'rc-time-picker'; import RcTimePicker from 'rc-time-picker';
import { css } from 'emotion'; import { css, cx } from 'emotion';
import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data'; import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data';
import { useTheme, Icon } from '../../index'; import { useTheme, Icon, selectThemeVariant as stv } from '../../index';
import { stylesFactory } from '../../themes'; import { stylesFactory } from '../../themes';
import { inputSizes } from '../Forms/commonStyles'; import { inputSizes, getFocusCss } from '../Forms/commonStyles';
import { FormInputSize } from '../Forms/types'; import { FormInputSize } from '../Forms/types';
interface Props { interface Props {
@ -16,6 +16,11 @@ interface Props {
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = stv({ light: theme.colors.white, dark: theme.colors.formInputBg }, theme.type);
const menuShadowColor = stv({ light: theme.colors.gray4, dark: theme.colors.black }, theme.type);
const optionBgHover = stv({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type);
const borderRadius = theme.border.radius.sm;
const borderColor = theme.colors.formInputBorder;
return { return {
caretWrapper: css` caretWrapper: css`
position: absolute; position: absolute;
@ -28,15 +33,50 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`, `,
picker: css` picker: css`
.rc-time-picker-panel-select { .rc-time-picker-panel-select {
border-color: ${theme.colors.dark6};
font-size: 14px; font-size: 14px;
background-color: ${bgColor};
border-color: ${borderColor};
li { li {
outline-width: 2px; outline-width: 2px;
&.rc-time-picker-panel-select-option-selected { &.rc-time-picker-panel-select-option-selected {
background-color: inherit; background-color: inherit;
border: 1px solid ${theme.colors.orange}; border: 1px solid ${theme.colors.orange};
border-radius: ${theme.border.radius.sm}; border-radius: ${borderRadius};
} }
&:hover {
background: ${optionBgHover};
}
}
}
.rc-time-picker-panel-inner {
box-shadow: 0px 4px 4px ${menuShadowColor};
background-color: ${bgColor};
border-color: ${borderColor};
border-radius: ${borderRadius};
margin-top: 3px;
.rc-time-picker-panel-input-wrap {
margin-right: 2px;
&,
.rc-time-picker-panel-input {
background-color: ${bgColor};
padding-top: 2px;
}
}
}
`,
input: css`
.rc-time-picker-input {
background-color: ${bgColor};
border-radius: ${borderRadius};
border-color: ${borderColor};
height: ${theme.spacing.formInputHeight};
&:focus {
${getFocusCss(theme)}
} }
} }
`, `,
@ -49,7 +89,7 @@ export const TimeOfDayPicker: FC<Props> = ({ minuteStep = 1, showHour = true, on
return ( return (
<div> <div>
<RcTimePicker <RcTimePicker
className={inputSizes()[size]} className={cx(inputSizes()[size], styles.input)}
popupClassName={styles.picker} popupClassName={styles.picker}
defaultValue={dateTimeAsMoment()} defaultValue={dateTimeAsMoment()}
onChange={(value: any) => onChange(dateTime(value))} onChange={(value: any) => onChange(dateTime(value))}