Catalog Collaboration

<.roster>

ConnieUI.Collaboration

Team

Sofie Lindqvist, here now Mikkel Sørensen, here now Maja Olsen Peter Krogh

Collaborators

Anaïs Dubois, here now Johan Berg
HEEx
<div class="w-sm">
  <ConnieUI.Collaboration.roster groups={@groups} />
</div>

Controls

:integer

avatars per cluster before it folds into a +N badge

:string

Set by the example

groups class

Docs

Everyone on the document, in labelled clusters: Owner, Team, Collaborators. The flat stack in `header_roster/1` answers "who has access". This answers "who are these people to each other", which is the question somebody outside the account is actually asking, so the groups and their order are the host's to decide and arrive already sorted. It sits on the paper's own background as a translucent pill, with a hairline between one cluster and the next, so a reader takes it as furniture over the document rather than as part of it. Each label is centred over the cluster it names, because the clusters are wildly different widths (one owner, a whole team, two externals) and a left-aligned label lands somewhere arbitrary in the middle of the row. The hairline runs beside the faces rather than the whole pill, which is what the `mt` is: the label's own line box (18px) plus the gap under it (4px). The corner is the avatar's radius plus the padding around it, so the pill's curve runs parallel to the circle nearest it, and the inner white edge keeps the glass from dissolving into a pale document underneath. A group with nobody in it is left out rather than drawn as a label over nothing, and so is the rule that would have preceded it. A project whose whole team has access has no members listed individually, so Team is empty on the commonest kind of draft.
Attribute Type Default Description
groups * :list
the clusters, in display order, as `%{label:, people:}` where each person is `%{name:, image:, online: boolean}`. An empty cluster is not rendered
limit :integer 8
avatars per cluster before it folds into a +N badge
size :string "size-10"
class :any nil