make header component, clean up styles, scrollview + graph

This commit is contained in:
Loewy 2024-02-21 17:20:30 -08:00
parent a560ebdb70
commit 36041dd41b
5 changed files with 115 additions and 35 deletions

View File

@ -0,0 +1,40 @@
// BackHeader.tsx
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { shadows } from "../../styles";
type BackHeaderProps = {
navigation: any; // You can replace 'any' with the appropriate type for your navigation prop
title: string;
};
const BackHeader: React.FC<BackHeaderProps> = ({ navigation, title }) => {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.goBack()}
>
<Text style={styles.text}>{`< ${title}`}</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
zIndex: 100,
...shadows.standard,
},
button: {
padding: 10,
},
text: {
fontSize: 16,
fontWeight: "500",
color: "black",
},
});
export default BackHeader;

View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { StyleSheet, Text, View } from "react-native"; import { StyleSheet, Text, View } from "react-native";
import { borders } from "../../styles";
type StatItem = { type StatItem = {
title: string; title: string;
@ -31,12 +32,11 @@ const styles = StyleSheet.create({
padding: 5, padding: 5,
}, },
item: { item: {
borderLeftWidth: 0.5,
borderRightColor: "lightgrey",
marginBottom: 10, marginBottom: 10,
...borders.dottedLeftBorder,
}, },
title: { title: {
fontSize: 16, fontSize: 15,
color: "grey", color: "grey",
textAlign: "center", textAlign: "center",
}, },

View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import VideoDetails from "./video-details"; import VideoDetails from "./video-details";
export default function SessionScreen() { export default function SessionScreen({ navigation }) {
return <VideoDetails />; return <VideoDetails navigation={navigation} />;
} }

View File

@ -1,15 +1,23 @@
import React from "react"; import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native"; import { ScrollView, StyleSheet, Text, View } from "react-native";
import { mock_session_details } from "../../../test/mock/charts/mock-data"; import {
graph_data_two_measures,
mock_session_details,
} from "../../../test/mock/charts/mock-data";
import BarGraph from "../../component/charts/bar-graph/bar-graph";
import ChartContainer from "../../component/charts/container/chart-container";
import ImageWithFallback from "../../component/image/image-with-fallback"; import ImageWithFallback from "../../component/image/image-with-fallback";
import StatList from "../../component/video-details/video-stat-list"; import StatList from "../../component/video-details/video-stat-list";
// TODO: image did not load, remove Session when data piped through // TODO: #134 remove Session when data piped through
// Splash should be an asset we use if an Image failed to load
import Session from "../../assets/sample_session.png"; import Session from "../../assets/sample_session.png";
import Splash from "../../assets/splash.png"; import Splash from "../../assets/splash.png";
import BackHeader from "../../component/headers/back-header";
import { borders, colors } from "../../styles";
export default function VideoDetails() { export default function VideoDetails({ navigation }) {
// Remove mock destructure when data is piped through from BE // TODO: #134 Remove mock destructure block when data is piped through from BE
const { const {
sessionTitle, sessionTitle,
date, date,
@ -22,7 +30,6 @@ export default function VideoDetails() {
} = mock_session_details; } = mock_session_details;
const leftColumnStats = [ const leftColumnStats = [
// If what is displayed in the columns can vary
{ title: "TIME PLAYED", value: timePlayed }, { title: "TIME PLAYED", value: timePlayed },
{ title: "MAKE RATE", value: makeRate }, { title: "MAKE RATE", value: makeRate },
]; ];
@ -35,16 +42,17 @@ export default function VideoDetails() {
return ( return (
<> <>
<View style={{ backgroundColor: "transparent" }}> <BackHeader navigation={navigation} title="Go Back" />
<Text style={{ backgroundColor: "transparent" }}>Go back</Text> <ScrollView
</View> showsVerticalScrollIndicator={false}
<ScrollView contentContainerStyle={{ paddingBottom: 20 }}> contentContainerStyle={styles.scrollContainer}
>
<View style={styles.headerSection}> <View style={styles.headerSection}>
<Text style={styles.header}>{sessionTitle}</Text> <Text style={styles.header}>{sessionTitle}</Text>
<Text>{date}</Text> <Text>{date}</Text>
</View> </View>
<ImageWithFallback <ImageWithFallback
// When data comes from be needs to be passed as source={{ uri: image }} // TODO: #134 when data comes from be needs to be passed as source={{ uri: image }}
source={Session} source={Session}
fallbackSource={Splash} fallbackSource={Splash}
style={styles.image} style={styles.image}
@ -54,9 +62,17 @@ export default function VideoDetails() {
<StatList items={rightColumnStats} style={styles.statColumn} /> <StatList items={rightColumnStats} style={styles.statColumn} />
</View> </View>
<View style={styles.horizontalDivider} /> <View style={styles.horizontalDivider} />
<View style={styles.textContainer}>
<Text style={styles.title}>Game Type</Text> <Text style={styles.title}>Game Type</Text>
<Text style={styles.text}>{gameType}</Text> <Text style={styles.text}>{gameType}</Text>
<Text style={styles.title}>Notes</Text>
<Text style={styles.text}>{notes}</Text> <Text style={styles.text}>{notes}</Text>
</View>
<View style={[styles.horizontalDivider, { marginVertical: 21 }]} />
<ChartContainer
data={graph_data_two_measures}
ChartComponent={BarGraph}
/>
</ScrollView> </ScrollView>
</> </>
); );
@ -64,9 +80,14 @@ export default function VideoDetails() {
// TODO: #130 scaled styles + maintain consistency with video-feed styles // TODO: #130 scaled styles + maintain consistency with video-feed styles
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: {
backgroundColor: "white", // TODO #125 -- this color should not be set but implicitly inherit from theme
paddingBottom: 20, // guarantees some space at bottom of scrollable views
},
headerSection: { headerSection: {
paddingHorizontal: 20, paddingHorizontal: 38,
paddingVertical: 15, paddingTop: 17,
paddingBottom: 14,
}, },
header: { header: {
fontSize: 24, fontSize: 24,
@ -79,27 +100,30 @@ const styles = StyleSheet.create({
statsContainer: { statsContainer: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
padding: 20, paddingLeft: 45,
paddingVertical: 42,
}, },
statColumn: { statColumn: {
flex: 1, flex: 1,
padding: 5, padding: 5,
}, },
horizontalDivider: { horizontalDivider: {
borderBottomWidth: 0.5, width: "95%",
color: "lightgrey",
width: "100%",
marginHorizontal: 35,
alignSelf: "center", alignSelf: "center",
...borders.dottedBottomBorder,
},
textContainer: {
paddingHorizontal: 38,
}, },
title: { title: {
fontSize: 16, fontSize: 16,
color: "grey", color: colors.text.greyText,
padding: 20, paddingTop: 16,
}, },
text: { text: {
fontSize: 18, fontSize: 18,
textAlign: "left", textAlign: "left",
marginTop: 10, paddingTop: 6,
fontWeight: "400",
}, },
}); });

View File

@ -43,12 +43,14 @@ export const colors = {
bgBlack: "#121212", bgBlack: "#121212",
lightGrey: "#BFC2C8", lightGrey: "#BFC2C8",
darkGrey: "#767577", darkGrey: "#767577",
themeBrown: "#D9AA84",
panelWhite: "#F2FBFE", panelWhite: "#F2FBFE",
tournamentBlue: "#50a6c2",
blueCloth: "#539dc2",
buttonBlue: "#1987ff", buttonBlue: "#1987ff",
textWhite: "#ffffff", border: {
grey: "#8F8E94",
},
text: {
greyText: "#848580",
},
}; };
export const tabIconColors = { export const tabIconColors = {
@ -57,7 +59,7 @@ export const tabIconColors = {
}; };
// SHADOWS // SHADOWS
export const shadows = { export const shadows = StyleSheet.create({
standard: { standard: {
shadowColor: "#000000", shadowColor: "#000000",
shadowOffset: { shadowOffset: {
@ -68,9 +70,23 @@ export const shadows = {
shadowRadius: 4.65, shadowRadius: 4.65,
elevation: 3, elevation: 3,
}, },
}; });
// MODAL STYLES // BORDER
export const borders = StyleSheet.create({
dottedBottomBorder: {
borderBottomWidth: 1,
borderStyle: "dotted",
color: colors.border.grey,
},
dottedLeftBorder: {
borderLeftWidth: 1,
borderStyle: "dotted",
color: colors.border.grey,
},
});
// MODAL
const MODAL_TOP_PADDING = 20; const MODAL_TOP_PADDING = 20;
const MODAL_TOP_RADIUS = 20; const MODAL_TOP_RADIUS = 20;