octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Change language working partially

Browse Source 
Not all translatinos are updated
This commit is contained in:
Zhiyuan Zheng
2020-11-29 13:11:23 +01:00
parent 735cc0b903
commit 24d0681c9e
29 changed files with 525 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Menu/Container.tsx
View File

@ -4,11 +4,24 @@ import { useTheme } from 'src/utils/styles/ThemeManager'
import constants from 'src/utils/styles/constants'
const MenuContainer: React.FC = ({ ...props }) => {
export interface Props {
children: React.ReactNode
marginTop?: boolean
}
const MenuContainer: React.FC<Props> = ({ ...props }) => {
const { theme } = useTheme()
return (
<View style={[styles.base, { borderTopColor: theme.separator }]}>
<View
style={[
styles.base,
{
borderTopColor: theme.separator,
marginTop: props.marginTop ? constants.GLOBAL_PAGE_PADDING : 0
}
]}
>
{props.children}
</View>
)
@ -17,7 +30,7 @@ const MenuContainer: React.FC = ({ ...props }) => {
const styles = StyleSheet.create({
base: {
borderTopWidth: 1,
marginBottom: constants.SPACING_M
marginBottom: constants.GLOBAL_PAGE_PADDING
}
})

105
src/components/Menu/Item.tsx
View File

@ -1,61 +1,82 @@
import React from 'react'
import { Pressable, StyleSheet, Text, View } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { Feather } from '@expo/vector-icons'
import { useTheme } from 'src/utils/styles/ThemeManager'
import constants from 'src/utils/styles/constants'
import { ColorDefinitions } from 'src/utils/styles/themes'
export interface Props {
icon?: string
iconFront?: string
iconFrontColor?: ColorDefinitions
title: string
navigateTo?: string
navigateToParams?: {}
content?: string
iconBack?: 'chevron-right' | 'check'
iconBackColor?: ColorDefinitions
onPress?: () => void
}
const Core: React.FC<Props> = ({ icon, title, navigateTo }) => {
const Core: React.FC<Props> = ({
iconFront,
iconFrontColor,
title,
content,
iconBack,
iconBackColor
}) => {
const { theme } = useTheme()
iconFrontColor = iconFrontColor || 'primary'
iconBackColor = iconBackColor || 'secondary'
return (
<View style={styles.core}>
{icon && (
<Feather
name={icon}
size={constants.FONT_SIZE_M + 2}
style={styles.iconLeading}
color={theme.primary}
/>
)}
<Text style={{ color: theme.primary, fontSize: constants.FONT_SIZE_M }}>
{title}
</Text>
{navigateTo && (
<Feather
name='chevron-right'
size={24}
color={theme.secondary}
style={styles.iconNavigation}
/>
)}
<View style={styles.front}>
{iconFront && (
<Feather
name={iconFront}
size={constants.FONT_SIZE_M + 2}
color={theme[iconFrontColor]}
style={styles.iconFront}
/>
)}
<Text style={[styles.text, { color: theme.primary }]} numberOfLines={1}>
{title}
</Text>
</View>
<View style={styles.back}>
{content && (
<Text
style={[styles.content, { color: theme.secondary }]}
numberOfLines={1}
>
{content}
</Text>
)}
{iconBack && (
<Feather
name={iconBack}
size={constants.FONT_SIZE_M + 2}
color={theme[iconBackColor]}
style={styles.iconBack}
/>
)}
</View>
</View>
)
}
const MenuItem: React.FC<Props> = ({ ...props }) => {
const { theme } = useTheme()
const navigation = useNavigation()
return props.navigateTo ? (
return props.onPress ? (
<Pressable
style={[styles.base, { borderBottomColor: theme.separator }]}
onPress={() => {
navigation.navigate(props.navigateTo!, props.navigateToParams)
}}
onPress={props.onPress}
>
<Core {...props} />
</Pressable>
) : (
<View style={styles.base}>
<View style={[styles.base, { borderBottomColor: theme.separator }]}>
<Core {...props} />
</View>
)
@ -69,15 +90,31 @@ const styles = StyleSheet.create({
core: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingLeft: constants.GLOBAL_PAGE_PADDING,
paddingRight: constants.GLOBAL_PAGE_PADDING
},
iconLeading: {
front: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
back: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center'
},
iconFront: {
marginRight: 8
},
iconNavigation: {
marginLeft: 'auto'
text: {
fontSize: constants.FONT_SIZE_M
},
content: {
fontSize: constants.FONT_SIZE_M
},
iconBack: {
marginLeft: 8
}
})