From 6b0565bf943d7bdc111fafad832a03b4ab6386e7 Mon Sep 17 00:00:00 2001 From: Louison PARANT Date: Tue, 28 Nov 2023 14:47:14 +0100 Subject: [PATCH] Update Ingredient Selection Page (Need merge) --- LeftOvers/App.tsx | 8 +- LeftOvers/assets/images/fruit_icon.png | Bin 0 -> 941 bytes LeftOvers/assets/images/meat_icon.png | Bin 0 -> 1126 bytes LeftOvers/assets/images/vegetable_icon.png | Bin 0 -> 939 bytes LeftOvers/components/RecipeElement.tsx | 2 +- LeftOvers/components/RecipeElementReduce.tsx | 74 +++--- LeftOvers/screens/IngredientSelection.tsx | 233 ++++++++++--------- LeftOvers/screens/RecipeDetails.tsx | 103 +++++--- LeftOvers/screens/RecipeSuggestion.tsx | 6 +- 9 files changed, 234 insertions(+), 192 deletions(-) create mode 100644 LeftOvers/assets/images/fruit_icon.png create mode 100644 LeftOvers/assets/images/meat_icon.png create mode 100644 LeftOvers/assets/images/vegetable_icon.png diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 359a60c..7ddde4d 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -6,7 +6,8 @@ import ModifyProfile from './screens/ModifyProfile'; import CreateProfile from './screens/CreateProfile'; import FiltersSelection from './screens/FiltersSelection'; import RecipeSuggestion from './screens/RecipeSuggestion'; -import RecipeDetail from './screens/RecipeSuggestion'; +import RecipeDetails from './screens/RecipeDetails'; +import IngredientSelection from './screens/IngredientSelection'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import {LinearGradient} from 'expo-linear-gradient'; @@ -17,7 +18,8 @@ export default function App(props) { // // // - - // + // + // + ); } \ No newline at end of file diff --git a/LeftOvers/assets/images/fruit_icon.png b/LeftOvers/assets/images/fruit_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..4b20059b4751e7e0b07c740fadc953baf9d0f871 GIT binary patch literal 941 zcmV;e15*5nP)9Rx^y^QI?NLUKY{TR1j-cPGjTF>m?yAEnv|{? z>o$9*AIk=t*x28UX6|&W{ci8}PY5$WDYeQG-GBkW$n5BA9cF8rDlk4)5pfq70(n9t z{H%XmoK4b4FbnRT(f|+w_Ps{>db?Qu%0BfF@X)PWSQ+Mq-S8xJ9?XF7Px!a+I#?5u zO_>IT;7u63TCXC&r=b*UVeZP{tvoN#@b~a{7(S+NHp}e?KG%exZ^xqeL@eA-NV_;N z>+Mc!2MwHO9~kIQ)CDs_Yu#tSdNPfVlsQD7Gaq2$z4X2QrMn9wcOMPRX@1Tg*X*Y3 zSiLXr%bBQn1@$yN2y>!TEca69YIiQtI+hvGp(w0^JrR2v5syT~IQ*wboVVUn#Sp#} z8`rW0=GA2H{nCeWg9lK-^cw6kVzYhS3a9CwXt~-_O78Y(c!YC6Vx2v#U0q!?;eW_& zvS1$@&mw(f6XQwg0l6byp;neCB&5)Jw$XAy-PEa`f_kqu40$C)Q);Q)cwVTja*Y9wvJDK(yYvLIP;*C}5yP?Ww5rb~w$Po+npk|0Ojq-1*`-$( zn~2qznCn9P1r`WN%iZy`e0SHob(ZHd5)33|E&-!yIZnwKdpGrBayV`OygYyqd3>b@kh4vTq4FhoH)s3Z4oO~ z{J0eBZHXT5a2z@L<|MV=wYv+xdzZ+NlAJD;GBU>*xeWnC9wvW}T8r91l0m->ix$?? zsy15B^W|?!7ov))!iIJwSOaSb6P}IB#XX(3Cxxm8NqdzPt!gUsu#*|BzityE)s=U* z$WV}R1#-PwUXGE^6YC0ARbFnK_)+qB1Jb{tt?$;dNpL>WwZBDE)FmK9d|Ta3G=^A{|;~40J|*)ExHeRt{|##c_<-mp>J43zhC@JxTvRl^>N}FbbxV P00000NkvXXu0mjf`H89k literal 0 HcmV?d00001 diff --git a/LeftOvers/assets/images/meat_icon.png b/LeftOvers/assets/images/meat_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3eafc6317fc8bfacbff6120ff6753a9b24d12965 GIT binary patch literal 1126 zcmV-s1eyDZP)-zh;M!`4aGCbNc0X!q5JSo^z0Gr9HArSNd z=!P`C-FbD|gC#}H1J#aDH@Q5#*05r&R{{A3Enw7+6P4~e~y3#8lZXIbcBUc<#Yhcf_Ki3LWU|Qh(iMWJ3we>DGS4D?uq%as7Te7N<+e1;b3R? zqy>wD|95dzC!&Vk%<&u{mVRHr0w-5zhYh84Jyot$^cLgo&XQT;%Q)eQle-6=5Bbn**ULuWsRGAS$W;R zN8FZ>CDt`B!#}q&!S6X{l#~!JZa7y@g<)`yRPlk)=xZJp-5MvdpEQ=-voS$ea$_dA zZ}p44xKyTr*&79SCck(asUj}$*@3a9k#LinH zlH}9-vUdVJGCGZiFqQvuSzz%N=Kx)u*Q#Tkc#sTpkumiNa8{6l2P3c`FL&RxNnwFA zetQ|qeyl+~wQi3s#`q5AyW6>>#59S( zi9=9+3~+jAzsVqa?{FmRZMFxv(TeolzP$`ci)*%JUP=x;k%O&5KB%CtlkpQ++tkh_ z+#(&vhk`98i6+dDV6@Q}(8sdgTBQ4KY>e5OxX(KmwQF{B-YNiSeTi<5-R+ho%g}8% zY%t5+eMmAl60{U<{q?B|MJ4M zK!?r)iO43orEcT_mG1u#Vc)e@wh$_w!?NUKe$iUOB03vgM|z=Q@)K;gaE7@q>ShiDV@vp)R{MBOKjiT0T$W zJ`Jl()M-9M9Ma!*Pu^zj@!N6k8`{rz-&7t2K6!|=SsXHDRi{51q(8*qr~O&{uoAe4 zA4jX4DU|Q?_xzDD)XMzI|H9+BUxrS;0!L&sK}}S;KmY&$07*qoM6N<$g7*dvEC2ui literal 0 HcmV?d00001 diff --git a/LeftOvers/assets/images/vegetable_icon.png b/LeftOvers/assets/images/vegetable_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..2295c99393f273d88a05a45002ac095cfec4302a GIT binary patch literal 939 zcmV;c162HpP)BzcpMjPj`~u-6Za}Jw?gWSJct-r_8Cl7^s{iZlM>6AChTR>HCm??tuKw) z6){)6-aTC56#~}r`F2{7-Zk{PUD5KvxfkSOwB`CAc;A+C89Nc|H-Hy!~0 z)_LEQsCKMIBeejE_&R}-)LHb0cdP+$6tgKCTlctmV1;TgJIp@R!Y`p4KGc^ZsA7JJ zvQ#wS#?(EHwOTPL)mWHNqe;lfPb(lHez*I^nKweTzy=QkFO~>w- zN{Z@?j`!EM^IG4n1%jh5+tB`plIZy0oi4p*%3-a;h33Zrmx?JVGE*mx8E?t~CTgX? zQNkHC?3}50N1gQxJ!SAB`X#Swk2SyU2hy45VS$#-2G8MsNJ{+`J4v zJP=g5(<_pQ%}iOdVU6d;)%>jIemz(}vl9tF14k*pG3G@Ln81@N3Y_P{t?R^XKj3Eb zTU|Hqvmo9IYk5+1&(hf%>?Qc;2RD-5z=zHZ^B!BMindngNNWpx>4}>S^l76naNQa< zYmX%MEB}PV{rsWTap)Jz7f!h;p}#n?uZ$FjqTWlW2g08Wcv__E{RKfLl&rr9rZ)fp N002ovPDHLkV1l3ht}g%p literal 0 HcmV?d00001 diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx index 096b1f3..e839ece 100644 --- a/LeftOvers/components/RecipeElement.tsx +++ b/LeftOvers/components/RecipeElement.tsx @@ -78,7 +78,7 @@ const styles = StyleSheet.create({ borderRadius: 40, borderWidth: 2, padding: "5%", - borderColor: '#3F3C42', + borderColor: '#73692A', alignItems: 'center', justifyContent: "center", }, diff --git a/LeftOvers/components/RecipeElementReduce.tsx b/LeftOvers/components/RecipeElementReduce.tsx index e61a9bc..b952ff9 100644 --- a/LeftOvers/components/RecipeElementReduce.tsx +++ b/LeftOvers/components/RecipeElementReduce.tsx @@ -8,24 +8,21 @@ interface recipeElementReduceProps { number : number title : string image : string - duree : string + duration : string } - - -export default function RecipeElementReduce(props : any) { +export default function RecipeElementReduce(props: recipeElementReduceProps) { return ( - + {props.number} {props.title} - - - - {props.duree} - + + + + {props.duration} - + ); } @@ -37,48 +34,39 @@ const styles = StyleSheet.create({ width : 250, height: 250, borderRadius: 40, - elevation: 3, backgroundColor: '#E3DEC9', }, text: { - fontSize: 14, - lineHeight: 21, + fontSize: 15, fontWeight: 'bold', - letterSpacing: 0.25, color: '#756C28', - marginTop: 10, + marginTop: "4%", + zIndex: 2 }, smallText: { - position: 'absolute', - textAlign: 'center', - left: 0, - right: 0, - marginHorizontal: 'auto', - color: '#E3DEC9', - + position: "absolute", + fontSize: 12, + color: '#F2F0E4', + textAlign: "center", + margin : "2%", + zIndex: 2, + fontWeight: "bold", + top: "89.25%" }, title:{ - fontSize: 18, - lineHeight: 21, - fontWeight: 'bold', - letterSpacing: 0.25, - color: '#524B1A', + fontSize: 18, + fontWeight: 'bold', + color: '#524B1A', + zIndex: 2 }, view: { - width : 240, - height: 240, - borderRadius: 40, - elevation: 3, - borderWidth: 2, - borderColor: 'grey', - alignItems: 'center', // Centre le contenu verticalement - display: "flex", - flexWrap: "wrap", + width : "95%", + height: "95%", + borderRadius: 40, + borderWidth: 2, + padding: "5%", + borderColor: '#73692A', + alignItems: 'center', + justifyContent: "center", }, - horizontalAlignement: { - display: "flex", - flexDirection : 'row', - alignItems: 'center', - marginTop: 10, - } }); \ No newline at end of file diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx index 99fd407..d609883 100644 --- a/LeftOvers/screens/IngredientSelection.tsx +++ b/LeftOvers/screens/IngredientSelection.tsx @@ -1,144 +1,147 @@ import React from 'react'; -import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native'; +import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import TopBar from '../components/TopBar'; +import {LinearGradient} from 'expo-linear-gradient'; import {Searchbar} from 'react-native-paper'; -import brochette from '../assets/images/brochette.png'; +import brochette from '../assets/images/brochette.png'; import FoodElementText from '../components/FoodElementText'; import CustomButton from '../components/CustomButton'; export default function IngredientSelection() { - const [searchQuery, setSearchQuery] = React.useState(''); - const onChangeSearch = query => setSearchQuery(query); return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - Available + - - - - - - - - - - - - - + + + + Available + + + + + + + + + + + + + + + + + + + + + + + + - + + - - - - - - - - - - - - - - + + + + + ); } const styles = StyleSheet.create({ - page: { - flex: 1, - backgroundColor: '#59BDCD', - alignItems: 'center', - display: 'flex', - flexWrap: 'wrap', - padding: 20, - }, + linearGradient: { + width: "100%", + flex: 1, + padding: "2%", + paddingTop: 0, + alignItems: "center", + justifyContent: "center" + }, + element: { - backgroundColor:'#F2F0E4', - borderRadius: 30, + width: "100%", + backgroundColor:'#F2F0E4', + borderRadius: 25, }, - horizontalAlignement: { + horizontalAlignment: { display: 'flex', height: 30, width: 350, diff --git a/LeftOvers/screens/RecipeDetails.tsx b/LeftOvers/screens/RecipeDetails.tsx index 2b51f33..33a44f2 100644 --- a/LeftOvers/screens/RecipeDetails.tsx +++ b/LeftOvers/screens/RecipeDetails.tsx @@ -1,44 +1,93 @@ import React from 'react'; -import { View, StyleSheet} from 'react-native'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; +import {View, StyleSheet, ScrollView, useWindowDimensions, Text} from 'react-native'; +import {SafeAreaProvider } from 'react-native-safe-area-context'; +import {LinearGradient} from 'expo-linear-gradient'; import TopBar from '../components/TopBar'; import RecipeElementReduce from '../components/RecipeElementReduce'; - +import ListWithoutSelect from '../components/ListWithoutSelect'; +import ValidateButton from '../components/ValidateButton'; export default function RecipeDetails(props) { + const ing = [{value: "Chocolate"}, {value: "Milk"}, {value: "Eggs"}, {value: "Flour"}] + const ute = [{value: "Spoon (3cl)"}, {value: "Whisk"}, {value: "Oven"}] + const ste = [ + {value: "1. Break the eggs and whisk them. Add the flour."}, + {value: "2. Melt the chocolate in the microwave. Add it to the eggs."}, + {value: "3. Put the cake in the oven. 40 minutes, 180 degrees."}, + {value: "4. Clean the utensils."} + ] + return ( - - - + + + + + + + + + Preparation + + + + + + + + + + Cooking + + + + + + + ); } const styles = StyleSheet.create({ - page: { - flex: 1, - backgroundColor: '#59BDCD', - alignItems: 'center', - display: 'flex', - flexWrap: 'wrap', - padding: 20, + linearGradient: { + width: "100%", + flex: 1, + alignItems: "center", + justifyContent: "flex-start" + }, + separator: { + marginTop: "6%", + }, + + background: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 20, + backgroundColor: '#F2F0E4', + padding: "3%", + marginHorizontal: "3%", + }, + + filterBar: { + flexDirection: "row", + width: "85%", + paddingTop: "3%", + paddingBottom: "2%", + alignItems: "flex-end", + justifyContent: "center", + }, + filters: { + fontSize: 20, + color: '#ACA279', + flex: 1, }, - element: { - marginTop: 20, + nbSelected: { + fontSize: 11, + color: "#3F3C42", + textAlign: "right", }, - horizontalAlignement: { - display: 'flex', - height: 30, - width: 350, - flexDirection: 'row', - justifyContent: 'space-around', - alignItems: 'center', - marginTop: 10, - } }); \ No newline at end of file diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index e190c6b..9d1d25b 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -21,7 +21,7 @@ import minus from '../assets/images/minus.png'; export default function RecipeSuggestion(props) { - const [visible, setVisible] = React.useState(true); + const [visible, setVisible] = React.useState(false); const [visibleFilters, setVisibleFilters] = React.useState(false); const [visibleIngredients, setVisibleIngredients] = React.useState(true); const [minCpt, setMinCpt] = useState(0); @@ -149,8 +149,8 @@ export default function RecipeSuggestion(props) { - - + +