Page MenuHomePhabricator
Files F3381849

D7069.id23738.diff
No OneTemporary
Actions

D7069.id23738.diff
View Options

diff --git a/native/chat/message-reactions-modal.react.js b/native/chat/message-reactions-modal.react.js
--- a/native/chat/message-reactions-modal.react.js
+++ b/native/chat/message-reactions-modal.react.js
@@ -7,8 +7,10 @@
import { SafeAreaView } from 'react-native-safe-area-context';
import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';
+import Avatar from '../components/avatar.react.js';
import Modal from '../components/modal.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
@@ -38,9 +40,16 @@
const renderItem = React.useCallback(
({ item }) => {
+ const avatarInfo = getAvatarForUser(item);
+
return (
<View key={item.id} style={styles.reactionsListRowContainer}>
- <Text style={styles.reactionsListUsernameText}>{item.username}</Text>
+ <View style={styles.reactionsListUserInfoContainer}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ <Text style={styles.reactionsListUsernameText}>
+ {item.username}
+ </Text>
+ </View>
<Text style={styles.reactionsListReactionText}>{item.reaction}</Text>
</View>
);
@@ -48,6 +57,7 @@
[
styles.reactionsListReactionText,
styles.reactionsListRowContainer,
+ styles.reactionsListUserInfoContainer,
styles.reactionsListUsernameText,
],
);
@@ -118,9 +128,15 @@
flexDirection: 'row',
justifyContent: 'space-between',
},
+ reactionsListUserInfoContainer: {
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
reactionsListUsernameText: {
color: 'modalForegroundLabel',
fontSize: 18,
+ marginLeft: 8,
},
reactionsListReactionText: {
fontSize: 18,
diff --git a/native/chat/settings/thread-settings-member.react.js b/native/chat/settings/thread-settings-member.react.js
--- a/native/chat/settings/thread-settings-member.react.js
+++ b/native/chat/settings/thread-settings-member.react.js
@@ -16,6 +16,7 @@
} from 'lib/actions/thread-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import {
memberIsAdmin,
memberHasAdminPowers,
@@ -29,6 +30,7 @@
} from 'lib/types/thread-types.js';
import type { ThreadSettingsNavigate } from './thread-settings.react.js';
+import Avatar from '../../components/avatar.react.js';
import PencilIcon from '../../components/pencil-icon.react.js';
import { SingleLine } from '../../components/single-line.react.js';
import {
@@ -71,13 +73,14 @@
render() {
const userText = stringForUser(this.props.memberInfo);
- let userInfo = null;
+ const avatarInfo = getAvatarForUser(this.props.memberInfo);
+ let usernameInfo = null;
if (this.props.memberInfo.username) {
- userInfo = (
+ usernameInfo = (
<SingleLine style={this.props.styles.username}>{userText}</SingleLine>
);
} else {
- userInfo = (
+ usernameInfo = (
<SingleLine
style={[this.props.styles.username, this.props.styles.anonymous]}
>
@@ -145,7 +148,10 @@
<View style={this.props.styles.container}>
<View style={[this.props.styles.innerContainer, firstItem, lastItem]}>
<View style={this.props.styles.row}>
- {userInfo}
+ <View style={this.props.styles.userInfoContainer}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ {usernameInfo}
+ </View>
{editButton}
</View>
{roleInfo}
@@ -241,11 +247,17 @@
flex: 1,
flexDirection: 'row',
},
+ userInfoContainer: {
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
username: {
color: 'panelForegroundSecondaryLabel',
flex: 1,
fontSize: 16,
lineHeight: 20,
+ marginLeft: 8,
},
};
diff --git a/native/chat/typeahead-tooltip.react.js b/native/chat/typeahead-tooltip.react.js
--- a/native/chat/typeahead-tooltip.react.js
+++ b/native/chat/typeahead-tooltip.react.js
@@ -4,6 +4,7 @@
import { Platform, Text } from 'react-native';
import { PanGestureHandler, FlatList } from 'react-native-gesture-handler';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import {
type TypeaheadMatchedStrings,
type Selection,
@@ -11,6 +12,7 @@
} from 'lib/shared/mention-utils.js';
import type { RelativeMemberInfo } from 'lib/types/thread-types.js';
+import Avatar from '../components/avatar.react.js';
import Button from '../components/button.react.js';
import { useStyles } from '../themes/colors.js';
@@ -49,8 +51,11 @@
});
};
+ const avatarInfo = getAvatarForUser(item);
+
return (
<Button onPress={onPress} style={styles.button} iosActiveOpacity={0.85}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
<Text style={styles.buttonLabel} numberOfLines={1}>
@{item.username}
</Text>
@@ -133,6 +138,7 @@
padding: 8,
},
button: {
+ alignItems: 'center',
flexDirection: 'row',
innerHeight: 24,
padding: 8,
@@ -142,6 +148,7 @@
color: 'white',
fontSize: 16,
fontWeight: '400',
+ marginLeft: 8,
},
};
diff --git a/native/components/user-list-user.react.js b/native/components/user-list-user.react.js
--- a/native/components/user-list-user.react.js
+++ b/native/components/user-list-user.react.js
@@ -3,8 +3,10 @@
import * as React from 'react';
import { Text, Platform, Alert } from 'react-native';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import type { UserListItem } from 'lib/types/user-types.js';
+import Avatar from './avatar.react.js';
import Button from './button.react.js';
import { SingleLine } from './single-line.react.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';
@@ -35,6 +37,9 @@
notice = <Text style={this.props.styles.notice}>{userInfo.notice}</Text>;
}
const { modalIosHighlightUnderlay: underlayColor } = this.props.colors;
+
+ const avatarInfo = getAvatarForUser(this.props.userInfo);
+
return (
<Button
onPress={this.onSelect}
@@ -44,6 +49,7 @@
iosActiveOpacity={0.85}
style={this.props.styles.button}
>
+ <Avatar size="small" avatarInfo={avatarInfo} />
<SingleLine style={[this.props.styles.text, this.props.textStyle]}>
{this.props.userInfo.username}
</SingleLine>
diff --git a/native/profile/relationship-list-item.react.js b/native/profile/relationship-list-item.react.js
--- a/native/profile/relationship-list-item.react.js
+++ b/native/profile/relationship-list-item.react.js
@@ -15,6 +15,7 @@
updateRelationships,
} from 'lib/actions/relationship-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import {
type RelationshipRequest,
@@ -34,6 +35,7 @@
} from 'lib/utils/action-utils.js';
import type { RelationshipListNavigate } from './relationship-list.react.js';
+import Avatar from '../components/avatar.react.js';
import PencilIcon from '../components/pencil-icon.react.js';
import { SingleLine } from '../components/single-line.react.js';
import {
@@ -169,9 +171,12 @@
);
}
+ const avatarInfo = getAvatarForUser(this.props.userInfo);
+
return (
<View style={this.props.styles.container}>
<View style={[this.props.styles.innerContainer, borderBottom]}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
<SingleLine style={this.props.styles.username}>
{this.props.userInfo.username}
</SingleLine>
@@ -299,6 +304,7 @@
flex: 1,
fontSize: 16,
lineHeight: 20,
+ marginLeft: 8,
},
blueAction: {
color: 'link',

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 6:45 AM (21 h, 13 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2596059
Default Alt Text
D7069.id23738.diff (8 KB)

Event Timeline