Overlapping colors in calendar color picker and unused choose button

[ChristophWurst]

Steps to reproduce

1. Open the app
2. Open the edit modal of a calendar
3. Click the calendar color

Expected behavior

Good design

Actual behaviour

• Overlapping bubbles
• Choose does not do anyhting

Calendar app version

4.8

CalDAV-clients used

No response

Browser

No response

Client operating system

No response

Server operating system

No response

Web server

None

Database engine version

None

PHP engine version

None

Nextcloud version

No response

Updated from an older installed version or fresh install

None

List of activated apps

No response

Nextcloud configuration

No response

Web server error log

No response

Log file

No response

Browser log

No response

Additional info

No response

[st3iny]

For reference, this is how it looks on 29:

Palette	Advanced

[ChristophWurst]

Choose does not do anyhting

It is because of nextcloud-libraries/nextcloud-vue#5499. @susnux I'm not sure how apps should handle the submit event in the simple mode of the color picker. The app can process the selection but it can't close the picker, can it?

[st3iny]

The open state can be controlled from the outside via the shown prop or synced via shown:sync. The prop is currently not documented as it is passed down to NcPopover via v-bind.

So we could add an open state variable showColorPicker to data and listen to the submit event to actually apply the color.

Example

<NcColorPicker :shown.sync="showColorPicker" @submit="setColor">...</NcColorPicker>