Calendar: Small UX improvements

[eppfel]

I skimmed the calendar and found a lot of small things, we can fix to make the UI more consistent and less crammed.

- [ ] Remove the background/border Box around the label for the selection of month/week/day, because it is not an interactive element

• [x] If there is only one calendar, remove calendar selection from event forms #89

• [x] Do not (/ do only visually) disable the time field (enable it on click, toggle all day event), so the user is not blocked.
• [ ] Place time in the same line as date in details view
• [x] Make Location and description fields single line with autosize for multiline support (See nextcloud/server#1407)

Maybe a bigger thing to do in a separate window, but wanted to start the discussion:

• [x] Make some event details optional ( in settings?) and provide a more options button to save space in the details view #88

@nextcloud/designers Gimme thoughts on this?

@georgehrke If you point me to the right places, i can fiddle with it myself.

[georgehrke]

@nextcloud/calendar

[ccoenen]

I could swear, the "july 2016" used to be clickable just a few days ago? It did bring up a tiny calendar. Maybe it's just currently broken?

[georgehrke]

Yes, it is ...
https://github.com/nextcloud/calendar/issues/48

[ccoenen]

(removed)

[georgehrke]

@ccoenen there is a dedicated issue https://github.com/nextcloud/calendar/issues/25

[ccoenen]

Thanks, I moved my comment over there!

[jancborchardt]

Agree with all of @eppfel’s comments, good call! :)

cc @nextcloud/designers @Espina2 as a good example of a nice design details review.

(Btw @georgehrke just cause I notice it atm: Please use the same colors for the labels here (like starter issue) as we do in the server repo.)

[nickvergessen]

👍 for activating the time field when clicking into it.

[ccoenen]

Clicking: yes!
Tabbing: not in favor of that. Not automatically, at least. Maybe tab to a (visually) deactivated time-input, followed by Spacebar or number keys (or anything _but_ the tab-key), otherwise you could never tab over the time fields without activating them.

[georgehrke]

I'd be happy to take care of:

• Do not (/ do only visually) disable the time field (enable it on click, toggle all day event), so the user is not blocked.
• Make Location and description fields single line with autosize for multiline support (See nextcloud/server#1407)

Although contributions are always welcome 😉

Does someone want to take care of Place time in the same line as date in details view? :)
maybe @eppfel

[georgehrke]

Place time in the same line as date in details view

@eppfel Do you mean something like this?

[georgehrke]

The biggest issue here is on small screens?

In this case the time won't fit next to the date.

What to do here? move ends ... responsively under starts ....?

[eppfel]

Mh, yeah I fiddle a bit and came to the same conlusion, that the space is too narrow. Switching to date and time in the same field, breaks with the others places we use it. So, we could introduce this only overall.
Moving ends under starts on smaller screens would be fine with me. Or maybe it is not so relevant anymore, because we now have more space due to the Tab-menu in the bottom. Your call 😁

[jancborchardt]

By the way while we’re talking about space: The dates are quite technical, just numbers. Like 12/05/2016, very non-human. (People are not really good at calculating which number corresponds to which month ;)

Instead it should be displayed like: December 5, 2016 or 5. Dezember 2016 depending on language. Then the space-saving is not possible anyway. Readability is priority. :)

[ccoenen]

As long as i can quickly write a date with just numbers (like 2016-12-15) i'm totally ok with diplaying them in a cooler way.

[jancborchardt]

@ccoenen Yup, this should ideally only change the display of it. Edit should be possible as now already, and of course there is the datepicker.

@nextcloud/calendar @eppfel what do you think about the date display proposal above?

[georgehrke]

btw, this is still two inputs. I just removed the borders to make it look like one

[georgehrke]

By the way while we’re talking about space: The dates are quite technical, just numbers. Like 12/05/2016, very non-human. (People are not really good at calculating which number corresponds to which month ;)

That's because I'm using US english as my local. If you use Nextcloud in german it's 05.12.2016

Instead it should be displayed like: December 5, 2016 or 5. Dezember 2016 depending on language. Then the space-saving is not possible anyway. Readability is priority. :)

You want users to enter a date like December 5, 2016?
Sorry, but how are we supposed to parse that with all the different locals out there?

Generally, I think its weird if an input changes its content when I focus it. That's absolutely not what I would expect

[georgehrke]

you can also see the month name very prominently in the date picker ;)

[georgehrke]

4 of 5 issues have been fixed, that's good progress! :)

Let's move the last one to 1.6.0

[georgehrke]

@eppfel @jancborchardt So, what do we want to do about the date / time picker design? :)

We also need to fix the date / time picker layout in the popover:

There is too much whitespace between starts and ends and the inputs are not fully readable.

[georgehrke]

Just discussed it with Jan.
Doing it like this:

and move ends ... under starts ... when the sidebar is too narrow