Fix download document progress indicator (#2344)

app/components/file_attachment_list/file_attachment_document.js

@@ -30,17 +30,17 @@ import LocalConfig from 'assets/config';
 import FileAttachmentIcon from './file_attachment_icon';
 
 const {DOCUMENTS_PATH} = DeviceTypes;
-
+const DOWNLOADING_OFFSET = 28;
 const TEXT_PREVIEW_FORMATS = [
     'application/json',
     'application/x-x509-ca-cert',
     'text/plain',
 ];
-
 const circularProgressWidth = 4;
 
 export default class FileAttachmentDocument extends PureComponent {
     static propTypes = {
+        backgroundColor: PropTypes.string,
         canDownloadFiles: PropTypes.bool.isRequired,
         iconHeight: PropTypes.number,
         iconWidth: PropTypes.number,
@@ -335,16 +335,25 @@ export default class FileAttachmentDocument extends PureComponent {
     };
 
     renderFileAttachmentIcon = () => {
-        const {iconHeight, iconWidth, file, theme, wrapperHeight, wrapperWidth} = this.props;
+        const {backgroundColor, iconHeight, iconWidth, file, theme, wrapperHeight, wrapperWidth} = this.props;
+        const {downloading} = this.state;
+        let height = wrapperHeight;
+        let width = wrapperWidth;
+
+        if (downloading) {
+            height -= DOWNLOADING_OFFSET;
+            width -= DOWNLOADING_OFFSET;
+        }
 
         return (
             <FileAttachmentIcon
+                backgroundColor={backgroundColor}
                 file={file.data}
                 theme={theme}
                 iconHeight={iconHeight}
                 iconWidth={iconWidth}
-                wrapperHeight={wrapperHeight}
-                wrapperWidth={wrapperWidth}
+                wrapperHeight={height}
+                wrapperWidth={width}
             />
         );
     }
@@ -376,9 +385,7 @@ export default class FileAttachmentDocument extends PureComponent {
                 onPress={this.handlePreviewPress}
                 onLongPress={onLongPress}
             >
-                <View style={style.whiteBackground}>
-                    {fileAttachmentComponent}
-                </View>
+                {fileAttachmentComponent}
             </TouchableOpacity>
         );
     }
@@ -393,7 +400,4 @@ const style = StyleSheet.create({
         position: 'absolute',
         top: 0,
     },
-    whiteBackground: {
-        backgroundColor: '#fff',
-    },
 });

app/components/file_attachment_list/file_attachment_icon.js

@@ -37,6 +37,7 @@ const ICON_PATH_FROM_FILE_TYPE = {
 
 export default class FileAttachmentIcon extends PureComponent {
     static propTypes = {
+        backgroundColor: PropTypes.string,
         file: PropTypes.object.isRequired,
         iconHeight: PropTypes.number,
         iconWidth: PropTypes.number,
@@ -46,6 +47,7 @@ export default class FileAttachmentIcon extends PureComponent {
     };
 
     static defaultProps = {
+        backgroundColor: '#fff',
         iconHeight: 60,
         iconWidth: 60,
         wrapperHeight: 80,
@@ -66,13 +68,13 @@ export default class FileAttachmentIcon extends PureComponent {
     };
 
     render() {
-        const {file, iconHeight, iconWidth, wrapperHeight, wrapperWidth} = this.props;
+        const {backgroundColor, file, iconHeight, iconWidth, wrapperHeight, wrapperWidth} = this.props;
         const source = this.getFileIconPath(file);
 
         return (
             <View
                 ref={this.handleCaptureRef}
-                style={[styles.fileIconWrapper, {height: wrapperHeight, width: wrapperWidth}]}
+                style={[styles.fileIconWrapper, {backgroundColor, height: wrapperHeight, width: wrapperWidth}]}
             >
                 <Image
                     style={[styles.icon, {height: iconHeight, width: iconWidth}]}
@@ -86,7 +88,6 @@ export default class FileAttachmentIcon extends PureComponent {
 const styles = StyleSheet.create({
     fileIconWrapper: {
         alignItems: 'center',
-        backgroundColor: '#fff',
         justifyContent: 'center',
         borderTopLeftRadius: 2,
         borderBottomLeftRadius: 2,
@@ -94,5 +95,6 @@ const styles = StyleSheet.create({
     icon: {
         borderTopLeftRadius: 2,
         borderBottomLeftRadius: 2,
+        backgroundColor: '#fff',
     },
 });

app/screens/image_preview/image_preview.js

@@ -181,12 +181,13 @@ export default class ImagePreview extends PureComponent {
                     ref={(ref) => {
                         this.documents[this.state.index] = ref;
                     }}
+                    backgroundColor='transparent'
                     canDownloadFiles={canDownloadFiles}
                     file={file}
-                    theme={theme}
+                    iconHeight={100}
+                    iconWidth={100}
                     navigator={navigator}
-                    iconHeight={120}
-                    iconWidth={120}
+                    theme={theme}
                     wrapperHeight={200}
                     wrapperWidth={200}
                 />
@@ -198,10 +199,11 @@ export default class ImagePreview extends PureComponent {
         return (
             <View style={[style.flex, style.center]}>
                 <FileAttachmentIcon
+                    backgroundColor='transparent'
                     file={file}
                     theme={this.props.theme}
-                    iconHeight={120}
-                    iconWidth={120}
+                    iconHeight={150}
+                    iconWidth={150}
                     wrapperHeight={200}
                     wrapperWidth={200}
                 />