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

Force all tex to have both font size and line height

Browse Source 
https://github.com/facebook/react-native/issues/19193 describes the issue. But https://github.com/facebook/react-native/issues/19193#issuecomment-467852112 suggestion does not look well with PingFang and English
This commit is contained in:
Zhiyuan Zheng
2020-12-29 00:21:05 +01:00
parent 83b725b58d
commit 4f0621bbff
39 changed files with 110 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Header/Left.tsx
View File

@ -57,7 +57,7 @@ const styles = StyleSheet.create({
borderRadius: 100
},
text: {
fontSize: StyleConstants.Font.Size.M
...StyleConstants.FontStyle.M
}
})

2
src/components/Header/Right.tsx
View File

@ -93,7 +93,7 @@ const styles = StyleSheet.create({
borderRadius: 100
},
text: {
fontSize: StyleConstants.Font.Size.M
...StyleConstants.FontStyle.M
}
})

2
src/components/Menu/Header.tsx
View File

@ -24,7 +24,7 @@ const styles = StyleSheet.create({
paddingBottom: StyleConstants.Spacing.S
},
text: {
fontSize: StyleConstants.Font.Size.S,
...StyleConstants.FontStyle.S,
fontWeight: StyleConstants.Font.Weight.Bold
}
})

4
src/components/Menu/Row.tsx
View File

