make header component, clean up styles, scrollview + graph
This commit is contained in:
parent
a560ebdb70
commit
36041dd41b
40
src/component/headers/back-header.tsx
Normal file
40
src/component/headers/back-header.tsx
Normal 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;
|
@ -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",
|
||||||
},
|
},
|
||||||
|
@ -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} />;
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user