Create ColorPicker component

[marcoambrosini]

Fix #138
design: https://www.figma.com/file/4th1eQVONZguVoDXMwnDJT/nc-color-picker?node-id=0%3A1

Please use this app.vue for testing

[skjnldsv]

Fixed icon

[marcoambrosini]

@skjnldsv I don't think there's the need to use the color generator algorithm here. If a user opens this it's because he wants to choose a color so IMO the simple picker should have a selection of nice hard-coded colors only. What do you think?
@nextcloud/designers any suggestion for a selection of 16 nice colors with good contrast for the picker?

[skjnldsv]

IMO the simple picker should have a selection of nice hard-coded colors only
@nextcloud/designers any suggestion for a selection of 16 nice colors with good contrast for the picker?

Yes, that is why the colour generator is here. It's generating the exact same colours everytime and that are the one we're using all over nextcloud :)
We could hardcode them, but it's easier to have a function for it that we can update later if we want to tune our nextcloud default colours ;)

[marcoambrosini]

Hey @nextcloud/designers, this is the current state of things, the design has changed since the mock-up so I need some feedback:

• simple picker:

I took out one line of colors to make things more compact, i think that 12 is more than enough for the simple picker.
Please note that these colors are just placeholders.

• advanced picker:

I brought back the 'current color' circle and dropped the idea of using the picker itself as current color indicator.

for feedbacks and animations check out this video: https://cloud.ma12.co/index.php/s/KaRRTfP9iDExGZ5

What do u think?

[skjnldsv]

• Alignment of the buttons is a bit off (uneven margins?)
• Centering of the button icons is off too (display flex, align-items & justify-content)
• Animation is great! 👍

[marcoambrosini]

thanks @skjnldsv!

Alignment of the buttons is a bit off (uneven margins?)

This one is because of the hover state of the 'back' button:

[skjnldsv]

This one is because of the hover state of the 'back' button:

I meant more like this:

[marcoambrosini]

got it @skjnldsv, it was a margin coming from the server's css.
All fixed :)

[skjnldsv]

[skjnldsv]

Maybe also add an example with a simple v-model?

[jancborchardt]

Great stuff @ma12-co! :) Agree with @skjnldsv’s points:

• The button having a checkmark like on the colors is confusing. We should use text there only, either "Choose" or "Pick". We use "Choose" elsewhere like the file picker so I’d prefer that, and it’s also more commonly used in other software.
• The first color picker view with the color list also needs a primary confirm button. Otherwise I don’t know how to confirm the color (unless it gets confirmed by clicking on it directly and the popup closes – does Google do that?)
• So in the first picker view, the 3-dot icon could be on the bottom left instead, which would make the "go to details" and "go back" symmetric, you can just click in the same place.

[marcoambrosini]

Thanks @jancborchardt!

The button having a checkmark like on the colors is confusing. We should use text there only, either "Choose" or "Pick".

I'll try this and we'll see how it looks :)

unless it gets confirmed by clicking on it directly and the popup closes

Nice catch! this is indeed the intended behavior but it's not properly implemented atm!

So in the first picker view, the 3-dot icon could be on the bottom left instead, which would make the "go to details" and "go back" symmetric, you can just click in the same place.

makes sense :)

[marcoambrosini]

@jancborchardt, everything updated, I'm not a fan of the 'choose' text instead of the checkmark button though, I think it takes up a lot of space and it's a bit invasive.. Here it is:

[skjnldsv]

I think it takes up a lot of space and it's a bit invasive

Agreed, shall we move to a white bg and primary border?

[georgehrke]

Agreed, shall we move to a white bg and primary border?

Or just emit the change event on change, not only on save and get rid of that button completely?

[skjnldsv]

Or just emit the change event on change, not only on save and get rid of that button completely?

I actually think it's nice to wait for a validation. On android I found both use cases:

1. the popup closes and the user see the changes instantly
2. the popup stays and the ui in the background updates so you get a preview of what you did.

I actually like the (2), like the calendar for example, you could update the whole ui accordingly and let the user change colours until it fits. I always have to click a few colours to see how well it matches with the other calendars that I have :)

It gives you a little better sense of control over the setting. ALso, on mobile, clicking outside cannot be the only way to quit a popup, so if you want to cancel, you'll need a button for it. Choose is fine if the user did not changed anything.

[georgehrke]

@ma12-co Somehow I'm too stupid to test this. Could you push an example branch to https://github.com/skjnldsv/vueexample?

I added a ColorPicker component inside a Popover, also set :open="true" on the popover, but somehow i can't see anything and the corresponding div in the Chrome inspector is empty.

[skjnldsv]

I added a ColorPicker component inside a Popover, also set :open="true" on the popover, but somehow i can't see anything and the corresponding div in the Chrome inspector is empty.

The popover component is not here yet, just use a standard ColorPicker with a v-model on a default value.

[marcoambrosini]

Sorry @georgehrke, that's totally my fault. Docs are a misleading as we still don't have the popover component. And the colorpicker now works properly only with v-model
Please use this app.vue for testing

[skjnldsv]

@ma12-co please rebase and squash :)

[marcoambrosini]

Done!

[georgehrke]

🎉