enh(NcEmojiPicker): Always show skin tone selector + save selection

[susnux]

☑️ Resolves

• Resolves Ability to change skin tone for emojis #5084

Always allow to select the skin tone used for emojis, this can be done by picking the skin tone on the left of the search bar.
The selected skin tone is saved on the local storage of the browser, so it is preserved during sessions.

Previously it was only possible to select a skin tone if the preview was enabled, but this has two problems:

1. Not always possible to select
2. ❗ The preview is for some emojis too crowed (too many shortcuts) so that the skin tone selector was not visible

Some minor other changes on components to implement this:

• Allow to limit NcColorPicker to the given palette
• Export Color class so we can reuse it
• Fix Color to provide color attribute required by the color picker (otherwise one would have to provide it manually)

🖼️ Screenshots

vokoscreenNG-2024-01-22_01-32-48.mp4

🚧 Tasks

• We need this to make the skin tone selection reactive: fix(Picker): Watch for skin property changes serebrov/emoji-mart-vue#294

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[max-nextcloud]

Code changes look good. Did not try it out though.

[jancborchardt]

Very nice! 2 questions:

• Since there are 5 modifiers + default yellow, could the color dropdown be a 32 grid instead of 42 with only 2 in the bottom row? That would look cleaner. :)
• Once this color is set, will it also be used in cases where you use : for emojis like in Text, Talk, Collectives, Mail, etc?

Thanks!

[susnux]

Since there are 5 modifiers + default yellow, could the color dropdown be a 32 grid instead of 42 with only 2 in the bottom row? That would look cleaner. :)

This comes from NcColorPicker and should probably be fixed there, would do so in a follow up.

[jancborchardt]

Since there are 5 modifiers + default yellow, could the color dropdown be a 32 grid instead of 42 with only 2 in the bottom row? That would look cleaner. :)

This comes from NcColorPicker and should probably be fixed there, would do so in a follow up.

@susnux sounds good! :)

Once this color is set, will it also be used in cases where you use : for emojis like in Text, Talk, Collectives, Mail, etc?

What about this one? Also cc @max-nextcloud for Text & Collectives, maybe you know?

[susnux]

Once this color is set, will it also be used in cases where you use : for emojis like in Text, Talk, Collectives, Mail, etc?

I need to test this but I think we need to adjust the emojiSeach function used in NcRichContenteditable. I will check an report.

[susnux]

I need to test this but I think we need to adjust the emojiSeach function used in NcRichContenteditable. I will check an report.

No it did not work, but adjusting emojiSearch worked:

So @jancborchardt all points resolved and working 🎉

vokoscreenNG-2024-01-23_15-35-35.mp4

[jancborchardt]

Nice, awesome job @susnux! :)

[Antreesy]

Missing a container here for inner NcPopover. Because of that, skin tones are rendered always on 'body'