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',