CollaborationAvatarGroup Caption

[chrosim]

As a developer I want to be able to set a caption to CollaborationAvatarGroup that would only be displayed if collaborators are present e.g.: "Currently editing"

[pekam]

Do you mean something similar to the labels on field components, e.g.: (Screenshot taken after playing with Chrome dev tools)

[Peppe]

Please share a bit more on the behaviour. should the text not be when only your avatar is there, and then when there are two or more, it would have the text as well?

[chrosim]

@pekam this looks awesome. @Peppe From my point of view the best solution would be a setting for that. Something like the showLocalUser setting

[pekam]

To me, the use case looks too specific to have a setting for when to show a label.

It would be more generally useful to add an event that gets fired when the users change:

Label label = new Label("Currently editing:");

collaborationAvatarGroup.addUsersChangedListener(e -> {
    label.setVisible(e.getUsers.size() > 0);
}

To make the label look like the field labels, you can copy some CSS by inspecting the field labels with your browser's inspector (let us know if you need any help).

I'm not sure if a label on avatar group should be an official feature, but if you want to request that, please create a ticket in the vaadin-avatar repository. To clarify, vaadin-avatar contains the basic Avatar and AvatarGroup components, while the CollaborationAvatarGroup in collaboration-engine extends the AvatarGroup by adding the automatic user syncing.

[jouni]

Avatar Group is not a field component (nor an input component), so it should not have a built in label similar to fields. We offer the Custom Field component which can provide such a label in custom situations.

Though, I’m not sure if the Flow component allows you to place any arbitrary content inside it. But the web component should not have such restrictions.

As for the use case, I feel @pekam’s suggestion is the correct solution, that you can react to changes in the Avatar Group and update your application UI accordingly.

[pekam]

Avatar Group is not a field component (nor an input component), so it should not have a built in label similar to fields.

I thought so, thanks for confirming!

It seems that CustomField accepts any Component inside it, so that could indeed be a quick way to get the label there. Although it's a bit hacky, because you have to define a field value type and write dummy implementations for generateModelValue and setPresentationValue, even though it's not really a field.

So to get consistent labels, you can choose to either write some CSS for Label or wrap the avatar group with CustomField.

I'm going to close this issue, and create a new one for the addUsersChangedListener, referring to this use case. I hope that's fine @chrosim. Let us know what you think.

[pekam]

Here is the new ticket for addUsersChangedListener: https://github.com/vaadin/collaboration-engine/issues/9