Merge calendar and subscription list #1551

georgehrke · 2019-10-21T11:40:57Z

At Nextcloud conference, @tcitworld and me also discussed that we should consider merging calendar and subscription list, because many users don't understand why some shared calendars appear in calendars and others appear in subscriptions.

I was experimenting a little and came up with this for a new list design:

This would also satisfy users who preferred the old behaviour of calendars with VEvent and VTodo.

@tcitworld @jancborchardt What do you think about this proposal?

georgehrke · 2019-10-21T12:00:17Z

Or alternatively without bold font, but with icon.

tcitworld · 2019-10-21T12:06:53Z

What I can think of right away:

Maybe an icon like this one for the calendars with tasks?
How do you distinguish between calendars shared with you which are read-only or write access?
Find a way to distinguish subscriptions? We have already the « shared by public link » information that is associated to the link icon, so it's not great to have a link icon to express this.

Maybe we can only differentiate write/read-only status ?

georgehrke · 2019-10-21T12:12:17Z

Maybe an icon like this one for the calendars with tasks?

👍

How do you distinguish shared calendars which are read-only and write access?

Does it matter to be able to tell them apart in the calendar-list?
If you click an event that's in one of those calendars or you try to create a new one, you will only see the writable ones.

Maybe we can only differentiate write/read-only status ?

Not sure i completely get your point, but that's what calendar list and subscription list did all those years?

tcitworld · 2019-10-22T07:21:46Z

Maybe we can only differentiate write/read-only status ?

Not sure i completely get your point, but that's what calendar list and subscription list did all those years?

Yeah, but I felt it made still sense to differentiate them somehow, even in a merged list, in order to explain why they wouldn't be available in the calendar picker.
The use case I'm thinking of is when someone shares you a calendar but you can't understand why you can't create events in it, so you might think of a bug but it's just that the owner of the calendar didn't check "write access".

Therefore I feel it would be nice to show something like a tooltip / title when hovering over the calendar to tell this, or some kind of other visual tip.

jancborchardt · 2019-10-22T15:02:58Z

Sounds good. But the heading "My calendars" is a bit unneeded here (apart from us never using the "my" form in the interface).

We could cut the header and put the "+ Add calendar" (which opens the popover) as a half-grey entry at the bottom of the list. (Just like we have that proposal for Contacts for "+ Add group" as last item in the group list.)

georgehrke · 2019-10-22T17:19:20Z

@tcitworld I checked and no other app does that. Like in files, you can see the Avatar to indicate it is shared with you, but from this screenshot you can't tell that one is read-only and the other is read-write:

Same for contacts.

@jancborchardt What's your call on this? Is it necessary to be able to tell read-only and read-write shared calendars apart in the calendar-list?

tcitworld · 2019-10-22T20:04:24Z

I checked and no other app does that. Like in files, you can see the Avatar to indicate it is shared with you, but from this screenshot you can't tell that one is read-only and the other is read-write.

Thinking back, the issue is not at the calendar list level but at the calendar picker level (since you're not using the calendar list to create a new event). So...disregard everything I said about this, it doesn't apply here. I'm still interested in discussing how we could do something at the calendar picker level.

georgehrke · 2019-10-22T20:32:15Z

Thinking back, the issue is not at the calendar list level but at the calendar picker level (since you're not using the calendar list to create a new event). So...disregard everything I said about this, it doesn't apply here. I'm still interested in discussing how we could do something at the calendar picker level.

I already added an avatars to the calendar-picker, in case the calendar is shared with you.
But feel free to open another issue to discuss further changes to it :)

jancborchardt · 2019-10-22T20:40:26Z

Yeah, I’d also say the discussion on adding an indicator or how to differentiate is separate from this here. :)

georgehrke · 2019-10-23T18:48:27Z

Closed menu	open menu

georgehrke · 2019-10-23T18:49:11Z

I still have to reduce the default opacity of the New Calendar entry.

jancborchardt · 2019-10-23T19:30:37Z

Nice stuff! More design feedback:

