From 3b4934336d8e947131df318d37242843828b3508 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Tue, 5 Apr 2022 13:46:45 +0545 Subject: [PATCH 1/5] Add feature to view Profile Picture in full screen --- src/components/AttachmentModal.js | 19 +++++++++++++++---- src/libs/actions/PersonalDetails.js | 2 ++ src/pages/DetailsPage.js | 26 +++++++++++++++++++++----- 3 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 2568e634e884..e965bd08545d 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -28,6 +28,9 @@ const propTypes = { /** Determines title of the modal header depending on if we are uploading an attachment or not */ isUploadingAttachment: PropTypes.bool, + /** Determines title of the modal header depending on if we are viewing a profile picture or not */ + isProfilePicture: PropTypes.bool, + /** Optional source URL for the image shown. If not passed in via props must be specified when modal is opened. */ sourceURL: PropTypes.string, @@ -53,6 +56,7 @@ const propTypes = { const defaultProps = { isUploadingAttachment: false, + isProfilePicture: false, sourceURL: null, onConfirm: null, originalFileName: null, @@ -145,6 +149,15 @@ class AttachmentModal extends PureComponent { : [styles.imageModalImageCenterContainer, styles.p5]; const {fileName, fileExtension} = this.splitExtensionFromFileName(); + + let headerTitle = ''; + if (this.props.isProfilePicture) { + headerTitle = this.props.displayName; + } else { + headerTitle = this.props.isUploadingAttachment + ? this.props.translate('reportActionCompose.sendAttachment') + : this.props.translate('common.attachment'); + } return ( <> fileDownload(sourceURL, this.props.originalFileName)} onCloseButtonPress={() => this.setState({isModalOpen: false})} subtitle={( diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js index 07df4456056d..34edf2ddd7a2 100644 --- a/src/libs/actions/PersonalDetails.js +++ b/src/libs/actions/PersonalDetails.js @@ -100,6 +100,7 @@ function formatPersonalDetails(personalDetailsList) { const lastName = details.lastName || ''; const payPalMeAddress = details.expensify_payPalMeAddress || ''; const phoneNumber = details.phoneNumber || ''; + const avatarHighResolution = details.avatar || OptionsListUtils.getDefaultAvatar(login); formattedResult[sanitizedLogin] = { login: sanitizedLogin, avatar, @@ -110,6 +111,7 @@ function formatPersonalDetails(personalDetailsList) { timezone, payPalMeAddress, phoneNumber, + avatarHighResolution, }; }); Timing.end(CONST.TIMING.PERSONAL_DETAILS_FORMATTED); diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index ad3e0bac3566..e444b4b28669 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -20,6 +20,8 @@ import * as ReportUtils from '../libs/reportUtils'; import DateUtils from '../libs/DateUtils'; import * as Expensicons from '../components/Icon/Expensicons'; import MenuItem from '../components/MenuItem'; +import AttachmentModal from '../components/AttachmentModal'; +import TouchableWithoutFocus from '../components/TouchableWithoutFocus'; import * as Report from '../libs/actions/Report'; const matchType = PropTypes.shape({ @@ -98,11 +100,25 @@ const DetailsPage = (props) => { {details ? ( - + + {({show}) => ( + + + + )} + {details.displayName && ( {isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName} From 7fb0b2a7be10e87fa65988ea4694dea74c517a06 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Sat, 23 Apr 2022 17:24:34 +0545 Subject: [PATCH 2/5] Refactor AttachmentModal to use PreviewAttachmentModal and UploadAttachmentModal --- src/components/AttachmentModal.js | 28 +++++--------- .../HTMLRenderers/ImageRenderer.js | 6 +-- src/components/PreviewAttachmentModal.js | 37 +++++++++++++++++++ src/components/UploadAttachmentModal.js | 19 ++++++++++ src/libs/actions/PersonalDetails.js | 2 +- src/pages/DetailsPage.js | 6 +-- src/pages/home/report/ReportActionCompose.js | 6 +-- 7 files changed, 76 insertions(+), 28 deletions(-) create mode 100644 src/components/PreviewAttachmentModal.js create mode 100644 src/components/UploadAttachmentModal.js diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index e965bd08545d..0cc63a3dd056 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -25,12 +25,6 @@ import TextWithEllipsis from './TextWithEllipsis'; */ const propTypes = { - /** Determines title of the modal header depending on if we are uploading an attachment or not */ - isUploadingAttachment: PropTypes.bool, - - /** Determines title of the modal header depending on if we are viewing a profile picture or not */ - isProfilePicture: PropTypes.bool, - /** Optional source URL for the image shown. If not passed in via props must be specified when modal is opened. */ sourceURL: PropTypes.string, @@ -49,18 +43,24 @@ const propTypes = { /** Do the urls require an authToken? */ isAuthTokenRequired: PropTypes.bool, + /** Determines if download Button should be shown or not */ + allowDownload: PropTypes.bool, + + /** Title shown in the header of the modal */ + headerTitle: PropTypes.string, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, }; const defaultProps = { - isUploadingAttachment: false, - isProfilePicture: false, sourceURL: null, onConfirm: null, originalFileName: null, isAuthTokenRequired: false, + allowDownload: false, + headerTitle: null, onModalHide: () => {}, }; @@ -150,14 +150,6 @@ class AttachmentModal extends PureComponent { const {fileName, fileExtension} = this.splitExtensionFromFileName(); - let headerTitle = ''; - if (this.props.isProfilePicture) { - headerTitle = this.props.displayName; - } else { - headerTitle = this.props.isUploadingAttachment - ? this.props.translate('reportActionCompose.sendAttachment') - : this.props.translate('common.attachment'); - } return ( <> fileDownload(sourceURL, this.props.originalFileName)} onCloseButtonPress={() => this.setState({isModalOpen: false})} subtitle={( diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index e1f9b356ab97..8c5c25db5583 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -1,7 +1,7 @@ import React from 'react'; import htmlRendererPropTypes from './htmlRendererPropTypes'; import Config from '../../../CONFIG'; -import AttachmentModal from '../../AttachmentModal'; +import PreviewAttachmentModal from '../../PreviewAttachmentModal'; import styles from '../../../styles/styles'; import ThumbnailImage from '../../ThumbnailImage'; import TouchableWithoutFocus from '../../TouchableWithoutFocus'; @@ -44,7 +44,7 @@ const ImageRenderer = (props) => { ); return ( - { /> )} - + ); }; diff --git a/src/components/PreviewAttachmentModal.js b/src/components/PreviewAttachmentModal.js new file mode 100644 index 000000000000..6bc0bc1925cb --- /dev/null +++ b/src/components/PreviewAttachmentModal.js @@ -0,0 +1,37 @@ +import _ from 'underscore'; +import React from 'react'; +import PropTypes from 'prop-types'; +import AttachmentModal from './AttachmentModal'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; + +const propTypes = { + /** Determines title of the modal header depending on if we are viewing a profile picture or not */ + isProfilePicture: PropTypes.bool, + + /** DisplayName to be used as headerTitle if isProfilePicture is true. */ + displayName: PropTypes.string, + + ...withLocalizePropTypes, +}; + +const defaultProps = { + isProfilePicture: false, + displayName: null, +}; + +const PreviewAttachmentModal = (props) => { + const propsToPass = _.omit(props, 'displayName', 'isProfilePicture'); + return ( + + ); +}; + +PreviewAttachmentModal.propTypes = propTypes; +PreviewAttachmentModal.defaultProps = defaultProps; +PreviewAttachmentModal.displayName = 'PreviewAttachmentModal'; +export default withLocalize(PreviewAttachmentModal); diff --git a/src/components/UploadAttachmentModal.js b/src/components/UploadAttachmentModal.js new file mode 100644 index 000000000000..5800f271f40a --- /dev/null +++ b/src/components/UploadAttachmentModal.js @@ -0,0 +1,19 @@ +import React from 'react'; +import AttachmentModal from './AttachmentModal'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; + +const propTypes = { + ...withLocalizePropTypes, +}; + +const UploadAttachmentModal = props => ( + +); + +UploadAttachmentModal.propTypes = propTypes; +UploadAttachmentModal.displayName = 'UploadAttachmentModal'; +export default withLocalize(UploadAttachmentModal); diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js index 34edf2ddd7a2..8adb28340a78 100644 --- a/src/libs/actions/PersonalDetails.js +++ b/src/libs/actions/PersonalDetails.js @@ -100,7 +100,7 @@ function formatPersonalDetails(personalDetailsList) { const lastName = details.lastName || ''; const payPalMeAddress = details.expensify_payPalMeAddress || ''; const phoneNumber = details.phoneNumber || ''; - const avatarHighResolution = details.avatar || OptionsListUtils.getDefaultAvatar(login); + const avatarHighResolution = details.avatar || details.avatarThumbnail; formattedResult[sanitizedLogin] = { login: sanitizedLogin, avatar, diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index e444b4b28669..3a236ea788fa 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -20,7 +20,7 @@ import * as ReportUtils from '../libs/reportUtils'; import DateUtils from '../libs/DateUtils'; import * as Expensicons from '../components/Icon/Expensicons'; import MenuItem from '../components/MenuItem'; -import AttachmentModal from '../components/AttachmentModal'; +import PreviewAttachmentModal from '../components/PreviewAttachmentModal'; import TouchableWithoutFocus from '../components/TouchableWithoutFocus'; import * as Report from '../libs/actions/Report'; @@ -100,7 +100,7 @@ const DetailsPage = (props) => { {details ? ( - { /> )} - + {details.displayName && ( {isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName} diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 6517fef5d24a..a45202c3ccbd 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -19,7 +19,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons'; import AttachmentPicker from '../../../components/AttachmentPicker'; import * as Report from '../../../libs/actions/Report'; import ReportTypingIndicator from './ReportTypingIndicator'; -import AttachmentModal from '../../../components/AttachmentModal'; +import UploadAttachmentModal from '../../../components/UploadAttachmentModal'; import compose from '../../../libs/compose'; import PopoverMenu from '../../../components/PopoverMenu'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; @@ -413,7 +413,7 @@ class ReportActionCompose extends React.Component { styles.flexRow, ]} > - { this.submitForm(); @@ -552,7 +552,7 @@ class ReportActionCompose extends React.Component { /> )} - + {canUseTouchScreen() && this.props.isMediumScreenWidth ? null : ( Date: Sat, 23 Apr 2022 23:07:30 +0545 Subject: [PATCH 3/5] Change TouchableWithoutFocus to PressableWithoutFocus to incorporate change in main branch --- src/pages/DetailsPage.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 3a236ea788fa..a2be03c39101 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -21,7 +21,7 @@ import DateUtils from '../libs/DateUtils'; import * as Expensicons from '../components/Icon/Expensicons'; import MenuItem from '../components/MenuItem'; import PreviewAttachmentModal from '../components/PreviewAttachmentModal'; -import TouchableWithoutFocus from '../components/TouchableWithoutFocus'; +import PressableWithoutFocus from '../components/PressableWithoutFocus'; import * as Report from '../libs/actions/Report'; const matchType = PropTypes.shape({ @@ -107,7 +107,7 @@ const DetailsPage = (props) => { isProfilePicture > {({show}) => ( - @@ -116,7 +116,7 @@ const DetailsPage = (props) => { imageStyles={[styles.avatarLarge]} source={details.avatar} /> - + )} {details.displayName && ( From f8852d8df6ebdf18f7a0d7d7741420dcac8b8f78 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Tue, 26 Apr 2022 12:23:39 +0545 Subject: [PATCH 4/5] Refactor code to use AttachmentModal with headerTitle and allowDownload props --- src/components/AttachmentModal.js | 2 +- .../HTMLRenderers/ImageRenderer.js | 7 ++-- src/components/PreviewAttachmentModal.js | 37 ------------------- src/components/UploadAttachmentModal.js | 19 ---------- src/pages/DetailsPage.js | 9 ++--- src/pages/home/report/ReportActionCompose.js | 8 ++-- 6 files changed, 13 insertions(+), 69 deletions(-) delete mode 100644 src/components/PreviewAttachmentModal.js delete mode 100644 src/components/UploadAttachmentModal.js diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 0cc63a3dd056..09b4097c6ad9 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -162,7 +162,7 @@ class AttachmentModal extends PureComponent { propagateSwipe > fileDownload(sourceURL, this.props.originalFileName)} diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 59259b31312d..96fd95cc5224 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -1,7 +1,7 @@ import React from 'react'; import htmlRendererPropTypes from './htmlRendererPropTypes'; import Config from '../../../CONFIG'; -import PreviewAttachmentModal from '../../PreviewAttachmentModal'; +import AttachmentModal from '../../AttachmentModal'; import styles from '../../../styles/styles'; import ThumbnailImage from '../../ThumbnailImage'; import PressableWithoutFocus from '../../PressableWithoutFocus'; @@ -45,7 +45,8 @@ const ImageRenderer = (props) => { ); return ( - { /> )} - + ); }; diff --git a/src/components/PreviewAttachmentModal.js b/src/components/PreviewAttachmentModal.js deleted file mode 100644 index 6bc0bc1925cb..000000000000 --- a/src/components/PreviewAttachmentModal.js +++ /dev/null @@ -1,37 +0,0 @@ -import _ from 'underscore'; -import React from 'react'; -import PropTypes from 'prop-types'; -import AttachmentModal from './AttachmentModal'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; - -const propTypes = { - /** Determines title of the modal header depending on if we are viewing a profile picture or not */ - isProfilePicture: PropTypes.bool, - - /** DisplayName to be used as headerTitle if isProfilePicture is true. */ - displayName: PropTypes.string, - - ...withLocalizePropTypes, -}; - -const defaultProps = { - isProfilePicture: false, - displayName: null, -}; - -const PreviewAttachmentModal = (props) => { - const propsToPass = _.omit(props, 'displayName', 'isProfilePicture'); - return ( - - ); -}; - -PreviewAttachmentModal.propTypes = propTypes; -PreviewAttachmentModal.defaultProps = defaultProps; -PreviewAttachmentModal.displayName = 'PreviewAttachmentModal'; -export default withLocalize(PreviewAttachmentModal); diff --git a/src/components/UploadAttachmentModal.js b/src/components/UploadAttachmentModal.js deleted file mode 100644 index 5800f271f40a..000000000000 --- a/src/components/UploadAttachmentModal.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import AttachmentModal from './AttachmentModal'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; - -const propTypes = { - ...withLocalizePropTypes, -}; - -const UploadAttachmentModal = props => ( - -); - -UploadAttachmentModal.propTypes = propTypes; -UploadAttachmentModal.displayName = 'UploadAttachmentModal'; -export default withLocalize(UploadAttachmentModal); diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index a2be03c39101..35b81314e72d 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -20,7 +20,7 @@ import * as ReportUtils from '../libs/reportUtils'; import DateUtils from '../libs/DateUtils'; import * as Expensicons from '../components/Icon/Expensicons'; import MenuItem from '../components/MenuItem'; -import PreviewAttachmentModal from '../components/PreviewAttachmentModal'; +import AttachmentModal from '../components/AttachmentModal'; import PressableWithoutFocus from '../components/PressableWithoutFocus'; import * as Report from '../libs/actions/Report'; @@ -100,11 +100,10 @@ const DetailsPage = (props) => { {details ? ( - {({show}) => ( { /> )} - + {details.displayName && ( {isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName} diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index a45202c3ccbd..1585dee9ac97 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -19,7 +19,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons'; import AttachmentPicker from '../../../components/AttachmentPicker'; import * as Report from '../../../libs/actions/Report'; import ReportTypingIndicator from './ReportTypingIndicator'; -import UploadAttachmentModal from '../../../components/UploadAttachmentModal'; +import AttachmentModal from '../../../components/AttachmentModal'; import compose from '../../../libs/compose'; import PopoverMenu from '../../../components/PopoverMenu'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; @@ -413,8 +413,8 @@ class ReportActionCompose extends React.Component { styles.flexRow, ]} > - { this.submitForm(); Report.addAction(this.props.reportID, '', file); @@ -552,7 +552,7 @@ class ReportActionCompose extends React.Component { /> )} - + {canUseTouchScreen() && this.props.isMediumScreenWidth ? null : ( Date: Fri, 29 Apr 2022 13:58:59 +0545 Subject: [PATCH 5/5] Solve the unaligned title issue of attachment in android and ios --- src/components/AttachmentModal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 09b4097c6ad9..1d942eaf51f4 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -167,14 +167,14 @@ class AttachmentModal extends PureComponent { shouldShowDownloadButton={this.props.allowDownload} onDownloadButtonPress={() => fileDownload(sourceURL, this.props.originalFileName)} onCloseButtonPress={() => this.setState({isModalOpen: false})} - subtitle={( + subtitle={fileName ? ( - )} + ) : ''} /> {this.state.sourceURL && (