mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
* 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:
parent
6910da6221
commit
4fbc481d1f
@ -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}
|
||||
|
@ -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};
|
||||
`,
|
||||
|
@ -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)};
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user