Event details design improvements

[ChristophWurst]

Right now event details are filled in and edited via a tabbed sidebar. We could move this view into a modal and benefit from more vertical space. That space will allow us to render the free/busy view right away right below attendees and rooms.

Design-wise this modal could looks similar to the setting modals. What is a tab right now can be a settings section.

@jancborchardt @nimishavijay for the actual design specs, I'm just brainstorming :)

Required for https://github.com/nextcloud/calendar/issues/3418

[nimishavijay]

This is a great idea for space and organising the different sections, but I am also worried a bit about being able to browse through the calendar while viewing/editing event details. Outlook does it like as a modal, and to allow you to see the other events there's a smaller view on the right. IMHO it looks a bit clunky.

@jancborchardt and I were thinking about a sidebar without tabs, and all the details arranged one below the other with scrolling. We can also maybe think about removing the illustration on top for more vertical space. New sidebar mockups are actually in progress, but what do you think about the idea?

[ChristophWurst]

First of all I have to admit I once again mixed vertical and horizontal space :see_no_evil:

The sidebar is limited in its width. We won't be able to cram the free/busy view into this. So even without the tabs or illustrations the width won't be sufficient. Attendee names alone can easily take half of the sidebar's width, and then you need to still show a full grid with the availability. That seems impossible to fit in there.

I am also worried a bit about being able to browse through the calendar while viewing/editing event details

That is a good point and indeed the modal would prevent this.

[nimishavijay]

So @jancborchardt and I were discussing this, and we thought a modal wouldn't allow you to browse through the calendar while seeing the details so a sidebar would be a better option. Free/busy is kind of a more advanced(ish) feature that people wouldn't NEED to see all the time, so a couple of extra clicks is okay.

We were working on an updated design for both the card and sidebar, though. What do you think?

Card	Sidebar

More screenshots and details

Adding guests (card view)

Adding a video call link

Adding a reminder

• The buttons in card view would be:

  • New event: Create event & Cancel
  • Edit existing single event: Save, More options (which opens the sidebar)
  • Edit existing recurring event: Save, More options (which opens the sidebar)

• The buttons in sidebar view would be:

  • New event: Create event & Cancel
  • Edit existing single: Save, More options (with "Delete event" and room for future actions like duplicate)
  • Edit existing recurring: Save (opens modal, see Google Cal and Business Calendar on mobile), More options (as above)

Can definitely be polished more, especially for each of the fields, but what do you think?

[ChristophWurst]

Looks great! We can work on this improvement later.

For the short term we'll then need another approach, the redesigned cards won't help us with the room suggestions. After all the design doesn't even contain the option to book a room or resource. The main driver for moving to a modal was https://github.com/nextcloud/calendar/issues/3418#issuecomment-941092056.

[nekohayo]

I simply wanted to say here that I'm very happy to see some design work happening on moving towards a cards/overlay/popover design rather than the existing sidebar, because the biggest annoyance I have with the current calendar UI is that it requires opening and closing the sidebar all the time, which has two issues:

• It's slow. There is noticeable latency to open and load the sidebar, every time.
• It shifts/squeezes the calendar's view, which is very visually annoying. This may sound silly, but I really can't stand it, the UI bouncing around like a compressed sponge makes it "annoying" to interact with.

I am under the impression that you were not redesigning specifically for this but to solve other issues (with rooms etc.), but I'm mentioning the papercuts above so that those considerations are on your radar if they weren't already.

[jancborchardt]

Status: This needs a little rework from the design team to make it accessible.

[nimishavijay]

Reworked it a bit more. As a first step, the event card can have a "view" and "edit" mode and show some more relevant info like guests.

View mode:

• [x] Remove the illustration on the top
• [x] Move the calendar indication to the top
• [x] Show shortened more easily readable date time
• [x] If there are any links in location or description, make them clickable
• [x] Show some attendees (limit to 3, show organiser and confirmed attendees up top)
  • [x] Nice to have: show an overview like 7 invited, 3 confirmed
• [x] Editing is not allowed, need to click on an "Edit" button to enable editing (to avoid accidental editing, similar to contacts)
• [x] "More details" opens sidebar

Edit mode:

• [x] Editing is allowed now, can be saved with a "Save" button
• [ ] Use new internal label input components (requires the internal icon to be implemented for NcTextArea)
• [x] Calendar picker can be a button instead of a dropdown, and clicking on it opens an action menu with the different calendars
• [x] Allow to quickly add attendees also, ~show the 3 most recently added attendees~ (this is unfortunately not possible as the date an attendee is added isn't recorded)
• [x] "More details" opens sidebar

In the sidebar (screenshot only to show structure, not a pixel-perfect mockup as this was done using the devtools 😅 )

• [x] Sidebar doesn't have view/edit distinction, always in editing like how it is currently
• [x] Header part is similar to the event card, no illustration, calendar picker on top as a button, show location and description as part of the header
• [ ] Use internal label text inputs (not shown in screenshot) and Vue components for checkboxes, multiselect items etc (requires the internal icon to be implemented for NcTextArea)
• [x] Small adjustments to the attachments section:
  • [x] Height of each item is 44px
  • [x] Size of thumbnail is 24px
  • [x] Thumbnails are aligned with icons and filename is aligned with rest of the text
  • [x] Attachment filenames should not be in bold
  • [x] If attachments are there, show "3 attachments" in bold
• [ ] Follow up: recurrence selection should be in a modal, mockups in https://github.com/nextcloud/calendar/issues/4618

What do you think? In scope? Any feedback from @nextcloud/designers also welcome :)

Edit: added recurrence selection issue

[st3iny]

Thank you for the detailed mockups :)

I'm starting to implement the improvements and realized that is is not possible to move an event to another calendar. The calendar dot and name is shown at the top of the popover and sidebar editors but I don't see a way to change it.

Did I miss something? Otherwise, I'd appreciate some feedback on how to implement the calendar picker.

cc @nimishavijay

PS: I just saw the "Calendar picker can be a button instead of a dropdown, and clicking on it opens an action menu with the different calendars" item in the post above. A button makes sense but were should it be put?

[nimishavijay]

Did I miss something?

🤔 This is what I mean when I say calendar picker, the calendar that an event is in is changeable right? Currently it looks like this:

A button makes sense but were should it be put?

At the top! :) "Personal" is the calendar the event is a part of, and clicking on it opens an action menu with the different calendars that the user has.

Did I misunderstand your question? :)

[st3iny]

At the top! :) "Personal" is the calendar the event is a part of, and clicking on it opens an action menu with the different calendars that the user has.

That answers my question. Thanks :)

[st3iny]

Unfortunately, using text fields with internal labels and icons is not deliverable at the moment. There are multiple reasons:

1. The NcTextArea component (used for the description) does not support internal icons yet.
2. We are still on nextcloud/vue 7 but the migration is already in progress: https://github.com/nextcloud/calendar/pull/5648

The rest of the feedback can be delivered. We can move the conversion of all input fields to a follow-up PR. It can be done once NcTextArea is fixed and we successfully migrated to the required nextcloud/vue version, which should be either 8 or 9.

PS: About NcTextArea: I implemented the component initially and decided to drop the internal icon feature for the time being. It turned out to be very complex and there was no need back then. I'll start working on it again after implementing the redesign.

[nimishavijay]

@st3iny no worries, in that case for the first version we can just show the icon on the outside, like how it would be in the sidebar :)

[szaimen]

🎉🎉🎉🎉🎉