2021-03-10 10:22:53 +01:00
|
|
|
import Button from '@components/Button'
|
|
|
|
import haptics from '@components/haptics'
|
|
|
|
import ComponentSeparator from '@components/Separator'
|
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
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'
|
|
|
|
import { StyleSheet, Text, View } from 'react-native'
|
|
|
|
import { ScrollView } from 'react-native-gesture-handler'
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
|
|
|
|
|
|
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'>
|
|
|
|
> = () => {
|
2021-03-10 10:22:53 +01:00
|
|
|
const { mode, 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)
|
|
|
|
const dispatch = useDispatch()
|
|
|
|
|
|
|
|
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 => (
|
|
|
|
<Text
|
2021-03-10 11:49:14 +01:00
|
|
|
key={size}
|
2021-03-10 10:22:53 +01:00
|
|
|
style={[
|
|
|
|
styles.size,
|
|
|
|
{
|
|
|
|
fontSize: adaptiveScale(StyleConstants.Font.Size.M, size),
|
|
|
|
lineHeight: adaptiveScale(
|
|
|
|
StyleConstants.Font.LineHeight.M,
|
|
|
|
size
|
|
|
|
),
|
|
|
|
fontWeight:
|
|
|
|
initialSize === size
|
|
|
|
? StyleConstants.Font.Weight.Bold
|
|
|
|
: undefined,
|
2021-03-21 14:14:10 +01:00
|
|
|
color:
|
|
|
|
initialSize === size ? theme.primaryDefault : theme.secondary,
|
2021-03-10 10:22:53 +01:00
|
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
|
|
borderColor: theme.border
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
>
|
2021-03-28 23:31:10 +02:00
|
|
|
{t(`me.fontSize.sizes.${mapFontsizeToName(size)}`)}
|
2021-03-10 10:22:53 +01:00
|
|
|
</Text>
|
|
|
|
))}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}, [mode, initialSize])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ScrollView scrollEnabled={false}>
|
2021-03-21 14:14:10 +01:00
|
|
|
<Text style={[styles.header, { color: theme.primaryDefault }]}>
|
2021-03-28 23:31:10 +02:00
|
|
|
{t('me.fontSize.showcase')}
|
2021-03-10 10:22:53 +01:00
|
|
|
</Text>
|
|
|
|
<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>
|
2021-03-21 14:14:10 +01:00
|
|
|
<Text style={[styles.header, { color: theme.primaryDefault }]}>
|
2021-03-28 23:31:10 +02:00
|
|
|
{t('me.fontSize.availableSizes')}
|
2021-03-10 10:22:53 +01:00
|
|
|
</Text>
|
|
|
|
<View style={styles.sizesDemo}>{sizesDemo}</View>
|
|
|
|
<View style={styles.controls}>
|
|
|
|
<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}
|
|
|
|
style={styles.control}
|
|
|
|
/>
|
|
|
|
<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}
|
|
|
|
style={styles.control}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
</ScrollView>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
header: {
|
|
|
|
...StyleConstants.FontStyle.M,
|
|
|
|
textAlign: 'center',
|
|
|
|
marginTop: StyleConstants.Spacing.M,
|
|
|
|
marginBottom: StyleConstants.Spacing.M
|
|
|
|
},
|
|
|
|
sizesDemo: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center'
|
|
|
|
},
|
|
|
|
size: {
|
|
|
|
marginHorizontal: StyleConstants.Spacing.XS,
|
|
|
|
paddingHorizontal: StyleConstants.Spacing.XS,
|
|
|
|
marginBottom: StyleConstants.Spacing.M
|
|
|
|
},
|
|
|
|
controls: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center'
|
|
|
|
},
|
|
|
|
control: {
|
|
|
|
marginHorizontal: StyleConstants.Spacing.S
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-05-09 21:59:03 +02:00
|
|
|
export default TabMeSettingsFontsize
|