Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish Update Views

Browse Source
pull/20/head
Louison PARANT 1 year ago
parent 6b0565bf94
commit a78889c246
3 changed files with 97 additions and 113 deletions
Show Stats Download Patch File Download Diff File

2
LeftOvers/components/FoodElementText.tsx
Unescape View File

@ -35,7 +35,7 @@ const styles = StyleSheet.create({
lineHeight: 20, lineHeight: 20,
fontWeight: 'bold', fontWeight: 'bold',
padding : "3%", padding : "3%",
color: 'black', color: '#3F3C42',
}, },
view: { view: {
alignItems: 'flex-start', alignItems: 'flex-start',

202
LeftOvers/screens/IngredientSelection.tsx
Unescape View File

@ -2,124 +2,106 @@ import React from 'react';
import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native'; import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context'; import {SafeAreaProvider} from 'react-native-safe-area-context';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
import {LinearGradient} from 'expo-linear-gradient';
import {Searchbar} from 'react-native-paper'; import {Searchbar} from 'react-native-paper';
import {LinearGradient} from 'expo-linear-gradient';
import brochette from '../assets/images/brochette.png'; import brochette from '../assets/images/brochette.png';
import FoodElementText from '../components/FoodElementText'; import FoodElementText from '../components/FoodElementText';
import CustomButton from '../components/CustomButton'; import CustomButton from '../components/CustomButton';
import plus from '../assets/images/plus_small.png';
import minus from '../assets/images/minus.png';
import meat from '../assets/images/meat_icon.png';
import vegetable from '../assets/images/vegetable_icon.png';
import fruit from '../assets/images/fruit_icon.png';
export default function IngredientSelection() { export default function IngredientSelection(props) {
const [searchQuery, setSearchQuery] = React.useState(''); const [searchQuery, setSearchQuery] = React.useState('');
const onChangeSearch = query => setSearchQuery(query); const onChangeSearch = query => setSearchQuery(query);
const ingredientList = [{title: "Steak"}, {title: "Sheep Ribs"}, {title: "Rabbit Thigh"}, {title: "Ham"}, {title: "Cream (Liquid)"}, {title: "Pepper Bell"}]
const availableList = [{title: "Tomato"}, {title: "Lemon"}, {title: "Strawberry"}, {title: "Rice"}, {title: "Flour"}]
type ItemProps = {value: string}
const AvailableItem = ({value}: any) => (
<>
<View style={styles.horizontalAlignment}>
<FoodElementText title={value.title}/>
<Pressable>
<Image source={plus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
</Pressable>
</View>
<View style={{height: 20}}/>
</>
)
const ChooseItem = ({value}: any) => (
<>
<View style={styles.horizontalAlignment}>
<FoodElementText title={value.title}/>
<Pressable>
<Image source={minus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
</Pressable>
</View>
<View style={{height: 20}}/>
</>
)
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<TopBar title="Ingredient selection"/> <TopBar title="Ingredient selection"/>
<ScrollView> <ScrollView>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: "6%"}}/> <View style={{marginTop: "6%"}}/>
<View style={styles.element}> <View style={styles.element}>
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}> <View style={[styles.horizontalAlignment, {justifyContent: 'center'}]}>
<Pressable> <Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} /> <Image source={meat} style={{width: 30, height: 30, resizeMode: "contain"}}/>
</Pressable> </Pressable>
<Pressable> <View style={{marginHorizontal: "1%"}}/>
<Image source={brochette} style={{ width: 40, height: 40 }} /> <Pressable>
</Pressable> <Image source={vegetable} style={{width: 30, height: 30, resizeMode: "contain"}}/>
<Pressable> </Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} /> <View style={{marginHorizontal: "1%"}}/>
</Pressable> <Pressable>
<Pressable> <Image source={fruit} style={{width: 30, height: 30, resizeMode: "contain"}}/>
<Image source={brochette} style={{ width: 40, height: 40 }} /> </Pressable>
</Pressable> </View>
</View> <View>
<View> <Searchbar
<Searchbar placeholder="Search"
placeholder="Search" onChangeText={onChangeSearch}
onChangeText={onChangeSearch} value={searchQuery}
value={searchQuery} style={{margin: "3%",
style={{margin: 10, backgroundColor: '#F2F0E4',
backgroundColor: '#F2F0E4', borderWidth : 1,
borderWidth : 1, borderColor: "#ACA279",
borderColor: "#ACA279", borderRadius: 15,
borderRadius: 15, }}/>
height: 50, </View>
}}/> <View style={{flex: 1}}>
</View> <ScrollView>
<View style={{ flex: 1}} > {ingredientList.map((title, index) => (
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}> <AvailableItem key={index} value={title}></AvailableItem>
))}
<View style={styles.horizontalAlignment}> </ScrollView>
<FoodElementText title="test" /> </View>
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View> </View>
<View style={{marginTop: "6%"}}/>
<View style={[styles.element, {marginTop: 40}]}> <View style={styles.element}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: 10}]}>
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text> <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
</View> </View>
<View style={{flex: 1}}>
<View style={{ height: 5 }}></View> <ScrollView>
{availableList.map((title, index) => (
<View style={{ flex: 1}} > <ChooseItem key={index} value={title}></ChooseItem>
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}> ))}
<View style={styles.horizontalAlignment}> </ScrollView>
<FoodElementText title="test" /> </View>
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View> </View>
<View style={{marginTop: "8%"}}></View>
<View style={{ height: 15 }}></View>
<CustomButton title="Find a recipe"/> <CustomButton title="Find a recipe"/>
<View style={{marginBottom: "20%"}}></View>
</LinearGradient> </LinearGradient>
</ScrollView> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
@ -127,27 +109,25 @@ export default function IngredientSelection() {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
linearGradient: { linearGradient: {
width: "100%", width: "100%",
flex: 1, flex: 1,
padding: "2%", padding: "3%",
paddingTop: 0, paddingTop: 0,
alignItems: "center", alignItems: "center",
justifyContent: "center" justifyContent: "flex-start",
}, },
element: { element: {
width: "100%", width: "100%",
backgroundColor:'#F2F0E4', backgroundColor:'#F2F0E4',
borderRadius: 25, borderRadius: 30,
}, },
horizontalAlignment: { horizontalAlignment: {
display: 'flex', width: "100%",
height: 30,
width: 350,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-around', justifyContent: 'space-around',
alignItems: 'center', alignItems: 'center',
marginTop: 15, marginTop: "3%",
} }
}); });

4
tsconfig.json
Unescape View File

@ -0,0 +1,4 @@
{
"compilerOptions": {},
"extends": "expo/tsconfig.base"
}
Write Preview
Loading…
Cancel
Save