Merge pull request #295 from esteemapp/enhancment/ui

Enhancment/ui
This commit is contained in:
uğur erdal 2018-12-21 13:53:11 +03:00 committed by GitHub
commit b8c33e1a4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 55 additions and 57 deletions

View File

@ -13,6 +13,7 @@ export default EStyleSheet.create({
shadowOffset: {
height: 1.5,
},
elevation: 3,
},
fixedFooter: {
position: 'absolute',

View File

@ -36,8 +36,12 @@ class IconView extends PureComponent {
};
_getIcon = () => {
const { iconType, children } = this.props;
const name = this._getIconName();
const { iconType, children, name } = this.props;
let _name = name;
if (iconType !== 'MaterialIcons') {
_name = this._getIconName();
}
switch (iconType) {
case 'Feather':
@ -52,12 +56,12 @@ class IconView extends PureComponent {
return <MaterialIcons {...this.props}>{children}</MaterialIcons>;
case 'MaterialCommunityIcons':
return (
<MaterialCommunityIcons name={name} {...this.props}>
<MaterialCommunityIcons name={_name} {...this.props}>
{children}
</MaterialCommunityIcons>
);
default:
return <Ionicons name {...this.props} />;
return <Ionicons name={_name} {...this.props} />;
}
};

View File

@ -13,6 +13,7 @@ export default EStyleSheet.create({
},
shadowColor: '#5f5f5fbf',
shadowOpacity: 0.3,
elevation: 3,
},
icon: {
alignSelf: 'center',

View File

@ -10,5 +10,6 @@ export default EStyleSheet.create({
shadowOffset: {
height: 1.5,
},
elevation: 3,
},
});

View File

@ -5,12 +5,6 @@ export default EStyleSheet.create({
flexDirection: 'row',
alignSelf: 'center',
},
activeInput: {
backgroundColor: '$primaryBlue',
height: 10,
width: 10,
borderRadius: 20 / 2,
},
inputWithBackground: {
backgroundColor: '$primaryBlue',
},

View File

@ -32,16 +32,6 @@ class PinAnimatedInput extends PureComponent {
]}
>
{[...Array(4)].map((val, index) => {
if (pin.length === index) {
return (
<Animated.View key={`passwordItem-${index}`} style={styles.input}>
<Animated.View
key={`passwordItem-${index}`}
style={[styles.input, styles.activeInput]}
/>
</Animated.View>
);
}
if (pin.length > index) {
return (
<Animated.View key={`passwordItem-${index}`} style={styles.input}>

View File

@ -24,7 +24,8 @@ export default EStyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
shadowColor: '$shadowColor',
shadowOffset: { height: 0 },
shadowOffset: { height: 2 },
shadowOpacity: 0.5,
elevation: 3,
},
});

View File

@ -125,8 +125,8 @@ class PostButtonView extends Component {
left: firstX,
top: firstY,
}}
icon="video-camera"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'camera')}
icon="create"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
/>
<SubPostButton
size={SIZE}
@ -134,8 +134,8 @@ class PostButtonView extends Component {
left: secondX,
top: secondY,
}}
icon="pencil"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
icon="camera-alt"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'image')}
/>
<SubPostButton
size={SIZE}
@ -143,11 +143,14 @@ class PostButtonView extends Component {
left: thirdX,
top: thirdY,
}}
icon="camera"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'image')}
icon="videocam"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'camera')}
/>
<TouchableOpacity
onPress={() => (Platform.OS === 'ios' ? this._toggleView() : handleButtonCollapse(null, Platform.OS === 'android'))}
onPress={() => (Platform.OS === 'ios'
? this._toggleView()
: handleButtonCollapse(null, Platform.OS === 'android'))
}
activeOpacity={1}
>
<Animated.View
@ -161,7 +164,7 @@ class PostButtonView extends Component {
},
]}
>
<Icon name="plus" size={22} iconType="FontAwesome" color="#F8F8F8" />
<Icon name="add" size={24} iconType="MaterialIcons" color="#F8F8F8" />
</Animated.View>
</TouchableOpacity>
</View>

View File

@ -98,8 +98,6 @@ class PostButtonsForAndroid extends Component {
action,
},
});
// navigation.navigate(route);
};
render() {
@ -141,8 +139,8 @@ class PostButtonsForAndroid extends Component {
top: firstY,
position: 'relative',
}}
icon="video-camera"
onPress={() => this._handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'camera')}
icon="create"
onPress={() => this._handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
/>
<SubPostButton
size={SIZE}
@ -151,8 +149,8 @@ class PostButtonsForAndroid extends Component {
top: secondY,
position: 'relative',
}}
icon="pencil"
onPress={() => this._handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
icon="camera-alt"
onPress={() => this._handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'image')}
/>
<SubPostButton
size={SIZE}
@ -161,8 +159,8 @@ class PostButtonsForAndroid extends Component {
top: thirdY,
position: 'relative',
}}
icon="camera"
onPress={() => this._handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'image')}
icon="videocam"
onPress={() => this._handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'camera')}
/>
</View>
);

View File

