diff --git a/assets/css/pdf.css b/assets/css/pdf.css index 9cbbf31b074c..26c80a5baf27 100644 --- a/assets/css/pdf.css +++ b/assets/css/pdf.css @@ -11,12 +11,7 @@ border-image: url(../images/shadow.png) 9 9 repeat; background-color: rgba(255, 255, 255, 1); } -.react-pdf__message { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} + .react-pdf__Page__annotations { height: 0; } diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 61b138747950..d73835ce972a 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -447,6 +447,7 @@ function AttachmentModal(props) { onToggleKeyboard={updateConfirmButtonVisibility} isWorkspaceAvatar={props.isWorkspaceAvatar} fallbackSource={props.fallbackSource} + isUsedInAttachmentModal /> ) )} diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js index fc17f79a0aaa..1d1de83951ee 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js @@ -1,19 +1,19 @@ import React, {memo} from 'react'; -import styles from '../../../../styles/styles'; import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes'; import PDFView from '../../../PDFView'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) { return ( ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js index fdf151c4d5d0..fea72a3fe37a 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js @@ -1,10 +1,9 @@ import React, {memo, useCallback, useContext, useEffect} from 'react'; -import styles from '../../../../styles/styles'; import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes'; import PDFView from '../../../PDFView'; import AttachmentCarouselPagerContext from '../../AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) { const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); useEffect(() => { @@ -41,10 +40,11 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse isFocused={isFocused} sourceURL={encryptedSourceUrl} fileName={file.name} - style={styles.imageModalPDF} + style={style} onToggleKeyboard={onToggleKeyboard} onScaleChanged={onScaleChanged} onLoadComplete={onLoadComplete} + errorLabelStyles={errorLabelStyles} /> ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js index ea17cd9490b3..07203cc2fe74 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import * as AttachmentsPropTypes from '../../propTypes'; +import stylePropTypes from '../../../../styles/stylePropTypes'; const attachmentViewPdfPropTypes = { /** File object maybe be instance of File or Object */ @@ -8,12 +9,20 @@ const attachmentViewPdfPropTypes = { encryptedSourceUrl: PropTypes.string.isRequired, onToggleKeyboard: PropTypes.func.isRequired, onLoadComplete: PropTypes.func.isRequired, + + /** Additional style props */ + style: stylePropTypes, + + /** Styles for the error label */ + errorLabelStyles: stylePropTypes, }; const attachmentViewPdfDefaultProps = { file: { name: '', }, + style: [], + errorLabelStyles: [], }; export {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps}; diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 34ff45160ce9..66d7b2fa89d6 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -23,6 +23,7 @@ import DistanceEReceipt from '../../DistanceEReceipt'; import useNetwork from '../../../hooks/useNetwork'; import ONYXKEYS from '../../../ONYXKEYS'; import EReceipt from '../../EReceipt'; +import cursor from '../../../styles/utilities/cursor'; const propTypes = { ...attachmentViewPropTypes, @@ -75,6 +76,7 @@ function AttachmentView({ isWorkspaceAvatar, fallbackSource, transaction, + isUsedInAttachmentModal, }) { const [loadComplete, setLoadComplete] = useState(false); const [imageError, setImageError] = useState(false); @@ -132,6 +134,8 @@ function AttachmentView({ onScaleChanged={onScaleChanged} onToggleKeyboard={onToggleKeyboard} onLoadComplete={() => !loadComplete && setLoadComplete(true)} + errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [cursor.cursorAuto]} + style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} /> ); } diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js index 2d4acdda0c1f..71ae3639b61c 100644 --- a/src/components/Attachments/AttachmentView/propTypes.js +++ b/src/components/Attachments/AttachmentView/propTypes.js @@ -22,6 +22,9 @@ const attachmentViewPropTypes = { /** Handles scale changed event */ onScaleChanged: PropTypes.func, + + /** Whether this AttachmentView is shown as part of an AttachmentModal */ + isUsedInAttachmentModal: PropTypes.bool, }; const attachmentViewDefaultProps = { @@ -33,6 +36,7 @@ const attachmentViewDefaultProps = { isUsedInCarousel: false, onPress: undefined, onScaleChanged: () => {}, + isUsedInAttachmentModal: false, }; export {attachmentViewPropTypes, attachmentViewDefaultProps}; diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index bd5fe8162d2e..66e9df30b5c3 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -15,11 +15,11 @@ import PDFPasswordForm from './PDFPasswordForm'; import * as pdfViewPropTypes from './pdfViewPropTypes'; import withWindowDimensions from '../withWindowDimensions'; import withLocalize from '../withLocalize'; -import Text from '../Text'; import compose from '../../libs/compose'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import Log from '../../libs/Log'; import ONYXKEYS from '../../ONYXKEYS'; +import Text from '../Text'; /** * Each page has a default border. The app should take this size into account @@ -283,7 +283,7 @@ class PDFView extends Component { }) => this.setState({containerWidth: width, containerHeight: height})} > {this.props.translate('attachmentView.failedToLoadPDF')}} + error={{this.props.translate('attachmentView.failedToLoadPDF')}} loading={} file={this.props.sourceURL} options={{ diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 0bd9936c628b..fc1a204b3324 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -143,7 +143,7 @@ class PDFView extends Component { {this.state.failedToLoadPDF && ( - {this.props.translate('attachmentView.failedToLoadPDF')} + {this.props.translate('attachmentView.failedToLoadPDF')} )} {this.state.shouldAttemptPDFLoad && ( diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js index 21ebc880301e..4568ed527983 100644 --- a/src/components/PDFView/pdfViewPropTypes.js +++ b/src/components/PDFView/pdfViewPropTypes.js @@ -27,6 +27,9 @@ const propTypes = { /** Should focus to the password input */ isFocused: PropTypes.bool, + /** Styles for the error label */ + errorLabelStyles: stylePropTypes, + ...windowDimensionsPropTypes, }; @@ -39,6 +42,7 @@ const defaultProps = { onScaleChanged: () => {}, onLoadComplete: () => {}, isFocused: false, + errorLabelStyles: [], }; export {propTypes, defaultProps}; diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 67c1e1cb9589..4fb9e9e1557f 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -2159,7 +2159,6 @@ const styles = (theme: ThemeDefault) => // It's being used on Web/Desktop only to vertically center short PDFs, // while preventing the overflow of the top of long PDF files. ...display.dGrid, - backgroundColor: theme.modalBackground, width: '100%', height: '100%', justifyContent: 'center',