Page MenuHomePhabricator
Files F3295209

D7378.id24926.diff
No OneTemporary
Actions

D7378.id24926.diff
View Options

diff --git a/native/chat/settings/thread-settings-avatar.react.js b/native/chat/settings/thread-settings-avatar.react.js
--- a/native/chat/settings/thread-settings-avatar.react.js
+++ b/native/chat/settings/thread-settings-avatar.react.js
@@ -1,22 +1,62 @@
// @flow
import * as React from 'react';
-import { View } from 'react-native';
+import { View, TouchableWithoutFeedback } from 'react-native';
import { type ResolvedThreadInfo } from 'lib/types/thread-types.js';
+import SWMansionIcon from '../../components/swmansion-icon.react.js';
import ThreadAvatar from '../../components/thread-avatar.react.js';
-import { useStyles } from '../../themes/colors.js';
+import { useColors, useStyles } from '../../themes/colors.js';
type Props = {
+threadInfo: ResolvedThreadInfo,
+ +canChangeSettings: boolean,
};
function ThreadSettingsAvatar(props: Props): React.Node {
+ const { threadInfo, canChangeSettings } = props;
+
+ const colors = useColors();
const styles = useStyles(unboundStyles);
+ const onPressEditAvatar = React.useCallback(() => {
+ // TODO:
+ // Display action sheet with all the different avatar creation options
+ }, []);
+
+ const editBadge = React.useMemo(() => {
+ if (!canChangeSettings) {
+ return null;
+ }
+
+ return (
+ <View style={styles.editAvatarIconContainer}>
+ <SWMansionIcon
+ name="edit-2"
+ size={16}
+ style={styles.editAvatarIcon}
+ color={colors.floatingButtonLabel}
+ />
+ </View>
+ );
+ }, [
+ canChangeSettings,
+ colors.floatingButtonLabel,
+ styles.editAvatarIcon,
+ styles.editAvatarIconContainer,
+ ]);
+
return (
<View style={styles.container}>
- <ThreadAvatar size="profile" threadInfo={props.threadInfo} />
+ <TouchableWithoutFeedback
+ onPress={onPressEditAvatar}
+ disabled={!canChangeSettings}
+ >
+ <View>
+ <ThreadAvatar size="profile" threadInfo={threadInfo} />
+ {editBadge}
+ </View>
+ </TouchableWithoutFeedback>
</View>
);
}
@@ -28,6 +68,21 @@
flex: 1,
paddingVertical: 16,
},
+ editAvatarIconContainer: {
+ position: 'absolute',
+ bottom: 0,
+ right: 0,
+ borderWidth: 2,
+ borderColor: 'panelForeground',
+ borderRadius: 18,
+ width: 36,
+ height: 36,
+ backgroundColor: 'purpleButton',
+ justifyContent: 'center',
+ },
+ editAvatarIcon: {
+ textAlign: 'center',
+ },
};
const MemoizedThreadSettingsAvatar: React.ComponentType<Props> =
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -132,6 +132,7 @@
+itemType: 'avatar',
+key: string,
+threadInfo: ResolvedThreadInfo,
+ +canChangeSettings: boolean,
}
| {
+itemType: 'name',
@@ -332,6 +333,10 @@
navigate: ThreadSettingsNavigate,
routeKey: string,
) => {
+ const canEditThreadAvatar = threadHasPermission(
+ threadInfo,
+ threadPermissions.EDIT_THREAD_AVATAR,
+ );
const canEditThreadName = threadHasPermission(
threadInfo,
threadPermissions.EDIT_THREAD_NAME,
@@ -344,6 +349,8 @@
threadInfo,
threadPermissions.EDIT_THREAD_COLOR,
);
+
+ const canChangeAvatar = canEditThreadAvatar && canStartEditing;
const canChangeName = canEditThreadName && canStartEditing;
const canChangeDescription = canEditThreadDescription && canStartEditing;
const canChangeColor = canEditThreadColor && canStartEditing;
@@ -360,6 +367,7 @@
itemType: 'avatar',
key: 'avatar',
threadInfo,
+ canChangeSettings: canChangeAvatar,
});
listData.push({
itemType: 'footer',
@@ -906,7 +914,12 @@
} else if (item.itemType === 'footer') {
return <ThreadSettingsCategoryFooter type={item.categoryType} />;
} else if (item.itemType === 'avatar') {
- return <ThreadSettingsAvatar threadInfo={item.threadInfo} />;
+ return (
+ <ThreadSettingsAvatar
+ threadInfo={item.threadInfo}
+ canChangeSettings={item.canChangeSettings}
+ />
+ );
} else if (item.itemType === 'name') {
return (
<ThreadSettingsName

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 9:20 PM (21 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2531570
Default Alt Text
D7378.id24926.diff (4 KB)

Event Timeline