Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit d9dac7b

Browse files
t3chguyt3chguy
authored
Merge pull request #5898 from matrix-org/t3chguy/fix/16976
Iterate the spaces face pile design
2 parents c0f8098 + 1305659 commit d9dac7b

File tree

5 files changed

+71
-45
lines changed

5 files changed

+71
-45
lines changed

‎res/css/structures/_SpaceRoomView.scss‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -224,35 +224,6 @@ $SpaceRoomViewInnerWidth: 428px;
224224

225225
.mx_FacePile_faces {
226226
cursor: pointer;
227-
228-
> span:hover {
229-
.mx_BaseAvatar {
230-
filter: brightness(0.8);
231-
}
232-
}
233-
234-
> span:first-child {
235-
position: relative;
236-
237-
.mx_BaseAvatar {
238-
filter: brightness(0.8);
239-
}
240-
241-
&::before {
242-
content: "";
243-
z-index: 1;
244-
position: absolute;
245-
top: 0;
246-
left: 0;
247-
height: 30px;
248-
width: 30px;
249-
background: #ffffff; // white icon fill
250-
mask-position: center;
251-
mask-size: 24px;
252-
mask-repeat: no-repeat;
253-
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
254-
}
255-
}
256227
}
257228
}
258229

‎res/css/views/elements/_FacePile.scss‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ limitations under the License.
2020
flex-direction: row-reverse;
2121
vertical-align: middle;
2222

23-
> span + span {
23+
> .mx_FacePile_face + .mx_FacePile_face {
2424
margin-right: -8px;
2525
}
2626

@@ -31,9 +31,32 @@ limitations under the License.
3131
.mx_BaseAvatar_initial {
3232
margin: 1px; // to offset the border on the image
3333
}
34+
35+
.mx_FacePile_more {
36+
position: relative;
37+
border-radius: 100%;
38+
width: 30px;
39+
height: 30px;
40+
background-color: $groupFilterPanel-bg-color;
41+
42+
&::before {
43+
content: "";
44+
z-index: 1;
45+
position: absolute;
46+
top: 0;
47+
left: 0;
48+
height: inherit;
49+
width: inherit;
50+
background: $tertiary-fg-color;
51+
mask-position: center;
52+
mask-size: 20px;
53+
mask-repeat: no-repeat;
54+
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
55+
}
56+
}
3457
}
3558

36-
> span {
59+
.mx_FacePile_summary {
3760
margin-left: 12px;
3861
font-size: $font-14px;
3962
line-height: $font-24px;

‎src/components/views/elements/FacePile.tsx‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import React, { HTMLAttributes } from "react";
17+
import React, { HTMLAttributes, ReactNode, useContext } from "react";
1818
import { Room } from "matrix-js-sdk/src/models/room";
1919
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
2020
import { sortBy } from "lodash";
@@ -24,6 +24,7 @@ import { _t } from "../../../languageHandler";
2424
import DMRoomMap from "../../../utils/DMRoomMap";
2525
import TextWithTooltip from "../elements/TextWithTooltip";
2626
import { useRoomMembers } from "../../../hooks/useRoomMembers";
27+
import MatrixClientContext from "../../../contexts/MatrixClientContext";
2728

2829
const DEFAULT_NUM_FACES = 5;
2930

@@ -36,6 +37,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
3637
const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
3738

3839
const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
40+
const cli = useContext(MatrixClientContext);
3941
let members = useRoomMembers(room);
4042

4143
// sort users with an explicit avatar first
@@ -46,21 +48,42 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, .
4648
// sort known users first
4749
iteratees.unshift(member => isKnownMember(member));
4850
}
49-
if (members.length < 1) return null;
5051

51-
const shownMembers = sortBy(members, iteratees).slice(0, numShown);
52+
// exclude ourselves from the shown members list
53+
const shownMembers = sortBy(members.filter(m => m.userId !== cli.getUserId()), iteratees).slice(0, numShown);
54+
if (shownMembers.length < 1) return null;
55+
56+
// We reverse the order of the shown faces in CSS to simplify their visual overlap,
57+
// reverse members in tooltip order to make the order between the two match up.
58+
const commaSeparatedMembers = shownMembers.map(m => m.rawDisplayName).reverse().join(", ");
59+
60+
let tooltip: ReactNode;
61+
if (props.onClick) {
62+
tooltip = <div>
63+
<div className="mx_Tooltip_title">
64+
{ _t("View all %(count)s members", { count: members.length }) }
65+
</div>
66+
<div className="mx_Tooltip_sub">
67+
{ _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) }
68+
</div>
69+
</div>;
70+
} else {
71+
tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", {
72+
count: members.length,
73+
commaSeparatedMembers,
74+
});
75+
}
76+
5277
return <div {...props} className="mx_FacePile">
53-
<div className="mx_FacePile_faces">
54-
{ shownMembers.map(member => {
55-
return <TextWithTooltip key={member.userId} tooltip={member.name}>
56-
<MemberAvatar member={member} width={28} height={28} />
57-
</TextWithTooltip>;
58-
}) }
59-
</div>
60-
{ onlyKnownUsers && <span>
78+
<TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
79+
{ members.length > numShown ? <span className="mx_FacePile_face mx_FacePile_more" /> : null }
80+
{ shownMembers.map(m =>
81+
<MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" /> )}
82+
</TextWithTooltip>
83+
{ onlyKnownUsers && <span className="mx_FacePile_summary">
6184
{ _t("%(count)s people you know have already joined", { count: members.length }) }
6285
</span> }
63-
</div>
86+
</div>;
6487
};
6588

6689
export default FacePile;

‎src/components/views/elements/TextWithTooltip.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default class TextWithTooltip extends React.Component {
2525
class: PropTypes.string,
2626
tooltipClass: PropTypes.string,
2727
tooltip: PropTypes.node.isRequired,
28+
tooltipProps: PropTypes.object,
2829
};
2930

3031
constructor() {
@@ -46,15 +47,17 @@ export default class TextWithTooltip extends React.Component {
4647
render() {
4748
const Tooltip = sdk.getComponent("elements.Tooltip");
4849

49-
const {class: className, children, tooltip, tooltipClass, ...props} = this.props;
50+
const {class: className, children, tooltip, tooltipClass, tooltipProps, ...props} = this.props;
5051

5152
return (
5253
<span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
5354
{children}
5455
{this.state.hover && <Tooltip
56+
{...tooltipProps}
5557
label={tooltip}
5658
tooltipClassName={tooltipClass}
57-
className={"mx_TextWithTooltip_tooltip"} /> }
59+
className={"mx_TextWithTooltip_tooltip"}
60+
/> }
5861
</span>
5962
);
6063
}

‎src/i18n/strings/en_EN.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1916,7 +1916,13 @@
19161916
"Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
19171917
"collapse": "collapse",
19181918
"expand": "expand",
1919+
"View all %(count)s members|other": "View all %(count)s members",
1920+
"View all %(count)s members|one": "View 1 member",
1921+
"Including %(commaSeparatedMembers)s": "Including %(commaSeparatedMembers)s",
1922+
"%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s members including %(commaSeparatedMembers)s",
1923+
"%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
19191924
"%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
1925+
"%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
19201926
"Rotate Right": "Rotate Right",
19211927
"Rotate Left": "Rotate Left",
19221928
"Zoom out": "Zoom out",

0 commit comments

Comments
 (0)