Design improvements to date picker

nimishavijay commented 1 week ago

Is your feature request related to a problem? Please describe.

Even though there are efforts to migrate to the native date picker, in some cases the NC date picker is used, for eg while booking an appointment we will show the NC date picker all the time.

The visual design of the date picker can be improved such that it reflects the current state of the NC design.

Describe the solution you'd like

Before	After

High priority:

[ ] change the border radius to match the current style
[ ] Use full month names
[ ] Make month, year and arrow buttons into tertiary buttons so the focus is on the dates
[ ] Always use full opacity text and buttons
[ ] Always use regular font size

Medium priority:

[ ] Don't show last week of previous month/first week of next month
[ ] Add margin-bottom: var(--default-grid-baseline) for each row
[ ] Remove the double arrow buttons in the top row (first and last buttons) as no other date picker uses these buttons

Low priority:

[ ] remove the 1px border around the entire element
[ ] There can be a larger gap for every hour as a little divider. In many cases like here, there would then be slots of 4 grouped together to get a better feeling for the time rather than a long list.
[ ] One of the most important improvements UX-wise is: "disable dates for which no slots are available", is that possible to grey out the dates with no slots?

Date styles:

[ ] Day names (Su, Mo, etc) are --color-text-maxcontrast
[ ] Dates are by default --color-main-text
[ ] class disabled has background-color: var(--color-background-dark);
[ ] class not-current-month has color: var(--color-text-maxcontrast);

Describe alternatives you've considered

n/a

Additional context

szaimen commented 1 week ago

Hi, shouldnt the NcDateTimePicker finally be migrated over to the NcDateTimePickerNative?

jancborchardt commented 1 week ago

@szaimen as @nimishavijay said above:

Even though there are efforts to migrate to the native date picker, in some cases the NC date picker is used, for eg while booking an appointment we will show the NC date picker all the time.

Since the datepicker needs to be shown permanently and also indicate on which day there are appointments available, we can not use the native datepicker popup here. See mockup at https://github.com/nextcloud/calendar/issues/6321#issuecomment-2334914901

ShGKme commented 1 week ago

Component is located in https://github.com/nextcloud-libraries/nextcloud-vue/

nextcloud / calendar