Page MenuHomePhorge
Files F32942717

D7207.1768257994.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D7207.1768257994.diff
View Options

diff --git a/web/modals/components/add-members-item.react.js b/web/modals/components/add-members-item.react.js
--- a/web/modals/components/add-members-item.react.js
+++ b/web/modals/components/add-members-item.react.js
@@ -2,9 +2,11 @@
import * as React from 'react';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import type { UserListItem } from 'lib/types/user-types.js';
import css from './add-members.css';
+import Avatar from '../../components/avatar.react.js';
import Button from '../../components/button.react.js';
type AddMembersItemProps = {
@@ -36,13 +38,21 @@
}
}, [canBeAdded, userAdded, userInfo.alertTitle]);
+ const avatarInfo = React.useMemo(
+ () => getAvatarForUser(userInfo),
+ [userInfo],
+ );
+
return (
<Button
className={css.addMemberItem}
onClick={onClickCallback}
disabled={!canBeAdded}
>
- <div className={css.label}>{userInfo.username}</div>
+ <div className={css.userInfoContainer}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ <div className={css.username}>{userInfo.username}</div>
+ </div>
<div className={css.label}>{action}</div>
</Button>
);
diff --git a/web/modals/components/add-members.css b/web/modals/components/add-members.css
--- a/web/modals/components/add-members.css
+++ b/web/modals/components/add-members.css
@@ -34,3 +34,14 @@
button.addMemberItem:hover .danger {
color: var(--add-members-remove-pending-color-hover);
}
+
+div.userInfoContainer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding-left: 16px;
+}
+
+div.username {
+ margin-left: 8px;
+}
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -8,6 +8,7 @@
changeThreadMemberRoles,
} from 'lib/actions/thread-actions.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import {
memberIsAdmin,
memberHasAdminPowers,
@@ -27,6 +28,7 @@
} from 'lib/utils/action-utils.js';
import css from './members-modal.css';
+import Avatar from '../../../components/avatar.react.js';
import Label from '../../../components/label.react.js';
import MenuItem from '../../../components/menu-item.react.js';
import Menu from '../../../components/menu.react.js';
@@ -141,6 +143,11 @@
return null;
}, [memberInfo, threadInfo]);
+ const avatarInfo = React.useMemo(
+ () => getAvatarForUser(memberInfo),
+ [memberInfo],
+ );
+
const memberContainerClasses = classNames(css.memberContainer, {
[css.memberContainerWithMenuOpen]: isMenuOpen,
});
@@ -148,7 +155,9 @@
return (
<div className={memberContainerClasses}>
<div className={css.memberInfo}>
- {userName} {label}
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ {userName}
+ {label}
</div>
<div className={css.memberAction}>
<Menu

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 12, 10:46 PM (12 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5925125
Default Alt Text
D7207.1768257994.diff (3 KB)

Event Timeline