From dfcd60cdb477df34c61e4afa13d87cdf0442cb6b Mon Sep 17 00:00:00 2001 From: Louison PARANT Date: Fri, 1 Dec 2023 15:26:54 +0100 Subject: [PATCH] Navigation Modification --- LeftOvers/App.tsx | 2 +- LeftOvers/app.json | 2 +- .../components/FoodElementTextSimple.tsx | 64 ++++----- LeftOvers/components/ParameterTopBar.tsx | 7 +- LeftOvers/components/ProfileElement.tsx | 4 +- LeftOvers/components/RecipeElement.tsx | 125 ++++++++++-------- LeftOvers/components/SelectedIngredient.tsx | 65 ++++----- LeftOvers/navigation/BottomBar.tsx | 2 +- LeftOvers/navigation/HomeStackScreen.tsx | 40 +++++- LeftOvers/navigation/ProfileStackScreen.tsx | 1 - LeftOvers/screens/FiltersSelection.tsx | 19 +-- LeftOvers/screens/HomePage.tsx | 6 +- LeftOvers/screens/IngredientSelection.tsx | 2 +- LeftOvers/screens/RecipeSuggestion.tsx | 71 ++++------ LeftOvers/theme/colors.ts | 3 + 15 files changed, 230 insertions(+), 183 deletions(-) diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 9ef8c57..d59933d 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -19,7 +19,7 @@ export default function App() { }> - + diff --git a/LeftOvers/app.json b/LeftOvers/app.json index d30dfec..abefe7d 100644 --- a/LeftOvers/app.json +++ b/LeftOvers/app.json @@ -10,7 +10,7 @@ "splash": { "image": "./assets/images/splash.png", "resizeMode": "contain", - "backgroundColor": "#57BDCC" + "backgroundColor": "#57BDCD" }, "updates": { "fallbackToCacheTimeout": 0 diff --git a/LeftOvers/components/FoodElementTextSimple.tsx b/LeftOvers/components/FoodElementTextSimple.tsx index 6d9993f..5dc738c 100644 --- a/LeftOvers/components/FoodElementTextSimple.tsx +++ b/LeftOvers/components/FoodElementTextSimple.tsx @@ -1,12 +1,42 @@ -import React from 'react'; +import React, {useContext} from 'react'; import {StyleSheet,Pressable, Text, View} from 'react-native'; +import ColorContext from '../theme/ColorContext'; interface FoodElementTextSimpleProps { title: string } - export default function FoodElementTextSimple(props: FoodElementTextSimpleProps) { + const {colors} = useContext(ColorContext) + + const styles = StyleSheet.create({ + button: { + alignItems: 'center', + justifyContent: 'center', + width: "80%", + borderRadius: 5, + backgroundColor: colors.ingredientBackground, + }, + text: { + fontSize: 10, + fontWeight: 'bold', + padding : "2%", + color: colors.cardDetail, + }, + view: { + alignItems: 'flex-start', + justifyContent: 'center', + }, + container: { + width: "100%", + borderRadius: 5, + borderWidth: 1, + borderColor: colors.foodElementBorder, + flexDirection: 'column', + justifyContent: 'center', + }, + }); + return ( @@ -16,32 +46,4 @@ export default function FoodElementTextSimple(props: FoodElementTextSimpleProps) ); -} - -const styles = StyleSheet.create({ - button: { - alignItems: 'center', - justifyContent: 'center', - width: "80%", - borderRadius: 5, - backgroundColor: '#E3DEC9', - }, - text: { - fontSize: 10, - fontWeight: 'bold', - padding : "2%", - color: 'black', - }, - view: { - alignItems: 'flex-start', - justifyContent: 'center', - }, - container: { - width: "100%", - borderRadius: 5, - borderWidth: 1, - borderColor: '#3F3C42', - flexDirection: 'column', - justifyContent: 'center', - }, -}); +} \ No newline at end of file diff --git a/LeftOvers/components/ParameterTopBar.tsx b/LeftOvers/components/ParameterTopBar.tsx index 603ddb7..ae1007b 100644 --- a/LeftOvers/components/ParameterTopBar.tsx +++ b/LeftOvers/components/ParameterTopBar.tsx @@ -1,5 +1,6 @@ -import React from 'react'; +import React, {useContext} from 'react'; import { Appbar } from 'react-native-paper'; +import ColorContext from '../theme/ColorContext'; interface ParameterTopBarProps{ onEventIngredient: () => void @@ -10,8 +11,10 @@ interface ParameterTopBarProps{ export default function ParameterTopBar(props : ParameterTopBarProps) { + const {colors} = useContext(ColorContext) + return ( - + diff --git a/LeftOvers/components/ProfileElement.tsx b/LeftOvers/components/ProfileElement.tsx index 25b9383..6f65fd9 100644 --- a/LeftOvers/components/ProfileElement.tsx +++ b/LeftOvers/components/ProfileElement.tsx @@ -95,12 +95,12 @@ export default function ProfileElement(props : Profile) { waiting: { borderWidth: 1, borderRadius: 20, - borderColor: "#ACA279", + borderColor: colors.cardElementBorder, padding: "1%", }, textWaiting: { fontSize: 10, - color: "#ACA279", + color: colors.cardElementBorder, }, }); diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx index 86c1570..2a37a42 100644 --- a/LeftOvers/components/RecipeElement.tsx +++ b/LeftOvers/components/RecipeElement.tsx @@ -1,24 +1,86 @@ -import React from 'react'; +import React, {useContext} from 'react'; import {StyleSheet, Pressable, Text, View, Image, ScrollView} from 'react-native'; import brochette from '../assets/images/brochette.png'; import Union_left from '../assets/images/Union_left.png'; import Union_right from '../assets/images/Union_right.png'; -import background from '../assets/images/Background.png'; +import background from '../assets/images/Background.png'; +import ColorContext from '../theme/ColorContext'; interface RecipeElementProps { number: string title: string textList: {title: string}[] description: string + duration: string + navigateDetails: () => void } export default function RecipeElement(props: RecipeElementProps) { + const {colors} = useContext(ColorContext) + + const styles = StyleSheet.create({ + button: { + alignItems: 'center', + justifyContent: 'center', + width: 300, + height: "90%", + borderRadius: 40, + backgroundColor: colors.recipeElementBackground, + }, + text: { + fontSize: 15, + fontWeight: 'bold', + color: '#6F6532', + marginTop: "4%", + }, + smallText: { + fontSize: 12, + color: '#71662A', + textAlign: "center", + margin : "2%", + zIndex: 2, + }, + duration:{ + fontSize: 12, + color: '#F2F0E4', + textAlign: "center", + margin : "2%", + zIndex: 2, + }, + title:{ + fontSize: 18, + fontWeight: 'bold', + color: '#524B1A', + }, + view: { + width : "95%", + height: "96.5%", + borderRadius: 40, + borderWidth: 2, + padding: "5%", + borderColor: '#6F6532', + alignItems: 'center', + justifyContent: "center", + }, + horizontalAlignment: { + display: "flex", + flexDirection : 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginTop : "2%", + flexWrap: 'wrap', + }, + scrollViewContainer: { + flex: 1, + }, + }); + return ( - + {props.number} {props.title} - + Ingredients @@ -39,58 +101,9 @@ export default function RecipeElement(props: RecipeElementProps) { {props.description} - + + {props.duration} ); -} - - -const styles = StyleSheet.create({ - button: { - alignItems: 'center', - justifyContent: 'center', - width: 300, - height: "90%", - borderRadius: 40, - backgroundColor: '#E3DEC9', - }, - text: { - fontSize: 15, - fontWeight: 'bold', - color: '#756C28', - marginTop: "4%", - }, - smallText: { - fontSize: 12, - color: '#71662A', - textAlign: "center", - margin : "2%" - }, - title:{ - fontSize: 18, - fontWeight: 'bold', - color: '#524B1A', - }, - view: { - width : "95%", - height: "96.5%", - borderRadius: 40, - borderWidth: 2, - padding: "5%", - borderColor: '#73692A', - alignItems: 'center', - justifyContent: "center", - }, - horizontalAlignment: { - display: "flex", - flexDirection : 'row', - alignItems: 'center', - justifyContent: 'space-between', - marginTop : "2%", - flexWrap: 'wrap', - }, - scrollViewContainer: { - flex: 1, - }, -}); \ No newline at end of file +} \ No newline at end of file diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx index d23dd6d..ac5dfe4 100644 --- a/LeftOvers/components/SelectedIngredient.tsx +++ b/LeftOvers/components/SelectedIngredient.tsx @@ -1,9 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; import {View, StyleSheet, Pressable, Image, Text} from 'react-native'; import bracketLeft from '../assets/images/angle_bracket_left.png'; import bracketRight from '../assets/images/angle_bracket_right.png'; import parameter from '../assets/images/parameter.png'; import FoodElementText from './FoodElementText'; +import ColorContext from '../theme/ColorContext'; interface SelectedIngredientProps { ingredientList: {title: string}[] @@ -12,6 +13,7 @@ interface SelectedIngredientProps { export default function SelectedIngredient(props: SelectedIngredientProps) { const [cpt, setCpt] = useState(0); + const {colors} = useContext(ColorContext) const decreaseCounter = () => { if(cpt > 0){ @@ -30,50 +32,51 @@ export default function SelectedIngredient(props: SelectedIngredientProps) { } }; + const styles = StyleSheet.create({ + view: { + width: "90%", + paddingBottom: "5%", + borderRadius: 15, + borderWidth: 1, + borderColor: colors.blocBorder, + backgroundColor: colors.buttonBackground, + alignItems: "center", + justifyContent: "center", + }, + horizontalAlignment: { + width: "90%", + flexDirection: 'row', + justifyContent: 'space-evenly', + alignItems: 'center', + marginTop: "3%", + }, + text: { + fontSize: 15, + fontWeight: 'bold', + color: colors.cardDetail, + flex: 1, + marginLeft: "8%", + }, + }); + return ( Selected ingredients - + - + - + ); -} - -const styles = StyleSheet.create({ - view: { - width: "90%", - paddingBottom: "5%", - borderRadius: 15, - borderColor: '#3F3C42', - backgroundColor: '#E3DEC9', - alignItems: "center", - justifyContent: "center", - }, - horizontalAlignment: { - width: "90%", - flexDirection: 'row', - justifyContent: 'space-evenly', - alignItems: 'center', - marginTop: "3%", - }, - text: { - fontSize: 15, - fontWeight: 'bold', - color: '#3F3C42', - flex: 1, - marginLeft: "8%", - }, -}); +} \ No newline at end of file diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx index 94b02cc..c2484bf 100644 --- a/LeftOvers/navigation/BottomBar.tsx +++ b/LeftOvers/navigation/BottomBar.tsx @@ -82,7 +82,7 @@ export default function BottomBar({ state, descriptors, navigation }) { let icon; if (route.name === 'HOME') { icon = HomeIcon; - } else if (route.name === 'PROFILE') { + } else if (route.name === 'PROFILES') { icon = ProfileIcon; } else if (route.name === 'COOKING') { icon = CookingIcon; diff --git a/LeftOvers/navigation/HomeStackScreen.tsx b/LeftOvers/navigation/HomeStackScreen.tsx index a8cc86f..28078c0 100644 --- a/LeftOvers/navigation/HomeStackScreen.tsx +++ b/LeftOvers/navigation/HomeStackScreen.tsx @@ -9,6 +9,10 @@ import ColorContext from '../theme/ColorContext'; import { HeaderTitle } from './Utils'; import appLogo from '../assets/images/logo.png'; +import IngredientSelection from '../screens/IngredientSelection'; +import RecipeSuggestion from '../screens/RecipeSuggestion'; +import FiltersSelection from '../screens/FiltersSelection'; +import RecipeDetails from '../screens/RecipeDetails'; const HomeStack = createNativeStackNavigator() @@ -56,12 +60,42 @@ export default function HomeStackScreen() { }} /> ( - + + ) + }} + /> + ( + + ) + }} + /> + ( + + ) + }} + /> + ( + ) }} /> diff --git a/LeftOvers/navigation/ProfileStackScreen.tsx b/LeftOvers/navigation/ProfileStackScreen.tsx index 2d6c455..b1c1e4e 100644 --- a/LeftOvers/navigation/ProfileStackScreen.tsx +++ b/LeftOvers/navigation/ProfileStackScreen.tsx @@ -36,7 +36,6 @@ export default function ProfilesStackScreen({ navigation }) { const _handleSearch = () => { console.log('Searching'); - navigation.navigate('ProfileModification') } const _handleHeaderAdd = () => navigation.navigate('ProfileCreation'); diff --git a/LeftOvers/screens/FiltersSelection.tsx b/LeftOvers/screens/FiltersSelection.tsx index 4a65841..de27c95 100644 --- a/LeftOvers/screens/FiltersSelection.tsx +++ b/LeftOvers/screens/FiltersSelection.tsx @@ -65,7 +65,7 @@ export default function FiltersSelection(props) { alignItems: 'center', justifyContent: 'center', borderRadius: 20, - backgroundColor: '#F2F0E4', + backgroundColor: colors.cardBackground, padding: "3%", marginHorizontal: "3%", borderWidth: 1, @@ -82,12 +82,12 @@ export default function FiltersSelection(props) { }, filters: { fontSize: 20, - color: '#ACA279', + color: colors.cardElementBorder, flex: 1, }, nbSelected: { fontSize: 11, - color: "#3F3C42", + color: colors.cardDetail, textAlign: "right", }, @@ -95,7 +95,7 @@ export default function FiltersSelection(props) { alignItems: 'center', justifyContent: 'center', borderRadius: 20, - backgroundColor: '#F2F0E4', + backgroundColor: colors.cardBackground, marginHorizontal: "3%", paddingBottom: "3%", borderWidth: 1, @@ -103,11 +103,12 @@ export default function FiltersSelection(props) { }, }); + const goBack = () => props.navigation.goBack(); + return ( - - + @@ -117,7 +118,7 @@ export default function FiltersSelection(props) { - console.log("change selected profile")}> + console.log("change selected profile")}> @@ -138,10 +139,10 @@ export default function FiltersSelection(props) { - console.log("add allergy")}> + props.navigation.navigate("IngredientSelection")}> - console.log("save filters")}> + diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx index 1b73cb1..b8041d7 100644 --- a/LeftOvers/screens/HomePage.tsx +++ b/LeftOvers/screens/HomePage.tsx @@ -155,6 +155,8 @@ export default function HomePage({ navigation, props }) { + navigation.navigate('FiltersSelection')}/> + navigation.navigate('Profiles')}/> @@ -184,9 +186,9 @@ export default function HomePage({ navigation, props }) { - console.log('Chnge Selected Ingredient')}/> + navigation.navigate('IngredientSelection')}/> - console.log('Go and search for recipe')}/> + navigation.navigate('RecipeSuggestion')}/> diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx index 8c60eeb..e119482 100644 --- a/LeftOvers/screens/IngredientSelection.tsx +++ b/LeftOvers/screens/IngredientSelection.tsx @@ -258,7 +258,7 @@ const loadIngredients = async () => { - + props.navigation.navigate("RecipeSuggestion")}/> diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index 92a7247..921782d 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -29,7 +29,7 @@ export default function RecipeSuggestion(props) { const ingredientListV2 = [{title: "Smoked Salmon"}, {title: "Tomato"}, {title: "Carrot"}] const limitedList = ingredientList.slice(minCpt, maxCpt); const [colorIngredients, setColorIngredients] = useState("#59BDCD"); - const [colorFilters, setColorFilters] = useState("#3F3C42"); + const [colorFilters, setColorFilters] = useState(colors.cardDetail); const die = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Gluten free"}, {value: "Porkless"}] const all = [] @@ -50,12 +50,12 @@ export default function RecipeSuggestion(props) { setVisibleIngredients(false); setVisibleFilters(true); setColorFilters("#59BDCD") - setColorIngredients("#3F3C42") + setColorIngredients(colors.cardDetail) } const handleChildEventGoIngredients = () => { setVisibleFilters(false); setVisibleIngredients(true); - setColorFilters("#3F3C42") + setColorFilters(colors.cardDetail) setColorIngredients("#59BDCD") } @@ -81,14 +81,6 @@ export default function RecipeSuggestion(props) { } } - const imageElements = limitedList.map((source, index) => ( - - - - - - )); - const styles = StyleSheet.create({ linearGradient: { width: "100%", @@ -104,7 +96,7 @@ export default function RecipeSuggestion(props) { alignItems: 'center', justifyContent: 'center', borderRadius: 20, - backgroundColor: '#F2F0E4', + backgroundColor: colors.cardBackground, padding: "3%", marginHorizontal: "3%", borderWidth: 1, @@ -121,32 +113,15 @@ export default function RecipeSuggestion(props) { }, filters: { fontSize: 20, - color: '#ACA279', + color: colors.cardElementBorder, flex: 1, }, nbSelected: { fontSize: 11, - color: "#3F3C42", + color: colors.cardDetail, textAlign: "right", }, - page: { - flex: 1, - backgroundColor: '#59BDCD', - alignItems: 'center', - paddingHorizontal: "3%", - }, - - modal :{ - position: 'absolute', - top: '50%', - height: "50%", - width: "100%", - borderWidth: 1, - borderColor: "red", - borderTopLeftRadius: 20, - borderTopRightRadius: 20, - }, horizontalAlignment: { display: 'flex', height: "10%", @@ -164,12 +139,21 @@ export default function RecipeSuggestion(props) { }, }); + const ingredientElements = limitedList.map((source, index) => ( + + + + + + )); + + const goDetails = () => props.navigation.navigate("RecipeDetails") + return ( - - + + description="Delicious stick with 4 meats. Accessible for beginners. 20 min or less to cook." + duration="17 min" + navigateDetails={goDetails}/> + description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more." + duration="1h and a half"/> @@ -196,15 +183,15 @@ export default function RecipeSuggestion(props) { {visibleIngredients &&( - - {imageElements} - + + {ingredientElements} + - + - + @@ -212,7 +199,7 @@ export default function RecipeSuggestion(props) { )} {visibleFilters &&( - + @@ -223,7 +210,7 @@ export default function RecipeSuggestion(props) { - + props.navigation.navigate("IngredientSelection")}> diff --git a/LeftOvers/theme/colors.ts b/LeftOvers/theme/colors.ts index 46eb4f6..63a73a9 100644 --- a/LeftOvers/theme/colors.ts +++ b/LeftOvers/theme/colors.ts @@ -38,6 +38,7 @@ export interface Theme { letterFilter: string, foodElementBorder: string, badgeText: string, + recipeElementBackground: string, } export const LightTheme : Theme = { @@ -68,6 +69,7 @@ export const LightTheme : Theme = { letterFilter: Moonstone, foodElementBorder: Jet, badgeText: Jet, + recipeElementBackground: Pearl, } export const DarkTheme : Theme = { @@ -98,5 +100,6 @@ export const DarkTheme : Theme = { letterFilter: CarolinaBlue, foodElementBorder: CarolinaBlue, badgeText: Alabaster, + recipeElementBackground: Ecru, }