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

fix: profiles page uses colorcontext
continuous-integration/drone/push Build is passing Details

Browse Source
pull/20/head
Rémi REGNAULT 1 year ago
parent 1ab6ce5f9d
commit fb5aacd48a
5 changed files with 342 additions and 330 deletions
Show Stats Download Patch File Download Diff File

1
LeftOvers/components/FoodElementText.tsx
Unescape View File

@ -4,7 +4,6 @@ import { StyleSheet,Pressable, Text, View } from 'react-native';
import ColorContext from '../theme/ColorContext'; import ColorContext from '../theme/ColorContext';
interface foodElementImageProps { interface foodElementImageProps {
title : string title : string
} }

142
LeftOvers/components/ListWithoutSelect.tsx
Unescape View File

@ -1,17 +1,85 @@
import React from 'react'; import React, { useContext } from 'react';
import {StyleSheet, Text, TextInput, View, Image, FlatList, Pressable} from 'react-native'; import {StyleSheet, Text, TextInput, View, Image, FlatList, Pressable} from 'react-native';
import ValidateButton from './ValidateButton'; import ValidateButton from './ValidateButton';
import HeaderFlatList from './HeaderFlatList'; import HeaderFlatList from './HeaderFlatList';
import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list' import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
import ColorContext from '../theme/ColorContext';
type ListProps = { type ListProps = {
title: string title: string
content : list<string> content: list<string>
} }
export default function ListWithoutSelect(props: ListProps) { export default function ListWithoutSelect(props: ListProps) {
const [selected, setSelected] = React.useState([]); const [selected, setSelected] = React.useState([]);
return ( const { colors, toggleColors } = useContext(ColorContext);
const styles = StyleSheet.create({
titleBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "stretch",
backgroundColor: colors.cardElementTitleBackground,
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
borderWidth: 2,
borderColor: colors.cardElementBorder,
minWidth: "92%",
maxWidth: "92%",
marginBottom: 0,
overflow: "hidden",
},
arrow: {
resizeMode: 'contain',
tintColor: colors.cardElementTitle,
flex: 0.1,
},
title: {
fontSize: 15,
color: colors.cardElementTitle,
alignItems: 'center',
textAlign: "left",
flex: 0.9,
},
itemList: {
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "stretch",
borderWidth: 0,
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderBottomRightRadius: 15,
borderBottomLeftRadius: 15,
backgroundColor: colors.cardElementBackground,
minWidth: "92%",
maxWidth: "92%",
},
itemCell: {
padding: 0,
paddingTop: "5%",
width: "100%",
minWidth: 250,
maxWidth: 250,
},
itemText: {
fontSize: 13,
textAlign: "left",
flex: 1,
padding: 5,
paddingLeft: 10,
color: "#3F3C42",
},
box: {
borderWidth: 0,
flex: 0,
}
});
return (
<MultipleSelectList <MultipleSelectList
data={props.content} data={props.content}
save="value" save="value"
@ -26,70 +94,6 @@ export default function ListWithoutSelect(props: ListProps) {
notFoundText="None" notFoundText="None"
placeholder={props.title} placeholder={props.title}
label={props.title}/> label={props.title}/>
); );
} }
const styles = StyleSheet.create({
titleBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "stretch",
backgroundColor: "#F2F0E4",
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
borderWidth: 2,
borderColor: "#ACA279",
minWidth: "92%",
maxWidth: "92%",
marginBottom: 0,
overflow: "hidden",
},
arrow: {
resizeMode: 'contain',
tintColor: "#3F3C42",
flex: 0.1,
},
title: {
fontSize: 15,
color: '#3F3C42',
alignItems: 'center',
textAlign: "left",
flex: 0.9,
},
itemList: {
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "stretch",
borderWidth: 0,
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderBottomRightRadius: 15,
borderBottomLeftRadius: 15,
backgroundColor: "#E3DEC9",
minWidth: "92%",
maxWidth: "92%",
},
itemCell: {
padding: 0,
paddingTop: "5%",
width: "100%",
minWidth: 250,
maxWidth: 250,
},
itemText: {
fontSize: 13,
textAlign: "left",
flex: 1,
padding: 5,
paddingLeft: 10,
color: "#3F3C42",
},
box: {
borderWidth: 0,
flex: 0,
}
});

261
LeftOvers/components/ProfileDetails.tsx
Unescape View File

