diff --git a/packages/app/README.md b/packages/app/README.md index 50743828..2407f6a7 100644 --- a/packages/app/README.md +++ b/packages/app/README.md @@ -1,4 +1,4 @@ -# Öppna Skolplattformen App +# Öppna skolplattformen App This is the app for Öppna skolplattformen. diff --git a/packages/app/components/child.component.tsx b/packages/app/components/child.component.tsx index 3452c4cf..54747fb6 100644 --- a/packages/app/components/child.component.tsx +++ b/packages/app/components/child.component.tsx @@ -120,7 +120,7 @@ export const Child = () => { return ( - + ) } diff --git a/packages/app/components/childListItem.component.tsx b/packages/app/components/childListItem.component.tsx index f17dcf54..8a68547c 100644 --- a/packages/app/components/childListItem.component.tsx +++ b/packages/app/components/childListItem.component.tsx @@ -10,6 +10,7 @@ import { import { Child } from '@skolplattformen/embedded-api' import { Button, + Icon, StyleService, Text, useStyleSheet, @@ -17,11 +18,13 @@ import { import moment from 'moment' import React from 'react' import { TouchableOpacity, View } from 'react-native' -import { Layout, Sizing } from '../styles' +import { Colors, Layout, Sizing } from '../styles' import { studentName } from '../utils/peopleHelpers' import { translate } from '../utils/translation' import { RootStackParamList } from './navigation.component' import { StudentAvatar } from './studentAvatar.component' +import { DaySummary } from './daySummary.component' +import { RightArrowIcon } from './icon.component' interface ChildListItemProps { child: Child @@ -108,7 +111,16 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => { {className ? {className} : null} + + + + + {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => ( {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`} @@ -170,11 +182,20 @@ const themeStyles = StyleService.create({ cardHeaderLeft: { ...Layout.flex.row, ...Layout.mainAxis.center, + flex: 10, + }, + cardHeaderRight: { + ...Layout.flex.row, + ...Layout.crossAxis.flexEnd, flex: 1, }, cardHeaderText: { marginHorizontal: Sizing.t4, - flex: 1, + flex: 10, + }, + icon: { + width: 32, + height: 32, }, itemFooter: { ...Layout.flex.row, diff --git a/packages/app/components/daySummary.component.tsx b/packages/app/components/daySummary.component.tsx index 1e3d0c9e..14cae709 100644 --- a/packages/app/components/daySummary.component.tsx +++ b/packages/app/components/daySummary.component.tsx @@ -9,10 +9,10 @@ import { translate } from '../utils/translation' interface DaySummaryProps { child: Child - date: Moment + date?: Moment } -export const DaySummary = ({ child, date }: DaySummaryProps) => { +export const DaySummary = ({ child, date = moment() }: DaySummaryProps) => { const styles = useStyleSheet(themedStyles) const [year, week] = [moment().isoWeekYear(), moment().isoWeek()] const { data: weekLessons } = useTimetable( @@ -26,14 +26,16 @@ export const DaySummary = ({ child, date }: DaySummaryProps) => { .filter((lesson) => lesson.dayOfWeek === date.isoWeekday()) .sort((a, b) => a.dateStart.localeCompare(b.dateStart)) - const gymBag = lessons.some((lesson) => lesson.code === 'IDH') - if (lessons.length <= 0) { return null } + + const gymBag = lessons.some((lesson) => lesson.code === 'IDH') + return ( - + Skoldag + {lessons[0].timeStart.slice(0, 5)}- {lessons[lessons.length - 1].timeEnd.slice(0, 5)} {gymBag diff --git a/packages/app/components/icon.component.tsx b/packages/app/components/icon.component.tsx index 58991fa0..b6be9ad1 100644 --- a/packages/app/components/icon.component.tsx +++ b/packages/app/components/icon.component.tsx @@ -29,3 +29,4 @@ export const BookOpenIcon = uiIcon('book-open-outline') export const GlobeIcon = uiIcon('globe-outline') export const ExternalLinkIcon = uiIcon('external-link-outline') export const ClipboardIcon = uiIcon('clipboard-outline') +export const RightArrowIcon = uiIcon('arrow-ios-forward-outline') diff --git a/packages/app/components/week.component.tsx b/packages/app/components/week.component.tsx index 9be00373..cc5a30bb 100644 --- a/packages/app/components/week.component.tsx +++ b/packages/app/components/week.component.tsx @@ -24,6 +24,7 @@ interface WeekProps { interface LessonListProps { lessons: TimetableEntry[] + lunch?: MenuItem header: string } @@ -33,7 +34,7 @@ interface DayProps { lessons: TimetableEntry[] } -const LessonList = ({ lessons, header }: LessonListProps) => { +const LessonList = ({ lessons, header, lunch }: LessonListProps) => { const styles = useStyleSheet(themedStyles) return ( @@ -52,9 +53,11 @@ const LessonList = ({ lessons, header }: LessonListProps) => { key={id} style={styles.item} title={() => ( - - {name} - + + + {name} + + )} description={() => ( { timeStart < '12:00')} /> timeStart >= '12:00')} /> diff --git a/packages/app/styles/layout.ts b/packages/app/styles/layout.ts index c66779f2..8eecf826 100644 --- a/packages/app/styles/layout.ts +++ b/packages/app/styles/layout.ts @@ -1,13 +1,13 @@ import { ViewStyle } from 'react-native' -type MainAxis = 'center' | 'flexStart' +type MainAxis = 'center' | 'flexStart' | 'flexEnd' export const mainAxis: Record = { center: { alignItems: 'center', }, flexStart: { alignItems: 'flex-start', - }, + } } type CrossAxis = 'center' | 'flexEnd' | 'evenly' | 'spaceBetween' diff --git a/packages/app/translations/sv.json b/packages/app/translations/sv.json index f179923e..48c51682 100644 --- a/packages/app/translations/sv.json +++ b/packages/app/translations/sv.json @@ -18,7 +18,7 @@ "auth": { "bankid": { "OpenManually": "Öppna BankID manuellt", - "OpenOnAnotherDevice": "Öppna BankID på en annan enhet", + "OpenOnAnotherDevice": "Öppna BankID på annan enhet", "OpenOnThisDevice": "Logga in med BankID", "Waiting": "Väntar på BankID…" },