Skip to content

Commit c532ab1

Browse files
lukasmasuchlukasmasuch
committed
Add app intro slides
1 parent a1e4350 commit c532ab1

19 files changed

Lines changed: 460 additions & 26 deletions

‎app/mobile/assets/images/assessments.png‎

25 KB
Loading

‎app/mobile/assets/images/privacy.png‎

18.5 KB
Loading

‎app/mobile/assets/images/reporting.png‎

22.7 KB
Loading

‎app/mobile/components/HelpInformationCard.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from 'react';
2+
import {StyleSheet, View} from 'react-native';
3+
import {useTranslation} from 'react-i18next';
4+
import PropTypes from 'prop-types';
5+
6+
import {List, Avatar, Button, Card, Title, Paragraph} from 'react-native-paper';
7+
8+
import {CARD_ITEM, PRIMARY_COLOR} from '../constants/DefaultStyles';
9+
10+
import { AnimatedCircularProgress } from 'react-native-circular-progress';
11+
12+
const styles = StyleSheet.create({
13+
cardItem: CARD_ITEM,
14+
listElement: {
15+
fontSize: 14,
16+
},
17+
expandableElement: {
18+
padding: 0,
19+
margin: 0,
20+
},
21+
});
22+
//<Card.Actions>
23+
// <Button>{t('actions.update')}</Button>
24+
// <IconButton color={PRIMARY_COLOR} icon="information-outline" />
25+
// </Card.Actions>
26+
27+
export default function HelpInformationCard(props) {
28+
const {t} = useTranslation();
29+
30+
return (
31+
<Card style={{...styles.cardItem, ...props.style}}>
32+
<Card.Title
33+
title={"Get Help"}
34+
subtitle={"Hotlines & Testing Sites"}
35+
left={props => <Avatar.Icon {...props} icon="shield-check" />}
36+
/>
37+
<Card.Content>
38+
<List.Accordion
39+
style={styles.expandableElement}
40+
title={"Help Hotlines"}
41+
left={props => <List.Icon {...props} icon="phone" />}>
42+
<List.Item
43+
titleStyle={styles.listElement}
44+
title="Charité Virchow Wedding"
45+
/>
46+
</List.Accordion>
47+
<List.Accordion
48+
style={styles.expandableElement}
49+
title={"Testing Sites"}
50+
left={props => <List.Icon {...props} icon="test-tube" />}>
51+
<List.Item
52+
titleStyle={styles.listElement}
53+
title="Campus Virchow-Klinikum"
54+
/>
55+
<List.Item
56+
titleStyle={styles.listElement}
57+
title="Vivantes Prenzlauer Berg"
58+
/>
59+
<List.Item
60+
titleStyle={styles.listElement}
61+
title="Vivantes Wenckebach-Klinikum"
62+
/>
63+
<List.Item
64+
titleStyle={styles.listElement}
65+
title="Evangelisches Krankenhaus Königin Elisabeth Herzberge"
66+
/>
67+
<List.Item
68+
titleStyle={styles.listElement}
69+
title="Gemeinschaftskrankenhaus Havelhöhe"
70+
/>
71+
<List.Item
72+
titleStyle={styles.listElement}
73+
title="DRK Kliniken Berlin Westend"
74+
/>
75+
</List.Accordion>
76+
<List.Accordion
77+
style={styles.expandableElement}
78+
title={"Help Websites"}
79+
left={props => <List.Icon {...props} icon="comment-question" />}>
80+
<List.Item
81+
titleStyle={styles.listElement}
82+
title="Charité Virchow Wedding"
83+
/>
84+
</List.Accordion>
85+
</Card.Content>
86+
</Card>
87+
);
88+
}
89+
90+
HelpInformationCard.propTypes = {
91+
style: PropTypes.object,
92+
};

‎app/mobile/components/InfectionRiskCard.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {Avatar, Button, Card, IconButton, Paragraph} from 'react-native-paper';
77

88
import {CARD_ITEM, PRIMARY_COLOR} from '../constants/DefaultStyles';
99

