Calendar: Design polishing of right sidebar

[jancborchardt]

Some first review after the Vue merge. :) As usual it’s very nice, these are mostly polishing details!
(This is a review similar to Design polishing of new event popover #1570)

📅 Top part

• [x] Event title input placeholder should be "Event title"
• [x] Event title seems rather small. In the popover it’s 20 px, here only 16. (Nextcloud-vue issue)
• [ ] Event title input doesn’t go full width EDIT: Apparently this is to leave space for the menu, which only appears later. This is confusing. Either we show the menu with only "Delete" in it right away, or we show the event title input full width for new events. :)
• [x] The menu button by default has a grey circle, which is too much emphasis. This should only happen on hover or focus as per standard. (Nextcloud-vue issue)
• [x] The "x days ago" subline is _not_ a heading so should not be h4 but simply a p(Nextcloud-vue issue)
• [x] For a non-all-day event, there seems to be no way to edit the time without first picking the date from the datepicker again. This is very off, and when you click/tap on the time in the input it should for sure open the timepicker instead. The input is wide enough, and it totally worked great before.
• [x] The timepicker itself is also quite strange. Difficult question how to fix that one, but at least it should start at 12:00 instead of 00:00, because 00:00 is one of the _least_ likely times for an event to start. :)
• [x] Same here as in the popover, unchecking the "All day" box is not instant, but there is a tiny delay which feels off.

ℹ️ Details tab

• [x] Same as for the quick popover: If you only have 1 calendar, it does not need to be displayed.
• [x] Since the location and description fields use autosize, the resize handle can be reomved with resize: none;
• [x] The description field should by default be a bit higher which makes it more obvious as description field. 2 lines at least
• [x] Free / Busy only has 2 choices so it doesn’t need to be a dropdown. It could simply be 2 radio choices next to each other.
• [x] Similar with "Confirmed/Tentative/Cancelled" which could be a radio choice to have all visible at the same time. Isn’t this also what Google Calendar does simply with "Attending: Yes / No / Maybe"?
• [x] And same thing for the "When shared: Show full event / Show only busy / Hide event".

👥 Attendees tab

• [x] Wording of the emptycontent is too long: "To send out invitations and handle responses, an email address is necessary."
• [x] There should be a button in this emptycontent view to directly "Add email address" which goes straight to the personal settings.
• [x] The input placeholder wording should be fixed to "Add emails, users, contacts or conversations" Discarded, because you can't add conversations.
• [x] When you click the input, it says "List is empty." The vue multiselect has an option for :show-no-options="false" (ref https://github.com/nextcloud/mail/pull/2131/files#diff-0c91f331a566b5adc2f044cca683b078R55, we should probably make this default in the component as it just looks bad?)
• [x] "This event does not have any attendees." wording can be shortened to "No attendees yet" (no full stop needed for the short sentence)
• [x] It doesn’t seem to use the standard emptycontent styles? Or is this a new/separate Vue component? Moved to https://github.com/nextcloud/nextcloud-vue/issues/756

🔔 Reminders tab

• [x] Emptycontent text can be shortened to "No reminders yet"
• [x] If there are no reminders yet, the "Add reminder" button would look better below that emptycontent icon and text Not applicable anymore since we exchanged button with dropdown.
• [x] I have German set as locale but the reminder says "on the day of the event at 9:00 AM" but I guess this is related to not respecting the locale yet?
• [x] The dropdown to edit the reminder is quite confusing … there’s 2 sets of 2 radio buttons each, but it looks like 1 list of 4 radio buttons. The "Edit reminder" should not switch anything in the menu but rather edit the view?
• [x] When you use "Edit reminder" to switch to "On date", you can only "Remove reminder" but not edit it afterwards. E.g. you can not switch between Mail or Notification anymore.
• [x] Dropdown for new reminder. Current behaviour is no properly discoverable that it automatically adapts

🔁 Repeat tab

• [x] "Repeat: never" does not need an extra summary ;)
• [x] The summary could be bold? Looks weird