~~"+ Add calendar" is better wording as all the items in the menu are "Add"~~ sorry scratch that, let’s keep "New" here as otherwise it’s strange with the same wording of the menu that opens then … :D Also we have "+ New event" so that’s symmetric
The whole "+ Add calendar" list entry should be clickable, not just the icon. As such, the menu should open centered below the list item, with the triangle pointing to the middle, not to the icon. :) Then the popdown can also be wider to fit the whole text of the entries, not needing to break the text.
Minor wording: "Add calendar with task list" (not "tasks list", and lowercase "calendar" as it doesn’t refer to the app, same for the "Add calendar" entry above)
The entry should be var(--color-text-maxcontrast) just like the "Show all folders"/"Collapse" list entries in Mail

Kind of related since we are working on the list:

There could be a bit of whitespace (spacer element is in the vue component, right?) above the calendar list, below the "New event" / "Today" buttons. Otherwise it looks cramped.
~~The "Shared" icon with text is closer to the 3-dot icon than the share icon, why that?~~
~~The "Contact birthdays" calendar, being a default calendar, needs a color that is better visible and fits with the others? The one you use for "Default calendar" in the screenshot would fit.~~

Moved to #1582 since it's really not related to this PR.

georgehrke · 2019-10-23T20:50:41Z

The whole "+ Add calendar" list entry should be clickable, not just the icon.

That's already the case. https://github.com/nextcloud/calendar/pull/1551/files#diff-d389c50efe9671db3af56f7d289e3f62R26 :)

As such, the menu should open centered below the list item, with the triangle pointing to the middle, not to the icon. :) Then the popdown can also be wider to fit the whole text of the entries, not needing to break the text.

I can make it wider, but i would like to stick to using the vue Actions component, because it has all the great accessibility keyboard stuff, which is a lot of work to rebuild. The only downside about Actions is that it currently requires an icon as central element.
Unless @skjnldsv has some good recommendation here :)

src/components/AppNavigation/CalendarList/CalendarListTitle.vue

skjnldsv · 2019-10-24T06:02:39Z

Unless @skjnldsv has some good recommendation here :)

See https://github.com/nextcloud/calendar/pull/1551/files#r338393703

src/components/AppNavigation/CalendarList/CalendarListTitle.vue

georgehrke · 2019-10-24T10:57:06Z

Closed menu	open menu

skjnldsv · 2019-10-24T11:37:55Z

The little + in front feels a bit too much 🤔

georgehrke · 2019-10-24T11:38:44Z

We have the same in front of "+ New event". :)

skjnldsv · 2019-10-24T11:42:10Z

We have the same in front of "+ New event". :)

then same comment :p
Can you use the icon-add for the event button?
And no + for the calendar button?

georgehrke · 2019-10-24T11:42:55Z

It is what @jancborchardt suggested and I like it as well

skjnldsv · 2019-10-24T11:47:31Z

It is what @jancborchardt suggested and I like it as well

I think he meant the + we use in every other apps, so the icon-add button :)

georgehrke · 2019-10-24T11:48:10Z

@jancborchardt ^ ? :)

src/components/AppNavigation/CalendarList/CalendarListNew.vue

georgehrke · 2019-10-25T13:04:10Z

@tcitworld Should we get this in? :)

tcitworld · 2019-10-25T14:15:08Z

Let me find time to play with it a bit.

tcitworld

When a calendar/subscription is created, the creation menu isn't closed. Just set isOpen to false once it's done.

tcitworld · 2019-10-25T14:28:36Z

Also a click on + New calendar (not on the 3 dots button) opens the menu but doesn't close it.

tcitworld · 2019-10-25T14:29:47Z

And finally I'm also interested in @jancborchardt opinion on using an icon or a + in front of New event or New calendar.

Signed-off-by: Georg Ehrke <[email protected]> Alternative design with calendar-icon Signed-off-by: Georg Ehrke <[email protected]> Move new calendar to bottom of list Signed-off-by: Georg Ehrke <[email protected]> Reset new calendar menu on close Signed-off-by: Georg Ehrke <[email protected]> use actions instead of counter Signed-off-by: Georg Ehrke <[email protected]>

