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

fix: home page is now using colorContext
continuous-integration/drone/push Build is passing Details

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

34
LeftOvers/components/FoodElementText.tsx
Unescape View File

@ -1,6 +1,7 @@
import React from 'react';
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
import Separator from '../components/Separator';
import React, { useContext } from 'react';
import { StyleSheet,Pressable, Text, View } from 'react-native';
import ColorContext from '../theme/ColorContext';
@ -10,16 +11,7 @@ interface foodElementImageProps {
export default function FoodElementText(props : any) {
return (
<Pressable style={styles.button}>
<View style={styles.container}>
<View style={styles.view}>
<Text style={styles.text}>{props.title}</Text>
</View>
</View>
</Pressable>
);
}
const {colors, toggleColors } = useContext(ColorContext)
const styles = StyleSheet.create({
button: {
@ -27,13 +19,13 @@ const styles = StyleSheet.create({
justifyContent: 'center',
width: "80%",
borderRadius: 5,
backgroundColor: '#E3DEC9',
backgroundColor: colors.carrouselBackground,
},
text: {
fontSize: 10,
fontWeight: 'bold',
padding : "2%",
color: 'black',
color: colors.cardDetail,
},
view: {
alignItems: 'flex-start',
@ -43,8 +35,18 @@ const styles = StyleSheet.create({
width: "100%",
borderRadius: 5,
borderWidth: 1,
borderColor: '#3F3C42',
borderColor: colors.cardDetail,
flexDirection: 'column',
justifyContent: 'center',
},
});
return (
<Pressable style={styles.button}>
<View style={styles.container}>
<View style={styles.view}>
<Text style={styles.text}>{props.title}</Text>
</View>
</View>
</Pressable>
);
}

55
LeftOvers/components/ProfileElement.tsx
Unescape View File

@ -1,5 +1,6 @@
import React, { useState } from 'react';
import React, { useContext, useState } from 'react';
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
import ColorContext from '../theme/ColorContext';
type Profile = {
name: string
@ -9,6 +10,8 @@ type Profile = {
}
export default function ProfileElement(props : Profile) {
const { colors, toggleColors } = useContext(ColorContext)
const [waiting, setWaiting] = useState("none")
const [separator, setSeparator] = useState("none")
const changeStatus = () => {
@ -44,27 +47,6 @@ export default function ProfileElement(props : Profile) {
imageSource = require('../assets/images/logo.png')
}
return (
<Pressable onPress={changeStatus} style={styles.button}>
<View>
<View style={styles.pseudoBar}>
<Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
</View>
<View style={styles.pseudoBar}>
<View style={[styles.active, {display: props.isActive}]}>
<Text style={styles.textActive}>Activated</Text>
</View>
<View style={{flex: 0.3, display: separator}}/>
<View style={[styles.waiting, {display: waiting}]}>
<Text style={styles.textWaiting}>Waiting...</Text>
</View>
</View>
</View>
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
@ -85,14 +67,14 @@ const styles = StyleSheet.create({
padding: "5%",
resizeMode: 'contain',
borderWidth: 2,
borderColor: "#ACA279",
borderColor: colors.carrouselText,
borderRadius: 45,
height: "100%",
flex: 0.01,
},
text: {
fontSize: 15,
color: '#ACA279',
color: colors.carrouselText,
alignItems: 'center',
textAlign: 'left',
flex: 0.9,
@ -103,12 +85,12 @@ const styles = StyleSheet.create({
active: {
borderWidth: 1,
borderRadius: 20,
borderColor: "#59BDCD",
borderColor: colors.carrouselDetail,
padding: "1%",
},
textActive: {
fontSize: 10,
color: "#59BDCD",
color: colors.carrouselDetail,
},
waiting: {
@ -122,3 +104,24 @@ const styles = StyleSheet.create({
color: "#ACA279",
},
});
return (
<Pressable onPress={changeStatus} style={styles.button}>
<View>
<View style={styles.pseudoBar}>
<Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
</View>
<View style={styles.pseudoBar}>
<View style={[styles.active, {display: props.isActive}]}>
<Text style={styles.textActive}>Activated</Text>
</View>
<View style={{flex: 0.3, display: separator}}/>
<View style={[styles.waiting, {display: waiting}]}>
<Text style={styles.textWaiting}>Waiting...</Text>
</View>
</View>
</View>
</Pressable>
);
}

41
LeftOvers/components/ProfileSelection.tsx
Unescape View File

@ -1,8 +1,11 @@
import {React, useState} from 'react';
import {View, StyleSheet, Pressable, Image, Text} from 'react-native';
import React, { useContext, useState } from 'react';
import {View, StyleSheet, Pressable, Image} from 'react-native';
import ProfileElement from './ProfileElement'
import ColorContext from '../theme/ColorContext';
import bracketLeft from '../assets/images/angle_bracket_left.png';
import bracketRight from '../assets/images/angle_bracket_right.png';
import ProfileElement from './ProfileElement'
type ProfileSelectionProps = {
listProfile: Profile[]
@ -16,6 +19,8 @@ type Profile = {
}
export default function ProfileSelection(props: ProfileSelectionProps) {
const { colors, toggleColors } = useContext(ColorContext);
const [cpt, setCpt] = useState(0);
const decreaseCounter = () => {
if (cpt > 0) {
@ -34,29 +39,29 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
}
};
return (
<View style={styles.background}>
<Pressable onPress={decreaseCounter}>
<Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}}/>
</Pressable>
<ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
<Pressable onPress={increaseCounter}>
<Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}}/>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
background: {
width: "92%",
height: 80,
borderRadius: 20,
borderWidth: 2,
borderColor: '#ACA279',
backgroundColor: '#E3DEC9',
borderColor: colors.carrouselText,
backgroundColor: colors.carrouselBackground,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
});
return (
<View style={styles.background}>
<Pressable onPress={decreaseCounter}>
<Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
</Pressable>
<ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
<Pressable onPress={increaseCounter}>
<Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
</Pressable>
</View>
);
}

18
LeftOvers/screens/HomePage.tsx
Unescape View File

@ -112,9 +112,9 @@ export default function HomePage({ navigation, props }) {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#E3DEC9',
backgroundColor: colors.carrouselBackground,
borderWidth: 2,
borderColor: "#ACA279",
borderColor: colors.carrouselText,
padding: "2%"
}
});
@ -143,7 +143,7 @@ export default function HomePage({ navigation, props }) {
<View style={{marginTop: "3%"}}/>
<ProfileSelection listProfile={profiles} disableSelection={true}/>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
<ValidateButton title="Modify Profiles" image="parameter.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('Profiles')}/>
</View>
<View style={styles.separator}/>
<View style={styles.profilesSelection}>
@ -151,7 +151,7 @@ export default function HomePage({ navigation, props }) {
<Text style={styles.filters}>Ingredient Stocks</Text>
</View>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log('ManageStocks')}/>
<ValidateButton title="Manage Stocks" image="warehouse.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => console.log('ManageStocks')}/>
</View>
<View style={styles.separator}/>
<View style={styles.profilesSelection}>
@ -160,21 +160,21 @@ export default function HomePage({ navigation, props }) {
</View>
<View style={{marginTop: "3%"}}/>
<View style={styles.ingredientSelection}>
<Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
<Text style={{fontSize: 15, color: colors.carrouselText}}>Selected Ingredient</Text>
<View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
<Pressable onPress={decreaseCounter}>
<Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
<Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
</Pressable>
<FoodElementText title={ingredientList[cpt].title}/>
<Pressable onPress={increaseCounter}>
<Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
<Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText} />
</Pressable>
</View>
</View>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
<ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Chnge Selected Ingredient')}/>
<View style={{marginTop: "3%"}}/>
<ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
<ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Go and search for recipe')}/>
</View>
<View style={{marginBottom: "20%"}}/>
</LinearGradient>

13
LeftOvers/theme/colors.ts
Unescape View File

@ -27,6 +27,9 @@ export interface Theme {
buttonDetail: string,
welcomeText: string,
welcomeName: string,
carrouselBackground: string,
carrouselText: string,
carrouselDetail: string
}
export const LightTheme : Theme = {
@ -45,7 +48,10 @@ export const LightTheme : Theme = {
buttonBackground: Pearl,
buttonDetail: Moonstone,
welcomeText: Ecru,
welcomeName: Moonstone
welcomeName: Moonstone,
carrouselBackground: Pearl,
carrouselText: Ecru,
carrouselDetail: Moonstone
}
export const DarkTheme : Theme = {
@ -64,6 +70,9 @@ export const DarkTheme : Theme = {
buttonBackground: Jet,
buttonDetail: CarolinaBlue,
welcomeText: SteelBlue,
welcomeName:Alabaster
welcomeName:Alabaster,
carrouselBackground: CarolinaBlue,
carrouselText: SteelBlue,
carrouselDetail: Alabaster
}

Write Preview
Loading…
Cancel
Save