danielmorrisey.com / witchsky
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Refine presentation of translation results (#10015)

Co-authored-by: Eric Bailey <git@esb.lol>

authored by

DS Boyce
Eric Bailey and committed by
GitHub f8886fbf 041e3485

+94 -57
+89 -56
src/components/Post/Translated/index.tsx
··· 1 1 import {useCallback, useMemo} from 'react' 2 - import {Platform, View} from 'react-native' 2 + import {Platform, type StyleProp, type TextStyle, View} from 'react-native' 3 3 import {type AppBskyFeedDefs} from '@atproto/api' 4 4 import {Trans, useLingui} from '@lingui/react/macro' 5 5 ··· 14 14 } from '#/locale/helpers' 15 15 import {LANGUAGES} from '#/locale/languages' 16 16 import {useLanguagePrefs} from '#/state/preferences' 17 - import {atoms as a, native, useTheme, web} from '#/alf' 17 + import {atoms as a, flatten, native, useTheme, web} from '#/alf' 18 18 import {Button} from '#/components/Button' 19 19 import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow' 20 20 import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times' ··· 26 26 import {useAnalytics} from '#/analytics' 27 27 import {IS_WEB} from '#/env' 28 28 29 + const X_ICON_OFFSET = 16 30 + 29 31 export function TranslatedPost({ 30 32 hideTranslateLink = false, 31 33 post, 32 34 postText, 35 + postTextStyle = a.text_md, 33 36 }: { 34 37 hideTranslateLink?: boolean 35 38 post: AppBskyFeedDefs.PostView 36 39 postText: string 40 + postTextStyle?: StyleProp<TextStyle> 37 41 }) { 38 42 const langPrefs = useLanguagePrefs() 39 43 const {clearTranslation, translate, translationState} = useTranslate({ ··· 54 58 clearTranslation={clearTranslation} 55 59 translate={translate} 56 60 postText={postText} 61 + postTextStyle={postTextStyle} 57 62 sourceLanguage={ 58 63 translationState.sourceLanguage ?? null // Fallback primarily for iOS 59 64 } ··· 86 91 const t = useTheme() 87 92 88 93 return ( 89 - <View style={[a.gap_md, a.pt_md, a.align_start]}> 94 + <View style={[a.gap_md, a.mt_sm, a.align_start]}> 90 95 <View style={[a.flex_row, a.align_center, a.gap_xs]}> 91 - <Loader size="xs" /> 92 96 <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> 93 - <Trans>Translating…</Trans> 97 + <Trans>Translating</Trans> 94 98 </Text> 99 + <Loader size="xs" fill={t.atoms.text_contrast_medium.color} /> 95 100 </View> 96 101 </View> 97 102 ) ··· 127 132 <View 128 133 style={[ 129 134 a.gap_md, 130 - a.pt_md, 135 + a.mt_sm, 131 136 a.align_start, 132 137 a.flex_row, 133 138 a.align_center, ··· 174 179 return ( 175 180 <View 176 181 style={[ 177 - a.px_lg, 178 - a.pt_sm, 179 - a.pb_md, 182 + a.p_md, 180 183 a.mt_sm, 181 184 a.border, 182 185 a.rounded_lg, 186 + a.gap_xs, 183 187 t.atoms.border_contrast_high, 184 188 ]}> 185 - <View style={[a.flex_row, a.align_center, a.justify_between]}> 186 - <View style={[a.flex_row, a.align_center, a.mb_sm, a.gap_xs]}> 187 - <WarningIcon size="sm" fill={t.atoms.text_contrast_medium.color} /> 188 - <Text style={[a.text_xs, a.font_medium, t.atoms.text_contrast_high]}> 189 - {message} 190 - </Text> 191 - </View> 192 - <View style={[a.flex_row, a.align_center, a.mb_xs]}> 193 - <Button 194 - label={l`Hide translation`} 195 - hitSlop={HITSLOP_30} 196 - hoverStyle={{opacity: 0.5}} 197 - onPress={clearTranslation}> 198 - <XIcon size="sm" fill={t.atoms.text_contrast_medium.color} /> 199 - </Button> 200 - </View> 189 + <View 190 + style={[ 191 + a.flex_row, 192 + a.align_start, 193 + a.gap_xs, 194 + { 195 + paddingRight: X_ICON_OFFSET, 196 + }, 197 + ]}> 198 + <WarningIcon size="sm" fill={t.atoms.text_contrast_medium.color} /> 199 + <Text 200 + style={[ 201 + a.flex_1, 202 + a.text_xs, 203 + a.leading_snug, 204 + t.atoms.text_contrast_high, 205 + ]}> 206 + {message} 207 + </Text> 208 + 209 + <Button 210 + label={l`Hide translation`} 211 + hitSlop={HITSLOP_30} 212 + hoverStyle={native({opacity: 0.5})} 213 + style={[a.absolute, a.z_10, {top: 0, right: 0}]} 214 + onPress={clearTranslation}> 215 + <XIcon size="sm" fill={t.atoms.text_contrast_medium.color} /> 216 + </Button> 201 217 </View> 202 218 <View style={[a.flex_row, a.align_center]}> 203 219 <Link ··· 211 227 ]} 212 228 hitSlop={HITSLOP_30}> 213 229 <Text 214 - style={[a.text_xs, a.font_medium, {color: t.palette.primary_500}]}> 230 + style={[ 231 + a.text_xs, 232 + a.font_medium, 233 + a.leading_snug, 234 + {color: t.palette.primary_500}, 235 + ]}> 215 236 <Trans>Try Google Translate</Trans> 216 237 </Text> 217 238 </Link> ··· 224 245 clearTranslation, 225 246 translate, 226 247 postText, 248 + postTextStyle, 227 249 sourceLanguage, 228 250 translatedText, 229 251 }: { 230 252 clearTranslation: () => void 231 253 translate: TranslationFunction 232 254 postText: string 255 + postTextStyle?: StyleProp<TextStyle> 233 256 sourceLanguage: string | null 234 257 translatedText: string 235 258 }) { ··· 240 263 const langName = sourceLanguage 241 264 ? codeToLanguageName(sourceLanguage, i18n.locale) 242 265 : undefined 266 + 267 + const flattenedStyle = flatten(postTextStyle) ?? {} 268 + const fontSize = flattenedStyle.fontSize 243 269 244 270 return ( 245 271 <View> 246 272 <View 247 273 style={[ 248 - a.px_lg, 249 - a.pt_sm, 250 - a.pb_md, 274 + a.p_md, 251 275 a.mt_sm, 252 276 a.border, 253 277 a.rounded_lg, 278 + a.gap_xs, 254 279 t.atoms.border_contrast_high, 255 280 ]}> 256 - <View style={[a.flex_row, a.align_center, a.mb_xs]}> 281 + <View 282 + style={[ 283 + a.flex_row, 284 + a.align_center, 285 + a.flex_wrap, 286 + { 287 + paddingRight: X_ICON_OFFSET, 288 + }, 289 + ]}> 257 290 {langName ? ( 258 - <View style={[a.flex_row, a.align_center]}> 291 + <> 259 292 <Text 260 293 style={[ 261 294 a.text_xs, 262 - a.font_medium, 295 + a.leading_snug, 263 296 t.atoms.text_contrast_medium, 264 297 ]}> 265 298 {langName}{' '} 266 299 </Text> 267 - <View style={[a.mt_2xs]}> 268 - <ArrowRightIcon 269 - size="xs" 270 - fill={t.atoms.text_contrast_medium.color} 271 - /> 272 - </View> 300 + <ArrowRightIcon 301 + size="xs" 302 + fill={t.atoms.text_contrast_medium.color} 303 + /> 273 304 <Text 274 305 style={[ 275 306 a.text_xs, 276 - a.font_medium, 307 + a.leading_snug, 277 308 t.atoms.text_contrast_medium, 278 309 ]}> 279 310 {' '} ··· 282 313 langPrefs.appLanguage, 283 314 )} 284 315 </Text> 285 - </View> 316 + </> 286 317 ) : ( 287 318 <Text 288 - style={[ 289 - a.text_xs, 290 - a.font_medium, 291 - t.atoms.text_contrast_medium, 292 - a.mb_xs, 293 - ]}> 319 + style={[a.text_xs, a.leading_snug, t.atoms.text_contrast_medium]}> 294 320 <Trans>Translated</Trans> 295 321 </Text> 296 322 )} ··· 300 326 style={[ 301 327 a.text_xs, 302 328 a.font_medium, 329 + a.leading_snug, 303 330 t.atoms.text_contrast_medium, 304 331 ]}> 305 332 {' '} ··· 312 339 /> 313 340 </> 314 341 )} 342 + 343 + <Button 344 + label={l`Hide translation`} 345 + hitSlop={HITSLOP_30} 346 + hoverStyle={native({opacity: 0.5})} 347 + style={[a.absolute, a.z_10, {top: 0, right: 0}]} 348 + onPress={clearTranslation}> 349 + <XIcon size="sm" fill={t.atoms.text_contrast_medium.color} /> 350 + </Button> 315 351 </View> 316 - <Text emoji selectable style={[a.text_md, a.leading_snug]}> 352 + <Text emoji selectable style={[a.leading_snug, {fontSize}]}> 317 353 {translatedText} 318 354 </Text> 319 - <Button 320 - label={l`Hide translation`} 321 - hitSlop={HITSLOP_30} 322 - hoverStyle={native({opacity: 0.5})} 323 - style={[a.absolute, a.z_10, {top: 12, right: 14}]} 324 - onPress={clearTranslation}> 325 - <XIcon size="sm" fill={t.atoms.text_contrast_medium.color} /> 326 - </Button> 327 355 </View> 328 356 </View> 329 357 ) ··· 393 421 hitSlop={HITSLOP_30} 394 422 hoverStyle={native({opacity: 0.5})}> 395 423 <Text 396 - style={[a.text_xs, a.font_medium, t.atoms.text_contrast_high]}> 424 + style={[ 425 + a.text_xs, 426 + a.font_medium, 427 + a.leading_snug, 428 + t.atoms.text_contrast_high, 429 + ]}> 397 430 <Trans>Change</Trans> 398 431 </Text> 399 432 </Button>
+5 -1
src/screens/PostThread/components/ThreadItemAnchor.tsx
··· 407 407 shouldProxyLinks={true} 408 408 /> 409 409 ) : undefined} 410 - <TranslatedPost post={post} postText={record.text} /> 410 + <TranslatedPost 411 + post={post} 412 + postText={record.text} 413 + postTextStyle={[a.text_lg]} 414 + /> 411 415 {post.embed && ( 412 416 <View style={[a.py_xs]}> 413 417 <Embed