zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Fix RTL text rendering for display names (#4747) 

* header display name rtl support

* highlighted post rtl

* move `NON_BREAKING_SPACE` to an external constant

* rtl support in search dropdown

* profile card rtl

* old profile card rtl

* hover card

* wizard list card

* new chat

* account card

* chat header

* clean up notifications

* just force LTR on meta display name
zio/stable
Hailey 2024-07-08 10:06:00 -07:00 committed by GitHub
parent d5503d17de
commit f8a59e10dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ProfileCard.tsx
View File

@ -166,7 +166,9 @@ export function NameAndHandle({
return (
<View style={[a.flex_1]}>
<Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
<Text
style={[a.text_md, a.font_bold, a.leading_snug, a.self_start]}
numberOfLines={1}>
{name}
</Text>
<Text

3
src/components/ProfileHoverCard/index.web.tsx
View File

@ -462,7 +462,8 @@ function Inner({
<Link to={profileURL} label={_(msg`View profile`)} onPress={hide}>
<View style={[a.pb_sm, a.flex_1]}>
<Text style={[a.pt_md, a.pb_xs, a.text_lg, a.font_bold]}>
<Text
style={[a.pt_md, a.pb_xs, a.text_lg, a.font_bold, a.self_start]}>
{sanitizeDisplayName(
profile.displayName || sanitizeHandle(profile.handle),
moderation.ui('displayName'),

8
src/components/StarterPack/Wizard/WizardListCard.tsx
View File

@ -78,7 +78,13 @@ function WizardListCard({
/>
<View style={[a.flex_1, a.gap_2xs]}>
<Text
style={[a.flex_1, a.font_bold, a.text_md, a.leading_tight]}
style={[
a.flex_1,
a.font_bold,
a.text_md,
a.leading_tight,
a.self_start,
]}
numberOfLines={1}>
{displayName}
</Text>

7
src/components/dms/MessagesListHeader.tsx
View File

@ -168,7 +168,12 @@ function HeaderReady({
</View>
<View style={a.flex_1}>
<Text
style={[a.text_md, a.font_bold, web(a.leading_normal)]}
style={[
a.text_md,
a.font_bold,
a.self_start,
web(a.leading_normal),
]}
numberOfLines={1}>
{displayName}
</Text>

2
src/components/dms/dialogs/SearchablePeopleList.tsx
View File

@ -395,7 +395,7 @@ function ProfileCard({
/>
<View style={[a.flex_1, a.gap_2xs]}>
<Text
style={[t.atoms.text, a.font_bold, a.leading_tight]}
style={[t.atoms.text, a.font_bold, a.leading_tight, a.self_start]}
numberOfLines={1}>
{displayName}
</Text>

1
src/lib/strings/constants.ts 100644
View File

@ -0,0 +1 @@
export const NON_BREAKING_SPACE = '\u00A0'

2
src/screens/Profile/Header/DisplayName.tsx
View File

@ -20,7 +20,7 @@ export function ProfileHeaderDisplayName({
<View pointerEvents="none">
<Text
testID="profileHeaderDisplayName"
style={[t.atoms.text, a.text_4xl, {fontWeight: '500'}]}>
style={[t.atoms.text, a.text_4xl, a.self_start, {fontWeight: '500'}]}>
{sanitizeDisplayName(
profile.displayName || sanitizeHandle(profile.handle),
moderation.ui('displayName'),

9
src/view/com/notifications/FeedItem.tsx
View File

@ -58,6 +58,7 @@ import {useNavigation} from '@react-navigation/native'
import {parseTenorGif} from '#/lib/strings/embed-player'
import {logger} from '#/logger'
import {NavigationProp} from 'lib/routes/types'
import {forceLTR} from 'lib/strings/bidi'
import {DM_SERVICE_HEADERS} from 'state/queries/messages/const'
import {useAgent} from 'state/session'
import {Button, ButtonText} from '#/components/Button'
@ -274,13 +275,15 @@ let FeedItem = ({
showDmButton={item.type === 'starterpack-joined' || isFollowBack}
/>
<ExpandedAuthorsList visible={isAuthorsExpanded} authors={authors} />
<Text style={styles.meta}>
<Text style={[styles.meta, a.self_start]}>
<TextLink
key={authors[0].href}
style={[pal.text, s.bold]}
href={authors[0].href}
text={sanitizeDisplayName(
authors[0].profile.displayName || authors[0].profile.handle,
text={forceLTR(
sanitizeDisplayName(
authors[0].profile.displayName || authors[0].profile.handle,
),
)}
disableMismatchWarning
/>

2
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -281,7 +281,7 @@ let PostThreadItemLoaded = ({
<Link style={s.flex1} href={authorHref} title={authorTitle}>
<Text
type="xl-bold"
style={[pal.text]}
style={[pal.text, a.self_start]}
numberOfLines={1}
lineHeight={1.2}>
{sanitizeDisplayName(

2
src/view/com/profile/ProfileCard.tsx
View File

@ -97,7 +97,7 @@ export function ProfileCard({
<View style={styles.layoutContent}>
<Text
type="lg"
style={[s.bold, pal.text]}
style={[s.bold, pal.text, a.self_start]}
numberOfLines={1}
lineHeight={1.2}>
{sanitizeDisplayName(

18
src/view/com/util/PostMeta.tsx
View File

@ -6,6 +6,8 @@ import {useQueryClient} from '@tanstack/react-query'
import {precacheProfile} from '#/state/queries/profile'
import {usePalette} from 'lib/hooks/usePalette'
import {makeProfileLink} from 'lib/routes/links'
import {forceLTR} from 'lib/strings/bidi'
import {NON_BREAKING_SPACE} from 'lib/strings/constants'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {niceDate} from 'lib/strings/time'
@ -32,8 +34,6 @@ interface PostMetaOpts {
style?: StyleProp<ViewStyle>
}
const NON_BREAKING_SPACE = '\u00A0'
let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
const pal = usePalette('default')
const displayName = opts.author.displayName || opts.author.handle
@ -70,14 +70,12 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
style={[pal.text]}
lineHeight={1.2}
disableMismatchWarning
text={
<>
{sanitizeDisplayName(
displayName,
opts.moderation?.ui('displayName'),
)}
</>
}
text={forceLTR(
sanitizeDisplayName(
displayName,
opts.moderation?.ui('displayName'),
),
)}
href={profileLink}
onBeforePress={onBeforePressAuthor}
/>

3
src/view/screens/Settings/index.tsx
View File

@ -68,6 +68,7 @@ import {navigate, resetToTab} from '#/Navigation'
import {Email2FAToggle} from './Email2FAToggle'
import {ExportCarDialog} from './ExportCarDialog'
import hairlineWidth = StyleSheet.hairlineWidth
import {atoms as a} from '#/alf'
function SettingsAccountCard({
account,
@ -104,7 +105,7 @@ function SettingsAccountCard({
/>
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text} numberOfLines={1}>
<Text type="md-bold" style={[pal.text, a.self_start]} numberOfLines={1}>
{profile?.displayName || account.handle}
</Text>
<Text type="sm" style={pal.textLight} numberOfLines={1}>

3
src/view/shell/desktop/Search.tsx
View File

@ -30,6 +30,7 @@ import {precacheProfile} from 'state/queries/profile'
import {Link} from '#/view/com/util/Link'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {Text} from 'view/com/util/text/Text'
import {atoms as a} from '#/alf'
let SearchLinkCard = ({
label,
@ -127,7 +128,7 @@ let SearchProfileCard = ({
<View style={{flex: 1}}>
<Text
type="lg"
style={[s.bold, pal.text]}
style={[s.bold, pal.text, a.self_start]}
numberOfLines={1}
lineHeight={1.2}>
{sanitizeDisplayName(