10+
import { AnimatedCircularProgress } from 'react-native-circular-progress';
11+
1012
const styles = StyleSheet.create({
1113
cardItem: CARD_ITEM,
1214
});
@@ -16,6 +18,22 @@ const styles = StyleSheet.create({
1618
// <IconButton color={PRIMARY_COLOR} icon="information-outline" />
1719
// </Card.Actions>
1820

21+
// <View >
22+
// <AnimatedCircularProgress
23+
// style={{ marginTop: 10}}
24+
// size={60}
25+
// width={8}
26+
// backgroundWidth={6}
27+
// fill={40}
28+
// tintColor={PRIMARY_COLOR}
29+
// //tintColorSecondary="#dc8580"
30+
// backgroundColor="#A0A0A0"
31+
// arcSweepAngle={200}
32+
// rotation={260}
33+
// lineCap="round"
34+
// />
35+
//s </View>
36+
1937
export default function InfectionRiskCard(props) {
2038
const {t} = useTranslation();
2139

@@ -26,7 +44,7 @@ export default function InfectionRiskCard(props) {
2644
subtitle={t('assesments.infectionRisk.updateLabel', {
2745
date: t('basics.today').toLowerCase(),
2846
})}
29-
left={props => <Avatar.Icon {...props} icon="shield-check" />}
47+
left={props => <Avatar.Icon {...props} icon="chart-bar-stacked" />}
3048
/>
3149
<Card.Content>
3250
<Paragraph>{t('assesments.infectionRisk.noAssesmentDesc')}</Paragraph>

‎app/mobile/components/ReportSummaryCard.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ export default function ReportSummaryCard(props) {
2727

2828
let subtitle = t('report.summaryCard.notSubmitted');
2929

30+
if (props.showActions) {
31+
// TODO change
32+
subtitle = "Last updated today";
33+
}
34+
3035
let symptoms = [];
3136
if (props.caseReport.symptoms) {
3237
symptoms = props.caseReport.symptoms;
@@ -72,6 +77,16 @@ export default function ReportSummaryCard(props) {
7277
) : (
7378
false
7479
)}
80+
{props.caseReport.residence && props.caseReport.residence.place_name ? (
81+
<List.Item
82+
titleStyle={styles.listElement}
83+
title={t('report.summaryCard.residenceInfo', {
84+
residence: props.caseReport.residence.place_name,
85+
})}
86+
/>
87+
) : (
88+
false
89+
)}
7590
{props.caseReport.covid_contact !== undefined &&
7691
props.caseReport.covid_contact !== null ? (
7792
<List.Item

‎app/mobile/constants/DefaultStyles.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
import {DefaultTheme} from 'react-native-paper';
22

3-
export const PRIMARY_COLOR = '#6200ee';
4-
export const ACCENT_COLOR = '#3214be';
3+
//export const PRIMARY_COLOR = '#6200ee'; // #006f7a / #6200ee
4+
//export const ACCENT_COLOR = PRIMARY_COLOR; // #3214be
5+
//export const PRIMARY_BACKGROUND_COLOR = 'rgba(98, 0, 238, 0.2)'; //rgba(98, 0, 238, 0.2)
6+
7+
//export const PRIMARY_COLOR = '#006f7a';
8+
//export const ACCENT_COLOR = PRIMARY_COLOR;
9+
//export const PRIMARY_BACKGROUND_COLOR = 'rgba(0, 111, 122, 0.2)';
10+
11+
export const PRIMARY_COLOR = '#107F8A';
12+
export const ACCENT_COLOR = PRIMARY_COLOR;
13+
export const PRIMARY_BACKGROUND_COLOR = 'rgba(16, 127, 138, 0.2)';
14+
515
export const INACTIVE_COLOR = '#818181';
616
export const REPORTING_BACKGROUND = '#FDFDFD';
717
export const DEFAULT_BACKGROUND = '#FFF';
8-
export const PRIMARY_BACKGROUND_COLOR = 'rgba(98, 0, 238, 0.2)';
18+
19+
920

1021
export const CONTAINER = {
1122
//flex: 1,
@@ -39,7 +50,7 @@ export const CALENDAR_THEME = {
3950
arrowColor: PRIMARY_COLOR,
4051
todayTextColor: PRIMARY_COLOR,
4152
selectedDayBackgroundColor: PRIMARY_COLOR,
42-
calendarBackground: REPORTING_BACKGROUND,
53+
calendarBackground: DEFAULT_BACKGROUND,
4354
};
4455

4556
export const APP_THEME = {

‎app/mobile/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import App from './App';
33

44
import './i18n';
55

6+
console.disableYellowBox = true;
7+
68
AppRegistry.registerComponent('Cotect', () => App);
79

810
if (Platform.OS === 'web') {
9-
const rootTag =
10-
document.getElementById('root') || document.getElementById('main');
11-
AppRegistry.runApplication('Cotect', {rootTag});
11+
const rootTag = document.getElementById('root') || document.getElementById('main');
12+
AppRegistry.runApplication('Cotect', {rootTag});
1213
}

‎app/mobile/ios/Podfile.lock‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,8 @@ PODS:
350350
- React
351351
- RNShare (3.1.2):
352352
- React
353+
- RNSVG (12.0.3):
354+
- React
353355
- RNVectorIcons (6.6.0):
354356
- React
355357
- UMBarCodeScannerInterface (5.0.0)
@@ -414,6 +416,7 @@ DEPENDENCIES:
414416
- RNReanimated (from `../node_modules/react-native-reanimated`)
415417
- RNScreens (from `../node_modules/react-native-screens`)
416418
- RNShare (from `../node_modules/react-native-share`)
419+
- RNSVG (from `../node_modules/react-native-svg`)
417420
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
418421
- UMBarCodeScannerInterface (from `../node_modules/unimodules-barcode-scanner-interface/ios`)
419422
- UMCameraInterface (from `../node_modules/unimodules-camera-interface/ios`)
@@ -538,6 +541,8 @@ EXTERNAL SOURCES:
538541
:path: "../node_modules/react-native-screens"
539542
RNShare:
540543
:path: "../node_modules/react-native-share"
544+
RNSVG:
545+
:path: "../node_modules/react-native-svg"
541546
RNVectorIcons:
542547
:path: "../node_modules/react-native-vector-icons"
543548
UMBarCodeScannerInterface:
@@ -640,6 +645,7 @@ SPEC CHECKSUMS:
640645
RNReanimated: b2ab0b693dddd2339bd2f300e770f6302d2e960c
641646
RNScreens: 254da4b84f25971cbb30ed3ddc84131f23cac812
642647
RNShare: c19dbe4a7224098cd3cfc4d3b92c886ca817b3f0
648+
RNSVG: 7e16ddfc6e00d5aa69c9eb83e699bcce5dcb85d4
643649
RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
644650
UMBarCodeScannerInterface: 3802c8574ef119c150701d679ab386e2266d6a54
645651
UMCameraInterface: 985d301f688ed392f815728f0dd906ca34b7ccb1

‎app/mobile/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@
3737
"react-i18next": "^11.3.4",
3838
"react-native": "~0.61.5",
3939
"react-native-action-sheet": "^2.2.0",
40+
"react-native-app-intro-slider": "^3.0.0",
4041
"react-native-calendars": "^1.264.0",
42+
"react-native-circular-progress": "^1.3.6",
4143
"react-native-clean-project": "^3.3.0",
4244
"react-native-dotenv": "^0.2.0",
4345
"react-native-gesture-handler": "~1.5.0",
@@ -50,6 +52,7 @@
5052
"react-native-screens": "2.0.0-alpha.12",
5153
"react-native-select-contact": "^1.3.0",
5254
"react-native-share": "^3.1.2",
55+
"react-native-svg": "^12.0.3",
5356
"react-native-typography": "^1.4.1",
5457
"react-native-unimodules": "~0.7.0",
5558
"react-native-vector-icons": "^6.6.0",

0 commit comments

Comments
 (0)