verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Improve image modal/preview (#111)

This commit is contained in:
Rodrigo Nascimento 2017-11-23 17:12:18 -02:00 committed by Guilherme Gazzo
parent ed1448b864
commit 86ccdcb84a
2 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/containers/message/Card.js
View File

@ -37,6 +37,12 @@ export default class Cards extends React.PureComponent {
}); });
} }
getDescription() {
if (this.props.data.description) {
return <Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text>;
}
}
getImage() { getImage() {
return ( return (
<View> <View>
@ -50,7 +56,7 @@ export default class Cards extends React.PureComponent {
</CardImage> </CardImage>
<CardContent> <CardContent>
<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text> <Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
<Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text> {this.getDescription()}
</CardContent> </CardContent>
</Card> </Card>
</TouchableOpacity> </TouchableOpacity>

37
app/containers/message/PhotoModal.js
View File

@ -1,26 +1,25 @@
import React from 'react'; import React from 'react';
import { ScrollView, View, Dimensions, Text } from 'react-native'; import { ScrollView, View, Text, TouchableWithoutFeedback } from 'react-native';
import { CachedImage } from 'react-native-img-cache'; import { CachedImage } from 'react-native-img-cache';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
const deviceWidth = Dimensions.get('window').width;
const styles = { const styles = {
imageWrapper: { imageWrapper: {
alignItems: 'stretch' alignItems: 'stretch',
flex: 1
}, },
image: { image: {
width: deviceWidth, flex: 1
height: deviceWidth
}, },
titleContainer: { titleContainer: {
width: '100%', width: '100%',
alignItems: 'center', alignItems: 'center',
marginBottom: 15 marginVertical: 10
}, },
title: { title: {
color: '#ffffff', color: '#ffffff',
textAlign: 'center',
fontSize: 16, fontSize: 16,
fontWeight: '600' fontWeight: '600'
} }
@ -43,17 +42,21 @@ export default class extends React.PureComponent {
onBackdropPress={onClose} onBackdropPress={onClose}
onBackButtonPress={onClose} onBackButtonPress={onClose}
> >
<View style={styles.titleContainer}> <TouchableWithoutFeedback onPress={onClose}>
<Text style={styles.title}>{title}</Text> <View style={styles.titleContainer}>
</View> <Text style={styles.title}>{title}</Text>
</View>
</TouchableWithoutFeedback>
<View style={styles.imageWrapper}> <View style={styles.imageWrapper}>
<ScrollView contentContainerStyle={styles.imageWrapper} maximumZoomScale={1.5}> <ScrollView contentContainerStyle={styles.imageWrapper} maximumZoomScale={5}>
<CachedImage <TouchableWithoutFeedback onPress={onClose}>
style={styles.image} <CachedImage
source={{ uri: encodeURI(image) }} style={styles.image}
mutable source={{ uri: encodeURI(image) }}
resizeMode='contain' mutable
/> resizeMode='contain'
/>
</TouchableWithoutFeedback>
</ScrollView> </ScrollView>
</View> </View>
</Modal> </Modal>