mirror of
https://github.com/tooot-app/app
synced 2025-06-05 22:19:13 +02:00
Try to fix font size does not adapat
This commit is contained in:
@ -1,5 +1,6 @@
|
|||||||
import { getSettingsFontsize } from '@utils/slices/settingsSlice'
|
import { getSettingsFontsize } from '@utils/slices/settingsSlice'
|
||||||
import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
|
import { adaptiveScale } from '@utils/styles/scaling'
|
||||||
import { useTheme } from '@utils/styles/ThemeManager'
|
import { useTheme } from '@utils/styles/ThemeManager'
|
||||||
import React, { useMemo } from 'react'
|
import React, { useMemo } from 'react'
|
||||||
import { StyleSheet, Text } from 'react-native'
|
import { StyleSheet, Text } from 'react-native'
|
||||||
|
@ -5,8 +5,9 @@ import ParseEmojis from '@components/Parse/Emojis'
|
|||||||
import { useNavigation, useRoute } from '@react-navigation/native'
|
import { useNavigation, useRoute } from '@react-navigation/native'
|
||||||
import { StackNavigationProp } from '@react-navigation/stack'
|
import { StackNavigationProp } from '@react-navigation/stack'
|
||||||
import { getSettingsFontsize } from '@utils/slices/settingsSlice'
|
import { getSettingsFontsize } from '@utils/slices/settingsSlice'
|
||||||
import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
import layoutAnimation from '@utils/styles/layoutAnimation'
|
import layoutAnimation from '@utils/styles/layoutAnimation'
|
||||||
|
import { adaptiveScale } from '@utils/styles/scaling'
|
||||||
import { useTheme } from '@utils/styles/ThemeManager'
|
import { useTheme } from '@utils/styles/ThemeManager'
|
||||||
import { LinearGradient } from 'expo-linear-gradient'
|
import { LinearGradient } from 'expo-linear-gradient'
|
||||||
import React, { useCallback, useState } from 'react'
|
import React, { useCallback, useState } from 'react'
|
||||||
|
@ -2,6 +2,8 @@ export default {
|
|||||||
heading: 'Toot font size',
|
heading: 'Toot font size',
|
||||||
content: {
|
content: {
|
||||||
showcase: 'Example toot',
|
showcase: 'Example toot',
|
||||||
|
demo:
|
||||||
|
'<p>This is a demo toot😊. You can choose from several options from below.<br /><br />This setting only affects the main content of toots, but not other font sizes.</p>',
|
||||||
availableSizes: 'Available sizes',
|
availableSizes: 'Available sizes',
|
||||||
sizes: { S: 'S', M: 'M - Default', L: 'L', XL: 'XL', XXL: 'XXL' }
|
sizes: { S: 'S', M: 'M - Default', L: 'L', XL: 'XL', XXL: 'XXL' }
|
||||||
}
|
}
|
||||||
|
@ -2,6 +2,8 @@ export default {
|
|||||||
heading: '嘟文字号',
|
heading: '嘟文字号',
|
||||||
content: {
|
content: {
|
||||||
showcase: '嘟文示例',
|
showcase: '嘟文示例',
|
||||||
|
demo:
|
||||||
|
'<p>这是一条测试用的嘟文😊。以下是可供选择的字号,从小号至超大号。<br /><br />这个设置仅会调整嘟文的正文字号,不影响其它字号。</p>',
|
||||||
availableSizes: '可选字号',
|
availableSizes: '可选字号',
|
||||||
sizes: { S: '小号', M: '默认', L: '大号', XL: '特大号', XXL: '超大号' }
|
sizes: { S: '小号', M: '默认', L: '大号', XL: '特大号', XXL: '超大号' }
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,8 @@ import {
|
|||||||
getSettingsFontsize,
|
getSettingsFontsize,
|
||||||
SettingsState
|
SettingsState
|
||||||
} from '@utils/slices/settingsSlice'
|
} from '@utils/slices/settingsSlice'
|
||||||
import { adaptiveScale, StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
|
import { adaptiveScale } from '@utils/styles/scaling'
|
||||||
import { useTheme } from '@utils/styles/ThemeManager'
|
import { useTheme } from '@utils/styles/ThemeManager'
|
||||||
import React, { useMemo } from 'react'
|
import React, { useMemo } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
@ -53,8 +54,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
|
|||||||
reblogged: false,
|
reblogged: false,
|
||||||
muted: false,
|
muted: false,
|
||||||
bookmarked: false,
|
bookmarked: false,
|
||||||
content:
|
content: t('content.demo'),
|
||||||
'<p>- tooot supports multiple accounts<br />- tooot supports browsing external instance<br />- tooot aims to support multiple languages</p>',
|
|
||||||
reblog: null,
|
reblog: null,
|
||||||
application: {
|
application: {
|
||||||
name: 'tooot',
|
name: 'tooot',
|
||||||
@ -77,6 +77,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
|
|||||||
<>
|
<>
|
||||||
{([-1, 0, 1, 2, 3] as [-1, 0, 1, 2, 3]).map(size => (
|
{([-1, 0, 1, 2, 3] as [-1, 0, 1, 2, 3]).map(size => (
|
||||||
<Text
|
<Text
|
||||||
|
key={size}
|
||||||
style={[
|
style={[
|
||||||
styles.size,
|
styles.size,
|
||||||
{
|
{
|
||||||
|
@ -1,15 +1,3 @@
|
|||||||
import { Dimensions } from 'react-native'
|
|
||||||
|
|
||||||
const { width } = Dimensions.get('screen')
|
|
||||||
|
|
||||||
const guidelineBaseWidth = 375
|
|
||||||
// const guidelineBaseHeight = 667
|
|
||||||
|
|
||||||
const scale = (size: number) => (width / guidelineBaseWidth) * size
|
|
||||||
// const verticalScale = (size: number) => (height / guidelineBaseHeight) * size
|
|
||||||
export const adaptiveScale = (size: number, factor: number = 0) =>
|
|
||||||
size + (scale(size) - size) * factor
|
|
||||||
|
|
||||||
const Base = 4
|
const Base = 4
|
||||||
|
|
||||||
export const StyleConstants = {
|
export const StyleConstants = {
|
||||||
|
13
src/utils/styles/scaling.ts
Normal file
13
src/utils/styles/scaling.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Dimensions } from 'react-native'
|
||||||
|
|
||||||
|
const { width } = Dimensions.get('screen')
|
||||||
|
|
||||||
|
const guidelineBaseWidth = 375
|
||||||
|
// const guidelineBaseHeight = 667
|
||||||
|
|
||||||
|
const scale = (size: number) => (width / guidelineBaseWidth) * size
|
||||||
|
// const verticalScale = (size: number) => (height / guidelineBaseHeight) * size
|
||||||
|
const adaptiveScale = (size: number, factor: number = 0) =>
|
||||||
|
size + (scale(size) - size) * factor
|
||||||
|
|
||||||
|
export { adaptiveScale }
|
Reference in New Issue
Block a user