ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2025-01-03 19:42:03 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #111 from esteemapp/feature/settings

Browse Source 
Created badge comp. added backgrodun image for side enhanced dark theme
This commit is contained in:
Feruz M 2018-11-23 11:08:50 +02:00 committed by GitHub
commit e42d04261e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 137 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/side_menu_background.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

5
src/components/bottomTabBar/view/bottomTabBarStyles.js
View File

@ -4,7 +4,10 @@ export default EStyleSheet.create({
wrapper: {
flexDirection: 'row',
height: 56,
width: '100%',
width: '$deviceWidth',
backgroundColor: '$primaryBackgroundColor',
borderWidth: 0.1,
shadowOpacity: 0.1,
shadowOffset: { height: 0 },
},
});

2
src/components/bottomTabBar/view/bottomTabBarView.js
View File

@ -47,7 +47,7 @@ class BottomTabBarView extends Component {
justifyContent: 'center',
}}
>
<TouchableWithoutFeedback onPress={() => jumpTo(route.key)}>
<TouchableWithoutFeedback onPress={() => jumpTo(route.key)}>
{renderIcon({
route,
focused: index === idx,

25
src/components/icon/container/iconContainer.js Normal file
View File

@ -0,0 +1,25 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
// Components
import { Icon } from '..';
class IconContainer extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const { isBadge, badgeType, unreadActivityCount } = this.props;
const badgeCount = badgeType === 'notification' ? unreadActivityCount : 0;
return <Icon badgeCount={badgeCount} {...this.props} />;
}
}
const mapStateToProps = state => ({
unreadActivityCount: state.account.currentAccount.unread_activity_count || 0,
});
export default connect(mapStateToProps)(IconContainer);

3
src/components/icon/index.js
View File

@ -1,4 +1,5 @@
import IconContainer from './container/iconContainer';
import Icon from './view/iconView';
export { Icon };
export { Icon, IconContainer };
export default Icon;

28
src/components/icon/view/iconStyles.js
View File

@ -1,18 +1,24 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
notification: {
backgroundColor: '$primaryRed',
color: '$primaryBackgroundColor',
textAlign: 'center',
borderRadius: 25,
borderWidth: 1,
borderColor: '$primaryBackgroundColor',
alignSelf: 'center',
paddingHorizontal: 4,
badge: {
color: '$primaryLightGray',
alignItems: 'center',
fontSize: 10,
},
badgeWrapper: {
position: 'absolute',
right: -5,
top: -7,
right: 20,
top: 13,
backgroundColor: '$primaryRed',
borderRadius: 20,
borderColor: '$white',
borderWidth: 2,
justifyContent: 'center',
alignItems: 'center',
zIndex: 99,
padding: 2,
height: 20,
// width: 20,
},
});

27
src/components/icon/view/iconView.js
View File

@ -1,4 +1,5 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import { Platform, View, Text } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
@ -60,17 +61,21 @@ class IconView extends Component {
}
};
_getIconWithBadge = badgeCount => (
<Fragment>
<View style={styles.badgeWrapper}>
<Text style={styles.badge}>{badgeCount}</Text>
</View>
{this._getIcon()}
</Fragment>
);
render() {
const { notification } = this.props;
if (notification) {
return (
<View>
{this._getIcon()}
<Text style={styles.notification}>{notification}</Text>
</View>
);
}
return this._getIcon();
const { badgeCount } = this.props;
if (!badgeCount) return this._getIcon();
return this._getIconWithBadge(badgeCount);
}
}

31
src/components/notificationButton/container/notificationButtonContainer.js
View File

@ -1,31 +0,0 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
// Components
import { Icon } from '../..';
class NotificationButtonContainer extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const { color, unreadActivityCount, size } = this.props;
return (
<Icon
iconType="FontAwesome"
notification={unreadActivityCount}
name="bell-o"
color={color}
size={size}
/>
);
}
}
const mapStateToProps = state => ({
unreadActivityCount: state.account.currentAccount.unread_activity_count || 0,
});
export default connect(mapStateToProps)(NotificationButtonContainer);

3
src/components/notificationButton/index.js
View File

@ -1,3 +0,0 @@
import NotificationButtonContainer from './container/notificationButtonContainer';
export default NotificationButtonContainer;

53
src/components/sideMenu/view/sideMenuView.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { View, Text, ImageBackground } from 'react-native';
import {
Thumbnail, List, ListItem, Container,
} from 'native-base';
@ -14,7 +14,9 @@ import { default as MENU } from '../../../constants/sideMenuItems';
// Styles
import styles from './sideMenuStyles';
// Images
const DEFAULT_IMAGE = require('../../../assets/esteem.png');
const SIDE_MENU_BACKGROUND = require('../../../assets/side_menu_background.png');
class SideMenuView extends Component {
/* Props
@ -40,7 +42,6 @@ class SideMenuView extends Component {
});
}
// Component Functions
_handleOnPressAddAccountIcon = () => {
@ -90,28 +91,30 @@ class SideMenuView extends Component {
colors={['#357ce6', '#2d5aa0']}
style={styles.headerView}
>
{isLoggedIn && (
<View style={styles.headerContentView}>
<Thumbnail style={styles.userAvatar} source={this._getUserAvatar()} />
<View style={styles.userInfoView}>
<Text style={styles.username}>{this._getNameOfUser()}</Text>
<Text style={styles.usernick}>{`@${currentAccount.name}`}</Text>
<ImageBackground source={SIDE_MENU_BACKGROUND} style={{ width: '100%', height: '100%', flexDirection: 'row', }}>
{isLoggedIn && (
<View style={styles.headerContentView}>
<Thumbnail style={styles.userAvatar} source={this._getUserAvatar()} />
<View style={styles.userInfoView}>
<Text style={styles.username}>{this._getNameOfUser()}</Text>
<Text style={styles.usernick}>{`@${currentAccount.name}`}</Text>
</View>
<View style={styles.addAccountIconView}>
{/* TODO: delete android name */}
<IconButton
name={isAddAccountIconActive ? 'arrow-dropup' : 'add-circle-outline'}
androidName={
isAddAccountIconActive ? 'md-arrow-dropup' : 'ios-add-circle-outline'
}
color="white"
size={15}
handleOnPress={() => this._handleOnPressAddAccountIcon()}
style={styles.addAccountIcon}
/>
</View>
</View>
<View style={styles.addAccountIconView}>
{/* TODO: delete android name */}
<IconButton
name={isAddAccountIconActive ? 'arrow-dropup' : 'add-circle-outline'}
androidName={
isAddAccountIconActive ? 'md-arrow-dropup' : 'ios-add-circle-outline'
}
color="white"
size={15}
handleOnPress={() => this._handleOnPressAddAccountIcon()}
style={styles.addAccountIcon}
/>
</View>
</View>
)}
)}
</ImageBackground>
</LinearGradient>
<View style={styles.contentView}>
<List
@ -129,7 +132,9 @@ class SideMenuView extends Component {
}
}}
>
{item.icon && <Icon iconType="FontAwesome" style={styles.listItemIcon} name={item.icon} />}
{item.icon && (
<Icon iconType="FontAwesome" style={styles.listItemIcon} name={item.icon} />
)}
{item.image && (
<Thumbnail small style={styles.otherUserAvatar} source={item.image} />
)}

2
src/components/upvote/view/upvoteStyles.js
View File

@ -26,7 +26,7 @@ export default EStyleSheet.create({
width: 16,
height: 16,
borderRadius: 16 / 2,
backgroundColor: '$primaryBackgroundColor',
backgroundColor: '$primaryLightBackground',
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowRadius: 2,

2
src/components/upvote/view/upvoteView.js
View File

@ -131,7 +131,7 @@ class UpvoteView extends Component {
) : (
<Fragment>
<Icon
style={[styles.upvoteIcon, { color: '#007ee5' }]}
style={[styles.upvoteIcon]}
active={!isLoggedIn}
iconType="AntDesign"
name={isVoted ? 'upcircle' : 'upcircleo'}

47
src/navigation/baseNavigator.js
View File

@ -1,11 +1,12 @@
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Icon } from '../components/icon';
import { IconContainer } from '../components/icon';
import {
Home, Notification, Profile, RootComponent, Messages,
} from '../screens';
import { PostButton } from '../components/postButton';
import NotificationButton from '../components/notificationButton';
import { BottomTabBar } from '../components/bottomTabBar';
// import style from './baseNavigatorStyles';
@ -14,13 +15,31 @@ const BaseNavigator = createBottomTabNavigator(
Home: {
screen: RootComponent()(Home),
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => <Icon name="list" color={tintColor} size={20} />,
tabBarIcon: ({ tintColor }) => (
<Icon
iconType="FontAwesome"
style={{ padding: 20 }}
name="list"
color={tintColor}
size={20}
/>
),
}),
},
Notification: {
screen: RootComponent()(Notification),
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => <NotificationButton size={20} color={tintColor} />,
tabBarIcon: ({ tintColor }) => (
<IconContainer
isBadge
badgeType="notification"
iconType="FontAwesome"
name="bell-o"
color={tintColor}
size={20}
style={{ padding: 20 }}
/>
),
}),
},
PostButton: {
@ -32,13 +51,29 @@ const BaseNavigator = createBottomTabNavigator(
Messages: {
screen: RootComponent()(Messages),
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => <Icon name="envelope-o" color={tintColor} size={20} />,
tabBarIcon: ({ tintColor }) => (
<Icon
iconType="FontAwesome"
style={{ padding: 20 }}
name="envelope-o"
color={tintColor}
size={20}
/>
),
}),
},
Profile: {
screen: RootComponent()(Profile),
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => <Icon name="credit-card" color={tintColor} size={20} />,
tabBarIcon: ({ tintColor }) => (
<Icon
iconType="FontAwesome"
style={{ padding: 20 }}
name="credit-card"
color={tintColor}
size={20}
/>
),
}),
},
},