@ -1,149 +1,152 @@
import React, { useState } from 'react'; import React, { useContext, useState } from 'react';
import { StyleSheet, Text, View, Image, Pressable } from 'react-native'; import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import ListWithoutSelect from './ListWithoutSelect'; import ListWithoutSelect from './ListWithoutSelect';
import ColorContext from '../theme/ColorContext';
type ProfileProps = { type ProfileProps = {
name: string name: string
avatar: string avatar: string
diets: string[] diets: string[]
allergies: string[] allergies: string[]
onDeleteProfile: () => void onDeleteProfile: () => void
} }
export default function ProfileDetails(props) { export default function ProfileDetails(props) {
const navigation = useNavigation() const { colors, toggleColors } = useContext(ColorContext)
const [display, setDisplay] = useState("none") const navigation = useNavigation()
const changeListVisibility = () => { const [display, setDisplay] = useState("none")
if (display == "none"){ const changeListVisibility = () => {
setDisplay("flex") if (display == "none"){
setDisplay("flex")
}
else{
setDisplay("none")
}
};
let imageSource
if (props.avatar === "plus.png"){
imageSource = require('../assets/images/plus.png')
}
else if (props.avatar === "plus_small.png"){
imageSource = require('../assets/images/plus_small.png')
} }
else{ else{
setDisplay("none") imageSource = require('../assets/images/logo.png')
} }
};
let imageSource const styles = StyleSheet.create({
background: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 15,
backgroundColor: colors.cardBackground,
padding: "3%",
marginHorizontal: "3%",
},
pseudoBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "100%",
marginHorizontal: "3%",
marginBottom: "3%",
},
avatar: {
padding: "5%",
resizeMode: 'contain',
borderWidth: 2,
borderColor: colors.cardElementBorder,
borderRadius: 45,
height: "100%",
flex: 0.03,
},
text: {
flex: 1,
fontSize: 20,
color: colors.cardElementBorder,
alignItems: 'center',
textAlign: 'left',
marginLeft: "3%",
padding: "2%",
height: "100%",
},
modify: {
height: "100%",
tintColor: colors.cardElementBorder,
resizeMode: 'contain',
flex: 0.1,
marginLeft: "3%",
},
delete: {
height: "100%",
width: "100%",
tintColor: colors.cardElementBorder,
resizeMode: 'contain',
flex: 1,
},
if (props.avatar === "plus.png"){ filterBar: {
imageSource = require('../assets/images/plus.png') flexDirection: "row",
} width: "85%",
else if (props.avatar === "plus_small.png"){ paddingTop: "3%",
imageSource = require('../assets/images/plus_small.png') paddingBottom: "1%",
} alignItems: "flex-end",
else{ justifyContent: "center",
imageSource = require('../assets/images/logo.png') flex: 1,
} },
filters: {
fontSize: 20,
color: colors.cardElementBorder,
flex: 1,
padding: "2%",
paddingLeft: 0,
paddingBottom: 0,
},
nbSelected: {
fontSize: 11,
flex: 1,
color: colors.cardDetail,
textAlign: "right",
marginRight: "3%",
},
arrow: {
height: "100%",
resizeMode: 'contain',
tintColor: colors.cardDetail,
flex: 0.1,
},
});
return ( return (
<View style={styles.background}> <View style={styles.background}>
<View style={styles.pseudoBar}> <View style={styles.pseudoBar}>
<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} style={{flex: 0.1, marginLeft: "1%",}}> <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>
</View>
<Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text>
<Text style={styles.nbSelected}>{props.diets.length} selected</Text>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
</View>
</Pressable> </Pressable>
</View> <View style={{display: display === 'flex' ? 'flex' : 'none', alignItems: "center", justifyContent: "center"}}>
<Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}> <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
<View style={styles.filterBar}> <View style={{marginTop: "3%"}}/>
<Text style={styles.filters}>Filters</Text> <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<Text style={styles.nbSelected}>{props.diets.length} selected</Text> <View style={{marginTop: "3%"}}/>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
</View> </View>
</Pressable>
<View style={{display: display === 'flex' ? 'flex' : 'none', alignItems: "center", justifyContent: "center"}}>
<ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
<View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: "3%"}}/>
</View> </View>
</View> );
);
} }
const styles = StyleSheet.create({
background: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 15,
backgroundColor: '#F2F0E4',
padding: "3%",
marginHorizontal: "3%",
},
pseudoBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "100%",
marginHorizontal: "3%",
marginBottom: "3%",
},
avatar: {
padding: "5%",
resizeMode: 'contain',
borderWidth: 2,
borderColor: "#ACA279",
borderRadius: 45,
height: "100%",
flex: 0.03,
},
text: {
flex: 1,
fontSize: 20,
color: '#ACA279',
alignItems: 'center',
textAlign: 'left',
marginLeft: "3%",
padding: "2%",
height: "100%",
},
modify: {
height: "100%",
tintColor: "#ACA279",
resizeMode: 'contain',
flex: 0.1,
marginLeft: "3%",
},
delete: {
height: "100%",
width: "100%",
tintColor: "#ACA279",
resizeMode: 'contain',
flex: 1,
},
filterBar: {
flexDirection: "row",
width: "85%",
paddingTop: "3%",
paddingBottom: "1%",
alignItems: "flex-end",
justifyContent: "center",
flex: 1,
},
filters: {
fontSize: 20,
color: '#ACA279',
flex: 1,
padding: "2%",
paddingLeft: 0,
paddingBottom: 0,
},
nbSelected: {
fontSize: 11,
flex: 1,
color: "#3F3C42",
textAlign: "right",
marginRight: "3%",
},
arrow: {
height: "100%",
resizeMode: 'contain',
tintColor: "#3F3C42",
flex: 0.1,
},
});

