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

Tweak pill UI (#10417)

Browse source
This commit is contained in:
Michael Weimann 2023-03-22 13:27:24 +01:00 • committed by GitHub
parent 4c2b18c5d9
commit 3eb6a55b93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 177 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/components/views/elements/Pill.tsx
View file

@ -45,6 +45,8 @@ export const pillRoomNotifLen = (): number => {
return "@room".length;
};
const linkIcon = <LinkIcon className="mx_Pill_LinkIcon mx_BaseAvatar mx_BaseAvatar_image" />;
const PillRoomAvatar: React.FC<{
shouldShowPillAvatar: boolean;
room: Room | null;
@ -56,7 +58,7 @@ const PillRoomAvatar: React.FC<{
if (room) {
return <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
}
return <LinkIcon className="mx_Pill_LinkIcon mx_BaseAvatar mx_BaseAvatar_image" />;
return linkIcon;
};
const PillMemberAvatar: React.FC<{
@ -88,7 +90,7 @@ export interface PillProps {
export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room, shouldShowPillAvatar = true }) => {
const [hover, setHover] = useState(false);
const { member, onClick, resourceId, targetRoom, text, type } = usePermalink({
const { event, member, onClick, resourceId, targetRoom, text, type } = usePermalink({
room,
type: propType,
url,
@ -116,35 +118,38 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
};
const tip = hover && resourceId ? <Tooltip label={resourceId} alignment={Alignment.Right} /> : null;
let content: (ReactElement | string)[] = [];
const textElement = <span className="mx_Pill_text">{text}</span>;
let avatar: ReactElement | null = null;
let pillText: string | null = text;
switch (type) {
case PillType.EventInOtherRoom:
{
const avatar = <PillRoomAvatar shouldShowPillAvatar={shouldShowPillAvatar} room={targetRoom} />;
content = [_t("Message in"), avatar || " ", textElement];
avatar = <PillRoomAvatar shouldShowPillAvatar={shouldShowPillAvatar} room={targetRoom} />;
pillText = _t("Message in %(room)s", {
room: text,
});
}
break;
case PillType.EventInSameRoom:
{
const avatar = <PillMemberAvatar shouldShowPillAvatar={shouldShowPillAvatar} member={member} />;
content = [_t("Message from"), avatar || " ", textElement];
if (event) {
avatar = <PillMemberAvatar shouldShowPillAvatar={shouldShowPillAvatar} member={member} />;
pillText = _t("Message from %(user)s", {
user: text,
});
} else {
avatar = linkIcon;
pillText = _t("Message");
}
}
break;
case PillType.AtRoomMention:
case PillType.RoomMention:
case "space":
{
const avatar = <PillRoomAvatar shouldShowPillAvatar={shouldShowPillAvatar} room={targetRoom} />;
content = [avatar, textElement];
}
avatar = <PillRoomAvatar shouldShowPillAvatar={shouldShowPillAvatar} room={targetRoom} />;
break;
case PillType.UserMention:
{
const avatar = <PillMemberAvatar shouldShowPillAvatar={shouldShowPillAvatar} member={member} />;
content = [avatar, textElement];
}
avatar = <PillMemberAvatar shouldShowPillAvatar={shouldShowPillAvatar} member={member} />;
break;
default:
return null;
@ -161,12 +166,14 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
onMouseOver={onMouseOver}
onMouseLeave={onMouseLeave}
>
{content}
{avatar}
<span className="mx_Pill_text">{pillText}</span>
{tip}
</a>
) : (
<span className={classes} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
{content}
{avatar}
<span className="mx_Pill_text">{pillText}</span>
{tip}
</span>
)}