Skip to content

Mess page front end #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Neat11 wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

Mess page front end #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8dfac81
made homepage sexier
Neat11 Oct 27, 2022
4f75293
merged local changes with the cloud
Neat11 Oct 27, 2022
da89c18
made the status efficient
Neat11 Oct 30, 2022
f22171c
login page and few components added
Neat11 Nov 3, 2022
320bced
Home Page v_1 Done
Neat11 Jan 20, 2023
7e7e185
messPage, GroupPage, New Insight frontEnd done
Neat11 Jan 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ import HomeScreen from './screens/HomeScreen';
import MessScreen from './screens/MessScreen';
import MessPage from './screens/MessPage';
import { RootStackParamList } from './types';

import HomePage from './screens/HomePage';
import LoginPage from './screens/LoginPage';
import Splash from './screens/Splash'
import NewPost from './screens/NewPost';


const Stack = createNativeStackNavigator<RootStackParamList>();
Expand All @@ -14,10 +17,13 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Home'>
<Stack.Screen name="Home" component={HomeScreen} options={{title:"Home Page", headerTitleAlign:"center"}}/>
<Stack.Navigator initialRouteName='NewPost' screenOptions={{headerShown: false}}>
<Stack.Screen name="Splash" component={Splash} options={{title: 'Splash Page'}}/>
<Stack.Screen name="LoginPage" component={LoginPage} options = {{title:"Login Page"}}/>
<Stack.Screen name="Home" component={HomePage} options={{title:"Home Page", headerTitleAlign:"center"}}/>
<Stack.Screen name="messPage" component={MessPage} options={{title:"Mess Page"}}/>
<Stack.Screen name="GroupPage" component={GroupPage} options={{title:"Group Page"}}/>
<Stack.Screen name="GroupPage" component={GroupPage} options={{title:"Group Page"}}/>
<Stack.Screen name="NewPost" component={NewPost} options={{title:"New Insight"}}/>
</Stack.Navigator>
</NavigationContainer>
);
Expand Down
Binary file added assets/bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/non-veg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/veg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions components/AddButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React, { useState } from 'react'
import {Text, Animated, StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
import { FontAwesome } from '@expo/vector-icons';

interface Props{
options?: string[],
style?: StyleProp<ViewStyle>,
onPress: ()=>void,
}

function AddButton({options,style,onPress}:Props) {

return (
<View style={[styles.container,style]}>
<TouchableOpacity onPress={()=>{onPress()}} onPressIn={()=>{}}>
<View style={styles.body}>
<Text style={styles.text}>+</Text>
</View>
</TouchableOpacity>
</View>
)
}

const styles= StyleSheet.create({
container:{
backgroundColor:"#eeeeee",
height:50,
width:50,
elevation:5,
borderRadius:50,
position:'absolute',
bottom:30,
right:30
},
body:{
justifyContent:'center',
alignItems:'center',
height:50,
width:50,
},
text:{
fontSize:20
}

})

export default AddButton
79 changes: 29 additions & 50 deletions components/InfoBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,79 +3,58 @@ import { Image, ImageSourcePropType, StyleSheet, View,Text, TouchableOpacity, Di
import { FontAwesome } from '@expo/vector-icons';

interface Props{
src: ImageSourcePropType,
src: string,
name: string,
rating?: number,
mess?: string,
rating: number,
}

function InfoBlock({src,name, rating,mess}:Props) {
function InfoBlock({src,name, rating}:Props) {
const [color, setColor] = useState('grey')
if (rating!=undefined){
return (
<View>

<View style={styles.container}>
<Image style={styles.image} source={src}/>
<View style={{flexDirection:'column', alignItems:'center',justifyContent:'space-between',width:Dimensions.get('window').width-160}}>
<View>
<Text style={styles.name}>{name}</Text>
</View>
<View style={{flexDirection:'row', width:Dimensions.get('window').width-160,justifyContent:'space-around'}}>
<TouchableOpacity style={{alignItems:"center"}} onPress={()=>setColor('green')}>
<FontAwesome name="thumbs-up" size={24} color={color=="green"?'green':"black"} />
<View style={styles.container}>
<Image style={styles.image} source={{uri: src}}/>
<Text style={styles.name}>{name}</Text>
<View style={styles.rating}>
<TouchableOpacity style={{alignItems:'center'}} onPress={()=>setColor('green')}>
<FontAwesome name="thumbs-up" size={24} color={color=="green"?'green':"grey"} />
<Text style={{fontSize:10, color:(color=='green')? 'green':'grey'}}>{rating}%</Text>
</TouchableOpacity>
<TouchableOpacity style={{alignItems:'center'}} onPress={()=>setColor('red')}>
<FontAwesome name="thumbs-down" size={24} color={color=="red"?'red':"black"} />
</TouchableOpacity>
<TouchableOpacity style={{alignItems:'center'}} onPress={()=>setColor('red')}>
<FontAwesome name="thumbs-down" size={24} color={color=="red"?'red':"grey"} />
<Text style={{fontSize:10, color:(color=='red')? 'red':'grey'}}>{100 - rating}%</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
)
}
else{
return (
<View style={{padding:20}}>
<View style={styles.container}>
<Image style={styles.image} source={src}/>
<View style={{flexDirection:'column', alignItems:'center',justifyContent:'space-between',width:Dimensions.get('window').width-160}}>
<View>
<Text style={styles.name}>{name}</Text>
</View>
<Text>Mess: {mess}</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
}

const styles= StyleSheet.create({
container:{
margin:10,
width:100,
margin:5,
marginRight:20,
borderRadius:15,
flexDirection:'row',
elevation:5,
padding:20,
alignItems:'center',
flexDirection:'column',
backgroundColor:'#EFEFEF',
width: Dimensions.get('screen').width-50,
maxHeight:120,
},
image:{
height:80,
width:80,
height:100,
width:100,
borderColor:'#000',
borderWidth:1,
borderRadius:10,
},
name:{
padding:10,
fontSize:15,
textAlign:'center'
},
like_button:{
height:25,
width:25,
},
rating:{
width:100,
flexDirection:'row',
justifyContent:'space-around'
}

})

Expand Down
58 changes: 58 additions & 0 deletions components/MemberBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from 'react'
import {View, Image, Text, StyleSheet, Dimensions} from 'react-native'

interface Props{
name: string
src: string
mess: string
}

export default function MemberBlock({name,src,mess}:Props) {
return (
<View style={{marginVertical:10}}>
<View style={styles.container}>
<Image style={styles.image} source={{uri:src}}/>
<View style={styles.info}>
<View style={{alignContent:'center',marginBottom:5}}>
<Text style={styles.name}>{name}</Text>
</View>
<View style={{ alignContent:'center'}}>
<Text style={{}}>Currently in:</Text>
<View style={{backgroundColor: mess=='VEG'? '#14FF00':mess=="NONE"? "white":'red', borderRadius:12,padding:2,margin:3,borderColor:"#000",borderWidth:1}}>
<Text style={{textAlign:'center', fontSize:12}}> {mess}</Text>
</View>
</View>
</View>
</View>
</View>
)
}


const styles = StyleSheet.create({
container:{
borderRadius:15,
flexDirection:'row',
elevation:5,
padding:10,
backgroundColor:'#EFEFEF',
width: Dimensions.get('screen').width-50,
maxHeight:150,
},
image:{
height:100,
width:100,
borderColor:"#000",
borderWidth:1,
borderRadius:20,
},
name:{
fontSize:15
},
info:{
flexDirection:'column',
alignItems:'center',
justifyContent:'space-around',
width:Dimensions.get('window').width-160,
}
})
60 changes: 52 additions & 8 deletions components/MessButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,55 @@
import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'

import {ImageBackground, View, Text, StyleSheet, TouchableOpacity, StyleProp, ViewStyle, ImageBackgroundProps, ImageSourcePropType, TextStyle, Image } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
interface Props{
name:string,
padding?:string | number,
padding?:string | number ,
height?: number,
gradient?: string[],
width?: number,
style?: StyleProp<ViewStyle>,
src?:ImageSourcePropType,
text_style?: StyleProp<TextStyle>,
onPress: ()=> void,
}
function MessButtons({name,padding,height,width,onPress}:Props) {
return (
function MessButtons({text_style,name,gradient,padding,height,width,style,src,onPress}:Props) {
if (gradient==undefined){
gradient=['#EFEFEF',"#EFEFEF"]
}
if(src!=undefined){
return (
<View style={{padding}}>
<TouchableOpacity onPress={()=>{onPress()}} onPressIn={()=>{}}>
<View style={[styles.container,{height,width}]} >
<Text>{name}</Text>
<View style={[styles.container,style,{height,width}]} >
<Image source={src} style={[styles.img,{height,width}]}/>
<LinearGradient
colors={gradient}
style={[styles.background,{height,width}]}
start={{x:0,y:0}}
end={{x:1,y:0}}
/>
<Text style={text_style}>{name}</Text>
</View>
</TouchableOpacity>
</View>
)
)
}else{
return (
<View style={{padding}}>
<TouchableOpacity onPress={()=>{onPress()}} onPressIn={()=>{}}>
<View style={[styles.container,style,{height,width}]} >
<LinearGradient
colors={gradient}
style={[styles.background,{height,width}]}
start={{x:0,y:0}}
end={{x:1,y:0}}
/>
<Text style={text_style}>{name}</Text>
</View>
</TouchableOpacity>
</View>
)
}
}

const styles = StyleSheet.create({
Expand All @@ -28,6 +60,18 @@ const styles = StyleSheet.create({
elevation:5,
justifyContent:'center',
alignItems: 'center',
},
img:{
position:'absolute',
borderRadius:15,
overflow:'hidden',
opacity:0.5,
},
background:{
position:'absolute',
borderRadius:15,
justifyContent:'center',
alignItems: 'center',
}
})

Expand Down
12 changes: 6 additions & 6 deletions components/PointerBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { Dimensions, Image, ImageSourcePropType, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { FontAwesome } from '@expo/vector-icons';
interface Props{
src?:ImageSourcePropType,
src?:string,
message: string,
rating: number,
}
Expand All @@ -12,15 +12,15 @@ export default function PointerBlock({src,message,rating}:Props) {
if (src!=undefined)
return (
<View style={styles.container}>
{<Image style={styles.image} source={src}/>}
{<Image style={styles.image} source={{uri:src}}/>}
<Text>{message}</Text>
<View style={{flexDirection:'row', width:Dimensions.get('window').width-160,justifyContent:'space-around'}}>
<TouchableOpacity style={{alignItems:"center"}} onPress={()=>setColor('green')}>
<FontAwesome name="thumbs-up" size={24} color={color=="green"?'green':"black"} />
<FontAwesome name="thumbs-up" size={24} color={color=="green"?'green':"grey"} />
<Text style={{fontSize:10, color:(color=='green')? 'green':'grey'}}>{rating}%</Text>
</TouchableOpacity>
<TouchableOpacity style={{alignItems:'center'}} onPress={()=>setColor('red')}>
<FontAwesome name="thumbs-down" size={24} color={color=="red"?'red':"black"} />
<FontAwesome name="thumbs-down" size={24} color={color=="red"?'red':"grey"} />
<Text style={{fontSize:10, color:(color=='red')? 'red':'grey'}}>{100 - rating}%</Text>
</TouchableOpacity>
</View>
Expand All @@ -33,11 +33,11 @@ export default function PointerBlock({src,message,rating}:Props) {
<Text>{message}</Text>
<View style={{flexDirection:'row', width:Dimensions.get('window').width-160,justifyContent:'space-around'}}>
<TouchableOpacity style={{alignItems:"center"}} onPress={()=>setColor('green')}>
<FontAwesome name="thumbs-up" size={24} color={color=="green"?'green':"black"} />
<FontAwesome name="thumbs-up" size={24} color={color=="green"?'green':"grey"} />
<Text style={{fontSize:10, color:(color=='green')? 'green':'grey'}}>{rating}%</Text>
</TouchableOpacity>
<TouchableOpacity style={{alignItems:'center'}} onPress={()=>setColor('red')}>
<FontAwesome name="thumbs-down" size={24} color={color=="red"?'red':"black"} />
<FontAwesome name="thumbs-down" size={24} color={color=="red"?'red':"grey"} />
<Text style={{fontSize:10, color:(color=='red')? 'red':'grey'}}>{100 - rating}%</Text>
</TouchableOpacity>
</View>
Expand Down
Loading