ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-23 05:13:04 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #308 from esteemapp/feed/ui

Browse Source 
bugfix
This commit is contained in:
uğur erdal 2018-12-27 10:44:33 +03:00 committed by GitHub
commit ae34b969e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 123 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/basicUIElements/view/textWithIcon/textWithIconView.js
View File

@ -4,19 +4,27 @@ import { Icon } from '../../../icon';
import styles from './textWithIconStyles';
const TextWithIcon = ({
iconName, text, isClickable, onPress, iconStyle, iconType,
iconName, text, isClickable, onPress, iconStyle, iconType, iconSize,
}) => (
<View style={styles.container}>
{isClickable || onPress ? (
<TouchableHighlight underlayColor="transparent" onPress={() => onPress && onPress()}>
<View style={styles.wrapper}>
<Icon style={[styles.icon, iconStyle]} name={iconName} iconType={iconType} />
<Icon
style={[styles.icon, iconStyle, iconSize && { fontSize: iconSize }]}
name={iconName}
iconType={iconType}
/>
<Text style={[styles.text]}>{text}</Text>
</View>
</TouchableHighlight>
) : (
<View style={styles.wrapper}>
<Icon style={[styles.icon, iconStyle]} name={iconName} iconType={iconType} />
<Icon
style={[styles.icon, iconStyle, iconSize && { fontSize: iconSize }]}
name={iconName}
iconType={iconType}
/>
<Text style={styles.text}>{text}</Text>
</View>
)}

2
src/components/basicUIElements/view/walletLineItem/walletLineItemView.js
View File

@ -54,7 +54,7 @@ const WalletLineItem = ({
</Text>
</View>
)}
{description && (
{!!description && (
<Text style={[styles.description, !iconName && styles.onlyText]}>{description}</Text>
)}
</View>

4
src/components/collapsibleCard/view/collapsibleCardView.js
View File

@ -57,9 +57,9 @@ class CollapsibleCardView extends PureComponent {
_getMinValue = () => 0;
_toggleOnPress = () => {
const { handleOnExpanded } = this.props;
const { handleOnExpanded, moreHeight } = this.props;
Animated.timing(this.anime.height, {
toValue: this.anime.expanded ? this._getMinValue() : this._getMaxValue(),
toValue: this.anime.expanded ? this._getMinValue() : this._getMaxValue() + moreHeight,
duration: 200,
}).start();
this.anime.expanded = !this.anime.expanded;

11
src/components/postCard/view/postCardView.js
View File

@ -5,6 +5,9 @@ import { PostHeaderDescription } from '../../postElements';
import { PostDropdown } from '../../postDropdown';
import { Icon } from '../../icon';
// Utils
import { makeCountFriendly } from '../../../utils/formatter';
// STEEM
import { Upvote } from '../../upvote';
// Styles
@ -59,6 +62,9 @@ class PostCard extends Component {
const _image = content && content.image
? { uri: content.image, priority: FastImage.priority.high }
: DEFAULT_IMAGE;
const reblogedBy = content.reblogged_by && content.reblogged_by[0];
// repeat icon
// text rebloged by ${reblogedBy}
return (
<View style={styles.post}>
@ -72,6 +78,7 @@ class PostCard extends Component {
reputation={content.author_reputation}
size={32}
tag={content.category}
reblogedBy={reblogedBy}
/>
<View style={styles.dropdownWrapper}>
<PostDropdown content={content} />
@ -103,12 +110,12 @@ class PostCard extends Component {
iconType="MaterialIcons"
name="people"
/>
<Text style={styles.comment}>{content.vote_count}</Text>
<Text style={styles.comment}>{makeCountFriendly(content.vote_count)}</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.commentButton}>
<Icon style={[styles.commentIcon]} iconType="MaterialIcons" name="comment" />
<Text style={styles.comment}>{content.children}</Text>
<Text style={styles.comment}>{makeCountFriendly(content.children)}</Text>
</TouchableOpacity>
</View>
</View>

13
src/components/postElements/headerDescription/view/postHeaderDescription.js
View File

@ -5,7 +5,7 @@ import { withNavigation } from 'react-navigation';
import FastImage from 'react-native-fast-image';
// Components
import { Tag } from '../../../basicUIElements';
import { Tag, TextWithIcon } from '../../../basicUIElements';
// Styles
import styles from './postHeaderDescriptionStyles';
@ -43,7 +43,15 @@ class PostHeaderDescription extends PureComponent {
render() {
const {
date, avatar, name, reputation, size, tag, tagOnPress, isHideImage,
avatar,
date,
isHideImage,
name,
reblogedBy,
reputation,
size,
tag,
tagOnPress,
} = this.props;
const _reputationText = `(${reputation})`;
@ -77,6 +85,7 @@ class PostHeaderDescription extends PureComponent {
</TouchableOpacity>
)}
<Text style={styles.date}>{date}</Text>
{!!reblogedBy && <TextWithIcon text={reblogedBy} iconType="MaterialIcons" iconName="repeat" />}
</View>
);
}

18
src/components/profileSummary/view/profileSummaryStyles.js
View File

@ -22,8 +22,8 @@ export default EStyleSheet.create({
width: '$deviceWidth - 24',
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 17,
marginTop: 10,
marginVertical: 10,
height: 30,
},
leftIcons: {
flexDirection: 'row',
@ -35,10 +35,11 @@ export default EStyleSheet.create({
justifyContent: 'flex-end',
},
insetIconStyle: {
marginRight: 12,
marginRight: 20,
color: '$primaryDarkText',
},
activityIndicator: {
marginRight: 12,
marginRight: 20,
width: 30,
},
followCountWrapper: {
@ -58,6 +59,13 @@ export default EStyleSheet.create({
},
// TODO: look at here
dropdownIconStyle: {
marginBottom: 7,
width: 25,
height: 25,
left: -5,
marginBottom: 3,
color: '#c1c5c7',
},
dropdownStyle: {
maxWidth: 150,
},
});

89
src/components/profileSummary/view/profileSummaryView.js
View File

@ -17,6 +17,10 @@ import DARK_COVER_IMAGE from '../../../assets/dark_cover_image.png';
import { TextWithIcon } from '../../basicUIElements';
import { PercentBar } from '../../percentBar';
import { IconButton } from '../../iconButton';
import { DropdownButton } from '../../dropdownButton';
// Utils
import { makeCountFriendly } from '../../../utils/formatter';
// Styles
import styles from './profileSummaryStyles';
@ -43,6 +47,16 @@ class ProfileSummaryView extends PureComponent {
Linking.openURL(url);
};
_handleOnDropdownSelect = (index) => {
const { isMuted, handleMuteUnmuteUser } = this.props;
// This funciton should have switch case but now only has one option therefor
// temporarily I created with if statments
if (index === '0' && handleMuteUnmuteUser) {
handleMuteUnmuteUser(!isMuted);
}
};
render() {
const { isShowPercentText } = this.state;
const {
@ -51,8 +65,8 @@ class ProfileSummaryView extends PureComponent {
followerCount,
followingCount,
handleFollowUnfollowUser,
handleMuteUnmuteUser,
handleOnFollowsPress,
handleUIChange,
hoursRC,
hoursVP,
intl,
@ -66,40 +80,43 @@ class ProfileSummaryView extends PureComponent {
location,
percentRC,
percentVP,
handleUIChange,
} = this.props;
const dropdownOpions = [];
const votingPowerHoursText = hoursVP && `• Full in ${hoursVP} hours`;
const votingPowerText = `Voting power: ${percentVP}% ${votingPowerHoursText || ''}`;
const rcPowerHoursText = hoursRC && `• Full in ${hoursRC} hours`;
const rcPowerText = `RCs: ${percentRC}% ${rcPowerHoursText || ''}`;
/* eslint-disable */
const rowLength = location
? location.length
: null + link
? link.length
: null + date
? date.length
: null;
const rowLength = (location ? location.length : 0) + (link ? link.length : 0) + (date ? date.length : 0);
const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 7.3;
const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 15;
const followButtonIcon = !isFollowing ? 'user-follow' : 'user-unfollow';
const ignoreButtonIcon = !isMuted ? 'ban' : 'minus';
const followButtonIcon = !isFollowing ? 'account-plus' : 'account-minus';
const coverImageUrl = `http://img.esteem.app/400x0/${coverImage}`;
dropdownOpions.push(!isMuted ? 'MUTE' : 'UNMUTE');
return (
<Fragment>
<View style={[isColumn ? styles.textWithIconWrapperColumn : styles.textWithIconWrapper]}>
{!!location && <TextWithIcon text={location} iconName="md-navigate" />}
{!!location && (
<TextWithIcon
text={location}
iconName="near-me"
iconType="MaterialIcons"
iconSize={14}
/>
)}
{!!link && (
<TextWithIcon
isClickable
onPress={() => this._handleOnPressLink(link)}
text={link}
iconName="md-globe"
iconSize={14}
iconName="earth"
iconType="MaterialCommunityIcons"
/>
)}
{!!date && <TextWithIcon text={date} iconName="md-calendar" />}
{!!date && <TextWithIcon text={date} iconName="md-calendar" iconSize={14} />}
</View>
<Image
style={styles.longImage}
@ -107,10 +124,9 @@ class ProfileSummaryView extends PureComponent {
defaultSource={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
/>
<TouchableOpacity
onPress={() =>
this.setState({ isShowPercentText: !isShowPercentText }, () => {
handleUIChange(isShowPercentText ? 0 : 30);
})
onPress={() => this.setState({ isShowPercentText: !isShowPercentText }, () => {
handleUIChange(!isShowPercentText ? 30 : 0);
})
}
>
<PercentBar
@ -136,7 +152,7 @@ class ProfileSummaryView extends PureComponent {
<Fragment>
<TouchableOpacity onPress={() => handleOnFollowsPress(false)}>
<View style={styles.followCountWrapper}>
<Text style={styles.followCount}>{followerCount}</Text>
<Text style={styles.followCount}>{makeCountFriendly(followerCount)}</Text>
<Text style={styles.followText}>
{' '}
{intl.formatMessage({
@ -147,7 +163,7 @@ class ProfileSummaryView extends PureComponent {
</TouchableOpacity>
<TouchableOpacity onPress={() => handleOnFollowsPress(true)}>
<View style={styles.followCountWrapper}>
<Text style={styles.followCount}>{followingCount}</Text>
<Text style={styles.followCount}>{makeCountFriendly(followingCount)}</Text>
<Text style={styles.followText}>
{intl.formatMessage({
id: 'profile.following',
@ -163,9 +179,9 @@ class ProfileSummaryView extends PureComponent {
<Fragment>
<IconButton
backgroundColor="transparent"
name="heart"
iconType="SimpleLineIcons"
size={16}
name="favorite-border"
iconType="MaterialIcons"
size={20}
style={[styles.insetIconStyle]}
color="#c1c5c7"
/>
@ -175,24 +191,23 @@ class ProfileSummaryView extends PureComponent {
<IconButton
backgroundColor="transparent"
name={followButtonIcon}
iconType="SimpleLineIcons"
onPress={() => handleFollowUnfollowUser(isFollowing ? false : true)}
size={16}
style={styles.insetIconStyle}
iconType="MaterialCommunityIcons"
onPress={() => handleFollowUnfollowUser(!isFollowing)}
size={20}
color="#c1c5c7"
/>
)}
{isProfileLoading ? (
<ActivityIndicator style={styles.activityIndicator} />
) : (
<IconButton
backgroundColor="transparent"
name={ignoreButtonIcon}
iconType="SimpleLineIcons"
onPress={() => handleMuteUnmuteUser(isMuted ? false : true)}
size={16}
style={styles.insetIconStyle}
color="#c1c5c7"
<DropdownButton
isHasChildIcon
iconName="more-vert"
options={dropdownOpions}
onSelect={this._handleOnDropdownSelect}
noHighlight
iconStyle={styles.dropdownIconStyle}
dropdownStyle={styles.dropdownStyle}
/>
)}
</Fragment>

1
src/config/locales/en-US.json
View File

@ -6,6 +6,7 @@
"claim_reward_balance": "Claim Reward Balance",
"transfer": "Transfer",
"transfer_to_vesting": "Transfer To Vesting",
"transfer_from_savings": "Transfer From Savings",
"withdraw_vesting": "Power Down",
"fill_order": "Fill Order"
},

13
src/config/locales/tr-TR.json
View File

@ -1,13 +1,16 @@
{
"wallet": {
"curation_reward": "Curation Reward",
"author_reward": "Author Reward",
"comment_benefactor_reward": "Comment Benefactor Reward",
"claim_reward_balance_ok": "Reward balance claimed",
"claim_reward_balance": "Claim Reward Balance",
"transfer": "Transfer",
"comment_benefactor_reward": "Comment Benefactor Reward",
"curation_reward": "Curation Reward",
"fill_order": "Fill Order",
"transactions": "Transactions",
"transfer_from_savings": "Tasarruflardan Transfer",
"transfer_to_vesting": "Transfer To Vesting",
"withdraw_vesting": "withdraw_vesting",
"fill_order": "Fill Order"
"transfer": "Transfer",
"withdraw_vesting": "Withdraw Vesting"
},
"notification": {
"vote": "beğendi",

3
src/screens/profile/container/profileContainer.js
View File

@ -89,9 +89,6 @@ class ProfileContainer extends Component {
this._loadProfile(selectedUser && selectedUser.username);
}
}
_getReplies = async (user) => {

18
src/utils/formatter.js
View File

@ -1,11 +1,3 @@
// TODO: Move all formats functions here!
// const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico))/gim;
// const postRegex = /^https?:\/\/(.*)\/(.*)\/(@[\w\.\d-]+)\/(.*)/i;
// const youTubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;
// const vimeoRegex = /(https?:\/\/)?(www\.)?(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
// const dTubeRegex = /(https?:\/\/d.tube.#!\/v\/)(\w+)\/(\w+)/g;
export const getPostSummary = (postBody, length, isQuote) => {
if (!postBody) {
return '';
@ -24,3 +16,13 @@ export const getPostSummary = (postBody, length, isQuote) => {
}
return isQuote ? `"${postBody}..."` : `${postBody}...`;
};
export const makeCountFriendly = (value) => {
if (!value) return value;
if (value >= 1000000) return `${intlFormat(value / 1000000)}M`;
if (value >= 1000) return `${intlFormat(value / 1000)}K`;
return intlFormat(value);
};
const intlFormat = num => new Intl.NumberFormat().format(Math.round(num * 10) / 10);

4
src/utils/postParser.js
View File

@ -14,7 +14,7 @@ export const parsePost = (post, currentUserName, isSummary = false) => {
_post.json_metadata = JSON.parse(post.json_metadata);
_post.image = postImage(post.json_metadata, post.body);
_post.pending_payout_value = parseFloat(post.pending_payout_value).toFixed(2);
_post.pending_payout_value = parseFloat(post.pending_payout_value).toFixed(3);
_post.created = getTimeFromNow(post.created);
_post.vote_count = post.active_votes.length;
_post.author_reputation = getReputation(post.author_reputation);
@ -121,7 +121,7 @@ export const protocolUrl2Obj = (url) => {
export const parseComments = (comments) => {
comments.map((comment) => {
comment.pending_payout_value = parseFloat(comment.pending_payout_value).toFixed(2);
comment.pending_payout_value = parseFloat(comment.pending_payout_value).toFixed(3);
comment.created = getTimeFromNow(comment.created);
comment.vote_count = comment.active_votes.length;
comment.author_reputation = getReputation(comment.author_reputation);

6
src/utils/wallet.js
View File

@ -1,5 +1,5 @@
// import parseDate from './parseDate';
import parseToken from './parseToken';
import parseDate from './parseDate';
import { vestsToSp } from './conversions';
export const getTransactionData = (transaction, walletData, formatNumber) => {
@ -14,7 +14,7 @@ export const getTransactionData = (transaction, walletData, formatNumber) => {
const opData = transaction[1].op[1];
const { timestamp } = transaction[1];
result.transDate = parseDate(timestamp);
result.transDate = timestamp;
result.icon = 'local-activity';
switch (result.opName) {
@ -85,7 +85,7 @@ export const getTransactionData = (transaction, walletData, formatNumber) => {
result.value = `${formatNumber(vestsToSp(opVestingShares, walletData.steemPerMVests), {
minimumFractionDigits: 3,
})} SP`;
result.icon = 'money';
result.icon = 'attach-money';
result.details = `@${acc}`;
break;
case 'fill_order':