From 8548ac7ecbb6d1aebb3c97139f9c64ebae83707e Mon Sep 17 00:00:00 2001 From: Puneet Date: Tue, 4 Jul 2023 05:02:02 +0530 Subject: [PATCH 01/10] add new translation keys --- src/languages/en.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/languages/en.js b/src/languages/en.js index f6989d32f35a..e5fcffe78e3d 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -391,6 +391,7 @@ export default { uploadPhoto: 'Upload photo', removePhoto: 'Remove photo', editImage: 'Edit photo', + viewPhoto: 'View photo', imageUploadFailed: 'Image upload failed', deleteWorkspaceError: 'Sorry, there was an unexpected problem deleting your workspace avatar.', sizeExceeded: ({maxUploadSizeInMB}) => `The selected image exceeds the maximum upload size of ${maxUploadSizeInMB}MB.`, @@ -411,6 +412,7 @@ export default { online: 'Online', offline: 'Offline', syncing: 'Syncing', + profileAvatar: 'Profile avatar', }, loungeAccessPage: { loungeAccess: 'Lounge access', @@ -1090,6 +1092,7 @@ export default { memberNotFound: 'Member not found. To invite a new member to the workspace, please use the Invite button above.', notAuthorized: `You do not have access to this page. Are you trying to join the workspace? Please reach out to the owner of this workspace so they can add you as a member! Something else? Reach out to ${CONST.EMAIL.CONCIERGE}`, goToRoom: ({roomName}) => `Go to ${roomName} room`, + workspaceAvatar: 'Workspace avatar', }, emptyWorkspace: { title: 'Create a new workspace', From 7e39af512130d011e4ff4fe271df52fb9e421c49 Mon Sep 17 00:00:00 2001 From: Puneet Date: Tue, 4 Jul 2023 05:02:35 +0530 Subject: [PATCH 02/10] Update es.js --- src/languages/es.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/languages/es.js b/src/languages/es.js index f765ce0270df..281c81b3ad59 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -390,6 +390,7 @@ export default { uploadPhoto: 'Subir foto', removePhoto: 'Eliminar foto', editImage: 'Editar foto', + viewPhoto: 'Ver foto', imageUploadFailed: 'Error al cargar la imagen', deleteWorkspaceError: 'Lo sentimos, hubo un problema eliminando el avatar de su espacio de trabajo.', sizeExceeded: ({maxUploadSizeInMB}) => `La imagen supera el tamaño máximo de ${maxUploadSizeInMB}MB.`, @@ -410,6 +411,7 @@ export default { online: 'En línea', offline: 'Desconectado', syncing: 'Sincronizando', + profileAvatar: 'Perfil avatar', }, loungeAccessPage: { loungeAccess: 'Acceso a la sala vip', @@ -1097,6 +1099,7 @@ export default { memberNotFound: 'Miembro no encontrado. Para invitar a un nuevo miembro al espacio de trabajo, por favor, utiliza el botón Invitar que está arriba.', notAuthorized: `No tienes acceso a esta página. ¿Estás tratando de unirte al espacio de trabajo? Comunícate con el propietario de este espacio de trabajo para que pueda agregarte como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`, goToRoom: ({roomName}) => `Ir a la sala ${roomName}`, + workspaceAvatar: 'Espacio de trabajo avatar', }, emptyWorkspace: { title: 'Crear un nuevo espacio de trabajo', From 08a930233f9d74969ea20e5ef464bbebab1ca453 Mon Sep 17 00:00:00 2001 From: Puneet Date: Tue, 4 Jul 2023 05:08:42 +0530 Subject: [PATCH 03/10] add avatar preview option --- src/components/AvatarWithImagePicker.js | 131 ++++++++++++++---------- 1 file changed, 79 insertions(+), 52 deletions(-) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 45e75aaeec57..74a28c3821c9 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -22,6 +22,7 @@ import stylePropTypes from '../styles/stylePropTypes'; import * as FileUtils from '../libs/fileDownload/FileUtils'; import getImageResolution from '../libs/fileDownload/getImageResolution'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; +import AttachmentModal from './AttachmentModal'; const propTypes = { /** Avatar source to display */ @@ -78,6 +79,15 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types errors: PropTypes.object, + /** Title for avatar preview modal */ + headerTitle: PropTypes.string, + + /** Avatar source for avatar preview modal */ + previewSource: PropTypes.string, + + /** File name of the avatar */ + originalFileName: PropTypes.string, + ...withLocalizePropTypes, }; @@ -97,6 +107,9 @@ const defaultProps = { onErrorClose: () => {}, pendingAction: null, errors: null, + headerTitle: '', + previewSource: '', + originalFileName: '', }; class AvatarWithImagePicker extends React.Component { @@ -241,9 +254,10 @@ class AvatarWithImagePicker extends React.Component { * Create menu items list for avatar menu * * @param {Function} openPicker + * @param {Function} show * @returns {Array} */ - createMenuItems(openPicker) { + createMenuItems(openPicker, show) { const menuItems = [ { icon: Expensicons.Upload, @@ -265,6 +279,11 @@ class AvatarWithImagePicker extends React.Component { this.props.onImageRemoved(); }, }); + menuItems.unshift({ + icon: Expensicons.Eye, + text: this.props.translate('avatarWithImagePicker.viewPhoto'), + onSelected: () => show(), + }); } return menuItems; } @@ -275,62 +294,70 @@ class AvatarWithImagePicker extends React.Component { return ( - this.setState({isMenuVisible: true})} - accessibilityRole="button" - accessibilityLabel={this.props.translate('avatarWithImagePicker.editImage')} + - - ( + this.setState({isMenuVisible: true})} + accessibilityRole="button" + accessibilityLabel={this.props.translate('avatarWithImagePicker.editImage')} > - - - {this.props.source ? ( - - ) : ( - - )} - - - - - - {({openPicker}) => ( - <> + + - - + + {this.props.source ? ( + + ) : ( + + )} - this.setState({isMenuVisible: false})} - onItemSelected={() => this.setState({isMenuVisible: false})} - menuItems={this.createMenuItems(openPicker)} - anchorPosition={this.props.anchorPosition} - anchorAlignment={this.props.anchorAlignment} - /> - - )} - - - + + + + {({openPicker}) => ( + <> + + + + + + this.setState({isMenuVisible: false})} + onItemSelected={() => this.setState({isMenuVisible: false})} + menuItems={this.createMenuItems(openPicker, show)} + anchorPosition={this.props.anchorPosition} + anchorAlignment={this.props.anchorAlignment} + /> + + )} + + + + )} + Date: Tue, 4 Jul 2023 05:10:09 +0530 Subject: [PATCH 04/10] make profile avatar viewable --- src/pages/settings/Profile/ProfilePage.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 07db3d0cdffb..9a1aefb4e2c3 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -60,6 +60,8 @@ function ProfilePage(props) { }; const currentUserDetails = props.currentUserPersonalDetails || {}; const contactMethodBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(props.loginList); + const avatarURL = lodashGet(currentUserDetails, 'avatar', ''); + const accountID = lodashGet(currentUserDetails, 'accountID', ''); const profileSettingsOptions = [ { @@ -98,7 +100,7 @@ function ProfilePage(props) { {_.map(profileSettingsOptions, (detail, index) => ( From 5643d7451818448c88b4b9af8d555d8fd46d74f8 Mon Sep 17 00:00:00 2001 From: Puneet Date: Tue, 4 Jul 2023 05:12:43 +0530 Subject: [PATCH 05/10] add orginalFileName --- src/libs/actions/Policy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js index bad48978b0e1..ea6d1cb38942 100644 --- a/src/libs/actions/Policy.js +++ b/src/libs/actions/Policy.js @@ -426,6 +426,7 @@ function updateWorkspaceAvatar(policyID, file) { key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, value: { avatar: file.uri, + originalFileName: file.name, errorFields: { avatar: null, }, From d2ca2249e1d8c363304b7cec8efdc96935567253 Mon Sep 17 00:00:00 2001 From: Puneet Date: Tue, 4 Jul 2023 05:13:53 +0530 Subject: [PATCH 06/10] add avatar preview feature at workpace page --- src/pages/workspace/WorkspaceSettingsPage.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index 6abde456f40b..4aeebfbd54b3 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -20,6 +20,7 @@ import {withNetwork} from '../../components/OnyxProvider'; import OfflineWithFeedback from '../../components/OfflineWithFeedback'; import Form from '../../components/Form'; import * as ReportUtils from '../../libs/ReportUtils'; +import * as UserUtils from '../../libs/UserUtils'; import Avatar from '../../components/Avatar'; import Navigation from '../../libs/Navigation/Navigation'; import ROUTES from '../../ROUTES'; @@ -125,6 +126,9 @@ function WorkspaceSettingsPage(props) { pendingAction={lodashGet(props.policy, 'pendingFields.avatar', null)} errors={lodashGet(props.policy, 'errorFields.avatar', null)} onErrorClose={() => Policy.clearAvatarErrors(props.policy.id)} + previewSource={UserUtils.getFullSizeAvatar(props.policy.avatar, '')} + headerTitle={props.translate('workspace.common.workspaceAvatar')} + originalFileName={props.policy.originalFileName} /> Date: Tue, 8 Aug 2023 14:44:49 +0530 Subject: [PATCH 07/10] Fix proptype error --- src/components/AvatarWithImagePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index f8ae4bcf7a3b..6aeb7c707b2d 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -84,7 +84,7 @@ const propTypes = { headerTitle: PropTypes.string, /** Avatar source for avatar preview modal */ - previewSource: PropTypes.string, + previewSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), /** File name of the avatar */ originalFileName: PropTypes.string, From f6d1286629e5fa8ba986c485a45994041eff3d44 Mon Sep 17 00:00:00 2001 From: Puneet Date: Thu, 17 Aug 2023 09:29:55 +0530 Subject: [PATCH 08/10] fix native attachment picker opening on clicking view photo --- src/components/AvatarWithImagePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 6aeb7c707b2d..85a55a16d595 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -320,7 +320,7 @@ class AvatarWithImagePicker extends React.Component { }, }); - menuItems.unshift({ + menuItems.push({ icon: Expensicons.Eye, text: this.props.translate('avatarWithImagePicker.viewPhoto'), onSelected: () => show(), From 94472de6ee96fdccafe6c662bf81b3877f565600 Mon Sep 17 00:00:00 2001 From: Puneet Date: Sat, 16 Sep 2023 04:21:18 +0530 Subject: [PATCH 09/10] Update en.ts --- src/languages/en.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index de86a1a9c33c..8e8e0163e717 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1314,7 +1314,7 @@ export default { unavailable: 'Unavailable workspace', memberNotFound: 'Member not found. To invite a new member to the workspace, please use the Invite button above.', notAuthorized: `You do not have access to this page. Are you trying to join the workspace? Please reach out to the owner of this workspace so they can add you as a member! Something else? Reach out to ${CONST.EMAIL.CONCIERGE}`, - goToRoom: ({roomName}) => `Go to ${roomName} room`, + goToRoom: ({roomName}: GoToRoomParams) => `Go to ${roomName} room`, workspaceAvatar: 'Workspace avatar', }, emptyWorkspace: { From be686ac9c5b976aa2da74fd32f41bf18ac14efd5 Mon Sep 17 00:00:00 2001 From: Puneet Date: Sat, 16 Sep 2023 04:22:28 +0530 Subject: [PATCH 10/10] Update es.ts --- src/languages/es.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/es.ts b/src/languages/es.ts index 129637fd15cc..4e6743ce03c0 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1333,7 +1333,7 @@ export default { unavailable: 'Espacio de trabajo no disponible', memberNotFound: 'Miembro no encontrado. Para invitar a un nuevo miembro al espacio de trabajo, por favor, utiliza el botón Invitar que está arriba.', notAuthorized: `No tienes acceso a esta página. ¿Estás tratando de unirte al espacio de trabajo? Comunícate con el propietario de este espacio de trabajo para que pueda añadirte como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`, - goToRoom: ({roomName}) => `Ir a la sala ${roomName}`, + goToRoom: ({roomName}: GoToRoomParams) => `Ir a la sala ${roomName}`, workspaceAvatar: 'Espacio de trabajo avatar', }, emptyWorkspace: {