That’s all for now. :tada:

In general for Reminders and Repeat we for sure need to look more at what others like Google Calendar, Apple Calendar and Business Calendar (Android) are doing. :)

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[georgehrke]

Event title seems rather small. In the popover it’s 20 px, here only 16.

The menu button by default has a grey circle, which is too much emphasis. This should only happen on hover or focus as per standard.

The "x days ago" subline is not a heading so should not be h4 but simply a p

These are all the default style of nextcloud/vue. Would you mind opening a ticket there :)

[georgehrke]

The timepicker itself is also quite strange. Difficult question how to fix that one, but at least it should start at 12:00 instead of 00:00, because 00:00 is one of the least likely times for an event to start. :)

Already fixed earlier today in https://github.com/nextcloud/calendar/pull/1563

[georgehrke]

Thanks for the valuable feedback. Will look into the rest tomorrow :)

[georgehrke]

In general for Reminders and Repeat we for sure need to look more at what others like Google Calendar, Apple Calendar and Business Calendar (Android) are doing. :)

Reminders is pretty much how it works in Google calendar. Especially that all-day and timed have different ways of entering. 5 minutes before vs. 1 day before at 9am

And Repeat is heavily inspired by macOS.

But I agree that it needs some CSS love. better spacing, etc.

[georgehrke]

Dropdown for new reminder.
Current behaviour is no properly discoverable that it automatically adapts

[georgehrke]

• [ ] Free / Busy only has 2 choices so it doesn’t need to be a dropdown. It could simply be 2 radio choices next to each other.
• [ ] Similar with "Confirmed/Tentative/Cancelled" which could be a radio choice to have all visible at the same time. Isn’t this also what Google Calendar does simply with "Attending: Yes / No / Maybe"?
• [ ] And same thing for the "When shared: Show full event / Show only busy / Hide event".

@jancborchardt Are you sure about this?
That means that we will show 8 radio buttons at a time, quite a lot.
And with all the different translations out there, we are not able to fit each set of them in a row.

[georgehrke]

It doesn’t seem to use the standard emptycontent styles? Or is this a new/separate Vue component?

There is a standard? There is at least no vue-component for it yet.

[jancborchardt]

@jancborchardt Are you sure about this?
That means that we will show 8 radio buttons at a time, quite a lot.

No, that’s the stuff I’m least sure about – let’s leave it for last, if at all. :)

There is a standard? There is at least no vue-component for it yet.

If you like, feel free to adapt it based on the emptycontent styles of the files app content area e.g. for empty folders and make a component out of it. :)

[georgehrke]

[ ] The input placeholder wording should be fixed to "Add emails, users, contacts or conversations"

Why conversations?

[jancborchardt]

[ ] The input placeholder wording should be fixed to "Add emails, users, contacts or conversations"

Why conversations?

I guess I thought you can add Talk conversations? Ignore if that’s not the case. :D

[dominic-p]

I filed an upstream issue to help speed up event time selection. Just thought I would reference it here.

[dominic-p]

Ok, so the upstream project for the datetime picker has added an event object to the open event. So, I believe the process to open the time picker if the time element is clicked would be:

1. Listen for the open event.
2. Check the event.target.
3. If it's the time element, set showTimePanel = true, otherwise do nothing and allow default behavior.

Again, I don't have any experience with Vue, so I'm not exactly sure how to actually do any of those steps, but I'm hoping they would be straightforward.

Do we know what the process is to get the upstream changes merged into the Nextcloud fork of vue2-datepcker? Once that's done, is someone interested in implementing this, or would the project be open to a PR for it?

[dominic-p]

The author of the vue2-datepicker graciously put together a code sandbox demonstrating how to accomplish this! Here it is:

https://codesandbox.io/s/open-time-panel-8wm3g?file=/src/App.vue

So, now it looks like the only issue would be getting the changes to trickle down into the Nextcloud fork of that component. Is that process automated, or would it be a good idea for me to raise an issue somewhere?