2021-03-10 10:22:53 +01:00
|
|
|
import Button from '@components/Button'
|
|
|
|
import haptics from '@components/haptics'
|
|
|
|
import ComponentSeparator from '@components/Separator'
|
2022-05-07 00:52:32 +02:00
|
|
|
import CustomText from '@components/Text'
|
2021-03-10 10:22:53 +01:00
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
2022-04-30 23:47:52 +02:00
|
|
|
import { useAppDispatch } from '@root/store'
|
2021-08-29 15:25:38 +02:00
|
|
|
import { TabMeStackScreenProps } from '@utils/navigation/navigators'
|
2021-03-10 10:22:53 +01:00
|
|
|
import {
|
|
|
|
changeFontsize,
|
|
|
|
getSettingsFontsize,
|
|
|
|
SettingsState
|
|
|
|
} from '@utils/slices/settingsSlice'
|
2021-03-10 11:49:14 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { adaptiveScale } from '@utils/styles/scaling'
|
2021-03-10 10:22:53 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
|
|
import React, { useMemo } from 'react'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-05-07 00:52:32 +02:00
|
|
|
import { StyleSheet, View } from 'react-native'
|
2021-03-10 10:22:53 +01:00
|
|
|
import { ScrollView } from 'react-native-gesture-handler'
|
2022-04-30 23:47:52 +02:00
|
|
|
import { useSelector } from 'react-redux'
|
2021-03-10 10:22:53 +01:00
|
|
|
|
|
|
|
export const mapFontsizeToName = (size: SettingsState['fontsize']) => {
|
|
|
|
switch (size) {
|
|
|
|
case -1:
|
|
|
|
return 'S'
|
|
|
|
case 0:
|
|
|
|
return 'M'
|
|
|
|
case 1:
|
|
|
|
return 'L'
|
|
|
|
case 2:
|
|
|
|
return 'XL'
|
|
|
|
case 3:
|
|
|
|
return 'XXL'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-18 19:59:38 +01:00
|
|
|
const TabMeSettingsFontsize: React.FC<
|
|
|
|
TabMeStackScreenProps<'Tab-Me-Settings-Fontsize'>
|
|
|
|
> = () => {
|
2022-02-12 14:51:01 +01:00
|
|
|
const { colors, theme } = useTheme()
|
2021-03-28 23:31:10 +02:00
|
|
|
const { t } = useTranslation('screenTabs')
|
2021-03-10 10:22:53 +01:00
|
|
|
const initialSize = useSelector(getSettingsFontsize)
|
2022-04-30 23:47:52 +02:00
|
|
|
const dispatch = useAppDispatch()
|
2021-03-10 10:22:53 +01:00
|
|
|
|
|
|
|
const item = {
|
|
|
|
id: 'demo',
|
|
|
|
uri: 'https://tooot.app',
|
|
|
|
created_at: new Date(),
|
|
|
|
sensitive: false,
|
|
|
|
visibility: 'public',
|
|
|
|
replies_count: 0,
|
|
|
|
reblogs_count: 0,
|
|
|
|
favourites_count: 0,
|
|
|
|
favourited: true,
|
|
|
|
reblogged: false,
|
|
|
|
muted: false,
|
|
|
|
bookmarked: false,
|
2021-03-28 23:31:10 +02:00
|
|
|
content: t('me.fontSize.demo'),
|
2021-03-10 10:22:53 +01:00
|
|
|
reblog: null,
|
|
|
|
application: {
|
|
|
|
name: 'tooot',
|
|
|
|
website: 'https://tooot.app'
|
|
|
|
},
|
|
|
|
account: {
|
|
|
|
id: 'demo',
|
|
|
|
url: 'https://tooot.app',
|
|
|
|
username: 'tooot📱',
|
|
|
|
acct: 'tooot@xmflsct.com',
|
|
|
|
display_name: 'tooot📱',
|
|
|
|
avatar_static: 'https://avatars.githubusercontent.com/u/77554750?s=100'
|
|
|
|
},
|
|
|
|
media_attachments: [],
|
|
|
|
mentions: []
|
|
|
|
}
|
|
|
|
|
|
|
|
const sizesDemo = useMemo(() => {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{([-1, 0, 1, 2, 3] as [-1, 0, 1, 2, 3]).map(size => (
|
2022-05-07 00:52:32 +02:00
|
|
|
<CustomText
|
2021-03-10 11:49:14 +01:00
|
|
|
key={size}
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{
|
|
|
|
marginHorizontal: StyleConstants.Spacing.XS,
|
|
|
|
paddingHorizontal: StyleConstants.Spacing.XS,
|
|
|
|
marginBottom: StyleConstants.Spacing.M,
|
|
|
|
fontSize: adaptiveScale(StyleConstants.Font.Size.M, size),
|
|
|
|
lineHeight: adaptiveScale(StyleConstants.Font.LineHeight.M, size),
|
|
|
|
fontWeight:
|
|
|
|
initialSize === size
|
|
|
|
? StyleConstants.Font.Weight.Bold
|
|
|
|
: undefined,
|
|
|
|
color:
|
|
|
|
initialSize === size ? colors.primaryDefault : colors.secondary,
|
|
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
|
|
borderColor: colors.border
|
|
|
|
}}
|
2021-03-10 10:22:53 +01:00
|
|
|
>
|
2021-03-28 23:31:10 +02:00
|
|
|
{t(`me.fontSize.sizes.${mapFontsizeToName(size)}`)}
|
2022-05-07 00:52:32 +02:00
|
|
|
</CustomText>
|
2021-03-10 10:22:53 +01:00
|
|
|
))}
|
|
|
|
</>
|
|
|
|
)
|
2022-02-12 14:51:01 +01:00
|
|
|
}, [theme, initialSize])
|
2021-03-10 10:22:53 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<ScrollView scrollEnabled={false}>
|
2022-05-07 00:52:32 +02:00
|
|
|
<CustomText
|
|
|
|
fontStyle='M'
|
|
|
|
style={{
|
|
|
|
textAlign: 'center',
|
|
|
|
marginTop: StyleConstants.Spacing.M,
|
|
|
|
marginBottom: StyleConstants.Spacing.M,
|
|
|
|
color: colors.primaryDefault
|
|
|
|
}}
|
|
|
|
>
|
2021-03-28 23:31:10 +02:00
|
|
|
{t('me.fontSize.showcase')}
|
2022-05-07 00:52:32 +02:00
|
|
|
</CustomText>
|
2021-03-10 10:22:53 +01:00
|
|
|
<View>
|
|
|
|
<ComponentSeparator
|
|
|
|
extraMarginLeft={-StyleConstants.Spacing.Global.PagePadding}
|
|
|
|
extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
|
|
|
|
/>
|
2021-12-18 19:59:38 +01:00
|
|
|
<TimelineDefault
|
|
|
|
// @ts-ignore
|
|
|
|
item={item}
|
|
|
|
disableDetails
|
|
|
|
disableOnPress
|
|
|
|
/>
|
2021-03-10 10:22:53 +01:00
|
|
|
<ComponentSeparator
|
|
|
|
extraMarginLeft={-StyleConstants.Spacing.Global.PagePadding}
|
|
|
|
extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
|
|
|
|
/>
|
|
|
|
</View>
|
2022-05-07 00:52:32 +02:00
|
|
|
<CustomText
|
|
|
|
fontStyle='M'
|
|
|
|
style={{
|
|
|
|
textAlign: 'center',
|
|
|
|
marginTop: StyleConstants.Spacing.M,
|
|
|
|
marginBottom: StyleConstants.Spacing.M,
|
|
|
|
color: colors.primaryDefault
|
|
|
|
}}
|
|
|
|
>
|
2021-03-28 23:31:10 +02:00
|
|
|
{t('me.fontSize.availableSizes')}
|
2022-05-07 00:52:32 +02:00
|
|
|
</CustomText>
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center'
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{sizesDemo}
|
|
|
|
</View>
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center'
|
|
|
|
}}
|
|
|
|
>
|
2021-03-10 10:22:53 +01:00
|
|
|
<Button
|
|
|
|
onPress={() => {
|
|
|
|
if (initialSize > -1) {
|
|
|
|
haptics('Light')
|
2021-08-29 15:25:38 +02:00
|
|
|
// @ts-ignore
|
2021-03-10 10:22:53 +01:00
|
|
|
dispatch(changeFontsize(initialSize - 1))
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
type='icon'
|
|
|
|
content='Minus'
|
|
|
|
round
|
|
|
|
disabled={initialSize <= -1}
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{ marginHorizontal: StyleConstants.Spacing.S }}
|
2021-03-10 10:22:53 +01:00
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
onPress={() => {
|
|
|
|
if (initialSize < 3) {
|
|
|
|
haptics('Light')
|
2021-08-29 15:25:38 +02:00
|
|
|
// @ts-ignore
|
2021-03-10 10:22:53 +01:00
|
|
|
dispatch(changeFontsize(initialSize + 1))
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
type='icon'
|
|
|
|
content='Plus'
|
|
|
|
round
|
|
|
|
disabled={initialSize >= 3}
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{ marginHorizontal: StyleConstants.Spacing.S }}
|
2021-03-10 10:22:53 +01:00
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
</ScrollView>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-09 21:59:03 +02:00
|
|
|
export default TabMeSettingsFontsize
|