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

Update Profile Page and Pop-Up ProfileDelete

Browse Source
pull/20/head
Louison PARANT 1 year ago
parent 70d0808290
commit 554efde91b
5 changed files with 85 additions and 101 deletions
Show Stats Download Patch File Download Diff File

4
LeftOvers/App.tsx
Unescape View File

@ -12,8 +12,8 @@ import {LinearGradient} from 'expo-linear-gradient';
export default function App(props) { export default function App(props) {
return( return(
//<HomePage/> //<HomePage/>
<ModifyProfile/> //<ModifyProfile/>
//<Profiles/> <Profiles/>
//<RecipeSuggestion/> //<RecipeSuggestion/>
//<CreateProfile/> //<CreateProfile/>
//<FiltersSelection/> //<FiltersSelection/>

52
LeftOvers/components/ProfileDelete.tsx
Unescape View File

@ -22,7 +22,6 @@ export default function ProfileDelete(props: ProfileProps) {
}; };
let imageSource let imageSource
if (props.avatar == "plus.png"){ if (props.avatar == "plus.png"){
imageSource = require('../assets/images/plus.png') imageSource = require('../assets/images/plus.png')
} }
@ -39,7 +38,7 @@ export default function ProfileDelete(props: ProfileProps) {
<Image source={imageSource} style={styles.avatar}></Image> <Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text> <Text style={styles.text}>{props.name}</Text>
</View> </View>
<Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}> <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text> <Text style={styles.filters}>Filters</Text>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image> <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
@ -47,9 +46,8 @@ export default function ProfileDelete(props: ProfileProps) {
</Pressable> </Pressable>
<View style={{display: display}}> <View style={{display: display}}>
<ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect> <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect> <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: 10}}/>
</View> </View>
</View> </View>
); );
@ -57,69 +55,61 @@ export default function ProfileDelete(props: ProfileProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
//maxWidth: 370,
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 15, borderRadius: 15,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
padding: 10, padding: "3%",
marginHorizontal: 10, marginHorizontal: "3%",
height: "100%",
}, },
pseudoBar: { pseudoBar: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
flex: 0.7, width: "100%",
width: 330, marginHorizontal: "3%",
marginBottom: 10, marginBottom: "3%",
}, },
avatar: { avatar: {
padding: 20, padding: "5%",
resizeMode: 'contain', resizeMode: 'contain',
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
borderRadius: 45, borderRadius: 45,
height: "100%",
flex: 0.03,
}, },
text: { text: {
flex: 1,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
alignItems: 'center', alignItems: 'center',
justifyContent: 'left', textAlign: 'left',
flex: 0.8, marginLeft: "10%",
marginLeft: 20, padding: "2%",
padding: 5, height: "100%",
}, },
filterBar: { filterBar: {
flexDirection: "row", flexDirection: "row",
width: 300, width: "90%",
paddingTop: 10, paddingTop: "3%",
paddingBottom: 5,
alignItems: "flex-end", alignItems: "flex-end",
justifyContent: "center", justifyContent: "center",
flex: 0.2,
}, },
filters: { filters: {
flex: 0.5,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
flex: 1, flex: 1,
padding: 5, padding: "2%",
paddingLeft: 0, paddingLeft: 0,
paddingBottom: 0, paddingBottom: 0,
}, },
nbSelected: {
fontSize: 11,
flex: 1,
color: "#3F3C42",
textAlign: "right",
},
arrow: { arrow: {
height: 20, height: "100%",
width: 20,
resizeMode: 'contain', resizeMode: 'contain',
tintColor: "#3F3C42", tintColor: "#3F3C42",
flex: 0.1, flex: 0.1,

69
LeftOvers/components/ProfileDetails.tsx
Unescape View File

@ -40,22 +40,22 @@ export default function ProfileDetails(props: ProfileProps) {
<Image source={imageSource} style={styles.avatar}></Image> <Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text> <Text style={styles.text}>{props.name}</Text>
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image> <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
<Pressable onPress={props.onDeleteProfile}> <Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
<Image source={require("../assets/images/delete.png")} style={styles.delete}></Image> <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
</Pressable> </Pressable>
</View> </View>
<Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}> <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text> <Text style={styles.filters}>Filters</Text>
<Text style={styles.nbSelected}>3 selected</Text> <Text style={styles.nbSelected}>{props.diets.length} selected</Text>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image> <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
</View> </View>
</Pressable> </Pressable>
<View style={{display: display}}> <View style={{display: display, alignItems: "center", justifyContent: "center"}}>
<ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect> <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect> <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
</View> </View>
</View> </View>
); );
@ -63,72 +63,71 @@ export default function ProfileDetails(props: ProfileProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
//maxWidth: 370,
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 15, borderRadius: 15,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
padding: 10, padding: "3%",
marginHorizontal: 10, marginHorizontal: "3%",
}, },
pseudoBar: { pseudoBar: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
flex: 0.7, width: "100%",
width: 330, marginHorizontal: "3%",
marginBottom: 10, marginBottom: "3%",
}, },
avatar: { avatar: {
padding: 20, padding: "5%",
resizeMode: 'contain', resizeMode: 'contain',
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
borderRadius: 45, borderRadius: 45,
height: "100%",
flex: 0.03,
}, },
text: { text: {
flex: 1,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
alignItems: 'center', alignItems: 'center',
textAlign: 'left', textAlign: 'left',
flex: 0.8, marginLeft: "3%",
marginLeft: 20, padding: "2%",
padding: 5, height: "100%",
}, },
modify: { modify: {
height: 20, height: "100%",
width: 20,
tintColor: "#ACA279", tintColor: "#ACA279",
resizeMode: 'contain', resizeMode: 'contain',
flex: 0.05, flex: 0.1,
marginLeft: 15, marginLeft: "3%",
}, },
delete: { delete: {
height: 20, height: "100%",
width: 20, width: "100%",
tintColor: "#ACA279", tintColor: "#ACA279",
resizeMode: 'contain', resizeMode: 'contain',
flex: 0.05, flex: 1,
}, },
filterBar: { filterBar: {
flexDirection: "row", flexDirection: "row",
width: 300, width: "90%",
paddingTop: 10, paddingTop: "3%",
paddingBottom: 5, paddingBottom: "1%",
alignItems: "flex-end", alignItems: "flex-end",
justifyContent: "center", justifyContent: "center",
flex: 0.2, flex: 1,
}, },
filters: { filters: {
flex: 0.5,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
flex: 1, flex: 1,
padding: 5, padding: "2%",
paddingLeft: 0, paddingLeft: 0,
paddingBottom: 0, paddingBottom: 0,
}, },
@ -137,10 +136,10 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
color: "#3F3C42", color: "#3F3C42",
textAlign: "right", textAlign: "right",
marginRight: "3%",
}, },
arrow: { arrow: {
height: 20, height: "100%",
width: 20,
resizeMode: 'contain', resizeMode: 'contain',
tintColor: "#3F3C42", tintColor: "#3F3C42",
flex: 0.1, flex: 0.1,

1
LeftOvers/components/ProfileModification.tsx
Unescape View File

@ -74,7 +74,6 @@ const styles = StyleSheet.create({
flex: 0.04, flex: 0.04,
}, },
textInput: { textInput: {
flex: 0.9,
fontSize: 15, fontSize: 15,
color: '#ACA279', color: '#ACA279',
borderRadius: 10, borderRadius: 10,

60
LeftOvers/screens/Profiles.tsx
Unescape View File

@ -1,5 +1,5 @@
import {React, useState} from 'react'; import {React, useState} from 'react';
import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView} from 'react-native'; import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions} from 'react-native';
import ProfileDetails from '../components/ProfileDetails'; import ProfileDetails from '../components/ProfileDetails';
import ProfileDelete from '../components/ProfileDelete'; import ProfileDelete from '../components/ProfileDelete';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
@ -23,7 +23,7 @@ export default function Profiles(props) {
const [opacity, setOpacity] = useState(1); const [opacity, setOpacity] = useState(1);
const raisePopUp = () => { const raisePopUp = () => {
setVisible(true) setVisible(true)
setOpacity(0.4) setOpacity(0.3)
} }
const erasePopUp = () => { const erasePopUp = () => {
setVisible(false) setVisible(false)
@ -35,16 +35,15 @@ export default function Profiles(props) {
<ScrollView> <ScrollView>
<View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}> <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
<TopBar title="Profiles" isVisible="true"/> <TopBar title="Profiles" isVisible="true"/>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: 10}}/> <View style={styles.separator}/>
<ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails> <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/> <View style={styles.separator}/>
<ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails> <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/> <View style={styles.separator}/>
<ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails> <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/> <View style={styles.separator}/>
<ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails> <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/>
<View style={styles.modal}> <View style={styles.modal}>
<Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}> <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
<View style={styles.modal}> <View style={styles.modal}>
@ -57,13 +56,13 @@ export default function Profiles(props) {
<View style={styles.decisionBar}> <View style={styles.decisionBar}>
<Pressable onPress={erasePopUp} style={{flex:0.5}}> <Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.yesButton}> <View style={styles.yesButton}>
<Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: 30, width: 30, flex: 0.2, margin: 10}}/> <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
<Text style={styles.yesText}>Yes</Text> <Text style={styles.yesText}>Yes</Text>
</View> </View>
</Pressable> </Pressable>
<Pressable onPress={erasePopUp} style={{flex:0.5}}> <Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.noButton}> <View style={styles.noButton}>
<Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: 30, width: 30, flex: 0.2, margin: 10}}/> <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
<Text style={styles.noText}>No</Text> <Text style={styles.noText}>No</Text>
</View> </View>
</Pressable> </Pressable>
@ -73,6 +72,7 @@ export default function Profiles(props) {
</View> </View>
</Modal> </Modal>
</View> </View>
<View style={{marginBottom: "20%"}}/>
</LinearGradient> </LinearGradient>
</View> </View>
</ScrollView> </ScrollView>
@ -97,39 +97,37 @@ const styles = StyleSheet.create({
padding: 10, padding: 10,
paddingTop: 0, paddingTop: 0,
}, },
separator: {
marginTop: "6%"
},
modal: { modal: {
position: 'absolute', position: 'absolute',
top: '50%', top: '8%',
left: '50%',
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
width: "100%", width: "100%",
transform: [{ translateX: -207 }, { translateY: -140 }],
}, },
viewModal: { viewModal: {
flexDirection: "column", flexDirection: "column",
padding: 10, padding: "3%",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
width: "100%", width: "100%",
height: 200, flex: 1,
}, },
profileValidation: { profileValidation: {
width: "100%", width: "100%",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
paddingBottom: 20, marginBottom: "6%",
flex: 0.7,
}, },
decisionBarVertical: { decisionBarVertical: {
flexDirection: "column", flexDirection: "column",
width: "100%", width: "90%",
padding: 10, padding: "3%",
height: "100%",
borderRadius: 15, borderRadius: 15,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
@ -141,23 +139,21 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flex: 0.3, flex: 0.3,
padding: 5, marginBottom: "2%",
marginHorizontal: "2%",
}, },
decisionBar: { decisionBar: {
flexDirection: "row", flexDirection: "row",
flex: 0.7, flex: 0.7,
width: "100%", width: "100%",
height: "20%",
borderRadius: 15,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
backgroundColor: "#F2F0E4",
}, },
yesButton: { yesButton: {
flexDirection: "row", flexDirection: "row",
flex: 0.5, flex: 0.5,
padding: 10, padding: "2%",
marginHorizontal: 10, marginHorizontal: "5%",
width: "90%", width: "90%",
borderRadius: 20, borderRadius: 20,
alignItems: "center", alignItems: "center",
@ -170,13 +166,13 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flex: 0.7, flex: 0.7,
padding: 5, padding: "4%",
}, },
noButton: { noButton: {
flexDirection: "row", flexDirection: "row",
flex: 0.5, flex: 0.5,
padding: 10, padding: "2%",
marginHorizontal: 10, marginHorizontal: "5%",
width: "90%", width: "90%",
borderRadius: 20, borderRadius: 20,
alignItems: "center", alignItems: "center",
@ -189,6 +185,6 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flex: 0.7, flex: 0.7,
padding: 5, padding: "4%",
}, },
}); });
Write Preview
Loading…
Cancel
Save