+1

assets/icons/download_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 3a1 1 0 0 1 1 1v8.086l1.793-1.793a1 1 0 1 1 1.414 1.414l-3.5 3.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L11 12.086V4a1 1 0 0 1 1-1ZM4 14a1 1 0 0 1 1 1v4h14v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

+1 -1

src/components/Dialog/index.tsx

··· 256 256 borderTopLeftRadius: 40, 257 257 borderTopRightRadius: 40, 258 258 }, 259 259 - flatten(style), 259 259 + style, 260 260 ]} 261 261 contentContainerStyle={a.pb_4xl} 262 262 ref={ref}>

+84 -43

src/components/dialogs/nudges/TenMillion.tsx

··· 7 7 import {useLingui} from '@lingui/react' 8 8 9 9 import {getCanvas} from '#/lib/canvas' 10 10 + import {shareUrl} from '#/lib/sharing' 10 11 import {sanitizeDisplayName} from '#/lib/strings/display-names' 11 12 import {sanitizeHandle} from '#/lib/strings/handles' 12 12 - import {isNative} from '#/platform/detection' 13 13 + import {isAndroid, isNative, isWeb} from '#/platform/detection' 13 14 import {useModerationOpts} from '#/state/preferences/moderation-opts' 14 15 import {useProfileQuery} from '#/state/queries/profile' 15 16 import {useSession} from '#/state/session' 16 17 import {useComposerControls} from 'state/shell' 17 18 import {formatCount} from '#/view/com/util/numeric/format' 18 18 - import {UserAvatar} from '#/view/com/util/UserAvatar' 19 19 + // import {UserAvatar} from '#/view/com/util/UserAvatar' 19 20 import {Logomark} from '#/view/icons/Logomark' 20 21 import { 21 22 atoms as a, ··· 30 31 import {Divider} from '#/components/Divider' 31 32 import {GradientFill} from '#/components/GradientFill' 32 33 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' 34 34 + import {Download_Stroke2_Corner0_Rounded as Download} from '#/components/icons/Download' 33 35 import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image' 34 36 import {Loader} from '#/components/Loader' 35 37 import {Text} from '#/components/Typography' ··· 88 90 const isLoadingData = isProfileLoading || !moderation || !profile 89 91 const isLoadingImage = !uri 90 92 91 91 - const userNumber = 56738 // TODO 93 93 + const userNumber = 10_000_000 // TODO 92 94 93 93 - const captureInProgress = React.useRef(false) 94 94 - const imageRef = React.useRef<ViewShot>(null) 95 95 - 96 96 - const share = () => { 95 95 + const sharePost = () => { 97 96 if (uri) { 98 97 controls.tenMillion.close(() => { 99 98 setTimeout(() => { ··· 112 111 } 113 112 } 114 113 115 115 - const onCanvasReady = async () => { 116 116 - if ( 117 117 - imageRef.current && 118 118 - imageRef.current.capture && 119 119 - !captureInProgress.current 120 120 - ) { 121 121 - captureInProgress.current = true 122 122 - const uri = await imageRef.current.capture() 123 123 - setUri(uri) 114 114 + const onNativeShare = () => { 115 115 + if (uri) { 116 116 + controls.tenMillion.close(() => { 117 117 + shareUrl(uri) 118 118 + }) 124 119 } 125 120 } 126 121 ··· 137 132 } 138 133 } 139 134 135 135 + const imageRef = React.useRef<ViewShot>(null) 136 136 + // const captureInProgress = React.useRef(false) 137 137 + // const [cavasRelayout, setCanvasRelayout] = React.useState('key') 138 138 + // const onCanvasReady = async () => { 139 139 + // if ( 140 140 + // imageRef.current && 141 141 + // imageRef.current.capture && 142 142 + // !captureInProgress.current 143 143 + // ) { 144 144 + // captureInProgress.current = true 145 145 + // setCanvasRelayout('updated') 146 146 + // } 147 147 + // } 148 148 + const onCanvasLayout = async () => { 149 149 + if ( 150 150 + imageRef.current && 151 151 + imageRef.current.capture // && 152 152 + // cavasRelayout === 'updated' 153 153 + ) { 154 154 + console.log('LAYOUT') 155 155 + const uri = await imageRef.current.capture() 156 156 + setUri(uri) 157 157 + } 158 158 + } 159 159 + 140 160 const canvas = isLoadingData ? null : ( 141 161 <View 142 162 style={[ ··· 160 180 options={{width: WIDTH, height: HEIGHT}} 161 181 style={[a.absolute, a.inset_0]}> 162 182 <View 183 183 + // key={cavasRelayout} 184 184 + onLayout={onCanvasLayout} 163 185 style={[ 164 186 a.absolute, 165 187 a.inset_0, ··· 170 192 bottom: -1, 171 193 left: -1, 172 194 right: -1, 173 173 - paddingVertical: 32, 195 195 + paddingVertical: 48, 174 196 paddingHorizontal: 48, 175 197 }, 176 198 ]}> ··· 208 230 <View 209 231 style={[ 210 232 { 211 211 - paddingBottom: 48, 233 233 + paddingBottom: 32, 212 234 }, 213 235 ]}> 214 236 <Text ··· 216 238 a.text_md, 217 239 a.font_bold, 218 240 a.text_center, 219 219 - a.pb_xs, 241 241 + a.pb_md, 220 242 lightTheme.atoms.text_contrast_medium, 221 243 ]}> 222 244 <Trans> ··· 224 246 </Trans>{' '} 225 247 🎉 226 248 </Text> 227 227 - <Text 228 228 - style={[ 229 229 - a.relative, 230 230 - a.text_center, 231 231 - { 232 232 - fontStyle: 'italic', 233 233 - fontSize: getFontSize(userNumber), 234 234 - fontWeight: '900', 235 235 - letterSpacing: -2, 236 236 - }, 237 237 - ]}> 249 249 + <View> 238 250 <Text 239 251 style={[ 240 252 a.absolute, ··· 242 254 color: t.palette.primary_500, 243 255 fontSize: 32, 244 256 left: -18, 245 245 - top: 8, 257 257 + top: isAndroid ? -8 : isWeb ? 5 : -5, 258 258 + fontWeight: '900', 246 259 }, 247 260 ]}> 248 261 # 249 262 </Text> 250 250 - {i18n.number(userNumber)} 251 251 - </Text> 263 263 + <Text 264 264 + style={[ 265 265 + a.relative, 266 266 + a.text_center, 267 267 + { 268 268 + fontStyle: 'italic', 269 269 + fontSize: getFontSize(userNumber), 270 270 + lineHeight: getFontSize(userNumber), 271 271 + fontWeight: '900', 272 272 + letterSpacing: -2, 273 273 + }, 274 274 + ]}> 275 275 + {i18n.number(userNumber)} 276 276 + </Text> 277 277 + </View> 252 278 </View> 253 279 {/* End centered content */} 254 280 ··· 264 290 }, 265 291 ]}> 266 292 <View style={[a.flex_row, a.align_center, a.gap_sm]}> 293 293 + {/* 267 294 <UserAvatar 268 295 size={36} 269 296 avatar={profile.avatar} 270 297 moderation={moderation.ui('avatar')} 271 298 onLoad={onCanvasReady} 272 299 /> 300 300 + */} 273 301 <View style={[a.gap_2xs, a.flex_1]}> 274 274 - <Text style={[a.text_sm, a.font_bold]}> 302 302 + <Text style={[a.text_sm, a.font_bold, a.leading_tight]}> 275 303 {sanitizeDisplayName( 276 304 profile.displayName || 277 305 sanitizeHandle(profile.handle), ··· 283 311 style={[ 284 312 a.text_sm, 285 313 a.font_semibold, 314 314 + , 315 315 + a.leading_tight, 286 316 lightTheme.atoms.text_contrast_medium, 287 317 ]}> 288 318 {sanitizeHandle(profile.handle, '@')} ··· 293 323 style={[ 294 324 a.text_sm, 295 325 a.font_semibold, 326 326 + , 327 327 + a.leading_tight, 296 328 lightTheme.atoms.text_contrast_low, 297 329 ]}> 298 298 - {i18n.date(profile.createdAt, { 299 299 - dateStyle: 'long', 300 300 - })} 330 330 + <Trans> 331 331 + Joined{' '} 332 332 + {i18n.date(profile.createdAt, { 333 333 + dateStyle: 'long', 334 334 + })} 335 335 + </Trans> 301 336 </Text> 302 337 )} 303 338 </View> ··· 315 350 316 351 return ( 317 352 <Dialog.Outer control={controls.tenMillion}> 318 318 - <Dialog.Handle /> 319 319 - 320 353 <Dialog.ScrollableInner 321 354 label={_(msg`Ten Million`)} 322 355 style={[ 323 356 { 324 357 padding: 0, 358 358 + paddingTop: 0, 325 359 }, 326 360 ]}> 327 361 <View ··· 355 389 <Text 356 390 style={[ 357 391 a.text_5xl, 392 392 + a.leading_tight, 358 393 a.pb_lg, 359 394 { 360 395 fontWeight: '900', ··· 387 422 </Text> 388 423 389 424 <Button 390 390 - label={_(msg`Share image externally`)} 425 425 + disabled={isLoadingImage} 426 426 + label={ 427 427 + isNative 428 428 + ? _(msg`Share image externally`) 429 429 + : _(msg`Download image`) 430 430 + } 391 431 size="large" 392 432 variant="solid" 393 433 color="secondary" 394 434 shape="square" 395 395 - onPress={download}> 396 396 - <ButtonIcon icon={Share} /> 435 435 + onPress={isNative ? onNativeShare : download}> 436 436 + <ButtonIcon icon={isNative ? Share : Download} /> 397 437 </Button> 398 438 <Button 439 439 + disabled={isLoadingImage} 399 440 label={_(msg`Share image in post`)} 400 441 size="large" 401 442 variant="solid" 402 443 color="primary" 403 403 - onPress={share}> 444 444 + onPress={sharePost}> 404 445 <ButtonText>{_(msg`Share post`)}</ButtonText> 405 446 <ButtonIcon position="right" icon={ImageIcon} /> 406 447 </Button>

+5

src/components/icons/Download.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + export const Download_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 + path: 'M12 3a1 1 0 0 1 1 1v8.086l1.793-1.793a1 1 0 1 1 1.414 1.414l-3.5 3.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L11 12.086V4a1 1 0 0 1 1-1ZM4 14a1 1 0 0 1 1 1v4h14v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z', 5 5 + })