259
LeftOvers/screens/Profiles.tsx
Unescape View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useContext, useState } from 'react';
import { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native'; import { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient'; import { LinearGradient } from 'expo-linear-gradient';
@ -6,36 +6,148 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
import ProfileDetails from '../components/ProfileDetails'; import ProfileDetails from '../components/ProfileDetails';
import ProfileDelete from '../components/ProfileDelete'; import ProfileDelete from '../components/ProfileDelete';
import ColorContext from '../theme/ColorContext';
export default function Profiles({navigation, props}) { export default function Profiles({navigation, props}) {
const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] const { colors, toggleColors } = useContext(ColorContext)
const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
const allJackie = [{value: "Tomato"}, {value: "Relic"}] const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}] const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
const allGoro = [] const allJackie = [{value: "Tomato"}, {value: "Relic"}]
const dieGoro = [{value: "Pescatarian"}] const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}]
const allViktor = [{value: "Pasta"}, {value: "Fish"}] const allGoro = []
const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}] const dieGoro = [{value: "Pescatarian"}]
const [visible, setVisible] = useState(false); const allViktor = [{value: "Pasta"}, {value: "Fish"}]
const [opacity, setOpacity] = useState(1); const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}]
const raisePopUp = () => {
const [visible, setVisible] = useState(false);
const [opacity, setOpacity] = useState(1);
const raisePopUp = () => {
setVisible(true) setVisible(true)
setOpacity(0.3) setOpacity(0.3)
} }
const erasePopUp = () => { const erasePopUp = () => {
setVisible(false) setVisible(false)
setOpacity(1) setOpacity(1)
} }
const styles = StyleSheet.create({
container: {
height: "100%",
width: "100%",
flex: 1,
backgroundColor: '#3F3C42',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
},
linearGradient: {
height: "100%",
width: "100%",
flex: 1,
padding: 10,
paddingTop: 0,
},
separator: {
marginTop: "6%"
},
modal: {
position: 'absolute',
top: '8%',
justifyContent: "center",
alignItems: "center",
width: "100%",
},
viewModal: {
flexDirection: "column",
padding: "3%",
alignItems: "center",
justifyContent: "center",
width: "100%",
flex: 1,
},
profileValidation: {
width: "100%",
alignItems: "center",
justifyContent: "center",
marginBottom: "6%",
flex: 0.7,
},
decisionBarVertical: {
flexDirection: "column",
width: "90%",
padding: "3%",
borderRadius: 15,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#F2F0E4",
},
validationQuestion: {
fontSize: 20,
color: '#ACA279',
alignItems: 'center',
justifyContent: 'center',
flex: 0.3,
marginBottom: "2%",
marginHorizontal: "2%",
},
decisionBar: {
flexDirection: "row",
flex: 0.7,
width: "100%",
alignItems: "center",
justifyContent: "center",
},
yesButton: {
flexDirection: "row",
flex: 0.5,
padding: "2%",
marginHorizontal: "5%",
width: "90%",
borderRadius: 20,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#59BDCD",
},
yesText: {
fontSize: 20,
color: '#3F3C42',
alignItems: 'center',
justifyContent: 'center',
flex: 0.7,
padding: "4%",
},
noButton: {
flexDirection: "row",
flex: 0.5,
padding: "2%",
marginHorizontal: "5%",
width: "90%",
borderRadius: 20,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#8A0000",
},
noText: {
fontSize: 20,
color: '#F2F0E4',
alignItems: 'center',
justifyContent: 'center',
flex: 0.7,
padding: "4%",
},
});
return ( return (
<SafeAreaProvider style={{flex: 1}}> <SafeAreaProvider style={{flex: 1}}>
<ScrollView> <ScrollView>
<View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}> <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1}}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}> <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={styles.separator}/> <View style={styles.separator}/>
<ProfileDetails <ProfileDetails
name="Johnny Silverhand" name="Johnny Silverhand"
@ -97,114 +209,5 @@ export default function Profiles({navigation, props}) {
</View> </View>
</ScrollView> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
const styles = StyleSheet.create({
container: {
height: "100%",
width: "100%",
flex: 1,
backgroundColor: '#3F3C42',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
},
linearGradient: {
height: "100%",
width: "100%",
flex: 1,
padding: 10,
paddingTop: 0,
},
separator: {
marginTop: "6%"
},
modal: {
position: 'absolute',
top: '8%',
justifyContent: "center",
alignItems: "center",
width: "100%",
},
viewModal: {
flexDirection: "column",
padding: "3%",
alignItems: "center",
justifyContent: "center",
width: "100%",
flex: 1,
},
profileValidation: {
width: "100%",
alignItems: "center",
justifyContent: "center",
marginBottom: "6%",
flex: 0.7,
},
decisionBarVertical: {
flexDirection: "column",
width: "90%",
padding: "3%",
borderRadius: 15,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#F2F0E4",
},
validationQuestion: {
fontSize: 20,
color: '#ACA279',
alignItems: 'center',
justifyContent: 'center',
flex: 0.3,
marginBottom: "2%",
marginHorizontal: "2%",
},
decisionBar: {
flexDirection: "row",
flex: 0.7,
width: "100%",
alignItems: "center",
justifyContent: "center",
},
yesButton: {
flexDirection: "row",
flex: 0.5,
padding: "2%",
marginHorizontal: "5%",
width: "90%",
borderRadius: 20,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#59BDCD",
},
yesText: {
fontSize: 20,
color: '#3F3C42',
alignItems: 'center',
justifyContent: 'center',
flex: 0.7,
padding: "4%",
},
noButton: {
flexDirection: "row",
flex: 0.5,
padding: "2%",
marginHorizontal: "5%",
width: "90%",
borderRadius: 20,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#8A0000",
},
noText: {
fontSize: 20,
color: '#F2F0E4',
alignItems: 'center',
justifyContent: 'center',
flex: 0.7,
padding: "4%",
},
});

5
LeftOvers/theme/colors.ts
Unescape View File

@ -19,7 +19,8 @@ export interface Theme {
cardElementBackground: string, cardElementBackground: string,
cardElementText: string, cardElementText: string,
cardElementBorder: string, cardElementBorder: string,
cardElementTitle: string cardElementTitle: string,
cardElementTitleBackground: string,
ingredientBackground: string, ingredientBackground: string,
ingredientContent: string, ingredientContent: string,
ingredientBorder: string, ingredientBorder: string,
@ -42,6 +43,7 @@ export const LightTheme : Theme = {
cardElementText: Jet, cardElementText: Jet,
cardElementBorder: Ecru, cardElementBorder: Ecru,
cardElementTitle: Jet, cardElementTitle: Jet,
cardElementTitleBackground: Alabaster,
ingredientBackground: Pearl, ingredientBackground: Pearl,
ingredientBorder: EerieBlack, ingredientBorder: EerieBlack,
ingredientContent: Jet, ingredientContent: Jet,
@ -64,6 +66,7 @@ export const DarkTheme : Theme = {
cardElementText: Jet, cardElementText: Jet,
cardElementTitle: Alabaster, cardElementTitle: Alabaster,
cardElementBorder: SteelBlue, cardElementBorder: SteelBlue,
cardElementTitleBackground: CarolinaBlue,
ingredientBackground: EerieBlack, ingredientBackground: EerieBlack,
ingredientBorder: SteelBlue, ingredientBorder: SteelBlue,
ingredientContent: Alabaster, ingredientContent: Alabaster,

Write Preview
Loading…
Cancel
Save