Removing unnecessary Views
This commit is contained in:
parent
c2d173a4ba
commit
6eff2b311f
@ -3,7 +3,15 @@ import {StyleSheet} from "react-native";
|
|||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
//StatusPage
|
//StatusPage
|
||||||
container: { flex: 1, alignItems: "stretch" },
|
container: { flex: 1, alignItems: "stretch" },
|
||||||
listContainer: { flex: 1, width: "100%", backgroundColor: 'transparent' },
|
listContainer: {
|
||||||
|
flex: 1,
|
||||||
|
width: "100%",
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
//alignItems: "flex-start", // Aligns subheaders properly
|
||||||
|
paddingHorizontal: 10, // Adds some spacing
|
||||||
|
},
|
||||||
listSubheader: {
|
listSubheader: {
|
||||||
fontFamily: "Medium",
|
fontFamily: "Medium",
|
||||||
fontSize: 18, // Larger text
|
fontSize: 18, // Larger text
|
||||||
@ -12,20 +20,16 @@ const styles = StyleSheet.create({
|
|||||||
marginBottom: 10, // Add spacing below
|
marginBottom: 10, // Add spacing below
|
||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
},
|
},
|
||||||
listWrapper: { flex: 1, padding: 5 },
|
//listWrapper: { flex: 1, padding: 5 },
|
||||||
listRow: {
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: "flex-start", // Aligns subheaders properly
|
|
||||||
paddingHorizontal: 10, // Adds some spacing
|
|
||||||
},
|
|
||||||
listColumn: { flex: 1, paddingHorizontal: 5, zIndex: 1},
|
listColumn: { flex: 1, paddingHorizontal: 5, zIndex: 1},
|
||||||
buttonContainer: {
|
buttonContainer: {
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignSelf: "stretch",
|
alignSelf: "stretch",
|
||||||
|
verticalAlign: "bottom",
|
||||||
paddingHorizontal: 10,
|
paddingHorizontal: 10,
|
||||||
paddingBottom: 20,
|
paddingBottom: 20,
|
||||||
|
marginHorizontal: 5,
|
||||||
},
|
},
|
||||||
actionButton: {
|
actionButton: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
@ -167,53 +167,42 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[styles.container, isProfileActive && { display: 'none' }]}>
|
<View style={[styles.container, isProfileActive && { display: 'none' }]}>
|
||||||
|
<ImageBackground source={require('../assets/images/bg.webp')} style={styles.imageBackground} />
|
||||||
<View style={styles.listContainer}>
|
<View style={styles.listContainer}>
|
||||||
<View style={styles.listRow}>
|
<List.Section style={styles.listColumn}>
|
||||||
<View style={styles.listColumn}>
|
|
||||||
<List.Section>
|
|
||||||
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>On the Way</List.Subheader>
|
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>On the Way</List.Subheader>
|
||||||
{messages.filter(msg => msg.Status === "On the Way")
|
{messages.filter(msg => msg.Status === "On the Way")
|
||||||
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
|
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
|
||||||
.map(item => (
|
.map(item => (
|
||||||
<View key={item.Id} style={[styles.card,
|
|
||||||
{ backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
|
|
||||||
<List.Item
|
<List.Item
|
||||||
key={item.Id}
|
key={item.Id}
|
||||||
title={item.Name}
|
title={item.Name}
|
||||||
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
|
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
|
||||||
|
style={[styles.card, { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}
|
||||||
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
|
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
|
||||||
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
|
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
|
||||||
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
|
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
))}
|
))}
|
||||||
</List.Section>
|
</List.Section>
|
||||||
</View>
|
<List.Section style={styles.listColumn}>
|
||||||
<View style={styles.listColumn}>
|
|
||||||
<List.Section>
|
|
||||||
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>Arrived</List.Subheader>
|
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>Arrived</List.Subheader>
|
||||||
{messages.filter(msg => msg.Status === "Arrived")
|
{messages.filter(msg => msg.Status === "Arrived")
|
||||||
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
|
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
|
||||||
.map(item => (
|
.map(item => (
|
||||||
<View key={item.Id} style={[styles.card,
|
|
||||||
{ backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
|
|
||||||
<List.Item
|
<List.Item
|
||||||
key={item.Id}
|
key={item.Id}
|
||||||
title={item.Name}
|
title={item.Name}
|
||||||
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
|
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
|
||||||
|
style={[styles.card, { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}
|
||||||
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
|
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
|
||||||
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
|
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
|
||||||
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
|
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
))}
|
))}
|
||||||
</List.Section>
|
</List.Section>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<ImageBackground source={require('../assets/images/bg.webp')} style={styles.imageBackground} />
|
|
||||||
<View style={styles.buttonContainer}>
|
<View style={styles.buttonContainer}>
|
||||||
<Animated.View style={{ flex: 1 }}>
|
|
||||||
<Button
|
<Button
|
||||||
mode="contained"
|
mode="contained"
|
||||||
onPress={() => handleStatusPress("On the Way")}
|
onPress={() => handleStatusPress("On the Way")}
|
||||||
@ -224,8 +213,6 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
|
|||||||
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
|
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
|
||||||
{getButtonLabel("On the Way")}
|
{getButtonLabel("On the Way")}
|
||||||
</Button>
|
</Button>
|
||||||
</Animated.View>
|
|
||||||
<Animated.View style={{ flex: 1 }}>
|
|
||||||
<Button
|
<Button
|
||||||
mode="contained"
|
mode="contained"
|
||||||
onPress={() => handleStatusPress("Arrived")}
|
onPress={() => handleStatusPress("Arrived")}
|
||||||
@ -236,7 +223,6 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
|
|||||||
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
|
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
|
||||||
{getButtonLabel("Arrived")}
|
{getButtonLabel("Arrived")}
|
||||||
</Button>
|
</Button>
|
||||||
</Animated.View>
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user