toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

RN-72 RN: Improvements to image previewer (#487)

Browse source
This commit is contained in:
Chris Duarte 2017-04-18 12:49:03 -07:00 committed by enahum
parent 42d151c49e
commit 756a08703f
3 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/components/file_attachment_list/file_attachment_image.js
View file

@ -37,6 +37,7 @@ export default class FileAttachmentImage extends PureComponent {
IMAGE_SIZE.Thumbnail
]),
imageWidth: PropTypes.number,
loadingBackgroundColor: PropTypes.string,
resizeMode: PropTypes.string,
resizeMethod: PropTypes.string,
wrapperBackgroundColor: PropTypes.string,
@ -50,6 +51,7 @@ export default class FileAttachmentImage extends PureComponent {
imageSize: IMAGE_SIZE.Thumbnail,
imageWidth: 100,
loading: false,
loadingBackgroundColor: '#fff',
resizeMode: 'cover',
resizeMethod: 'resize',
wrapperBackgroundColor: '#fff',
@ -116,6 +118,7 @@ export default class FileAttachmentImage extends PureComponent {
file,
imageHeight,
imageWidth,
loadingBackgroundColor,
resizeMethod,
resizeMode,
wrapperBackgroundColor,
@ -152,7 +155,7 @@ export default class FileAttachmentImage extends PureComponent {
/>
</AnimatedView>
{(!isInFetchCache && (file.loading || this.state.requesting)) &&
<View style={style.loaderContainer}>
<View style={[style.loaderContainer, {backgroundColor: loadingBackgroundColor}]}>
<ActivityIndicator size='small'/>
</View>
}
@ -171,7 +174,6 @@ const style = StyleSheet.create({
height: '100%',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff'
justifyContent: 'center'
}
});

13
app/scenes/image_preview/image_preview.js
View file

@ -117,13 +117,20 @@ export default class ImagePreview extends PureComponent {
}
const {dx, dy} = gestureState;
return (Math.abs(dy) > DRAG_VERTICAL_THRESHOLD_START && dx < DRAG_HORIZONTAL_THRESHOLD);
const isVerticalDrag = Math.abs(dy) > DRAG_VERTICAL_THRESHOLD_START && dx < DRAG_HORIZONTAL_THRESHOLD;
if (isVerticalDrag) {
this.setHeaderAndFileInfoVisible(false);
return true;
}
return false;
}
mainViewPanResponderRelease = (evt, gestureState) => {
if (Math.abs(gestureState.dy) > DRAG_VERTICAL_THRESHOLD_END) {
this.props.actions.goBack();
} else {
this.setHeaderAndFileInfoVisible(true);
Animated.spring(this.state.drag, {
toValue: {x: 0, y: 0}
}).start();
@ -326,7 +333,7 @@ const style = StyleSheet.create({
bottom: 0,
left: 0,
right: 0,
height: 100,
height: 70,
justifyContent: 'flex-end',
paddingHorizontal: 24,
paddingBottom: 16
@ -337,7 +344,7 @@ const style = StyleSheet.create({
left: 0
},
header: {
backgroundColor: '#000',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
height: HEADER_HEIGHT,
position: 'absolute',
top: 0,

1
app/scenes/image_preview/zoomable_image.js
View file

@ -310,6 +310,7 @@ class ZoomableImage extends Component {
imageHeight={imageHeight * this.state.zoom}
imageSize='fullsize'
imageWidth={imageWidth * this.state.zoom}
loadingBackgroundColor='#000'
resizeMode='contain'
wrapperBackgroundColor='#000'
wrapperHeight={wrapperHeight * this.state.zoom}