Skip to content

Commit

Permalink
feat(timetable): update dropdown menu items and localization strings
Browse files Browse the repository at this point in the history
  • Loading branch information
@Robert27
Robert27 committed Dec 23, 2024
1 parent 5e0fd12 commit 70a3542
Show file tree
Hide file tree
Showing 12 changed files with 131 additions and 142 deletions.
11 changes: 11 additions & 0 deletions android/app/src/main/res/drawable/check.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="@android:color/white"
android:pathData="M382,720L154,492L211,435L382,606L749,239L806,296L382,720Z"/>
</vector>
Binary file modified bun.lockb
View file
Binary file not shown.
8 changes: 4 additions & 4 deletions ios/Podfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,11 +318,11 @@ PODS:
- hermes-engine (0.76.5):
- hermes-engine/Pre-built (= 0.76.5)
- hermes-engine/Pre-built (0.76.5)
- maplibre-react-native (10.0.0-beta.11):
- maplibre-react-native/DynamicLibrary (= 10.0.0-beta.11)
- maplibre-react-native (10.0.0-beta.13):
- maplibre-react-native/DynamicLibrary (= 10.0.0-beta.13)
- React
- React-Core
- maplibre-react-native/DynamicLibrary (10.0.0-beta.11):
- maplibre-react-native/DynamicLibrary (10.0.0-beta.13):
- React
- React-Core
- RCT-Folly (2024.01.01.00):
Expand Down Expand Up @@ -2788,7 +2788,7 @@ SPEC CHECKSUMS:
fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be
glog: 08b301085f15bcbb6ff8632a8ebaf239aae04e6a
hermes-engine: 06a9c6900587420b90accc394199527c64259db4
maplibre-react-native: e0b56ed1bc9d8c895e5999ba5ee03268f5b734bf
maplibre-react-native: fd8dd338959f3bb5038ce85d21eb60498176a8da
RCT-Folly: bf5c0376ffe4dd2cf438dcf86db385df9fdce648
RCTDeprecation: fb7d408617e25d7f537940000d766d60149c5fea
RCTRequired: 9aaf0ffcc1f41f0c671af863970ef25c422a9920
Expand Down
12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,16 @@
"@gorhom/bottom-sheet": "^5.0.6",
"@howljs/calendar-kit": "^2.2.1",
"@kichiyaki/react-native-barcode-generator": "^0.6.7",
"@maplibre/maplibre-react-native": "^10.0.0-beta.11",
"@maplibre/maplibre-react-native": "^10.0.0-beta.13",
"@react-native-community/datetimepicker": "8.2.0",
"@react-native-community/netinfo": "11.4.1",
"@react-native-menu/menu": "^1.1.7",
"@react-navigation/native": "^7.0.14",
"@react-navigation/stack": "^7.1.1",
"@shopify/flash-list": "1.7.1",
"@tanstack/query-sync-storage-persister": "^5.62.8",
"@tanstack/react-query": "^5.62.8",
"@tanstack/react-query-persist-client": "^5.62.8",
"@tanstack/query-sync-storage-persister": "^5.62.9",
"@tanstack/react-query": "^5.62.9",
"@tanstack/react-query-persist-client": "^5.62.9",
"@th3rdwave/react-navigation-bottom-sheet": "0.3.2",
"burnt": "^0.12.2",
"color": "^4.2.3",
Expand Down Expand Up @@ -129,8 +129,8 @@
"@types/prop-types": "^15.7.14",
"@types/react": "~18.3.18",
"@types/sanitize-html": "^2.13.0",
"@typescript-eslint/eslint-plugin": "^8.18.1",
"@typescript-eslint/parser": "^8.18.1",
"@typescript-eslint/eslint-plugin": "^8.18.2",
"@typescript-eslint/parser": "^8.18.2",
"ajv": "^8.17.1",
"babel-plugin-formatjs": "^10.5.29",
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
Expand Down
28 changes: 0 additions & 28 deletions src/components/Menu/DropdownMenuCheckIcon.tsx
View file