georgehrke · 2019-10-25T14:42:08Z

I fixed both issues you mentioned

tcitworld

We can fix the + situation later.

georgehrke added the 2. developing Work in progress label Oct 21, 2019

georgehrke force-pushed the feature/noid/merge_calendar_subscription_list branch from cbad4eb to d4eaa95 Compare October 23, 2019 18:46

skjnldsv reviewed Oct 24, 2019

View reviewed changes

src/components/AppNavigation/CalendarList/CalendarListTitle.vue Outdated Show resolved Hide resolved

skjnldsv reviewed Oct 24, 2019

View reviewed changes

src/components/AppNavigation/CalendarList/CalendarListTitle.vue Outdated Show resolved Hide resolved

georgehrke force-pushed the feature/noid/merge_calendar_subscription_list branch from d4eaa95 to 973d5c4 Compare October 24, 2019 10:55

georgehrke requested a review from skjnldsv October 24, 2019 10:57

georgehrke added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Oct 24, 2019

georgehrke requested review from jancborchardt and tcitworld October 24, 2019 11:37

skjnldsv requested changes Oct 24, 2019

View reviewed changes

src/components/AppNavigation/CalendarList/CalendarListNew.vue Outdated Show resolved Hide resolved

tcitworld requested changes Oct 25, 2019

View reviewed changes

georgehrke force-pushed the feature/noid/merge_calendar_subscription_list branch from 29c1da9 to 578d3b3 Compare October 25, 2019 14:41

tcitworld approved these changes Oct 25, 2019

View reviewed changes

georgehrke merged commit e12f961 into master Oct 25, 2019

georgehrke deleted the feature/noid/merge_calendar_subscription_list branch October 25, 2019 14:50

georgehrke mentioned this pull request Jan 14, 2020

Changes the Birthday calendar color to slightly brighter one nextcloud/server#18895

Merged

Merge calendar and subscription list #1551

Merge calendar and subscription list #1551

Uh oh!

Conversation

georgehrke commented Oct 21, 2019

Uh oh!

georgehrke commented Oct 21, 2019

Uh oh!

tcitworld commented Oct 21, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

georgehrke commented Oct 21, 2019

Uh oh!

tcitworld commented Oct 22, 2019

Uh oh!

jancborchardt commented Oct 22, 2019

Uh oh!

georgehrke commented Oct 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tcitworld commented Oct 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

georgehrke commented Oct 22, 2019

Uh oh!

jancborchardt commented Oct 22, 2019

Uh oh!

georgehrke commented Oct 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

georgehrke commented Oct 23, 2019

Uh oh!

jancborchardt commented Oct 23, 2019 • edited by georgehrke Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

georgehrke commented Oct 23, 2019

Uh oh!

Uh oh!

skjnldsv commented Oct 24, 2019

Uh oh!

Uh oh!

georgehrke commented Oct 24, 2019

Uh oh!

skjnldsv commented Oct 24, 2019

Uh oh!

georgehrke commented Oct 24, 2019

Uh oh!

skjnldsv commented Oct 24, 2019

Uh oh!

georgehrke commented Oct 24, 2019

Uh oh!

skjnldsv commented Oct 24, 2019

Uh oh!

georgehrke commented Oct 24, 2019

Uh oh!

Uh oh!

georgehrke commented Oct 25, 2019

Uh oh!

tcitworld commented Oct 25, 2019

Uh oh!

tcitworld left a comment

Choose a reason for hiding this comment

Uh oh!

tcitworld commented Oct 25, 2019

Uh oh!

tcitworld commented Oct 25, 2019

Uh oh!

georgehrke commented Oct 25, 2019

Uh oh!

tcitworld left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

tcitworld commented Oct 21, 2019 •

edited

Loading

georgehrke commented Oct 22, 2019 •

edited

Loading

tcitworld commented Oct 22, 2019 •

edited

Loading

georgehrke commented Oct 23, 2019 •

edited

Loading

jancborchardt commented Oct 23, 2019 •

edited by georgehrke

Loading