feat/Separate date and time picker

[GVodyanov]

Fix #6385

Stuff changed:

• TimePicker and DatePicker components moved to the native datepicker
• Timezone selector redone to use the timezone picker component
• UI redesign with splitting up time and date picker

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 164 lines in your changes missing coverage. Please review.

Project coverage is 23.36%. Comparing base (9cc73fb) to head (7daaa01).
Report is 19 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/Shared/DatePickerOld.vue	0.00%	122 Missing ⚠️
...ents/Editor/Properties/PropertyTitleTimePicker.vue	0.00%	19 Missing ⚠️
src/store/calendarObjectInstance.js	0.00%	8 Missing and 4 partials ⚠️
src/mixins/EditorMixin.js	0.00%	5 Missing ⚠️
src/views/EditSimple.vue	0.00%	3 Missing ⚠️
...NavigationHeader/AppNavigationHeaderDatePicker.vue	0.00%	1 Missing ⚠️
src/components/Shared/DatePicker.vue	0.00%	1 Missing ⚠️
src/components/Shared/TimePicker.vue	0.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #6423      +/-   ##
============================================
- Coverage     23.47%   23.36%   -0.12%     
  Complexity      453      453              
============================================
  Files           247      248       +1     
  Lines         11722    11778      +56     
  Branches       2212     2256      +44     
============================================
  Hits           2752     2752              
- Misses         8650     8702      +52     
- Partials        320      324       +4     

Flag	Coverage Δ
javascript	14.95% <0.00%> (-0.09%)	⬇️
php	59.37% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[GVodyanov]

Hey @nimishavijay I know this doesn't exactly match your spec, but I wasn't able to include the text and icons inside the date picker input, as it's the native browser one. Please tell me if it could still work and if you might have any ideas on how to make it better seeing the limitations.

[st3iny]

Looks amazing so far!

I noticed two small issues during my testing:

1. All day events can not have time zones. The time zone select should be hidden when All day is checked.
2. Some design issues during my testing. See below for screenshots.

Popover editor read-only wrapping

Sidebar editor overflowing

(16:9 screen, full-screen browser window)

[GVodyanov]

@st3iny Thanks for the review!

I hadn't looked at the read-only part, but now that I did... it was a wonder it (barely) worked, lol. Anyways here's how I made it look:

And the other stuff you mentioned is fixed now too :)

[GVodyanov]

I noticed that this thing here needs to be migrated too... figuring out with Christoph what to do about it, but ignore it in reviews for now

[SebastianKrupinski]

Hey, just tested this. This is what I noticed.

Also some of these observations might need more input from the team on what the logic should be.

• (popup modal only) When changing the start time to a time greater then the end time, the end time does not change to reflect that change and stays in the past (before start time), should adjust automatically with the same time span as before.

• (popup modal only) When changing the date, after changing the time, the time resets to the original value

• Time zone input does not align with date input. (looks odd) I think is should be inline with date input.

• Read only pop-up should show both time zones if they differ

• Changing start time zone automatically changes end time zone. Hard to say what the logic should be here.

• Changing the start date to a date prior to set date automatically changes the end date, I don't think this should automatically change the end date unless the end date is before the start date.

[nimishavijay]

Looks really nice! :) Most of the comments are regarding spacing and alignment:

• the width of the entire container can be reduced if the only elements shown are the date picker and time picker. Right now in the first screenshot, both pickers are rather wide. So if the width of the whole card can be reduced by ~90px, then even the width of the pickers would be lesser
• the width of the timezone dropdown is more than needed. Would it be possible to adjust that to be ~30px lesser?
• possibly beyond the scope of this issue but is it possible to reduce the width of the dropdown in the reminder selector? It's way too wide for a single word
• could we un-bold the text in the timezone button? And possibly remove the edit icon? (It's a deviation from the mockups but I checked with the rest of the team and we agree that the button is too eye catching if it's bold + has 2 icons)

I wasn't able to include the text and icons inside the date picker input, as it's the native browser one.

Do you think we could use the floating labels like we do for input fields?

Nice-to-have also in the mockups: the first time someone edits a time zone, the change is reflected across both the input fields (because it most likely that you want to change the timezone for both the start and end time).

saw that this the current behavior, nice work! @SebastianKrupinski The idea is that it's very unlikely that someone would want different start and end time zones, but the ical spec needs 2 separate time zone pickers, so we're trying to make it easier to change the timezone.