nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add face pile to rooms (#11356)

Browse Source 
* Add face pile to rooms

* Migrate FacePile to use Compound

* Fix CI

* Use FacePile component in room header

* Add facepile tests

* Make dead code CI happy

* Lint

* Fix tests

* Fix CSS selectors

* Update room face pile snapshot

* Use useMemo instead of useState and useEffect

* Remove unused imports

* Update snapshot

* Update snapshot
This commit is contained in:
Germain
2023-08-30 18:55:02 +01:00
committed by GitHub
parent af268b4a03
commit dc70ea5059
14 changed files with 445 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/views/elements/FacePile.tsx
View File

@@ -16,27 +16,27 @@ limitations under the License.
import React, { FC, HTMLAttributes, ReactNode } from "react";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import { AvatarStack, Tooltip } from "@vector-im/compound-web";
import MemberAvatar from "../avatars/MemberAvatar";
import TooltipTarget from "./TooltipTarget";
import TextWithTooltip from "./TextWithTooltip";
interface IProps extends HTMLAttributes<HTMLSpanElement> {
members: RoomMember[];
size: string;
overflow: boolean;
tooltip?: ReactNode;
tooltipLabel?: string;
tooltipShortcut?: string;
children?: ReactNode;
}
const FacePile: FC<IProps> = ({ members, size, overflow, tooltip, children, ...props }) => {
const FacePile: FC<IProps> = ({ members, size, overflow, tooltipLabel, tooltipShortcut, children, ...props }) => {
const faces = members.map(
tooltip
tooltipLabel
? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle />
: (m) => (
<TooltipTarget key={m.userId} label={m.name}>
<Tooltip key={m.userId} label={m.name} shortcut={tooltipShortcut}>
<MemberAvatar member={m} size={size} viewUserOnClick={!props.onClick} hideTitle />
</TooltipTarget>
</Tooltip>
),
);
@@ -47,18 +47,20 @@ const FacePile: FC<IProps> = ({ members, size, overflow, tooltip, children, ...p
</>
);
return (
<div {...props} className="mx_FacePile">
{tooltip ? (
<TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip}>
{pileContents}
</TextWithTooltip>
) : (
<div className="mx_FacePile_faces">{pileContents}</div>
)}
const content = (
<div className="mx_FacePile">
<AvatarStack>{pileContents}</AvatarStack>
{children}
</div>
);
return tooltipLabel ? (
<Tooltip label={tooltipLabel} shortcut={tooltipShortcut}>
{content}
</Tooltip>
) : (
content
);
};
export default FacePile;

28
src/components/views/elements/RoomFacePile.tsx
View File

@@ -63,21 +63,21 @@ const RoomFacePile: FC<IProps> = ({ room, onlyKnownUsers = true, numShown = DEFA
.reverse()
.join(", ");
const tooltip = (
<div>
<div className="mx_Tooltip_title">
{props.onClick ? _t("View all %(count)s members", { count }) : _t("%(count)s members", { count })}
</div>
<div className="mx_Tooltip_sub">
{isJoined
? _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers })
: _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers })}
</div>
</div>
);
return (
<FacePile members={shownMembers} size="28px" overflow={members.length > numShown} tooltip={tooltip} {...props}>
<FacePile
members={shownMembers}
size="28px"
overflow={members.length > numShown}
tooltipLabel={
props.onClick ? _t("View all %(count)s members", { count }) : _t("%(count)s members", { count })
}
tooltipShortcut={
isJoined
? _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers })
: _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers })
}
{...props}
>
{onlyKnownUsers && (
<span className="mx_FacePile_summary">
{_t("%(count)s people you know have already joined", { count: members.length })}