Design tweaks to new UI

[dominic-p]

Hello, just got to play around with the v2.0 Vue version, and it's really nice. We ran into a few snags with the new UI that could maybe use a bit of polish. I apologize if these have been reported elsewhere, I did a quick search and didn't find any of them.

We use Firefox (latest) on Windows 10, so all of these issues pertain to that platform.

1. The new font size on month view is a bit too small for some of my team to read comfortably. We can obviously increase the font size for the entire page, but then the side bar starts taking up too much room. Maybe a setting for font size could be added to help with accessibility?

2. If you have more events than will fit on a day, and click to view more, and then you click on one of those events, the details popup shows up half off the top left of the screen. In order to close it, you have to click the button to view more details and then close the sidebar.

3. While the system of hiding events that don't fit matches other calendars (like Google) and makes the overall look cleaners, it has slowed us down a bit. It would be nice if we could toggle a setting to view all events in a day instead of having to click the "see more" button.

4. The new event time picker feels a lot more cumbersome than the old one. Maybe I'm missing a shortcut, but what I'm doing to pick a time is: Uncheck the "All day" box, click the date, click the currently selected day, calculate the difference between 24 and 12 hours time if the event time in PM, select the correct hour. If I could access the event time picker with one click (like before) and then if it could be configured to use AM/PM instead of 24hr time, that would make it a lot faster.

I think that's it for now. Again, overall, I really like it, so please don't take this as bashing the new UI.

Also, I could take a stab at implementing any or all of these if there is interest from the devs, and I could get a little guidance on where to start. I'm more of a React guy, but I understand Vue is pretty similar.

[Helium314]

This is not only for Firefox, in Vivaldi it is the same (on Linux and Windows).
I have the similar issues with the new calendar, and would like to add a little bit.

Font size should definitely increased, in my opinion it should simply be the same as the "usual" font size (like e.g. the calendar names in the left bar).

Sometimes this "+x more" even appears as the only option, all events for that day are hidden (in month view). This does not occur on all computers, I guess it is connected to display settings / scaling / resolution /...

Agree on the time picker, It is annoying to use, and I don't see any reason why I have to click on the day before I can set / change the time.

Another thing is the location of the save / update button. If the description field contains a lot of lines, I need to scroll down to save. I think it would be better / more convenient to always have the button visible.

[georgehrke]

The new font size on month view is a bit too small for some of my team to read comfortably. We can obviously increase the font size for the entire page, but then the side bar starts taking up too much room. Maybe a setting for font size could be added to help with accessibility?

Font size should definitely increased, in my opinion it should simply be the same as the "usual" font size (like e.g. the calendar names in the left bar).

Are you running Nextcloud 17 or 18? The overall font size was increased in 18.

If you have more events than will fit on a day, and click to view more, and then you click on one of those events, the details popup shows up half off the top left of the screen. In order to close it, you have to click the button to view more details and then close the sidebar.

Can you please open a separate bug report about this?

While the system of hiding events that don't fit matches other calendars (like Google) and makes the overall look cleaners, it has slowed us down a bit. It would be nice if we could toggle a setting to view all events in a day instead of having to click the "see more" button.

#1889

[georgehrke]

The new event time picker feels a lot more cumbersome than the old one. Maybe I'm missing a shortcut, but what I'm doing to pick a time is: Uncheck the "All day" box, click the date, click the currently selected day, calculate the difference between 24 and 12 hours time if the event time in PM, select the correct hour. If I could access the event time picker with one click (like before) and then if it could be configured to use AM/PM instead of 24hr time, that would make it a lot faster.

This was already addressed in #1576. Supporting am/pm will require updating the used ui to version 3 first: nextcloud-libraries/nextcloud-vue#783

[georgehrke]

Sometimes this "+x more" even appears as the only option, all events for that day are hidden (in month view). This does not occur on all computers, I guess it is connected to display settings / scaling / resolution /...

In that case you must be using a really tiny screen where it can display at most one event per cell. Can you give some feedback about the resolution / scaling / etc?

Edit: if you try to use the calendar on a resolution of about 400 by 400 like in this screenshot, i would honestly say that not a supported use-case. My desktop calendar applications don't even allow me to resize the calendar to such a tiny size.

