Datepicker design improvements

[pixelipo]

This is a copy of nextcloud/deck#205 because the same datepicker is used in many Nexcloud apps, inlcuding nextcloud/files and @nextcloud/calendar

It would be useful to highlight "today" in the datepicker. It's a small fix, but some feedback from @nextcloud/designers is needed first.

Here's my suggestion:

However, two things must be considered as well:

1. datepicker doesn't look very much integrated into the general UI (buttons, icons, colours, fonts...) - do we want to make a more general overhaul of it? Here's an example of what it might look like:
   

2. Files app by default disables (in "set expiration date") dates older than "tomorrow", so it might not be weird to highlight "today". This is how my suggestion would appear over there:
   

[comradekingu]

@pixelipo I am not one of the designers, but:

Changes:
Moved all dates 4 pixels to the left. Image two has the single digit dates centred.
They are still aligned topwards, since there is an odd number of pixels. 25x25
The horisontal alignment isn't immediately obvious though.

Since dates never go into the triple digits, i don't understand why they are right-aligned.

Rationale:
My thinking is that having two squares, meddles the field between what is the selection, (if i am reading it correctly,) and what is the current date.

Distinguishing the current date from the selection can be done by having both current month, and current day, displayed in blue.

Months on the side:
Having other months alongside could be useful if the user is bad at remembering the ordering of the months.

Time field
I don't see the point of having a time field, if it is so that it only displays user-time. (This is an assumption on my part.) Seeing as the user is conditioned into looking for it elsewhere.

[jancborchardt]

Agree with both of your suggestions @pixelipo @comradekingu. Just small additions:

• It isn’t immediately apparent which is today’s date and which is the selected date, especially not if only coloring of the text is used (as in your proposal @comradekingu).
• We should additionally also indicate the weekend like we do in the Calendar app. cc @nextcloud/calendar
• Let’s simplify moving from »box around each day« to a simpler grid, and also removing the double outer border. This lifts the design out of the last decade. ;)

Here’s a a rough mockup (the circles should be round of course):

What do you think @nextcloud/designers @nextcloud/calendar?

[comradekingu]

Me again:

Changes:
Boxen are reduced 4 px each axis. Making them equidistant from borders and each-other.

Rationale:
This should make it easier to go one year back quickly.
For illustration, i added other months, it would be useful to have them there as a vertical dropdown to span quickly for both year and month. It would have to push the current month downwards, seeing as there is no vertical space upwards available.

Ideally, worst case:

jan
feb
mar
apr
may
jun
jul
aug
sep
okt
nov

< des* > < current year* >

Actual result:

< ↓ > < current year* >
jan
feb
mar
apr
may
jun
jul
aug
sep
okt
nov
des*

@jancborchardt (Got ninja'd.) Looks much cleaner. If not a bit low on contrast.
I can't remember what was done to the similar calendar in elementary OS, but it was also sleek.

[comradekingu]

@jancborchardt Something like this?

Changes:
More contrast, separate month and year fields, added weekday names, coloured current day, weekday name, month and year. In retrospect a little blue circle next to them would have made more sense. In line with having the current day be a blue ball.

Rationale:
Knowing what days relate to which column is useful. If even just as a mouseover till you get used to it. "Does it start on Sunday or Monday?" would be the question to ask.
Also, potentially adding week numbers in a column on the left seems a oft used convention.

Edit: Bubbles looked better. Might be able to get away with just underline for months and year.

Would be interesting to colour the >'s or <'s pointing to respectively a later or previous current month or year.

[pixelipo]

@comradekingu selected date should be more visible than today - the opposite is try in your example.

Separation of month and year would be nice, but that is not as simple to do as all the other changes so far mentioned

[jancborchardt]

This is a 3-step approach, and we need to make sure not to bunch it up too much or over-discuss it or we risk not getting anything done. ;)

1. Highlight the current date. This is quickly done and important.
2. Modernize the design. See my mockup. This is pure CSS and also quite easily done.
3. Think about if we want to modify the elements available in the dialog. This includes modifying the jQuery UI dialog and could be more difficult. Also we should make sure this is the same also in the Calendar app (as I intentionally checked the top left part of the calendar app and modeled the popover after it). We should do this last, only as soon as the other changes are done and merged, as this will take more work and deliberation.

[pixelipo]

Steps 1 and 2 ready for review in #5713

[Espina2]

@jancborchardt in your design it will look better if you had more margins in all the sides.