From d6825a43844bd9f5946ed1959686450ad74d19de Mon Sep 17 00:00:00 2001 From: Andy Date: Wed, 11 May 2022 18:05:21 +0200 Subject: [PATCH 01/16] LUN-328: Add NextExercise Container --- .../images/arrow-right-circle-icon-white.svg | 6 ++ assets/images/index.ts | 2 + src/constants/data.ts | 1 + src/constants/labels.json | 4 +- src/routes/home/components/DisciplineCard.tsx | 74 +++++++++++++++++-- src/services/helpers.ts | 16 +++- 6 files changed, 93 insertions(+), 10 deletions(-) create mode 100644 assets/images/arrow-right-circle-icon-white.svg diff --git a/assets/images/arrow-right-circle-icon-white.svg b/assets/images/arrow-right-circle-icon-white.svg new file mode 100644 index 000000000..325e7bf9e --- /dev/null +++ b/assets/images/arrow-right-circle-icon-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/index.ts b/assets/images/index.ts index 376765018..63f39ef89 100644 --- a/assets/images/index.ts +++ b/assets/images/index.ts @@ -2,6 +2,7 @@ import AddCircleIcon from './add-circle-icon.svg' import ArrowLeftCircleIconBlue from './arrow-left-circle-icon-blue.svg' import ArrowLeftCircleIconWhite from './arrow-left-circle-icon-white.svg' import ArrowRightIcon from './arrow-right-icon.svg' +import ArrowRightCircleIconWhite from './arrow-right-circle-icon-white.svg' import BannerGreen from './banner-green.png' import BannerRed from './banner-red.png' import BannerYellow from './banner-yellow.png' @@ -42,6 +43,7 @@ export { ArrowLeftCircleIconBlue, ArrowLeftCircleIconWhite, ArrowRightIcon, + ArrowRightCircleIconWhite, BannerGreen, BannerRed, BannerYellow, diff --git a/src/constants/data.ts b/src/constants/data.ts index 3bda56381..6373d3317 100644 --- a/src/constants/data.ts +++ b/src/constants/data.ts @@ -62,6 +62,7 @@ export interface Progress { export interface NextExercise { disciplineId: number exerciseKey: number + disciplineTitle: string, } export const BUTTONS_THEME = { diff --git a/src/constants/labels.json b/src/constants/labels.json index 33edbbd0b..18ae2d98e 100644 --- a/src/constants/labels.json +++ b/src/constants/labels.json @@ -10,7 +10,9 @@ "haveFun": "Viel Spaß beim Lernen", "progressDescription": "Modulen erledigt", "start": "Beginnen", - "continue": "Weitermachen", + "continue": "Fortsetzen", + "level": "Level", + "checkModules" : "Module ansehen", "addCustomDiscipline": "Bereich hinzufügen", "customDisciplineSection": "Individueller Lernbereich", "customDisciplineExplanation": "Hier kannst du eigene Lernbereiche hinzufügen", diff --git a/src/routes/home/components/DisciplineCard.tsx b/src/routes/home/components/DisciplineCard.tsx index 02128d70a..3e9ee3a64 100644 --- a/src/routes/home/components/DisciplineCard.tsx +++ b/src/routes/home/components/DisciplineCard.tsx @@ -1,10 +1,13 @@ import React, { ReactElement, useEffect, useState } from 'react' +import { TouchableOpacity } from 'react-native' import * as Progress from 'react-native-progress' +import { widthPercentageToDP as wp } from 'react-native-responsive-screen' import styled from 'styled-components/native' +import { ArrowRightCircleIconWhite } from '../../../../assets/images' import Button from '../../../components/Button' -import { ContentSecondary } from '../../../components/text/Content' -import { Subheading } from '../../../components/text/Subheading' +import { ContentSecondary, ContentTextLight } from '../../../components/text/Content' +import { Subheading, SubheadingPrimary, SubheadingText } from '../../../components/text/Subheading' import { BUTTONS_THEME } from '../../../constants/data' import { Discipline, Document } from '../../../constants/endpoints' import labels from '../../../constants/labels.json' @@ -37,6 +40,41 @@ const ButtonContainer = styled.View` margin: ${props => props.theme.spacings.xxs} auto; ` +const NextExerciseContainer = styled.View` + flex-direction: row; + background-color: ${props => props.theme.colors.background}; + padding: ${props => props.theme.spacings.sm}; + margin: ${props => props.theme.spacings.sm} 0; + shadow-color: ${props => props.theme.colors.shadow}; + elevation: 8; + shadow-radius: 1px; + shadow-offset: 1px 1px; + shadow-opacity: 0.5; +` + +const ExerciseDetail = styled.View` + padding: 0 ${props => props.theme.spacings.sm}; +` + +const ActionContainer = styled.View` + padding-top: ${props => props.theme.spacings.xs}; + flex-direction: row; + align-items: flex-start; +` + +const Label = styled(SubheadingPrimary)` + letter-spacing: ${props => props.theme.fonts.capsLetterSpacing}; + text-transform: uppercase; + padding-right: ${props => props.theme.spacings.xs}; + align-self: center; +` + +const Thumbnail = styled.Image` + height: 90px; + width: 75px; + align-self: center; +` + interface PropsType { disciplineId: number onPress: (profession: Discipline) => void @@ -48,6 +86,8 @@ interface PropsType { ) => void } +// TODO remove labels.home.continue, move ExerciseContainer to separate component, fix tests + const DisciplineCard = (props: PropsType): ReactElement => { const { disciplineId, onPress, navigateToNextExercise } = props const { data: discipline } = useLoadDiscipline(disciplineId) @@ -68,7 +108,12 @@ const DisciplineCard = (props: PropsType): ReactElement => { const navigate = () => { if (documents !== null && nextExercise !== null) { - navigateToNextExercise(nextExercise.disciplineId, nextExercise.exerciseKey, '', documents) // TODO set discipline title correct LUN-320 + navigateToNextExercise( + nextExercise.disciplineId, + nextExercise.exerciseKey, + nextExercise.disciplineTitle, + documents + ) } } @@ -78,7 +123,7 @@ const DisciplineCard = (props: PropsType): ReactElement => { } return ( - onPress(discipline)}> + <> { {moduleAlreadyStarted ? labels.home.progressDescription : childrenLabel(discipline)} + {documents && documents.length > 0 && ( + + + + + {labels.home.level} {nextExercise?.exerciseKey} + + {nextExercise?.disciplineTitle} + + + + + + + + + )}