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 (
+
+
+
+ );
+ }, [
+ canChangeSettings,
+ colors.floatingButtonLabel,
+ styles.editAvatarIcon,
+ styles.editAvatarIconContainer,
+ ]);
+
return (
-
+
+
+
+ {editBadge}
+
+
);
}
@@ -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 =
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 ;
} else if (item.itemType === 'avatar') {
- return ;
+ return (
+
+ );
} else if (item.itemType === 'name') {
return (