[DatePicker] Landscape layout differs to current MD spec

[mbrookes]

Problem Description

The current layout for the landscape DatePicker differs to that in the material design spec:

Material-UI v0.15.0-alpha.1:

MD spec: (5/3/2015):

https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers

The main difference is that the left panel extends the full height of the picker, and has a smaller font with a heavier weight.

In addition the calendar has tighter vertical spacing overall (smaller circular indicator), a smaller margin between the top row of dates and the days, and a slightly wider horizontal spacing.

Finally, the action button widths reflect the size of the content, rather than fixed widths.

Versions

• Material-UI: HEAD@a58a9549
• React: Any
• Browser: Any

[nathanmarks]

The buttons in their own white space with no left panel looks bad enough in comparison to the proper implementation for this to be a bug imo.

[mbrookes]

The problem is that the Calendar is contained within a Dialog, and the Dialog has the white bar across the bottom.

I've fixed it by adding an empty div to Dialog (and DatePickerInline) that is styled by DatePickerDialog if the Date Picker is landscape.

However there seems to be some difference between Dialog and DatePickerInline that causes a gap between the left colored DateDisplay and the filler div.

Fixed modal

(ignore the leftBar text, it was just for reference).

Nearly fixed inline

@tintin1343 is going to take a look to see what's causing it.

[mbrookes]

I fixed the DateDisplay height to match the height of the CalendarToolbar / CalendarMonth stack.

It think that in the modal Date Picker, something is causing the dialog action button container to overlap the CalendarMonth, so the problem isn't evident. That probably means the modal dialog is actually 6 pixels too short for the current layout.

HOWEVER, there's now an animation glitch when switching months with a smaller numbers of weeks, due to the DateDisplay shrinking before the dialog does, leaving a temporary white gap.

I suspect a rework of DatePicker to use flex would help, but in any case I will stop poking, and hand over the reigns to @tintin1343 to continue this.

[nathanmarks]

@mbrookes should dialogs even have a white gap at the bottom by default? I honestly feel like the action bar at the bottom should be a component, similar to how CardActions is a component.

[tintin1343]

@mbrookes : Haha. I took a brief look at the issue. Seems like the action buttons are in a separate dialog and that frankly did not make sense to me. It should all be a part of the datepickerdialog component right? The reason I am saying this is we will have to create a div in the dialog of the same width and color as the leftpane to make it even with the material spec.

I suspect a rework of DatePicker to use flex would help,

I agree. Flex will help fix it. But it will require a rework. And even I noticed a glitch in the animations after I made the changes. I am gonna start from scratch again.

@nathanmarks : I agree.

[mbrookes]

should dialogs even have a white gap at the bottom by default? I honestly feel like the action bar at the bottom should be a component, similar to how CardActions is a component.

There is no white bar at the bottom by default - the actions are optional. We could support a nested component instead of a prop as you suggest, and you might then be able to nest the currently required extra coloured div (labelled 'leftBar' in the screenshots above), instead if it being a 'feature' of dialog, but it doesn't solve the problem that this is then a separate component to Calendar, and its coloured left DateDisplay.

[mbrookes]

Here's the current nesting:

The Dialog (red) has action buttons below the green line, and Calendar above the green line. Calendar is made up of DateDisplay (left), with the vertically stacked CalendarToolbar and CalendarMonth (right).

One kludgy solution was inserting a div in the dialog to the left of the action buttons ('Fixed' modal above), but that has the animation problem I mentioned.

Another possible solution would be to make the action buttons an optional part of the Calendar component, such that the left DateDisplay spans the full height of that component, with the stacked CalendarToolbar, CalendarMonth and action buttons to its right. The Dialog or Popover would then be simple containers.

I say option because even though Calendar is part of DatePicker, I understand that whilst undocumented, it's exported and can be used independently of DatePicker.

[tintin1343]

@mbrookes : Thanks for the above post. I was thinking in the same direction. I tried the div solution yesterday but it was not a good way (Animation Issue).

Another possible solution would be to make the action buttons an optional part of the Calendar component, such that the left DateDisplay spans the full height of that component, with the stacked CalendarToolbar, CalendarMonth and action buttons container to its right. The dialog or popover would then be simple containers.

I agree. I think I can try incorporating flex into this.

One quick question though, do you know why is the animation issue popping up when I do any changes in the left pane?

[mbrookes]

I didn't dig into it, but I presume it's because the DateDisplay size collapses immediately based on the number of weeks in the month, leaving the white gap until CalendarMonth resizes.

The proposed solution fixes that, as DateDisplay can flex to the full height of Calendar so will resize as needed rather than it being computed.

[tintin1343]

@mbrookes : Okay. I will look into it.

[tintin1343]

@mbrookes : This is a temp thing that I did and still needs work. Can I put the flatbuttons in the Calendar components? Or do you want me to make them a part of the datepickerdialog?

[tintin1343]

@mbrookes : How abt this?

I added the ACTION BUTTONS in calendar and styled the components. I still have to assign functionality ti the action buttons.

[mbrookes]

Great!

CANCEL needs to go to the left of OK.

Also, since you're deep in the guts of it, now might be a good opportunity to tighten up the rest of the spacing as in the first post in this issue.

[tintin1343]

@mbrookes : Alright. Yeah I will do that. The change in CSS also shifts the calendarMonth layout for a portrait date picker.

I am thinking of incorporating flex box for this (it partially has it in the calendar component) to resolve the problem with layouts.

[mbrookes]

I am thinking of incorporating flex box for this [...] to resolve the problem with layouts.

I thought we'd already agreed that, but great!

[tintin1343]

@mbrookes : Oh yeah..I was saying flex box should solve the problem for the layouts. My bad (Need to formulate sentences well) 😀

[tintin1343]

I made the changes required. You can find the code here:
https://github.com/tintin1343/material-ui/tree/datepicker-redesign

I also observed one more discrepancy

The year container in our code looks likes this:

@nathanmarks @mbrookes I have a question: Do we need to keep the scroll for desktop?

However the material Spec has something like this:

[mbrookes]

I made the changes required.

Could you look at the date selector circle size & position?

I also observed one more discrepancy

Well spotted, I think you should open another issue for that, and tackle it in a separate PR.

Do we need to keep the scroll for desktop?

The scrollbar? It doesn't show until you scroll on Mac. and is quite discrete, so I'll let a Windows user comment, but from my perspective, if you can hide it, I don't see the harm - clicking on another year causes the scroll anyway, so it's perfect usable without the hint, although it does add contextual clues as to your position in the list of years, and the number of years available to scroll through.

Also, I noticed that the year selector is narrower than the container, so there's space off to the right of the scroll bar which makes it ugly!

If you're going to make the design match the spec, it might be nice to have the date grow and shrink as you change the selected date. And keyboard navigation is broken for this part of the DatePicker, but that's also for the other PR! 👍

[tintin1343]

@mbrookes @nathanmarks

So I finally managed to get the datepicker in both landscape / portrait as well as the dialog and inline mode consistent with the MD spec.

The only thing remaining is the Event handling on the Action buttons. I wanted to ask I feel its better if I make the action Buttons of "Ok" and "Cancel" as a component called ActionButton. It will help implementation in the Calendar-Container as well as the Year-Container as well.

Our implementation was missing the ActionButtons in the Year-Container mode.

I Implemented that as well and made it consistent with the MD spec. So the current implementation looks like this.

This is from the MD spec:

You can find the commit here:
https://github.com/tintin1343/material-ui/tree/datepicker-redesign

Looking forward to your inputs.

[irfyrafa]

How can i implement this light theme portrait and landscape datepicker in my program..?