From 559aa684dc5aa4579263b8716e9840f672bc803d Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Mon, 20 Aug 2018 15:06:50 +0200
Subject: [PATCH] Visualize disabled action buttons
---
components/cycle-day/symptoms/action-button-footer.js | 9 +++++++--
styles/index.js | 6 ++++++
2 files changed, 13 insertions(+), 2 deletions(-)
diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js
index be0cd6ae..a1534964 100644
--- a/components/cycle-day/symptoms/action-button-footer.js
+++ b/components/cycle-day/symptoms/action-button-footer.js
@@ -38,6 +38,11 @@ export default class ActionButtonFooter extends Component {
return (
<View style={styles.menu}>
{buttons.map(({ title, action, disabledCondition, icon }, i) => {
+ const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+ const iconStyle = disabledCondition ?
+ Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
+ iconStyles.menuIcon
+
return (
<TouchableOpacity
onPress={action}
@@ -45,8 +50,8 @@ export default class ActionButtonFooter extends Component {
disabled={disabledCondition}
key={i.toString()}
>
- <Icon name={icon} {...iconStyles.menuIcon} />
- <Text style={styles.menuText}>
+ <Icon name={icon} {...iconStyle} />
+ <Text style={textStyle}>
{title}
</Text>
</TouchableOpacity>
diff --git a/styles/index.js b/styles/index.js
index b1476b09..c5605a1e 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -119,6 +119,9 @@ export default StyleSheet.create({
menuText: {
color: fontOnPrimaryColor
},
+ menuTextInActive: {
+ color: 'lightgrey'
+ },
headerCycleDay: {
flexDirection: 'row',
justifyContent: 'space-between'
@@ -177,5 +180,8 @@ export const iconStyles = {
menuIcon: {
size: 20,
color: fontOnPrimaryColor
+ },
+ menuIconInactive: {
+ color: 'lightgrey'
}
}
\ No newline at end of file
--
GitLab