Team
Collaborators
HEEx
<div class="w-sm">
<ConnieUI.Collaboration.roster groups={@groups} />
</div>
Controls
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 |
|---|---|---|---|
| No data found. | |||
| 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 |
|