From bce57b366dcacedc8cfe17b64448ea8f1b126902 Mon Sep 17 00:00:00 2001 From: Alvaro Ortiz Date: Sun, 23 Apr 2023 13:07:54 -0700 Subject: [PATCH 1/3] added a new AudioInfo screen --- src/screens/AudioInfoScreen/AudioInfo.tsx | 13 +++++++++++++ src/screens/AudioInfoScreen/styles.tsx | 13 +++++++++++++ src/screens/AudioScreen/Audio.tsx | 6 +++--- src/screens/GrantsScreen/Grants.tsx | 17 +++++++---------- src/stacks/SearchStackNavigator.tsx | 2 ++ src/types/navigation.tsx | 2 ++ 6 files changed, 40 insertions(+), 13 deletions(-) create mode 100644 src/screens/AudioInfoScreen/AudioInfo.tsx create mode 100644 src/screens/AudioInfoScreen/styles.tsx diff --git a/src/screens/AudioInfoScreen/AudioInfo.tsx b/src/screens/AudioInfoScreen/AudioInfo.tsx new file mode 100644 index 0000000..d0a76af --- /dev/null +++ b/src/screens/AudioInfoScreen/AudioInfo.tsx @@ -0,0 +1,13 @@ +import { Text, View } from 'react-native'; +import globalStyles from '../../globalStyles'; +import { SearchStackScreensProps } from '../../types/navigation'; +import styles from './styles'; + +function AudioInfoScreen({ navigation }: SearchStackScreensProps<'AudioInfo'>) { + return ( + + AUDIO INFO SCREEENNNN + + ); +} +export default AudioInfoScreen; diff --git a/src/screens/AudioInfoScreen/styles.tsx b/src/screens/AudioInfoScreen/styles.tsx new file mode 100644 index 0000000..515adc4 --- /dev/null +++ b/src/screens/AudioInfoScreen/styles.tsx @@ -0,0 +1,13 @@ +import { StyleSheet } from 'react-native'; +import Colors from '../../styles/Colors'; + +export default StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.surfaceOffwhite, + alignItems: 'center', + justifyContent: 'center', + height: 300, + width: '100%', + }, +}); diff --git a/src/screens/AudioScreen/Audio.tsx b/src/screens/AudioScreen/Audio.tsx index c19b2a0..a6ac691 100644 --- a/src/screens/AudioScreen/Audio.tsx +++ b/src/screens/AudioScreen/Audio.tsx @@ -2,10 +2,10 @@ import { ScrollView, Text, TextInput, View } from 'react-native'; import AudioCard from '../../components/AudioCard'; import '../../i18n/i18n'; import Colors from '../../styles/Colors'; -import { RootStackScreenProps } from '../../types/navigation'; +import { SearchStackScreensProps } from '../../types/navigation'; import styles from './styles'; -function AudioScreen({ navigation }: RootStackScreenProps<'Audio'>) { +function AudioScreen({ navigation }: SearchStackScreensProps<'Audio'>) { return ( ) { navigation.navigate('Play')} + onPress={() => navigation.navigate('AudioInfo')} /> ) { {grants.map(grant => ( - - - navigation.navigate('GrantInfo', { grantObj: grant }) - } - /> - + navigation.navigate('GrantInfo', { grantObj: grant })} + /> ))} ); diff --git a/src/stacks/SearchStackNavigator.tsx b/src/stacks/SearchStackNavigator.tsx index a95b64b..6cf45c0 100644 --- a/src/stacks/SearchStackNavigator.tsx +++ b/src/stacks/SearchStackNavigator.tsx @@ -2,6 +2,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'; import AudioScreen from '../screens/AudioScreen/Audio'; import PlayScreen from '../screens/PlayScreen/Play'; +import AudioInfoScreen from '../screens/AudioInfoScreen/AudioInfo'; import { SearchStackParamList } from '../types/navigation'; const SearchStack = createNativeStackNavigator(); @@ -15,6 +16,7 @@ export default function SearchStackNavigator() { > + ); } diff --git a/src/types/navigation.tsx b/src/types/navigation.tsx index 4c5e40b..16a1056 100644 --- a/src/types/navigation.tsx +++ b/src/types/navigation.tsx @@ -11,6 +11,7 @@ export type RootStackParamList = { Audio: undefined; Grants: undefined; Play: undefined; + // AudioInfo: undefined; QueriesDemo: undefined; }; @@ -26,6 +27,7 @@ export type GrantsStackParamList = { export type SearchStackParamList = { Audio: undefined; Play: undefined; + AudioInfo: undefined; }; export type RootStackScreenProps = From 92f7c0ebcd32a5a6927389584f6f5b7f89f88509 Mon Sep 17 00:00:00 2001 From: Alvaro Ortiz Date: Sun, 23 Apr 2023 16:14:34 -0700 Subject: [PATCH 2/3] minor changes needed (done) --- assets/icons.tsx | 37 +++++++++++++++---- src/components/GrantCard.tsx | 6 ---- src/screens/AudioInfoScreen/AudioInfo.tsx | 43 ++++++++++++++++++++--- src/screens/AudioInfoScreen/styles.tsx | 24 ++++++++++--- 4 files changed, 89 insertions(+), 21 deletions(-) diff --git a/assets/icons.tsx b/assets/icons.tsx index c3093b6..fe945c3 100644 --- a/assets/icons.tsx +++ b/assets/icons.tsx @@ -20,7 +20,9 @@ export type IconType = | 'audio_forward' | 'audio_back' | 'dropdown' - | 'expand'; + | 'expand' + | 'share' + | 'play_button_small'; const IconSvgs: Record = { inactive_grants_icon: ( @@ -149,9 +151,9 @@ const IconSvgs: Record = { bookmark: ( - - + + + `} /> ), @@ -177,9 +179,30 @@ const IconSvgs: Record = { - - -`} + + + `} + /> + ), + share: ( + + + + + + `} + /> + ), + play_button_small: ( + + + + + `} /> ), }; diff --git a/src/components/GrantCard.tsx b/src/components/GrantCard.tsx index 8e50eac..5c04903 100644 --- a/src/components/GrantCard.tsx +++ b/src/components/GrantCard.tsx @@ -6,12 +6,6 @@ import { Grant } from '../types/schema'; import globalStyles from '../globalStyles'; const styles = StyleSheet.create({ - // centeredView: { - // flex: 1, - // justifyContent: 'center', - // alignItems: 'center', - // marginTop: 16, - // }, cardContainer: { flexDirection: 'column', alignItems: 'flex-start', diff --git a/src/screens/AudioInfoScreen/AudioInfo.tsx b/src/screens/AudioInfoScreen/AudioInfo.tsx index d0a76af..7538745 100644 --- a/src/screens/AudioInfoScreen/AudioInfo.tsx +++ b/src/screens/AudioInfoScreen/AudioInfo.tsx @@ -1,13 +1,48 @@ -import { Text, View } from 'react-native'; +import { Text, View, ScrollView } from 'react-native'; import globalStyles from '../../globalStyles'; +import Icon from '../../../assets/icons'; import { SearchStackScreensProps } from '../../types/navigation'; import styles from './styles'; function AudioInfoScreen({ navigation }: SearchStackScreensProps<'AudioInfo'>) { return ( - - AUDIO INFO SCREEENNNN - + + + Green Colonization, An Interview With Maja Kristine Jama + + September 7, 2022, 45 minutes + + + + + + + + + + Theme: + Climate Change & Environment + + + Country: + Sweden, Finland + + + Format: + Interviews + + + Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the standard dummy text ever since the + 1500s, when an unknown printer took a galley of type and scrambled it to + make a type specimen book. It has survived not only five centuries, but + also the leap into electronic typesetting, remaining essentially + unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop + publishing software like Aldus PageMaker including versions of Lorem + Ipsum. + + ); } export default AudioInfoScreen; diff --git a/src/screens/AudioInfoScreen/styles.tsx b/src/screens/AudioInfoScreen/styles.tsx index 515adc4..20ccc99 100644 --- a/src/screens/AudioInfoScreen/styles.tsx +++ b/src/screens/AudioInfoScreen/styles.tsx @@ -4,10 +4,26 @@ import Colors from '../../styles/Colors'; export default StyleSheet.create({ container: { flex: 1, - backgroundColor: Colors.surfaceOffwhite, + backgroundColor: Colors.surfaceWhite, + alignContent: 'space-around', + paddingHorizontal: 20, + }, + infoFields: { + marginVertical: 4, + }, + titleText: { + fontSize: 36, + }, + iconsContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + flexWrap: 'wrap', + paddingRight: 8, + }, + iconSubContainer: { + justifyContent: 'space-evenly', + flexDirection: 'row', alignItems: 'center', - justifyContent: 'center', - height: 300, - width: '100%', }, }); From 7b9cb4d29ef03b88e1e96ffc294c860579550a56 Mon Sep 17 00:00:00 2001 From: Alvaro Ortiz Date: Sun, 30 Apr 2023 11:49:59 -0700 Subject: [PATCH 3/3] added support for back arrow navigation --- assets/icons.tsx | 12 +++- src/screens/AudioInfoScreen/AudioInfo.tsx | 84 +++++++++++++---------- src/screens/AudioInfoScreen/styles.tsx | 2 +- 3 files changed, 59 insertions(+), 39 deletions(-) diff --git a/assets/icons.tsx b/assets/icons.tsx index fe945c3..6be0af0 100644 --- a/assets/icons.tsx +++ b/assets/icons.tsx @@ -22,7 +22,8 @@ export type IconType = | 'dropdown' | 'expand' | 'share' - | 'play_button_small'; + | 'play_button_small' + | 'back_arrow'; const IconSvgs: Record = { inactive_grants_icon: ( @@ -205,6 +206,15 @@ const IconSvgs: Record = { `} /> ), + back_arrow: ( + + + + `} + /> + ), }; type Props = { className?: string; diff --git a/src/screens/AudioInfoScreen/AudioInfo.tsx b/src/screens/AudioInfoScreen/AudioInfo.tsx index 7538745..02255fe 100644 --- a/src/screens/AudioInfoScreen/AudioInfo.tsx +++ b/src/screens/AudioInfoScreen/AudioInfo.tsx @@ -1,4 +1,4 @@ -import { Text, View, ScrollView } from 'react-native'; +import { Text, View, ScrollView, SafeAreaView, Pressable } from 'react-native'; import globalStyles from '../../globalStyles'; import Icon from '../../../assets/icons'; import { SearchStackScreensProps } from '../../types/navigation'; @@ -6,43 +6,53 @@ import styles from './styles'; function AudioInfoScreen({ navigation }: SearchStackScreensProps<'AudioInfo'>) { return ( - - - Green Colonization, An Interview With Maja Kristine Jama - - September 7, 2022, 45 minutes - - - - + + + navigation.goBack()}> + + + + Green Colonization, An Interview With Maja Kristine Jama + + September 7, 2022, 45 minutes + + + + + + { + navigation.navigate('Play'); + }} + > + + - - - - - Theme: - Climate Change & Environment - - - Country: - Sweden, Finland - - - Format: - Interviews - - - Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it to - make a type specimen book. It has survived not only five centuries, but - also the leap into electronic typesetting, remaining essentially - unchanged. It was popularised in the 1960s with the release of Letraset - sheets containing Lorem Ipsum passages, and more recently with desktop - publishing software like Aldus PageMaker including versions of Lorem - Ipsum. - - + + Theme: + Climate Change & Environment + + + Country: + Sweden, Finland + + + Format: + Interviews + + + Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the standard dummy text ever since the + 1500s, when an unknown printer took a galley of type and scrambled it + to make a type specimen book. It has survived not only five centuries, + but also the leap into electronic typesetting, remaining essentially + unchanged. It was popularised in the 1960s with the release of + Letraset sheets containing Lorem Ipsum passages, and more recently + with desktop publishing software like Aldus PageMaker including + versions of Lorem Ipsum. + + + ); } export default AudioInfoScreen; diff --git a/src/screens/AudioInfoScreen/styles.tsx b/src/screens/AudioInfoScreen/styles.tsx index 20ccc99..0a5ce26 100644 --- a/src/screens/AudioInfoScreen/styles.tsx +++ b/src/screens/AudioInfoScreen/styles.tsx @@ -3,10 +3,10 @@ import Colors from '../../styles/Colors'; export default StyleSheet.create({ container: { - flex: 1, backgroundColor: Colors.surfaceWhite, alignContent: 'space-around', paddingHorizontal: 20, + height: '100%', }, infoFields: { marginVertical: 4,