feat(circle-details): allow setting avatar image for circle

[cristianscheid]

• Resolves: Support associating a "preview" picture to teams circles#2433
• Related to: feat: add support for setting preview avatar for circle circles#2438

Summary

• Adds support for setting avatar image for circle

Screenshots

[codecov]

Codecov Report

❌ Patch coverage is 0% with 107 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/components/CircleDetails.vue	0.00%	107 Missing ⚠️

📢 Thoughts on this report? Let us know!

[cristianscheid]

@kra-mo following your suggestion:

I positioned the avatar buttons beneath the name and description in edit mode and styled them closer to the reference in this issue. The PR description has been updated with screenshots and a short video showing the current state.

Two questions I'd appreciate your input on:

1. How should we handle the button widths?
2. Right now, selecting an image opens the cropper and clicking "Set as team picture" saves immediately to the backend. Should it instead only save when the main edit mode "Save" button is clicked?

Besides that, I'm also aware that probably a spacing between the buttons is needed and also some margin from the main edit mode "Cancel" and "Save" buttons. Just waiting for another round of input before moving forward.

Any other thoughts are welcome :)

[kra-mo]

How should we handle the button widths?

The widths should definitely be homogeneous.

They should also have margins between them.

Right now, selecting an image opens the cropper and clicking "Set as team picture" saves immediately to the backend. Should it instead only save when the main edit mode "Save" button is clicked?

Since there is a "Cancel" button, the second behavior makes more sense.

[cristianscheid]

@kra-mo thanks for the input, really appreciated! I've adopted your suggestions and updated the implementation. Also updated the main comment of this PR with new screenshots and a short video demoing the current state.

[pringelmann]

🚀 nice work!

[kra-mo]

Having the Cancel/Save buttons in such close proximity is quite confusing, especially here:

Could this be in a dialog instead to make it a bit more focused?

[cristianscheid]

Could this be in a dialog instead to make it a bit more focused?

@kra-mo good idea! I've adjusted the PR accordingly, here are some screenshots:

[kra-mo]

@cristianscheid I was talking about a layout similar to this for the dialog:

And I'd also like if the input fields for the title and description could have a reduced maximum width, and the buttons there could have the same width:

Using NcFormGroup/NcFormBox.

Neither are a blocker, but it would be nice to have these in a follow-up.