Skip to content

GitLab

Commit 4f10678f authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg Committed by Gijs Hendriksen
Browse files

Replace card styling by reusable CardSection in Pizza screen

parent aaa39244
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 113 deletions
app/assets/locales/nl/app/ui/screens/pizza/Pizza.json
View file @ 4f10678f
......@@ -5,5 +5,6 @@
"The order has not yet been paid for.": "Je bestelling is nog niet betaald.",
"Changing your order": "Bestelling bewerken",
"Sorry! We couldn't load any data.": "Sorry! We konden geen gegevens laden.",
"There is currently no event for which you can order food.": "Er is geen evenement waarvoor je eten kunt bestellen."
"There is currently no event for which you can order food.": "Er is geen evenement waarvoor je eten kunt bestellen.",
"Current order": "Huidige bestelling"
}
app/ui/components/cardSection/CardSection.js
View file @ 4f10678f
......@@ -7,9 +7,11 @@ import styles from './style/CardSection';
const CardSection = props => (
<View style={[styles.section, props.style]}>
<Text style={styles.sectionHeader}>
{props.sectionHeader}
</Text>
{props.sectionHeader !== null && (
<Text style={styles.sectionHeader}>
{props.sectionHeader}
</Text>
)}
<View style={[styles.card, props.contentStyle]}>
{props.children}
</View>
......
app/ui/screens/pizza/Pizza.js
View file @ 4f10678f
......@@ -13,6 +13,7 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import { retrievePizzaInfo, cancelOrder, orderPizza } from '../../../actions/pizza';
import styles from './style/Pizza';
import Colors from '../../style/Colors';
import CardSection from '../../components/cardSection/CardSection';
class Pizza extends Component {
getProductFromList = (pk, pizzaList) => {
......@@ -26,10 +27,10 @@ class Pizza extends Component {
getEventInfo = (title, subtitle) => (
<View style={styles.eventInfo}>
<Text style={styles.title}>
<Text style={styles.eventTitle}>
{this.props.t('Order pizza for {{title}}', { title })}
</Text>
<Text style={styles.subtitle}>
<Text style={styles.eventSubtitle}>
{subtitle}
</Text>
</View>
......@@ -40,7 +41,10 @@ class Pizza extends Component {
const productInfo = this.getProductFromList(order.product, pizzaList);
return (
<View
style={[styles.overview, order.paid ? styles.greenBackground : styles.redBackground]}
style={[
styles.overviewContainer,
order.paid ? styles.greenBackground : styles.redBackground,
]}
>
<Text
style={styles.overviewText}
......@@ -52,7 +56,7 @@ class Pizza extends Component {
);
}
return (
<Text style={styles.header}>
<Text style={styles.overviewNoOrder}>
{this.props.t('You did not place an order.')}
</Text>
);
......@@ -63,96 +67,84 @@ class Pizza extends Component {
const productInfo = this.getProductFromList(order.product, pizzaList);
return (
<View style={styles.section}>
<Text style={styles.header}>
Current order
</Text>
<View style={styles.card}>
<View
style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]}
>
<Text style={styles.orderStatusText}>
{order.paid && this.props.t('The order has been paid for.')}
{!order.paid && this.props.t('The order has not yet been paid for.')}
</Text>
</View>
<View style={[styles.pizzaContainer, styles.orderedPizzaContainer]}>
<View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>
{productInfo.name}
</Text>
<Text style={styles.pizzaDescription}>
{productInfo.description}
</Text>
<Text style={styles.pizzaPrice}>
€
{productInfo.price}
</Text>
</View>
{(!order.paid && !hasEnded) && (
<TouchableHighlight
onPress={() => this.props.cancelOrder()}
style={styles.button}
underlayColor={Colors.darkMagenta}
>
<Icon
name="delete"
color={Colors.white}
size={18}
/>
</TouchableHighlight>
)}
</View>
</View>
</View>
);
}
return null;
};
getPizzaList = (pizzaList, hasOrder) => (
<View style={styles.section}>
{hasOrder && (
<Text style={styles.header}>
{this.props.t('Changing your order')}
</Text>
)}
<View style={[styles.card, styles.pizzaList]}>
{pizzaList.map(pizza => (
<CardSection sectionHeader={this.props.t('Current order')}>
<View
key={pizza.pk}
style={styles.pizzaContainer}
style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]}
>
<Text style={styles.orderStatusText}>
{order.paid && this.props.t('The order has been paid for.')}
{!order.paid && this.props.t('The order has not yet been paid for.')}
</Text>
</View>
<View style={[styles.pizzaContainer, styles.orderedPizzaContainer]}>
<View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>
{pizza.name}
{productInfo.name}
</Text>
<Text style={styles.pizzaDescription}>
{pizza.description}
{productInfo.description}
</Text>
<Text style={styles.pizzaPrice}>
€
{pizza.price}
€
{productInfo.price}
</Text>
</View>
<TouchableHighlight
onPress={() => {
this.props.orderPizza(pizza.pk, hasOrder);
this.pizzaScroll.scrollTo({ x: 0, y: 0, animated: true });
}}
style={styles.button}
underlayColor={Colors.darkMagenta}
>
<Icon
name="add-shopping-cart"
color={Colors.white}
size={18}
/>
</TouchableHighlight>
{(!order.paid && !hasEnded) && (
<TouchableHighlight
onPress={() => this.props.cancelOrder()}
style={styles.button}
underlayColor={Colors.darkMagenta}
>
<Icon
name="delete"
color={Colors.white}
size={18}
/>
</TouchableHighlight>
)}
</View>
))}
</View>
</View>
</CardSection>
);
}
return null;
};
getPizzaList = (pizzaList, hasOrder) => (
<CardSection sectionHeader={hasOrder ? this.props.t('Changing your order') : null} contentStyle={styles.pizzaList}>
{pizzaList.map((pizza, i) => (
<View
key={pizza.pk}
style={i === 0 ? styles.pizzaContainer : [styles.borderTop, styles.pizzaContainer]}
>
<View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>
{pizza.name}
</Text>
<Text style={styles.pizzaDescription}>
{pizza.description}
</Text>
<Text style={styles.pizzaPrice}>
€
{pizza.price}
</Text>
</View>
<TouchableHighlight
onPress={() => {
this.props.orderPizza(pizza.pk, hasOrder);
this.pizzaScroll.scrollTo({ x: 0, y: 0, animated: true });
}}
style={styles.button}
underlayColor={Colors.darkMagenta}
>
<Icon
name="add-shopping-cart"
color={Colors.white}
size={18}
/>
</TouchableHighlight>
</View>
))}
</CardSection>
);
handleRefresh = () => {
......
app/ui/screens/pizza/style/Pizza.js
View file @ 4f10678f
......@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
eventInfo: {
padding: 8,
},
title: {
eventTitle: {
android: {
fontFamily: 'sans-serif-medium',
},
......@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
fontSize: 20,
marginBottom: 8,
},
subtitle: {
eventSubtitle: {
android: {
fontFamily: 'sans-serif-medium',
},
......@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
color: Colors.textColour,
fontSize: 14,
},
overview: {
overviewContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
......@@ -69,11 +69,7 @@ const styles = StyleSheet.create({
backgroundColor: Colors.lightRed,
borderColor: Colors.darkRed,
},
section: {
marginTop: 8,
marginBottom: 8,
},
header: {
overviewNoOrder: {
android: {
fontFamily: 'sans-serif-medium',
},
......@@ -83,23 +79,10 @@ const styles = StyleSheet.create({
},
color: Colors.textColour,
fontSize: 14,
paddingLeft: 10,
paddingLeft: 8,
paddingTop: 6,
paddingBottom: 6,
},
card: {
backgroundColor: Colors.white,
elevation: 2,
android: {
borderRadius: 2,
},
ios: {
borderRadius: 4,
borderColor: Colors.lightGray,
borderStyle: 'solid',
borderWidth: 0.5,
},
},
orderStatusText: {
android: {
fontFamily: 'sans-serif-medium',
......@@ -139,10 +122,10 @@ const styles = StyleSheet.create({
paddingRight: 16,
paddingTop: 8,
paddingBottom: 8,
android: {
borderBottomWidth: 1,
borderBottomColor: Colors.dividerGrey,
},
},
borderTop: {
borderTopWidth: 1,
borderTopColor: Colors.dividerGrey,
},
orderedPizzaContainer: {
paddingTop: 16,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment