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

demo.webm

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
src/components/CircleDetails.vue	0.00%	81 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. Would appreciate if you could take a look at it and share your thoughts.

[pringelmann]

If I start editing one team, pick a picture, then click another team in the sidebar before saving, the pending blob carries over and saves to the wrong team. Watcher should call clearPendingAvatar() (and probably reset isEditing too) when the id actually changes.

[pringelmann]

These three (Cancel, Apply, Error cropping avatar picture) are still in the settings domain. I might be wrong but I suspect won't be picked up by the contacts gettext catalog, so they stay English regardless of locale. Should be t('contacts', ...) maybe?

[pringelmann]

You already have VALID_MIME_TYPES at the top of the file, can we use it here too? Otherwise the picker filter and this check can drift.

[pringelmann]

Cropper has getCroppedCanvas({ maxWidth: 512, maxHeight: 512 }) for exactly this, no need to mutate the cropper state. Same approach is used in ContactDetailsAvatar.vue around line 425.

[pringelmann]

Worth setting accept="image/png,image/jpeg" here so the native OS dialog only shows valid files. Cheap UX improvement, and the MIME check stays as the actual gate. Not a blocker for this PR though :)

One way to do it could be in setup:

setup() {
    const avatarList = ref()
    const { width } = useElementSize(avatarList)
    return { avatarList, width, avatarAccept: VALID_MIME_TYPES.join(',') }
}

and then

<input
    ref="avatarInput"
    type="file"
    :accept="avatarAccept"
    class="hidden-visually"
    @change="onAvatarInputChange">

[pringelmann]

This is untranslated, but so are the existing name and description fields. If you have time it could be good to fix them, but not blocking for PR

[pringelmann]

afaik FilePickerType.Choose is exported from @nextcloud/dialogs. Reads better and won't silently break if the underlying values ever shift