imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add display name tooltip to the facepile avatars

Browse source
This commit is contained in:
Michael Telatynski 2021-03-26 00:05:05 +00:00
parent 1b22cc8f6d
commit 09601f1071
2 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/elements/_FacePile.scss
View file

@ -20,10 +20,8 @@ limitations under the License.
flex-direction: row-reverse; flex-direction: row-reverse;
vertical-align: middle; vertical-align: middle;
.mx_BaseAvatar { > span + span {
& + .mx_BaseAvatar { margin-right: -8px;
margin-right: -10px;
}
} }
.mx_BaseAvatar_image { .mx_BaseAvatar_image {

7
src/components/views/elements/FacePile.tsx
View file

@ -20,6 +20,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
import MemberAvatar from "../avatars/MemberAvatar"; import MemberAvatar from "../avatars/MemberAvatar";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import DMRoomMap from "../../../utils/DMRoomMap"; import DMRoomMap from "../../../utils/DMRoomMap";
import TextWithTooltip from "../elements/TextWithTooltip";
const DEFAULT_NUM_FACES = 5; const DEFAULT_NUM_FACES = 5;
@ -38,7 +39,11 @@ const FacePile = ({ room, numShown = DEFAULT_NUM_FACES }: IProps) => {
return <div className="mx_FacePile"> return <div className="mx_FacePile">
<div className="mx_FacePile_faces"> <div className="mx_FacePile_faces">
{ shownMembers.map(member => <MemberAvatar key={member.userId} member={member} width={28} height={28} />) } { shownMembers.map(member => {
return <TextWithTooltip key={member.userId} tooltip={member.name}>
<MemberAvatar member={member} width={28} height={28} />
</TextWithTooltip>;
}) }
</div> </div>
<span> <span>
{ _t("%(count)s people you know have already joined", { count: knownMembers.length }) } { _t("%(count)s people you know have already joined", { count: knownMembers.length }) }