@ -133,10 +133,10 @@ const styles = StyleSheet.create({
},
text: {
flex: 1,
fontSize: StyleConstants.Font.Size.M
...StyleConstants.FontStyle.M
},
content: {
fontSize: StyleConstants.Font.Size.M
...StyleConstants.FontStyle.M
},
iconBack: {
marginLeft: 8

21
src/components/ParseContent.tsx
View File

@ -40,7 +40,7 @@ const renderNode = ({
key={index}
style={{
color: theme.blue,
fontSize: StyleConstants.Font.Size[size]
...StyleConstants.FontStyle[size]
}}
onPress={() => {
const tag = href.split(new RegExp(/\/tag\/(.*)|\/tags\/(.*)/))
@ -59,7 +59,7 @@ const renderNode = ({
key={index}
style={{
color: theme.blue,
fontSize: StyleConstants.Font.Size[size]
...StyleConstants.FontStyle[size]
}}
onPress={() => {
const username = href.split(new RegExp(/@(.*)/))
@ -79,13 +79,14 @@ const renderNode = ({
} else {
const domain = href.split(new RegExp(/:\/\/(.[^\/]+)/))
const content = node.children && node.children[0].data
const shouldBeTag = tags && tags.filter(tag => `#${tag.name}` === content)
const shouldBeTag =
tags && tags.filter(tag => `#${tag.name}` === content).length > 0
return (
<Text
key={index}
style={{
color: theme.blue,
fontSize: StyleConstants.Font.Size[size]
...StyleConstants.FontStyle[size]
}}
onPress={async () =>
!shouldBeTag
@ -158,13 +159,9 @@ const ParseContent: React.FC<Props> = ({
const textComponent = useCallback(({ children }) => {
if (children) {
return emojis ? (
<Emojis
content={children.toString()}
emojis={emojis}
size={StyleConstants.Font.Size[size]}
/>
<Emojis content={children.toString()} emojis={emojis} size={size} />
) : (
<Text>{children}</Text>
<Text style={{ ...StyleConstants.FontStyle[size] }}>{children}</Text>
)
} else {
return null
@ -198,7 +195,7 @@ const ParseContent: React.FC<Props> = ({
return (
<View>
<Text
style={{ lineHeight, color: theme.primary, overflow: 'hidden' }}
style={{ color: theme.primary, overflow: 'hidden' }}
children={children}
numberOfLines={calNumberOfLines}
onLayout={({ nativeEvent }) => {
@ -237,7 +234,7 @@ const ParseContent: React.FC<Props> = ({
<Text
style={{
textAlign: 'center',
fontSize: StyleConstants.Font.Size.S,
...StyleConstants.FontStyle.S,
color: theme.primary
}}
>

2
src/components/Timelines/Timeline/Empty.tsx
View File

@ -61,7 +61,7 @@ const styles = StyleSheet.create({
alignItems: 'center'
},
error: {
fontSize: StyleConstants.Font.Size.M,
...StyleConstants.FontStyle.M,
marginTop: StyleConstants.Spacing.S,
marginBottom: StyleConstants.Spacing.L
}

2
src/components/Timelines/Timeline/Shared/Actioned.tsx
View File

@ -90,7 +90,7 @@ const TimelineActioned: React.FC<Props> = ({
<Emojis
content={content}
emojis={account.emojis}
size={StyleConstants.Font.Size.S}
size='S'
/>
) : (
<Text>{content}</Text>

2
src/components/Timelines/Timeline/Shared/Actions.tsx
View File

@ -194,7 +194,7 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
<Text
style={{
color: theme.secondary,
fontSize: StyleConstants.Font.Size.M,
...StyleConstants.FontStyle.M,
marginLeft: StyleConstants.Spacing.XS
}}
>

2
src/components/Timelines/Timeline/Shared/Attachment.tsx
View File

@ -152,7 +152,7 @@ const styles = StyleSheet.create({
borderRadius: 6
},
sensitiveText: {
fontSize: StyleConstants.Font.Size.M
...StyleConstants.FontStyle.M
}
})

2
src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx
View File

@ -57,7 +57,7 @@ const styles = StyleSheet.create({
alignItems: 'center'
},
text: {
fontSize: StyleConstants.Font.Size.S,
...StyleConstants.FontStyle.S,
textAlign: 'center',
marginBottom: StyleConstants.Spacing.S
}

32
src/components/Timelines/Timeline/Shared/Emojis.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { Image, StyleSheet, Text } from 'react-native'
import { useTheme } from '@utils/styles/ThemeManager'
import { StyleConstants } from '@utils/styles/constants'
@ -8,7 +8,7 @@ const regexEmoji = new RegExp(/(:[a-z0-9_]+:)/)
export interface Props {
content: string
emojis: Mastodon.Emoji[]
size: number
size?: 'S' | 'M' | 'L'
fontBold?: boolean
numberOfLines?: number
}
@ -16,22 +16,21 @@ export interface Props {
const Emojis: React.FC<Props> = ({
content,
emojis,
size,
size = 'M',
fontBold = false,
numberOfLines
}) => {
const { theme } = useTheme()
const styles = StyleSheet.create({
text: {
fontSize: size,
color: theme.primary,
...StyleConstants.FontStyle[size],
...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
},
image: {
width: size,
height: size,
paddingTop: 1,
marginBottom: -1
width: StyleConstants.Font.Size[size],
height: StyleConstants.Font.Size[size],
marginBottom: -2 // hacking
}
})
@ -48,14 +47,12 @@ const Emojis: React.FC<Props> = ({
{emojiShortcode}
</Text>
) : (
<View key={i} style={styles.image}>
<Image
key={i}
resizeMode='contain'
source={{ uri: emojis[emojiIndex].url }}
style={{ width: '100%', height: '100%' }}
/>
</View>
<Image
key={i}
resizeMode='contain'
source={{ uri: emojis[emojiIndex].url }}
style={[styles.image]}
/>
)
} else {
return str ? (
@ -71,4 +68,5 @@ const Emojis: React.FC<Props> = ({
)
}
export default React.memo(Emojis, () => true)
// export default React.memo(Emojis, () => true)
export default Emojis

2
src/components/Timelines/Timeline/Shared/End.tsx
View File

@ -39,7 +39,7 @@ const styles = StyleSheet.create({
padding: StyleConstants.Spacing.M
},
text: {
fontSize: StyleConstants.Font.Size.S,
...StyleConstants.FontStyle.S,
marginLeft: StyleConstants.Spacing.S
}
})

6
src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
View File

@ -85,7 +85,7 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
conversation.accounts[0].username
}
emojis={conversation.accounts[0].emojis}
size={StyleConstants.Font.Size.M}
size='M'
fontBold={true}
/>
) : (
@ -141,7 +141,7 @@ const styles = StyleSheet.create({
marginLeft: StyleConstants.Spacing.XS
},
nameWithoutEmoji: {
fontSize: StyleConstants.Font.Size.M,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
},
meta: {
@ -151,7 +151,7 @@ const styles = StyleSheet.create({
marginBottom: StyleConstants.Spacing.S
},
created_at: {
fontSize: StyleConstants.Font.Size.S
...StyleConstants.FontStyle.S
},
unread: {
marginLeft: StyleConstants.Spacing.XS

15
src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
View File

@ -68,12 +68,12 @@ const TimelineHeaderDefault: React.FC<Props> = ({
return (
<View style={styles.base}>
<View style={queryKey ? { flexBasis: '80%' } : { flexBasis: '100%' }}>
<View style={styles.name}>
<View style={styles.nameAndAccount}>
{emojis?.length ? (
<Emojis
content={name}
emojis={emojis}
size={StyleConstants.Font.Size.M}
size='M'
fontBold={true}
/>
) : (
@ -168,11 +168,12 @@ const styles = StyleSheet.create({
nameAndMeta: {
flexBasis: '80%'
},
name: {
flexDirection: 'row'
nameAndAccount: {
flexDirection: 'row',
alignItems: 'center'
},
nameWithoutEmoji: {
fontSize: StyleConstants.Font.Size.M,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
},
account: {
@ -186,13 +187,13 @@ const styles = StyleSheet.create({
marginBottom: StyleConstants.Spacing.S
},
created_at: {
fontSize: StyleConstants.Font.Size.S
...StyleConstants.FontStyle.S
},
visibility: {
marginLeft: StyleConstants.Spacing.S
},
application: {
fontSize: StyleConstants.Font.Size.S,
...StyleConstants.FontStyle.S,
marginLeft: StyleConstants.Spacing.S
},
action: {

8
src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
View File

@ -128,7 +128,7 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
<Emojis
content={name}
emojis={emojis}
size={StyleConstants.Font.Size.M}
size='M'
fontBold={true}
/>
) : (
@ -194,7 +194,7 @@ const styles = StyleSheet.create({
flexDirection: 'row'
},
nameWithoutEmoji: {
fontSize: StyleConstants.Font.Size.M,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
},
account: {
@ -208,13 +208,13 @@ const styles = StyleSheet.create({
marginBottom: StyleConstants.Spacing.S
},
created_at: {
fontSize: StyleConstants.Font.Size.S
...StyleConstants.FontStyle.S
},
visibility: {
marginLeft: StyleConstants.Spacing.S
},
application: {
fontSize: StyleConstants.Font.Size.S,
...StyleConstants.FontStyle.S,
marginLeft: StyleConstants.Spacing.S
},
relationship: {

10
src/components/Timelines/Timeline/Shared/Poll.tsx
View File

@ -178,7 +178,7 @@ const TimelinePoll: React.FC<Props> = ({
<Emojis
content={option.title}
emojis={poll.emojis}
size={StyleConstants.Font.Size.M}
size='M'
numberOfLines={2}
/>
</View>
@ -238,7 +238,7 @@ const TimelinePoll: React.FC<Props> = ({
<Emojis
content={option.title}
emojis={poll.emojis}
size={StyleConstants.Font.Size.M}
size='M'
numberOfLines={2}
/>
</View>
@ -293,7 +293,7 @@ const styles = StyleSheet.create({
paddingRight: StyleConstants.Spacing.S
},
percentage: {
fontSize: StyleConstants.Font.Size.M
...StyleConstants.FontStyle.M
},
background: {
height: StyleConstants.Spacing.XS,
@ -313,10 +313,10 @@ const styles = StyleSheet.create({
marginRight: StyleConstants.Spacing.M
},
votes: {
fontSize: StyleConstants.Font.Size.S
...StyleConstants.FontStyle.S
},
expiration: {
fontSize: StyleConstants.Font.Size.S
...StyleConstants.FontStyle.S
}
})

4
src/components/toast.tsx
View File

@ -111,10 +111,10 @@ const styles = StyleSheet.create({
marginLeft: StyleConstants.Spacing.S
},
text1: {
fontSize: StyleConstants.Font.Size.M
...StyleConstants.FontStyle.M
},
text2: {
fontSize: StyleConstants.Font.Size.S,
...StyleConstants.FontStyle.S,
marginTop: StyleConstants.Spacing.S
}
})