Fix Date picker content when pane is splitted (#46900). Show narrow(m… (#47206)

* Fix Date picker content when pane is splitted (#46900). Show narrow(mobile) content version.

* Change from boolean to value override and use it in calendar styles. Change calendar modal to be in center of screen.

* Be sure width division only happens on split view

Co-authored-by: Kristina Durivage <kristina.durivage@grafana.com>
This commit is contained in:
Alexander Kubyshkin 2022-04-21 20:49:52 +03:00 committed by GitHub
parent 6910da6221
commit 4fbc481d1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 15 deletions

View File

@ -45,6 +45,7 @@ export interface TimeRangePickerProps extends Themeable {
onZoom: () => void;
history?: TimeRange[];
hideQuickRanges?: boolean;
widthOverride?: number;
}
export interface State {
@ -68,6 +69,7 @@ export function UnthemedTimeRangePicker(props: TimeRangePickerProps): ReactEleme
onChangeTimeZone,
onChangeFiscalYearStartMonth,
hideQuickRanges,
widthOverride,
} = props;
const onChange = (timeRange: TimeRange) => {
@ -129,6 +131,7 @@ export function UnthemedTimeRangePicker(props: TimeRangePickerProps): ReactEleme
quickOptions={quickOptions}
history={history}
showHistory
widthOverride={widthOverride}
onChangeTimeZone={onChangeTimeZone}
onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth}
hideQuickRanges={hideQuickRanges}

View File

@ -37,7 +37,6 @@ export const getStyles = (theme: GrafanaTheme2, isReversed = false) => {
modal: css`
position: fixed;
top: 20%;
left: 25%;
width: 100%;
z-index: ${theme.zIndex.modal};
`,

View File

@ -1,7 +1,6 @@
import { GrafanaTheme2, isDateTime, rangeUtil, RawTimeRange, TimeOption, TimeRange, TimeZone } from '@grafana/data';
import { css, cx } from '@emotion/css';
import React, { memo, useMemo, useState } from 'react';
import { useMedia } from 'react-use';
import { stylesFactory, useTheme2 } from '../../../themes';
import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
import { Icon } from '../../Icon/Icon';
@ -29,6 +28,7 @@ interface Props {
/** Reverse the order of relative and absolute range pickers. Used to left align the picker in forms */
isReversed?: boolean;
hideQuickRanges?: boolean;
widthOverride?: number;
}
export interface PropsWithScreenSize extends Props {
@ -60,7 +60,7 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
const isContainerTall =
(isFullscreen && showHistory) || (!isFullscreen && ((showHistory && !isHistoryEmpty) || !hideQuickRanges));
const theme = useTheme2();
const styles = getStyles(theme, isReversed, hideQuickRanges, isContainerTall);
const styles = getStyles(theme, isReversed, hideQuickRanges, isContainerTall, isFullscreen);
const historyOptions = mapToHistoryOptions(history, timeZone);
const timeOption = useTimeOption(value.raw, quickOptions);
const [searchTerm, setSearchQuery] = useState('');
@ -112,9 +112,9 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
};
export const TimePickerContent: React.FC<Props> = (props) => {
const { widthOverride } = props;
const theme = useTheme2();
const isFullscreen = useMedia(`(min-width: ${theme.breakpoints.values.lg}px)`);
const isFullscreen = (widthOverride || window.innerWidth) >= theme.breakpoints.values.lg;
return <TimePickerContentWithScreenSize {...props} isFullscreen={isFullscreen} />;
};
@ -251,22 +251,18 @@ const useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOptio
}, [raw, quickOptions]);
};
const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall) => {
const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall, isFullscreen) => {
return {
container: css`
background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z3};
position: absolute;
z-index: ${theme.zIndex.dropdown};
width: 546px;
width: ${isFullscreen ? '546px' : '262px'};
top: 116%;
border-radius: 2px;
border: 1px solid ${theme.colors.border.weak};
${isReversed ? 'left' : 'right'}: 0;
@media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
width: 262px;
}
`,
body: css`
display: flex;
@ -282,13 +278,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRang
order: ${isReversed ? 1 : 0};
`,
rightSide: css`
width: 40% !important;
width: ${isFullscreen ? '40%' : '100%'}; !important;
border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
display: flex;
flex-direction: column;
@media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
width: 100% !important;
}
`,
timeRangeFilter: css`
padding: ${theme.spacing(1)};

View File

@ -92,6 +92,7 @@ export class ExploreTimeControls extends Component<Props> {
{...timePickerCommonProps}
timeSyncButton={timeSyncButton}
isSynced={syncedTimes}
widthOverride={splitted ? window.innerWidth / 2 : undefined}
onChange={this.onChangeTimePicker}
onChangeTimeZone={onChangeTimeZone}
onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth}