changed icons layout

This commit is contained in:
u-e 2019-04-27 16:47:54 +03:00
parent 7241abf4d8
commit 30ce2b8d43
8 changed files with 79 additions and 50 deletions

View File

@ -9,3 +9,4 @@ PODS_BUILD_DIR = ${BUILD_DIR}
PODS_CONFIGURATION_BUILD_DIR = ${PODS_BUILD_DIR}/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
PODS_PODFILE_DIR_PATH = ${SRCROOT}/.
PODS_ROOT = ${SRCROOT}/Pods
USER_HEADER_SEARCH_PATHS = $(inherited) $(SRCROOT)/FLAnimatedImage/FLAnimatedImage

View File

@ -9,3 +9,4 @@ PODS_BUILD_DIR = ${BUILD_DIR}
PODS_CONFIGURATION_BUILD_DIR = ${PODS_BUILD_DIR}/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
PODS_PODFILE_DIR_PATH = ${SRCROOT}/.
PODS_ROOT = ${SRCROOT}/Pods
USER_HEADER_SEARCH_PATHS = $(inherited) $(SRCROOT)/FLAnimatedImage/FLAnimatedImage

View File

@ -8,3 +8,4 @@ PODS_BUILD_DIR = ${BUILD_DIR}
PODS_CONFIGURATION_BUILD_DIR = ${PODS_BUILD_DIR}/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
PODS_PODFILE_DIR_PATH = ${SRCROOT}/.
PODS_ROOT = ${SRCROOT}/Pods
USER_HEADER_SEARCH_PATHS = $(inherited) $(SRCROOT)/FLAnimatedImage/FLAnimatedImage

View File

@ -8,3 +8,4 @@ PODS_BUILD_DIR = ${BUILD_DIR}
PODS_CONFIGURATION_BUILD_DIR = ${PODS_BUILD_DIR}/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
PODS_PODFILE_DIR_PATH = ${SRCROOT}/.
PODS_ROOT = ${SRCROOT}/Pods
USER_HEADER_SEARCH_PATHS = $(inherited) $(SRCROOT)/FLAnimatedImage/FLAnimatedImage

View File

@ -17,11 +17,15 @@ export default EStyleSheet.create({
marginTop: 5,
},
iconsWrapper: {
marginVertical: 32,
marginVertical: 24,
marginHorizontal: 32,
justifyContent: 'center',
alignSelf: 'center',
flexDirection: 'row',
},
iconsList: {
height: 55,
},
iconWrapper: {
marginHorizontal: 16,
width: 36,

View File

@ -13,6 +13,9 @@ import { MainButton } from '../../mainButton';
// Utils
import { getTimeFromNow } from '../../../utils/time';
// Constants
import POINTS, { POINTS_KEYS } from '../../../constants/options/points';
// Styles
import styles from './pointsStyles';
@ -83,51 +86,28 @@ class PointsView extends Component {
}
<View style={styles.iconsWrapper}>
<View styles={styles.iconWrapper}>
<View style={styles.iconWrapper}>
<IconButton
disabled
iconStyle={styles.icon}
style={styles.iconButton}
iconType="MaterialCommunityIcons"
name="pencil"
badgeCount={50}
badgeStyle={styles.badge}
badgeTextStyle={styles.badgeText}
/>
</View>
<Text style={styles.subText}>{intl.formatMessage({ id: 'points.post' })}</Text>
</View>
<View styles={styles.iconWrapper}>
<View style={styles.iconWrapper}>
<IconButton
disabled
style={styles.iconButton}
iconStyle={styles.icon}
iconType="MaterialCommunityIcons"
name="comment-text-outline"
badgeCount={15}
badgeStyle={styles.badge}
badgeTextStyle={styles.badgeText}
/>
</View>
<Text style={styles.subText}>{intl.formatMessage({ id: 'points.comment' })}</Text>
</View>
<View styles={styles.iconWrapper}>
<View style={[styles.iconWrapper, isActiveIcon && styles.activeIconWrapper]}>
<IconButton
disabled
style={styles.iconButton}
iconStyle={[styles.icon, isActiveIcon && styles.activeIcon]}
iconType="MaterialCommunityIcons"
name="clock-outline"
badgeCount={50}
badgeStyle={[styles.badge, isActiveIcon && styles.activeBadge]}
badgeTextStyle={styles.badgeText}
/>
</View>
<Text style={styles.subText}>{intl.formatMessage({ id: 'points.checkin' })}</Text>
</View>
<FlatList
style={styles.iconsList}
data={POINTS_KEYS}
horizontal
renderItem={({ item }) => (
<View styles={styles.iconWrapper}>
<View style={styles.iconWrapper}>
<IconButton
disabled
iconStyle={styles.icon}
style={styles.iconButton}
iconType={POINTS[item.type].iconType}
name={POINTS[item.type].icon}
badgeCount={POINTS[item.type].point}
badgeStyle={styles.badge}
badgeTextStyle={styles.badgeText}
/>
</View>
<Text style={styles.subText}>{intl.formatMessage({ id: POINTS[item.type].nameKey })}</Text>
</View>
)}
/>
</View>
<View style={styles.listWrapper}>

View File

@ -35,6 +35,10 @@
"post": "Post",
"comment": "Comment",
"checkin": "Checki-in",
"vote": "Vote",
"reblog": "Reblog",
"login": "Login",
"checkin_extra": "Bonus",
"post_title": "Points for post",
"comment_title": "Points for comment",
"vote_title": "Points for vote",

View File

@ -1,38 +1,75 @@
export default {
100: {
icon: 'post',
textKey: 'points.post_title',
iconType: 'MaterialIcons',
icon: 'pencil',
textKey: 'points.post_title',
nameKey: 'points.post',
iconType: 'MaterialCommunityIcons',
point: 15,
},
110: {
icon: 'comment-text-outline',
textKey: 'points.comment_title',
nameKey: 'points.comment',
iconType: 'MaterialCommunityIcons',
point: 5,
},
120: {
icon: 'upcircle',
textKey: 'points.vote_title',
nameKey: 'points.vote',
iconType: 'AntDesign',
point: 0.1,
},
130: {
icon: 'repeat',
textKey: 'points.reblog_title',
nameKey: 'points.reblog',
iconType: 'MaterialIcons',
point: 1,
},
10: {
icon: 'ticket',
textKey: 'points.checkin_title',
nameKey: 'points.checkin',
iconType: 'MaterialCommunityIcons',
point: 0.2,
},
20: {
icon: 'person',
textKey: 'points.login_title',
nameKey: 'points.login',
iconType: 'MaterialIcons',
point: 100,
},
30: {
icon: 'check-decagram',
textKey: 'points.checkin_extra_title',
nameKey: 'points.checkin_extra',
iconType: 'MaterialCommunityIcons',
point: 10,
},
};
export const POINTS_KEYS = [
{
type: 100,
},
{
type: 110,
},
{
type: 120,
},
{
type: 130,
},
{
type: 10,
},
{
type: 20,
},
{
type: 30,
},
];