[Helium314]

Vivaldi on Windows 7, 1920x1080
100% zoom: looks fine

110% zoom: disappearing events on 14th, 15th and 19th. Probably related to the events with multi-line titles, as does not happen on 20th

160% zoom (probably uncommon, but still not tiny screen): some events disappear completely

Vivaldi on Manjaro Linux, 100% zoom, 1.5x scaling using KDE, 3000x2000: looks similar to 110% zom in Windows (no screenshot)

Nextcloud 17.0.2, Calender 2.0.1

[georgehrke]

The one on Jan 14th / 15th on the second screenshots definitely looks like a (upstream) bug. Can you please open a separate issue for that one?

[dominic-p]

Thanks @georgehrke for the detailed feedback. And, it looks like I did miss a few existing bugs, sorry about that.

• I am on Nextcloud 17, so hopefully once 18 is stable and I can upgrade that will solve the font size issue. I still do feel it should be configurable just form an accessibility standpoint, but it's less of an issue for us if 18 increases the font size.

• I opened a separate bug report about the off-screen popup here as requested: Simple editor shows up off screen in month view #1934

• I played around with the demo of the new vue-datetime picker found here. It does feel a bit smoother, but it still seems like you are required to reselect the day before you can set the time. Can a shortcut be added so that if we click the event time, it jumps straight to the time picker?

[georgehrke]

I played around with the demo of the new vue-datetime picker found here. It does feel a bit smoother, but it still seems like you are required to reselect the day before you can set the time.

There will also be a shortcut to go directly to time, will definitely make use of that:

Can a shortcut be added so that if we click the event time, it jumps straight to the time picker?

That's also what @jancborchardt suggested in #1576. I have to investigate a little on that though, as it will be rather difficult to determine if the user clicked the time when different locales and right-to-left layouts come into play.

[dominic-p]

Yes, I see that now in #1576. I agree that what @jancborchardt suggested would be the ideal behavior. I can definitely see locales complicating the situation, but maybe a click handler could be registered on whatever component renders the time so that wherever it winds up being rendered (on the left or right) the proper code fires. Again, Vue isn't really my thing though, so I'm not aware of all of the complexities.

The "select time" link will help a bit, but it's not actually much faster than reselecting the day (it's still click, find link, click again to get to the time picker).

I would also second the suggestion to keep the update button visible at all times made by @Helium314

Another thing is the location of the save / update button. If the description field contains a lot of lines, I need to scroll down to save. I think it would be better / more convenient to always have the button visible.

[georgehrke]

Another thing is the location of the save / update button. If the description field contains a lot of lines, I need to scroll down to save. I think it would be better / more convenient to always have the button visible.

There is already a ticket for this: #1960

[georgehrke]

I will close this ticket, because there are separate issues for everything mentioned in here.

As a quick tl;dr:

The new font size on month view is a bit too small for some of my team to read comfortably. We can obviously increase the font size for the entire page, but then the side bar starts taking up too much room. Maybe a setting for font size could be added to help with accessibility?

This is a Nextcloud server issue, that has already been addressed in Nextcloud 18.

If you have more events than will fit on a day, and click to view more, and then you click on one of those events, the details popup shows up half off the top left of the screen. In order to close it, you have to click the button to view more details and then close the sidebar.

#1934

While the system of hiding events that don't fit matches other calendars (like Google) and makes the overall look cleaners, it has slowed us down a bit. It would be nice if we could toggle a setting to view all events in a day instead of having to click the "see more" button.

#1889

The new event time picker feels a lot more cumbersome than the old one. Maybe I'm missing a shortcut, but what I'm doing to pick a time is: Uncheck the "All day" box, click the date, click the currently selected day, calculate the difference between 24 and 12 hours time if the event time in PM, select the correct hour. If I could access the event time picker with one click (like before) and then if it could be configured to use AM/PM instead of 24hr time, that would make it a lot faster.

see discussion in #1576

Another thing is the location of the save / update button. If the description field contains a lot of lines, I need to scroll down to save. I think it would be better / more convenient to always have the button visible.

#1960