Nextcloud-vue: Provide color picker

[georgehrke]

There should be a standardised color-picker in Nextcloud because it's needed in many places.
E.g.:

• calendar app
• mail app (cc @ChristophWurst)
• (Deck app? @juliushaertl)

This is the color-picker in the Calendar app (v1):
Safari, IE:

Firefox, Chrome, Edge:

It provides a default set of colors plus a random color option in Safari, IE and a real color-picker for browsers that natively support it.
https://caniuse.com/#feat=input-color

The color-picker should also work inside the popover menu.

[ChristophWurst]

* mail app (cc @ChristophWurst)

We don't need one right now, but I like the idea of having a component for this :+1:

[juliushaertl]

It provides a default set of colors plus a random color option in Safari, IE and a real color-picker for browsers that natively support it.

If we write a component, we should make sure there is also a proper picker for IE/Safari, where the input color element is not supported. Otherwise :+1:

[georgehrke]

Just for reference:
This is the color-picker from Google calendar

[raimund-schluessler]

I wrote a colorpicker component for the Tasks app, see https://github.com/nextcloud/tasks/blob/vue/src/components/Colorpicker.vue. It is one of the first vue components I wrote, so it is probably badly written 🙈 I also reused some code from previous implementations.

But maybe it a first iteration to improve on.

[skjnldsv]

@raimund-schluessler I'm sure it'll be amazing! :D
Give yourself some credit!!!

Can we see some screenshots ? :tada:

[georgehrke]

ping @raimund-schluessler ^ :)

[ChristophWurst]

We don't need one right now, but I like the idea of having a component for this +1

Well https://github.com/nextcloud/mail/issues/486 :man_shrugging:

[ma12-co]

This is the color-picker from Google calendar

I Like the google solution: easy enough for somebody that doesn't need to customize much, but also gives the option to pick a custom color. I made a mock up so we can discuss the design: https://www.figma.com/file/4th1eQVONZguVoDXMwnDJT/nextcloud-color-picker?node-id=0%3A1
@nextcloud/designers

[jancborchardt]

Looking super good @ma12-co! The only thing I would change is to make the colors shown in circles instead of rounded squares. This is also what we already do in the Mail app e.g.

(Btw @georgehrke kinda related, the checkmark-to-activate interface in Google Calendar is very nice – we should probably do that too to be very obvious what is currently active.)

[ma12-co]

Thanks @jancborchardt!

The only thing I would change is to make the colors shown in circles instead of rounded squares.

I just updated it :)

[georgehrke]

(Btw @georgehrke kinda related, the checkmark-to-activate interface in Google Calendar is very nice – we should probably do that too to be very obvious what is currently active.)

Absolutely! Should that be something that we put into vue components? (similar to the
AppNavigationIconBullet) Or is it too calendar-app-specific?

[ma12-co]

(Btw @georgehrke kinda related, the checkmark-to-activate interface in Google Calendar is very nice – we should probably do that too to be very obvious what is currently active.)

Added to the mockup as well!

[georgehrke]

@ma12-co I think @jancborchardt talked about the checkbox in front of the calendar name :)

[skjnldsv]

@georgehrke I guess we can link an event to the bullet click, then you could do whatever you want. Thought it's not very discoverable. I'd put this into the menu.
And didn't you wanted an appNavCheckbox that could be coloured?

EDIT: ahaha, great mind synchronisation Georg ;)

[ma12-co]

@ma12-co I think @jancborchardt talked about the checkbox in front of the calendar name :)

Oh I get it, my bad!

[georgehrke]

@ma12-co Thank you for taking this up. Much appreciated! :)

[jancborchardt]

@ma12-co I think @jancborchardt talked about the checkbox in front of the calendar name :)

Yup, but adding it to the active color to indicate is also good. :)