Grafana-UI: Reverse TimeRangeInput range pickers (#26652)

* Grafana-UI: Reverse TimeRangeInput range pickers * Grafana-UI: Add comment * Grafana-UI: Update snapshots

Grafana-UI: Reverse TimeRangeInput range pickers (#26652)
* Grafana-UI: Reverse TimeRangeInput range pickers * Grafana-UI: Add comment * Grafana-UI: Update snapshots
0b8ad917 · Alex Khomenko · GitHub · 2ba00837 · 0b8ad917 · 0b8ad917
Commit 0b8ad917 authored Jul 28, 2020 by Alex Khomenko Committed by GitHub Jul 28, 2020
5 changed files
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx
@@ -93,6 +93,7 @@ export const TimeRangeInput: FC<Props> = ({
            onChangeTimeZone={onChangeTimeZone || noop}
            className={styles.content}
            hideTimeZone={hideTimeZone}
+            isReversed
          />
        </ClickOutsideWrapper>
      )}

--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
@@ -9,15 +9,15 @@ import { Icon } from '../../Icon/Icon';
 import { Portal } from '../../Portal/Portal';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme, isReversed = false) => {
  const containerBorder = theme.isDark ? theme.palette.dark9 : theme.palette.gray5;
  return {
    container: css`
      top: -1px;
      position: absolute;
-      right: 544px;
+      ${isReversed ? 'left' : 'right'}: 544px;
-      box-shadow: 0px 0px 20px ${theme.colors.dropdownShadow};
+      box-shadow: ${isReversed ? '10px' : '0px'} 0px 20px ${theme.colors.dropdownShadow};
      background-color: ${theme.colors.bodyBg};
      z-index: -1;
      border: 1px solid ${containerBorder};
@@ -28,7 +28,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
        background-color: ${theme.colors.bodyBg};
        width: 19px;
        height: 100%;
-        content: ' ';
+        content: ${!isReversed ? ' ' : ''};
        position: absolute;
        top: 0;
        right: -19px;
@@ -193,13 +193,14 @@ interface Props {
  onChange: (from: DateTime, to: DateTime) => void;
  isFullscreen: boolean;
  timeZone?: TimeZone;
+  isReversed?: boolean;
 }
 const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation();
 export const TimePickerCalendar = memo<Props>(props => {
  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = getStyles(theme, props.isReversed);
  const { isOpen, isFullscreen } = props;
  if (!isOpen) {

--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
@@ -11,7 +11,7 @@ import { TimeRangeForm } from './TimeRangeForm';
 import { TimeRangeList } from './TimeRangeList';
 import { TimePickerFooter } from './TimePickerFooter';
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme, isReversed) => {
  const containerBorder = theme.isDark ? theme.palette.dark9 : theme.palette.gray5;
  return {
@@ -24,7 +24,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
      top: 116%;
      border-radius: 2px;
      border: 1px solid ${containerBorder};
-      right: 0;
+      right: ${isReversed ? 'unset' : 0};
      @media only screen and (max-width: ${theme.breakpoints.lg}) {
        width: 262px;
@@ -37,9 +37,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
    leftSide: css`
      display: flex;
      flex-direction: column;
-      border-right: 1px solid ${theme.colors.border1};
+      border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border1}`};
      width: 60%;
      overflow: hidden;
+      order: ${isReversed ? 1 : 0};
      @media only screen and (max-width: ${theme.breakpoints.lg}) {
        display: none;
@@ -47,6 +48,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
    `,
    rightSide: css`
      width: 40% !important;
+      border-right: ${isReversed ? `1px solid ${theme.colors.border1}` : 'none'};
      @media only screen and (max-width: ${theme.breakpoints.lg}) {
        width: 100% !important;
@@ -131,6 +133,8 @@ interface Props {
  showHistory?: boolean;
  className?: string;
  hideTimeZone?: boolean;
+  /** Reverse the order of relative and absolute range pickers. Used to left align the picker in forms */
+  isReversed?: boolean;
 }
 interface PropsWithScreenSize extends Props {
@@ -144,7 +148,7 @@ interface FormProps extends Omit<Props, 'history'> {
 export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = props => {
  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = getStyles(theme, props.isReversed);
  const historyOptions = mapToHistoryOptions(props.history, props.timeZone);
  const { quickOptions = [], otherOptions = [], isFullscreen } = props;
@@ -247,7 +251,13 @@ const FullScreenForm: React.FC<FormProps> = props => {
        <div aria-label="TimePicker absolute time range" className={styles.title}>
          <TimePickerTitle>Absolute time range</TimePickerTitle>
        </div>
-        <TimeRangeForm value={props.value} timeZone={props.timeZone} onApply={props.onChange} isFullscreen={true} />
+        <TimeRangeForm
+          value={props.value}
+          timeZone={props.timeZone}
+          onApply={props.onChange}
+          isFullscreen={true}
+          isReversed={props.isReversed}
+        />
      </div>
      {props.showHistory && (
        <div className={styles.recent}>

--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeForm.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeForm.tsx
@@ -21,6 +21,7 @@ interface Props {
  onApply: (range: TimeRange) => void;
  timeZone?: TimeZone;
  roundup?: boolean;
+  isReversed?: boolean;
 }
 interface InputState {
@@ -121,6 +122,7 @@ export const TimeRangeForm: React.FC<Props> = props => {
        onClose={() => setOpen(false)}
        onChange={onChange}
        timeZone={timeZone}
+        isReversed={props.isReversed}
      />
    </>
  );

--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/__snapshots__/TimePickerContent.test.tsx.snap
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/__snapshots__/TimePickerContent.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
    className="css-ooqtr4"
  >
    <div
-      className="css-dlnzj7"
+      className="css-1f2wc71"
    >
      <FullScreenForm
        historyOptions={Array []}
@@ -35,7 +35,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
      autoHide={false}
      autoHideDuration={200}
      autoHideTimeout={200}
-      className="css-1o1b8dr"
+      className="css-10t714z"
      hideTracksWhenNotNeeded={false}
      setScrollTop={[Function]}
    >
@@ -109,7 +109,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
    className="css-ooqtr4"
  >
    <div
-      className="css-dlnzj7"
+      className="css-1f2wc71"
    >
      <FullScreenForm
        historyOptions={Array []}
@@ -136,7 +136,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
      autoHide={false}
      autoHideDuration={200}
      autoHideTimeout={200}
-      className="css-1o1b8dr"
+      className="css-10t714z"
      hideTracksWhenNotNeeded={false}
      setScrollTop={[Function]}
    >
@@ -206,7 +206,7 @@ exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
    className="css-ooqtr4"
  >
    <div
-      className="css-dlnzj7"
+      className="css-1f2wc71"
    >
      <FullScreenForm
        history={
@@ -268,7 +268,7 @@ exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
      autoHide={false}
      autoHideDuration={200}
      autoHideTimeout={200}
-      className="css-1o1b8dr"
+      className="css-10t714z"
      hideTracksWhenNotNeeded={false}
      setScrollTop={[Function]}
    >