From d731bbbec4a38484371810d87c1a747cfffd8db1 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sun, 19 Aug 2018 16:31:23 +0200
Subject: [PATCH] Add remaining menu items and icons
---
components/menu.js | 39 ++++++++++++++++++++-------------------
styles/index.js | 11 +++++++++--
2 files changed, 29 insertions(+), 21 deletions(-)
diff --git a/components/menu.js b/components/menu.js
index 9631c022..d7cb1d4e 100644
--- a/components/menu.js
+++ b/components/menu.js
@@ -13,27 +13,28 @@ export default class Menu extends Component {
placeActionButtons()
:
<View style={styles.menu}>
- <Text
- style={styles.dateHeader}
- onPress={() => this.props.navigate('Home')}
- >
- {'Home'}
- </Text>
- <Text
- style={styles.dateHeader}
- onPress={() => this.props.navigate('Calendar')}
- >
- {'Calendar'}
- </Text>
- <Text
- style={styles.dateHeader}
- onPress={() => this.props.navigate('Settings')}
- >
- {'Settings'}
- </Text>
+ {[
+ {title: 'Home', icon: 'home', componentName: 'Home'},
+ {title: 'Calendar', icon: 'calendar-range', componentName: 'Calendar'},
+ {title: 'Chart', icon: 'chart-line', componentName: 'Chart'},
+ {title: 'Stats', icon: 'chart-pie', componentName: 'Stats'},
+ {title: 'Settings', icon: 'settings', componentName: 'Settings'},
+ ].map(makeMenuItem)}
</View >
)
}
}
-function placeActionButtons() {}
\ No newline at end of file
+function makeMenuItem({title, icon, componentName}) {
+ return (
+ <View style={{alignItems: 'center'}}>
+ <Icon name={icon} {...iconStyles.menuIcon}/>
+ <Text
+ style={styles.menuText}
+ onPress={() => this.props.navigate(componentName)}
+ >
+ {title}
+ </Text>
+ </View>
+ )
+}
\ No newline at end of file
diff --git a/styles/index.js b/styles/index.js
index 8943efa0..42784d92 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -104,11 +104,14 @@ export default StyleSheet.create({
menu: {
backgroundColor: primaryColor,
paddingVertical: 18,
- paddingHorizontal: 15,
+ paddingHorizontal: 10,
alignItems: 'center',
- justifyContent: 'space-evenly',
+ justifyContent: 'space-between',
flexDirection: 'row',
},
+ menuText: {
+ color: fontOnPrimaryColor
+ },
headerCycleDay: {
flexDirection: 'row',
justifyContent: 'space-between'
@@ -163,5 +166,9 @@ export const iconStyles = {
},
symptomBoxActive: {
color: fontOnPrimaryColor
+ },
+ menuIcon: {
+ size: 20,
+ color: fontOnPrimaryColor
}
}
\ No newline at end of file
--
GitLab