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';
interface foodElementImageProps {
title : string
}

56
LeftOvers/components/ListWithoutSelect.tsx
Unescape View File

@ -1,46 +1,31 @@
import React from 'react';
import React, { useContext } from 'react';
import {StyleSheet, Text, TextInput, View, Image, FlatList, Pressable} from 'react-native';
import ValidateButton from './ValidateButton';
import HeaderFlatList from './HeaderFlatList';
import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
import ColorContext from '../theme/ColorContext';
type ListProps = {
title: string
content : list<string>
content: list<string>
}
export default function ListWithoutSelect(props: ListProps) {
const [selected, setSelected] = React.useState([]);
return (
<MultipleSelectList
data={props.content}
save="value"
search={false}
arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
boxStyles={styles.titleBar}
inputStyles={styles.title}
dropdownStyles={styles.itemList}
dropdownItemStyles={styles.itemCell}
dropdownTextStyles={styles.itemText}
checkBoxStyles={styles.box}
notFoundText="None"
placeholder={props.title}
label={props.title}/>
);
}
const { colors, toggleColors } = useContext(ColorContext);
const styles = StyleSheet.create({
const styles = StyleSheet.create({
titleBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "stretch",
backgroundColor: "#F2F0E4",
backgroundColor: colors.cardElementTitleBackground,
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
borderWidth: 2,
borderColor: "#ACA279",
borderColor: colors.cardElementBorder,
minWidth: "92%",
maxWidth: "92%",
marginBottom: 0,
@ -48,12 +33,12 @@ const styles = StyleSheet.create({
},
arrow: {
resizeMode: 'contain',
tintColor: "#3F3C42",
tintColor: colors.cardElementTitle,
flex: 0.1,
},
title: {
fontSize: 15,
color: '#3F3C42',
color: colors.cardElementTitle,
alignItems: 'center',
textAlign: "left",
flex: 0.9,
@ -68,7 +53,7 @@ const styles = StyleSheet.create({
borderTopLeftRadius: 0,
borderBottomRightRadius: 15,
borderBottomLeftRadius: 15,
backgroundColor: "#E3DEC9",
backgroundColor: colors.cardElementBackground,
minWidth: "92%",
maxWidth: "92%",
},
@ -92,4 +77,23 @@ const styles = StyleSheet.create({
borderWidth: 0,
flex: 0,
}
});
});
return (
<MultipleSelectList
data={props.content}
save="value"
search={false}
arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
boxStyles={styles.titleBar}
inputStyles={styles.title}
dropdownStyles={styles.itemList}
dropdownItemStyles={styles.itemCell}
dropdownTextStyles={styles.itemText}
checkBoxStyles={styles.box}
notFoundText="None"
placeholder={props.title}
label={props.title}/>
);
}

79
LeftOvers/components/ProfileDetails.tsx
Unescape View File

@ -1,8 +1,9 @@
import React, { useState } from 'react';
import React, { useContext, useState } from 'react';
import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import ListWithoutSelect from './ListWithoutSelect';
import ColorContext from '../theme/ColorContext';
type ProfileProps = {
name: string
@ -13,6 +14,7 @@ type ProfileProps = {
}
export default function ProfileDetails(props) {
const { colors, toggleColors } = useContext(ColorContext)
const navigation = useNavigation()
const [display, setDisplay] = useState("none")
const changeListVisibility = () => {
@ -36,40 +38,13 @@ export default function ProfileDetails(props) {
imageSource = require('../assets/images/logo.png')
}
return (
<View style={styles.background}>
<View style={styles.pseudoBar}>
<Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
<Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
<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>
<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>
);
}
const styles = StyleSheet.create({
const styles = StyleSheet.create({
background: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 15,
backgroundColor: '#F2F0E4',
backgroundColor: colors.cardBackground,
padding: "3%",
marginHorizontal: "3%",
},
@ -86,7 +61,7 @@ const styles = StyleSheet.create({
padding: "5%",
resizeMode: 'contain',
borderWidth: 2,
borderColor: "#ACA279",
borderColor: colors.cardElementBorder,
borderRadius: 45,
height: "100%",
flex: 0.03,
@ -94,7 +69,7 @@ const styles = StyleSheet.create({
text: {
flex: 1,
fontSize: 20,
color: '#ACA279',
color: colors.cardElementBorder,
alignItems: 'center',
textAlign: 'left',
marginLeft: "3%",
@ -103,7 +78,7 @@ const styles = StyleSheet.create({
},
modify: {
height: "100%",
tintColor: "#ACA279",
tintColor: colors.cardElementBorder,
resizeMode: 'contain',
flex: 0.1,
marginLeft: "3%",
@ -111,7 +86,7 @@ const styles = StyleSheet.create({
delete: {
height: "100%",
width: "100%",
tintColor: "#ACA279",
tintColor: colors.cardElementBorder,
resizeMode: 'contain',
flex: 1,
},
@ -127,7 +102,7 @@ const styles = StyleSheet.create({
},
filters: {
fontSize: 20,
color: '#ACA279',
color: colors.cardElementBorder,
flex: 1,
padding: "2%",
paddingLeft: 0,
@ -136,14 +111,42 @@ const styles = StyleSheet.create({
nbSelected: {
fontSize: 11,
flex: 1,
color: "#3F3C42",
color: colors.cardDetail,
textAlign: "right",
marginRight: "3%",
},
arrow: {
height: "100%",
resizeMode: 'contain',
tintColor: "#3F3C42",
tintColor: colors.cardDetail,
flex: 0.1,
},
});
});
return (
<View style={styles.background}>
<View style={styles.pseudoBar}>
<Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
<Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
<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>
<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>
);
}

147
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 { LinearGradient } from 'expo-linear-gradient';
@ -6,8 +6,11 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
import ProfileDetails from '../components/ProfileDetails';
import ProfileDelete from '../components/ProfileDelete';
import ColorContext from '../theme/ColorContext';
export default function Profiles({navigation, props}) {
const { colors, toggleColors } = useContext(ColorContext)
const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
@ -31,76 +34,7 @@ export default function Profiles({navigation, props}) {
setOpacity(1)
}
return (
<SafeAreaProvider style={{flex: 1}}>
<ScrollView>
<View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={styles.separator}/>
<ProfileDetails
name="Johnny Silverhand"
avatar="plus_small.png"
diets={dieJohnny}
allergies={allJohnny}
onDeleteProfile={raisePopUp}/>
<View style={styles.separator}/>
<ProfileDetails
name="Jackie Welles"
avatar="plus_small.png"
diets={dieJackie}
allergies={allJackie}
onDeleteProfile={raisePopUp} />
<View style={styles.separator}/>
<ProfileDetails
name="Goro Takemura"
avatar="plus_small.png"
diets={dieGoro}
allergies={allGoro}
onDeleteProfile={raisePopUp} />
<View style={styles.separator}/>
<ProfileDetails
name="Viktor Vector"
avatar="plus_small.png"
diets={dieViktor}
allergies={allViktor}
onDeleteProfile={raisePopUp} />
<View style={styles.modal}>
<Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
<View style={styles.modal}>
<View style={styles.viewModal}>
<View style={styles.profileValidation}>
<ProfileDelete name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDelete>
</View>
<View style={styles.decisionBarVertical}>
<Text style={styles.validationQuestion}>Do you really want to delete this profile?</Text>
<View style={styles.decisionBar}>
<Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.yesButton}>
<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>
</View>
</Pressable>
<Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.noButton}>
<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>
</View>
</Pressable>
</View>
</View>
</View>
</View>
</Modal>
</View>
<View style={{marginBottom: "20%"}}/>
</LinearGradient>
</View>
</ScrollView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
height: "100%",
width: "100%",
@ -207,4 +141,73 @@ const styles = StyleSheet.create({
flex: 0.7,
padding: "4%",
},
});
});
return (
<SafeAreaProvider style={{flex: 1}}>
<ScrollView>
<View style={{opacity: opacity, height: "100%", width: "100%", flex: 1}}>
<LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={styles.separator}/>
<ProfileDetails
name="Johnny Silverhand"
avatar="plus_small.png"
diets={dieJohnny}
allergies={allJohnny}
onDeleteProfile={raisePopUp}/>
<View style={styles.separator}/>
<ProfileDetails
name="Jackie Welles"
avatar="plus_small.png"
diets={dieJackie}
allergies={allJackie}
onDeleteProfile={raisePopUp} />
<View style={styles.separator}/>
<ProfileDetails
name="Goro Takemura"
avatar="plus_small.png"
diets={dieGoro}
allergies={allGoro}
onDeleteProfile={raisePopUp} />
<View style={styles.separator}/>
<ProfileDetails
name="Viktor Vector"
avatar="plus_small.png"
diets={dieViktor}
allergies={allViktor}
onDeleteProfile={raisePopUp} />
<View style={styles.modal}>
<Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
<View style={styles.modal}>
<View style={styles.viewModal}>
<View style={styles.profileValidation}>
<ProfileDelete name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDelete>
</View>
<View style={styles.decisionBarVertical}>
<Text style={styles.validationQuestion}>Do you really want to delete this profile?</Text>
<View style={styles.decisionBar}>
<Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.yesButton}>
<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>
</View>
</Pressable>
<Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.noButton}>
<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>
</View>
</Pressable>
</View>
</View>
</View>
</View>
</Modal>
</View>
<View style={{marginBottom: "20%"}}/>
</LinearGradient>
</View>
</ScrollView>
</SafeAreaProvider>
);
}

5
LeftOvers/theme/colors.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save