Custom content in color pickers

[smnbbrv]

Hi @pIvan

first of all, thank you for a great work! It is surprisingly hard to find a well-done color-picker that is usable and good-looking at the same time.

For brevity, let's go on with the sketch-picker, but this is applicable to all pickers.

1. I'd love to have a possibility to have a button "OK" in the color picker. In my project it is shown in an overlay and it would be nice to give user a feeling he can click the OK button (clicking outside the overlay is not that obvious)
2. It would also be awesome if there was a button "Reset" or something like "Use original color", e.g. in text editor there is either a color or none and both should be selectable in the color picker.

However, this is not a full list of features that one can need and it is also hard to fulfill all generic design requirements.

After some thinking I come to idea to allow custom content to be projected in the original color pickers in the lib.

<sketch-picker [control]="sketchControl">
  <sketch-picker-before-content>Something</sketch-picker-before-content>
  <sketch-picker-after-content>
    <button>OK</button>
  </sketch-picker-after-content>
</sketch-picker>

Here multicontent-projection is in play. In this case one can easily implement his own content in any area of the picker

This would be totally sufficient for the use cases above.

Please share your thoughts. I am fine with making it as pull request, but before I'd love to know your opinion

[pIvan]

Hi @smnbbrv,

thank you for the suggestion, but the plan was never to pack a color picker in such a form but to leave it abstract enough to be implemented in any project in any way.

The easiest way for implementation in your case is to make a wrapper component, in a similar way as it is here

All functionalities are enabled through the ColorPickerControl instance, so you should be able to easily implement the OK and RESET keys, if you need help, I'm here and I can help you (and others) by adding your required example to the DEMO page.

Kind regards, Ivan

[smnbbrv]

Wrapper is not enough here because the container already has a border and shadow. Making the button outside of it would mean fighting against existing CSS, so removing the borders and shadows and re-applying them to the wrapping container.

This I can do as well. OK, no problem! Thanks for the answer

[pIvan]

I could put a content projection under the current content of the built-in components. And maybe I could build another component which will be used as a floating element, such as this wrapper demo. But not today, is that ok?

<chrome-picker></chrome-picker>
<sketch-picker></sketch-picker>
<compact-picker></compact-picker>
<github-picker></github-picker>
<swatches-picker></swatches-picker>

[smnbbrv]

Yeah, sure! Thanks!

[pIvan]

Thanks @smnbbrv,

your idea with content before and after is great! You told me how you have more ideas, can we do something else?

[smnbbrv]

Not yet, just starting to use the components :D