This file was deleted.

3 changes: 2 additions & 1 deletion src/components/Menu/DropdownMenuTrigger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ const stylesheet = createStyleSheet((theme) => ({
borderWidth: 0,
fontSize: 18,
outlineStyle: 'none',
paddingLeft: Platform.OS === 'web' ? 14 : 0,
paddingLeft:
Platform.OS === 'web' ? 14 : Platform.OS === 'android' ? 10 : 0,
paddingVertical: 10,
},
}))
65 changes: 37 additions & 28 deletions src/components/Timetable/Menu.web.tsx → src/components/Timetable/Menu.ios.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import { useTranslation } from 'react-i18next'
import { createStyleSheet, useStyles } from 'react-native-unistyles'
import * as DropdownMenu from 'zeego/dropdown-menu'

import DropdownMenuCheckIcon from '../Menu/DropdownMenuCheckIcon'
import DropdownMenuContent from '../Menu/DropdownMenuContent'
import DropdownMenuItem from '../Menu/DropdownMenuItem'
import DropdownMenuSeparator from '../Menu/DropdownMenuItemSeparator'
import DropdownMenuItemTitle from '../Menu/DropdownMenuItemTitle'
import DropdownMenuTrigger from '../Menu/DropdownMenuTrigger'
Expand All @@ -25,7 +23,7 @@ export function MyMenu() {
<DropdownMenuTrigger>
<PlatformIcon
ios={{
name: 'calendar',
name: 'calendar.day.timeline.left',
size: 20,
}}
android={{
Expand All @@ -40,61 +38,72 @@ export function MyMenu() {
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
<DropdownMenu.CheckboxItem
key="1"
onSelect={() => {
value={timetableMode === TimetableMode.Timeline1}
onValueChange={() => {
setTimetableMode(TimetableMode.Timeline1)
}}
>
<DropdownMenuItemTitle>
{t('menu.oneDay')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline1 && (
<DropdownMenuCheckIcon />
)}
</DropdownMenuItem>
<DropdownMenu.ItemIcon
ios={{
name: '1.circle',
}}
/>
</DropdownMenu.CheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuItem
<DropdownMenu.CheckboxItem
key="3"
onSelect={() => {
value={timetableMode === TimetableMode.Timeline3}
onValueChange={() => {
setTimetableMode(TimetableMode.Timeline3)
}}
>
<DropdownMenuItemTitle>
{t('menu.threeDays')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline3 && (
<DropdownMenuCheckIcon />
)}
</DropdownMenuItem>
<DropdownMenu.ItemIcon
ios={{
name: '3.circle',
}}
/>
</DropdownMenu.CheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuItem
<DropdownMenu.CheckboxItem
key="5"
onSelect={() => {
value={timetableMode === TimetableMode.Timeline5}
onValueChange={() => {
setTimetableMode(TimetableMode.Timeline5)
}}
>
<DropdownMenuItemTitle>
{t('menu.fiveDays')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline5 && (
<DropdownMenuCheckIcon />
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
<DropdownMenu.ItemIcon
ios={{
name: '5.circle',
}}
/>
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
key="list"
onSelect={() => {
value={timetableMode === TimetableMode.List}
onValueChange={() => {
setTimetableMode(TimetableMode.List)
}}
>
<DropdownMenuItemTitle>
{t('menu.list')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.List && (
<DropdownMenuCheckIcon />
)}
</DropdownMenuItem>
<DropdownMenu.ItemIcon
ios={{
name: 'list.dash',
}}
/>
</DropdownMenu.CheckboxItem>
</DropdownMenuContent>
</DropdownMenu.Root>
)
Expand Down
129 changes: 64 additions & 65 deletions src/components/Timetable/Menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { TimetableMode, usePreferencesStore } from '@/hooks/usePreferencesStore'
import { Check } from 'lucide-react-native'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { createStyleSheet, useStyles } from 'react-native-unistyles'
Expand All @@ -8,7 +9,6 @@ import DropdownMenuContent from '../Menu/DropdownMenuContent'
import DropdownMenuItem from '../Menu/DropdownMenuItem'
import DropdownMenuSeparator from '../Menu/DropdownMenuItemSeparator'
import DropdownMenuItemTitle from '../Menu/DropdownMenuItemTitle'
import DropdownMenuSubContent from '../Menu/DropdownMenuSubContent'
import DropdownMenuTrigger from '../Menu/DropdownMenuTrigger'
import PlatformIcon from '../Universal/Icon'

Expand All @@ -30,7 +30,7 @@ export function MyMenu() {
}}
android={{
name: 'calendar_month',
size: 20,
size: 22,
}}
web={{
name: 'Calendar',
Expand All @@ -40,68 +40,63 @@ export function MyMenu() {
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger key="timeline">
{t('menu.timeline')}
</DropdownMenu.SubTrigger>

<DropdownMenuSubContent>
<DropdownMenuItem
key="1"
onSelect={() => {
setTimetableMode(TimetableMode.Timeline1)
}}
<DropdownMenuItem
key="1"
onSelect={() => {
setTimetableMode(TimetableMode.Timeline1)
}}
>
<DropdownMenuItemTitle>
{t('menu.oneDay')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline1 && (
<DropdownMenu.ItemIcon
androidIconName="check"
style={styles.check}
>
<DropdownMenuItemTitle>
{t('menu.oneDay')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline1 && (
<DropdownMenu.ItemIcon
ios={{
name: 'checkmark',
}}
/>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
key="3"
onSelect={() => {
setTimetableMode(TimetableMode.Timeline3)
}}
<Check size={18} />
</DropdownMenu.ItemIcon>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
key="3"
onSelect={() => {
setTimetableMode(TimetableMode.Timeline3)
}}
>
<DropdownMenuItemTitle>
{t('menu.threeDays')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline3 && (
<DropdownMenu.ItemIcon
androidIconName="check"
style={styles.check}
>
<DropdownMenuItemTitle>
{t('menu.threeDays')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline3 && (
<DropdownMenu.ItemIcon
ios={{
name: 'checkmark',
}}
/>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
key="5"
onSelect={() => {
setTimetableMode(TimetableMode.Timeline5)
}}
<Check size={18} />
</DropdownMenu.ItemIcon>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
key="5"
onSelect={() => {
setTimetableMode(TimetableMode.Timeline5)
}}
>
<DropdownMenuItemTitle>
{t('menu.fiveDays')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline5 && (
<DropdownMenu.ItemIcon
androidIconName="check"
style={styles.check}
>
<DropdownMenuItemTitle>
{t('menu.fiveDays')}
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.Timeline5 && (
<DropdownMenu.ItemIcon
ios={{
name: 'checkmark',
}}
/>
)}
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenu.Sub>

<Check size={18} />
</DropdownMenu.ItemIcon>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
key="list"
onSelect={() => {
Expand All @@ -113,10 +108,11 @@ export function MyMenu() {
</DropdownMenuItemTitle>
{timetableMode === TimetableMode.List && (
<DropdownMenu.ItemIcon
ios={{
name: 'checkmark',
}}
/>
androidIconName="check"
style={styles.check}
>
<Check size={18} />
</DropdownMenu.ItemIcon>
)}
</DropdownMenuItem>
</DropdownMenuContent>
Expand All @@ -125,6 +121,9 @@ export function MyMenu() {
}

const stylesheet = createStyleSheet((theme) => ({
check: {
color: theme.colors.labelColor,
},
trigger: {
color: theme.colors.text,
},
Expand Down
Loading

0 comments on commit 70a3542

Please sign in to comment.