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 (