bartronx7/aretherecookies-mobile
1
0
Fork 0
mirror of https://gitlab.com/wheres-the-tp/ui-mobile.git synced 2026-01-25 07:24:56 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

food item detail layout updates

Browse source
This commit is contained in:
Bart Akeley 2017-04-20 08:32:57 -05:00
parent 98660b18b1
commit 759c98e5ee
2 changed files with 37 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
js/components/IconButton.js
View file

@ -7,10 +7,10 @@ import { Icon } from 'react-native-material-ui';
type Props = { glyph: string, text: string, route: string, onPress: Function, underlayColor?: string };
export default pure(({ glyph, text, ...others }: Props) => (
<TouchableOpacity {...others}>
<View style={{ alignItems: 'center' }}>
<Icon name={glyph} size={50} color="grey" />
<Text>{text}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity {...others}>
<View style={{ flexDirection: 'row', marginTop: 5 }}>
<Icon name={glyph} size={35} color="grey" style={{ marginRight: 10 }} />
<Text style={{ lineHeight: 26 }}>{text}</Text>
</View>
</TouchableOpacity>
));

61
js/pages/FoodItemDetail.js
View file

@ -1,6 +1,6 @@
// @flow
import React, { Component } from 'react';
import { Picker, Text, View } from 'react-native';
import { Picker, View, TouchableHighlight } from 'react-native';
import theme from '../ui-theme';
import { NameAndPlace } from '../components/ItemTile';
import { type FoodItem } from '../records/FoodItemRecord';
@ -11,11 +11,18 @@ import IconButton from '../components/IconButton';
import { type Quantity, getQuantityText } from '../helpers/QuantityHelpers';
import Modal from '../components/Modal';
import { withFoodItem } from '../enhancers/foodItemEnhancers';
import { COLOR } from 'react-native-material-ui';
const QuantityText = pure(({ quantity }: { quantity: Quantity }) => (
<View style={{ flex: 1, alignItems: 'center', paddingTop: 20 }}>
<Text style={{ fontSize: 50, color: 'black', height: 100 }}>{getQuantityText(quantity)}</Text>
</View>
const QuantityText = pure(({ quantity, onPress }: { quantity: Quantity, style: Object }) => (
<TouchableHighlight style={{ flex: 1, flexDirection: 'row' }} onPress={onPress} underlayColor="pink">
<View style={{ flex: 1 }}>
<Picker selectedValue={quantity} onValueChange={this.toggleQuantityModal} style={{ flex: 1 }}>
{['none', 'few', 'alot', 'plenty'].map(quantity => (
<Picker.Item key={quantity} label={getQuantityText(quantity)} value={quantity} />
))}
</Picker>
</View>
</TouchableHighlight>
));
export class FoodItemDetail extends Component {
@ -46,8 +53,8 @@ export class FoodItemDetail extends Component {
render() {
const { foodItem } = this.props;
return (
<View style={theme.page.container}>
<View style={{ flex: 2 }}>
<View style={{ ...theme.page.container, backgroundColor: COLOR.grey300 }}>
<View style={{ flex: 3 }}>
<ImageBackdrop uri={foodItem.titleImage} />
<View style={{ position: 'absolute', bottom: 0, left: 0, flexDirection: 'row' }}>
{foodItem.images.map((imageURI, index) => {
@ -55,31 +62,25 @@ export class FoodItemDetail extends Component {
})}
</View>
</View>
<View style={{ flex: 3, paddingTop: 10, paddingLeft: 20, paddingRight: 20 }}>
<View style={{ flex: 1, marginBottom: 10, backgroundColor: 'white', paddingLeft: 20 }}>
<NameAndPlace name="Whole Foods Market" place="525 N. Lamar Blvd. Austin" />
<QuantityText quantity="many" />
<View style={{ flexDirection: 'row', paddingBottom: 20 }}>
<IconButton style={{ flex: 3 }} glyph="stars" text="Add to Faves" onPress={this.addToFaves} />
<IconButton
style={{ flex: 3 }}
glyph="mode-edit"
text="Update Amount"
onPress={this.updateAmount}
/>
<IconButton style={{ flex: 3 }} glyph="insert-photo" text="Add Photo" onPress={this.addPhoto} />
</View>
</View>
<Modal isVisible={this.state.quantityModalOpen}>
<Picker
selectedValue={foodItem.quantity}
onValueChange={this.toggleQuantityModal}
style={{ width: 250 }}
>
{['none', 'few', 'alot', 'plenty'].map(quantity => (
<Picker.Item key={quantity} label={getQuantityText(quantity)} value={quantity} />
))}
</Picker>
</Modal>
<View
style={{
flex: 1,
backgroundColor: 'white',
marginBottom: 10,
paddingLeft: 20,
paddingRight: 20,
}}
>
<QuantityText quantity="many" onPress={this.toggleQuantityModal} />
</View>
<View style={{ flex: 2, paddingBottom: 20, paddingTop: 10, backgroundColor: 'white', paddingLeft: 20 }}>
<IconButton glyph="stars" text="Add to Faves" onPress={this.addToFaves} />
<IconButton glyph="insert-photo" text="Add Photo" onPress={this.addPhoto} />
</View>
<Modal isVisible={this.state.quantityModalOpen} />
</View>
);
}