Provide color picker about nextcloud-vue HOT 17 CLOSED

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

from nextcloud-vue.

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.

from nextcloud-vue.

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 👍

from nextcloud-vue.

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.)

from nextcloud-vue.

* mail app (cc @ChristophWurst)

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

from nextcloud-vue.

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

from nextcloud-vue.

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

from nextcloud-vue.

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

from nextcloud-vue.

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

Can we see some screenshots ? 🎉

from nextcloud-vue.

ping @raimund-schluessler ^ :)

from nextcloud-vue.

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

Well nextcloud/mail#486 🤷‍♂️

from nextcloud-vue.

Thanks @jancborchardt!

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

I just updated it :)

from nextcloud-vue.

(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?

from nextcloud-vue.

(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!

from nextcloud-vue.

@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 ;)

from nextcloud-vue.

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

Oh I get it, my bad!

from nextcloud-vue.

@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. :)

from nextcloud-vue.