@ -1,18 +1,18 @@
import React from 'react';
import { Animated, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Icon } from '../../icon';
// Styles
import styles from './postButtonStyles';
/* Props
* ------------------------------------------------
* @prop { type } size - Description....
* @prop { type } onPress - Description....
* @prop { type } style - Description....
* @prop { type } icon - Description....
*
*/
* ------------------------------------------------
* @prop { type } size - Description....
* @prop { type } onPress - Description....
* @prop { type } style - Description....
* @prop { type } icon - Description....
*
*/
const SubPostButton = ({
style, icon, onPress, size,
@ -36,7 +36,7 @@ const SubPostButton = ({
},
]}
>
<Icon name={icon} size={14} color="#F8F8F8" />
<Icon name={icon} iconType="MaterialIcons" size={16} color="#F8F8F8" />
</TouchableOpacity>
</Animated.View>
);

View File

@ -141,6 +141,7 @@ export default EStyleSheet.create({
shadowOffset: { width: 0, height: 2 },
shadowRadius: 2,
shadowOpacity: 0.35,
elevation: 3,
},
postBodyWrapper: {
marginHorizontal: 9,
@ -152,6 +153,7 @@ export default EStyleSheet.create({
height: 200,
width: '$deviceWidth - 16',
borderRadius: 8,
backgroundColor: '$primaryLightGray',
},
postDescripton: {
flexDirection: 'column',

View File

@ -57,7 +57,9 @@ class PostCard extends Component {
render() {
const { content, isHideImage, fetchPost } = this.props;
const _image = content && content.image ? { uri: content.image } : DEFAULT_IMAGE;
const _image = content && content.image
? { uri: content.image, priority: FastImage.priority.high }
: DEFAULT_IMAGE;
return (
<View style={styles.post}>

View File

@ -49,6 +49,7 @@ class ToggleSwitchView extends PureComponent {
shadowOffset: {
height: 1.5,
},
elevation: 3,
};
};

View File

@ -31,6 +31,7 @@ export default EStyleSheet.create({
shadowOffset: { width: 0, height: 2 },
shadowRadius: 2,
shadowOpacity: 0.35,
elevation: 3,
},
amount: {
fontSize: 10,

View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Image } from 'react-native';
import FastImage from 'react-native-fast-image';
import styles from './userAvatarStyles';
const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
@ -38,9 +38,8 @@ class UserAvatarView extends Component {
_size = 64;
}
// eslint-disable-next-line
return (
<Image
<FastImage
style={[styles.avatar, style, { width: _size, height: _size, borderRadius: _size / 2 }]}
source={_avatar}
/>

View File

@ -8,7 +8,6 @@ export default EStyleSheet.create({
defaultContainer: {
flex: 1,
},
title: {},
text: {
fontFamily: '$primaryFont',
letterSpacing: '$primaryLatterSpacing',
@ -28,6 +27,7 @@ export default EStyleSheet.create({
width: 0,
height: 6,
},
elevation: 3,
},
errorText: {
fontFamily: '$primaryFont',

View File

@ -109,7 +109,7 @@ const changeMarkdownImage = input => input.replace(markdownImageRegex, (link) =>
const firstMarkdownMatch = markdownMatch[0];
const _link = firstMarkdownMatch.match(urlRegex)[0];
return `<img data-href="${`https://img.esteem.app/500x0/${_link}`}" src="${`https://img.esteem.app/400x0/${_link}`}">`;
return `<img data-href="${`https://img.esteem.app/500x0/${_link}`}" src="${`https://img.esteem.app/500x0/${_link}`}">`;
}
return link;
});
@ -127,7 +127,7 @@ const createCenterImage = input => input.replace(imgCenterRegex, (link) => {
const changePullRightLeft = input => input.replace(pullRightLeftRegex, (item) => {
const imageLink = item.match(linkRegex)[0];
return `<center style="text-align:center;"><img src="${`https://img.esteem.app/400x0/${imageLink}`}"/></center><br>`;
return `<center style="text-align:center;"><img src="${`https://img.esteem.app/500x0/${imageLink}`}"/></center><br>`;
});
const steemitUrlHandle = input => input.replace(postRegex, (link) => {
@ -141,12 +141,12 @@ const steemitUrlHandle = input => input.replace(postRegex, (link) => {
const createImage = input => input.replace(
onlyImageLinkRegex,
link => `<img data-href="${`https://img.esteem.app/300x0/${link}`}" src="${`https://img.esteem.app/400x0/${link}`}">`,
link => `<img data-href="${`https://img.esteem.app/300x0/${link}`}" src="${`https://img.esteem.app/500x0/${link}`}">`,
);
const createFromDoubleImageLink = input => input.replace(onlyImageDoubleLinkRegex, (link) => {
const _link = link.trim();
return `<img data-href="https://img.esteem.app/300x0/${_link}" src="https://img.esteem.app/300x0/${_link}">`;
return `<img data-href="https://img.esteem.app/300x0/${_link}" src="https://img.esteem.app/500x0/${_link}">`;
});
const createYoutubeIframe = input => input.replace(youTubeRegex, (link) => {

View File

@ -68,13 +68,13 @@ const postImage = (metaData, body) => {
}
}
if(!imageLink && imageRegex.test(body)) {
if (!imageLink && imageRegex.test(body)) {
const imageMatch = body.match(imageRegex);
imageLink = imageMatch[0];
}
if (imageLink) {
return `https://img.esteem.app/300x0/${imageLink}`;
return `https://img.esteem.app/600x0/${imageLink}`;
}
return '';
};