Show duration options in an overlay

Here's a preview of how the updated widget looks, based on the MR

“there is a common pattern in calendar software to show duration options in an overlay” is not a good enough reason to merge this into Drupal CMS, just a good enough reason to test it and evaluate if we want it.

I'd love that, if possible UX or UI improvements are identified, we highlight them first and discuss them, before assuming they are correct and merging them. Because as a consequence you'll start building things on top of that, others reusing them, and then changing things will be a headache.

So I'd recommend not merging this, but first test it to make sure it's an improvement.

Based on the discussions here and in Drupal slack, I'm going to update this to only use the new overlay if the site builder has opted into it in the formatter settings, and I will mark it as experimental

Here's an updated look at how the overlay is formatted, now entirely with CSS, using separate spans for the duration and related end time.

Also, the changes won't be visible unless this new configuration is opted-into.

Hi @mandclu, I've applied the provided MR as a patch and it applied cleanly with no errors. After applying the patch Use an overlay to display duration options. - EXPERIMENTAL option is now being shown in smart_date field widget. When enabling the new overlay display duration, duration is shown between the time in the node edit page. However, there's a spacing/alignment issue in the overlay as shown in the attached screenshot. The extra spaces issue can be resolved if width: 3.75rem; is removed from the class .smart-date--duration-list--time. After removing the extra space is not visible and the time duration is displayed properly. I've attached screenshots of before and after fixes for your reference. As the design issue is present hence moving the issue status to Needs work.

Thanks!

@tirupati_singh Thank you for the feedback. The challenge underlying your feedback is that this widget needs to accommodate parts of the world that display time in a 12-hour format (e.g. 8:47pm) and the more widely used 24-hour format (e.g. 20:47). You can probably guess which of these I typically use ;-)

I believe the code can be updated to accommodate both properly. I can work on this.

The updated MR should only apply the 12h formatting (notably, the wider width) if needed. Please test.

Hi @mandclu, now I can confirm that the styling issue for the duration has been fixed. I've tested the overlay duration for both 12h and 24h formatting and the overlay design is working perfectly. I'm attaching the screenshots for your reference. RTBC.

Thanks!

Updated issue summary.

More IS updates.

Updated to target a new 4.2.x branch.

Merged in, and will include in a beta release for the 4.2.x branch.

Automatically closed - issue fixed for 2 weeks with no activity.