working on image wiidth on comment

This commit is contained in:
u-e 2018-12-04 21:04:50 +03:00
parent fc430c2e02
commit fa1a5d1b98
5 changed files with 68 additions and 45 deletions

View File

@ -7,6 +7,9 @@ export default EStyleSheet.create({
height: '$deviceHeight / 4',
backgroundColor: '$primaryBackgroundColor',
},
safeArea: {
backgroundColor: '$primaryBackgroundColor',
},
body: {
flexDirection: 'row',
maxHeight: '$deviceHeight / 4',
@ -29,8 +32,9 @@ export default EStyleSheet.create({
},
mascot: {
position: 'absolute',
width: '$deviceWidth / 2',
height: '$deviceHeight / 2.5',
width: 160,
height: 227,
marginTop: 10,
right: -20,
},

View File

@ -1,5 +1,7 @@
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import {
View, Text, Image, SafeAreaView,
} from 'react-native';
// Constants
// Components
@ -10,11 +12,11 @@ import styles from './loginHeaderStyles';
class LoginHeaderView extends Component {
/* Props
* ------------------------------------------------
* @prop { string } title - Title for header string.
* @prop { string } description - Description for header string.
*
*/
* ------------------------------------------------
* @prop { string } title - Title for header string.
* @prop { string } description - Description for header string.
*
*/
constructor(props) {
super(props);
this.state = {};
@ -30,27 +32,29 @@ class LoginHeaderView extends Component {
} = this.props;
return (
<View styles={styles.container}>
<View style={styles.headerRow}>
<Image
style={styles.logo}
source={require('../../../assets/esteem_logo_transparent.png')}
/>
<View style={styles.headerButton}>
<TextButton onPress={onPress} text={rightButtonText} />
</View>
</View>
{!isKeyboardOpen && (
<View style={styles.body}>
<View style={styles.titleText}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.description}>{description}</Text>
<SafeAreaView style={styles.safeArea}>
<View styles={styles.container}>
<View style={styles.headerRow}>
<Image
style={styles.logo}
source={require('../../../assets/esteem_logo_transparent.png')}
/>
<View style={styles.headerButton}>
<TextButton onPress={onPress} text={rightButtonText} />
</View>
<Image style={styles.mascot} source={require('../../../assets/love_mascot.png')} />
</View>
)}
<LineBreak />
</View>
{!isKeyboardOpen && (
<View style={styles.body}>
<View style={styles.titleText}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.description}>{description}</Text>
</View>
<Image style={styles.mascot} source={require('../../../assets/love_mascot.png')} />
</View>
)}
<LineBreak />
</View>
</SafeAreaView>
);
}
}

View File

@ -8,7 +8,7 @@ export default EStyleSheet.create({
},
container: {
paddingHorizontal: 0,
marginTop: 12,
marginTop: 10,
},
a: {
color: '$primaryBlue',
@ -16,5 +16,14 @@ export default EStyleSheet.create({
},
img: {
left: -16,
// height: 50,
},
commentContainer: {
paddingHorizontal: 0,
marginTop: 20,
},
commentImg: {
left: -16,
height: 50,
},
});

View File

@ -21,17 +21,6 @@ class PostBody extends Component {
// Component Life Cycles
// Component Functions
// alterNode(node) {
// // if (node.name === 'img') {
// // node.attribs.style = `max-width: ${WIDTH + 16}px; left: -16px; width: 100% !important`;
// // } else if (node.name == 'iframe') {
// // node.attribs.style = `max-width: ${WIDTH}px; left: -20px`;
// // node.attribs.height = 216;
// // }
// // if (node.name === 'a') {
// // node.attribs.style = 'text-decoration: underline';
// // }
// }
_handleOnLinkPress = (evt, href, hrefatr) => {
const { handleOnUserPress } = this.props;
@ -57,27 +46,44 @@ class PostBody extends Component {
params: {
username,
},
key: username + Math.random() * 100,
key: username,
});
};
_alterNode = (node, isComment) => {
if (isComment) {
if (node.name === 'img') {
node.attribs.style = `max-width: ${WIDTH + 16}px; maxHeight: 120px;`;
console.log(node);
} else if (node.name == 'iframe') {
node.attribs.style = `max-width: ${WIDTH}px; left: -20px`;
node.attribs.height = 216;
}
} else if (node.name === 'a') {
node.attribs.style = 'text-decoration: underline';
}
};
render() {
const { body, isComment } = this.props;
const _initialDimensions = isComment ? {} : { width: WIDTH, height: 216 };
const _initialDimensions = isComment
? { width: WIDTH - 20, height: 50 }
: { width: WIDTH, height: 216 };
return (
<View>
<HTML
html={body}
onLinkPress={(evt, href, hrefatr) => this._handleOnLinkPress(evt, href, hrefatr)}
containerStyle={isComment ? {} : styles.container}
containerStyle={isComment ? styles.commentContainer : styles.container}
textSelectable
tagsStyles={isComment ? {} : styles}
tagsStyles={isComment ? { img: { height: 120 } } : styles}
ignoredTags={['script']}
debug={false}
imagesInitialDimensions={_initialDimensions}
baseFontStyle={styles.text}
imagesMaxWidth={isComment ? null : WIDTH}
imagesMaxWidth={isComment ? WIDTH - 20 : WIDTH}
alterNode={e => this._alterNode(e, isComment)}
/>
</View>
);

View File

@ -81,7 +81,7 @@ class LoginScreen extends Component {
};
_handleSignUp = () => {
Linking.openURL('https://signup.steemit.com/?ref=esteem').catch(err => console.error('An error occurred', err));
Linking.openURL('https://signup.steemit.com/?ref=esteem').catch(err => alert('An error occurred', err));
};
_loginwithSc2 = () => {