Page MenuHomePhabricator
Files F3381377

D7099.diff
No OneTemporary
Actions

D7099.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
@@ -15,6 +15,7 @@
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import { useColors, useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
export type MessageReactionsModalParams = {
+reactions: ReactionInfo,
@@ -38,6 +39,14 @@
const reactionsListData = useMessageReactionsList(reactions);
+ const shouldRenderAvatars = useShouldRenderAvatars();
+ const marginLeftStyle = React.useMemo(
+ () => ({
+ marginLeft: shouldRenderAvatars ? 8 : 0,
+ }),
+ [shouldRenderAvatars],
+ );
+
const renderItem = React.useCallback(
({ item }) => {
const avatarInfo = getAvatarForUser(item);
@@ -46,7 +55,7 @@
<View key={item.id} style={styles.reactionsListRowContainer}>
<View style={styles.reactionsListUserInfoContainer}>
<Avatar size="small" avatarInfo={avatarInfo} />
- <Text style={styles.reactionsListUsernameText}>
+ <Text style={[styles.reactionsListUsernameText, marginLeftStyle]}>
{item.username}
</Text>
</View>
@@ -55,6 +64,7 @@
);
},
[
+ marginLeftStyle,
styles.reactionsListReactionText,
styles.reactionsListRowContainer,
styles.reactionsListUserInfoContainer,
@@ -136,7 +146,6 @@
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
@@ -45,6 +45,7 @@
import { useSelector } from '../../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../../themes/colors.js';
import type { VerticalBounds } from '../../types/layout-types.js';
+import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
type BaseProps = {
+memberInfo: RelativeMemberInfo,
@@ -67,6 +68,7 @@
+keyboardState: ?KeyboardState,
// withOverlayContext
+overlayContext: ?OverlayContextType,
+ +shouldRenderAvatars: boolean,
};
class ThreadSettingsMember extends React.PureComponent<Props> {
editButton: ?React.ElementRef<typeof View>;
@@ -74,15 +76,26 @@
render() {
const userText = stringForUser(this.props.memberInfo);
const avatarInfo = getAvatarForUser(this.props.memberInfo);
+
+ const marginLeftStyle = {
+ marginLeft: this.props.shouldRenderAvatars ? 8 : 0,
+ };
+
let usernameInfo = null;
if (this.props.memberInfo.username) {
usernameInfo = (
- <SingleLine style={this.props.styles.username}>{userText}</SingleLine>
+ <SingleLine style={[this.props.styles.username, marginLeftStyle]}>
+ {userText}
+ </SingleLine>
);
} else {
usernameInfo = (
<SingleLine
- style={[this.props.styles.username, this.props.styles.anonymous]}
+ style={[
+ this.props.styles.username,
+ this.props.styles.anonymous,
+ marginLeftStyle,
+ ]}
>
{userText}
</SingleLine>
@@ -257,7 +270,6 @@
flex: 1,
fontSize: 16,
lineHeight: 20,
- marginLeft: 8,
},
};
@@ -285,6 +297,8 @@
const styles = useStyles(unboundStyles);
const keyboardState = React.useContext(KeyboardContext);
const overlayContext = React.useContext(OverlayContext);
+ const shouldRenderAvatars = useShouldRenderAvatars();
+
return (
<ThreadSettingsMember
{...props}
@@ -295,6 +309,7 @@
styles={styles}
keyboardState={keyboardState}
overlayContext={overlayContext}
+ shouldRenderAvatars={shouldRenderAvatars}
/>
);
});
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
@@ -15,6 +15,7 @@
import Avatar from '../components/avatar.react.js';
import Button from '../components/button.react.js';
import { useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
export type TypeaheadTooltipProps = {
+text: string,
@@ -31,10 +32,19 @@
focusAndUpdateTextAndSelection,
} = props;
+ const shouldRenderAvatars = useShouldRenderAvatars();
+
const { textBeforeAtSymbol, usernamePrefix } = matchedStrings;
const styles = useStyles(unboundStyles);
+ const marginLeftStyle = React.useMemo(
+ () => ({
+ marginLeft: shouldRenderAvatars ? 8 : 0,
+ }),
+ [shouldRenderAvatars],
+ );
+
const renderTypeaheadButton = React.useCallback(
({ item }: { item: RelativeMemberInfo, ... }) => {
const onPress = () => {
@@ -56,19 +66,20 @@
return (
<Button onPress={onPress} style={styles.button} iosActiveOpacity={0.85}>
<Avatar size="small" avatarInfo={avatarInfo} />
- <Text style={styles.buttonLabel} numberOfLines={1}>
+ <Text style={[styles.buttonLabel, marginLeftStyle]} numberOfLines={1}>
@{item.username}
</Text>
</Button>
);
},
[
- focusAndUpdateTextAndSelection,
styles.button,
styles.buttonLabel,
- text,
+ marginLeftStyle,
textBeforeAtSymbol,
+ text,
usernamePrefix,
+ focusAndUpdateTextAndSelection,
],
);
@@ -148,7 +159,6 @@
color: 'white',
fontSize: 16,
fontWeight: '400',
- marginLeft: 8,
},
};
diff --git a/native/components/avatar.react.js b/native/components/avatar.react.js
--- a/native/components/avatar.react.js
+++ b/native/components/avatar.react.js
@@ -5,6 +5,8 @@
import type { ClientAvatar } from 'lib/types/avatar-types.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
+
type Props = {
+avatarInfo: ClientAvatar,
+size?: 'large' | 'small' | 'profile' | 'micro',
@@ -13,6 +15,8 @@
function Avatar(props: Props): React.Node {
const { avatarInfo, size } = props;
+ const shouldRenderAvatars = useShouldRenderAvatars();
+
const containerSizeStyle = React.useMemo(() => {
if (size === 'profile') {
return styles.profile;
@@ -45,6 +49,10 @@
return styles.emojiLarge;
}, [size]);
+ if (!shouldRenderAvatars) {
+ return null;
+ }
+
return (
<View style={emojiContainerStyle}>
<Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
diff --git a/native/profile/profile-screen.react.js b/native/profile/profile-screen.react.js
--- a/native/profile/profile-screen.react.js
+++ b/native/profile/profile-screen.react.js
@@ -39,6 +39,7 @@
} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
import { useStaffCanSee } from '../utils/staff-utils.js';
type ProfileRowProps = {
@@ -73,6 +74,7 @@
+staffCanSee: boolean,
+stringForUser: ?string,
+isAccountWithPassword: boolean,
+ +shouldRenderAvatars: boolean,
};
class ProfileScreen extends React.PureComponent<Props> {
@@ -128,14 +130,23 @@
</View>
);
+ let avatarSection;
+ if (this.props.shouldRenderAvatars) {
+ avatarSection = (
+ <>
+ <Text style={this.props.styles.header}>USER AVATAR</Text>
+ <View style={this.props.styles.section}>{avatar}</View>
+ </>
+ );
+ }
+
return (
<View style={this.props.styles.container}>
<ScrollView
contentContainerStyle={this.props.styles.scrollViewContentContainer}
style={this.props.styles.scrollView}
>
- <Text style={this.props.styles.header}>USER AVATAR</Text>
- <View style={this.props.styles.section}>{avatar}</View>
+ {avatarSection}
<Text style={this.props.styles.header}>ACCOUNT</Text>
<View style={this.props.styles.section}>
<Action.Row>
@@ -395,6 +406,7 @@
const isAccountWithPassword = useSelector(state =>
accountHasPassword(state.currentUserInfo),
);
+ const shouldRenderAvatars = useShouldRenderAvatars();
return (
<ProfileScreen
@@ -409,6 +421,7 @@
staffCanSee={staffCanSee}
stringForUser={stringForUser}
isAccountWithPassword={isAccountWithPassword}
+ shouldRenderAvatars={shouldRenderAvatars}
/>
);
});
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
@@ -55,6 +55,7 @@
import { useSelector } from '../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';
import type { VerticalBounds } from '../types/layout-types.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
type BaseProps = {
+userInfo: AccountUserInfo,
@@ -80,6 +81,7 @@
+overlayContext: ?OverlayContextType,
// withKeyboardState
+keyboardState: ?KeyboardState,
+ +shouldRenderAvatars: boolean,
};
class RelationshipListItem extends React.PureComponent<Props> {
editButton = React.createRef<React.ElementRef<typeof View>>();
@@ -171,13 +173,17 @@
);
}
+ const marginLeftStyle = {
+ marginLeft: this.props.shouldRenderAvatars ? 8 : 0,
+ };
+
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}>
+ <SingleLine style={[this.props.styles.username, marginLeftStyle]}>
{this.props.userInfo.username}
</SingleLine>
{editButton}
@@ -334,6 +340,8 @@
const boundUpdateRelationships = useServerCall(updateRelationships);
const overlayContext = React.useContext(OverlayContext);
const keyboardState = React.useContext(KeyboardContext);
+ const shouldRenderAvatars = useShouldRenderAvatars();
+
return (
<RelationshipListItem
{...props}
@@ -344,6 +352,7 @@
updateRelationships={boundUpdateRelationships}
overlayContext={overlayContext}
keyboardState={keyboardState}
+ shouldRenderAvatars={shouldRenderAvatars}
/>
);
});
diff --git a/native/utils/avatar-utils.js b/native/utils/avatar-utils.js
new file mode 100644
--- /dev/null
+++ b/native/utils/avatar-utils.js
@@ -0,0 +1,14 @@
+// @flow
+
+import * as React from 'react';
+
+import { FeatureFlagsContext } from '../components/feature-flags-provider.react.js';
+
+function useShouldRenderAvatars(): boolean {
+ const { configuration: featureFlagConfig } =
+ React.useContext(FeatureFlagsContext);
+
+ return !!featureFlagConfig['AVATARS_DISPLAY'];
+}
+
+export { useShouldRenderAvatars };

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 4:44 AM (22 h, 7 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2595839
Default Alt Text
D7099.diff (11 KB)

Event Timeline