Composer UI fixes (#6065) · lenooby09.tech/social-app@3eb531b

+20 -5

src/view/com/composer/Composer.tsx

··· 443 443 } 444 444 onClose() 445 445 Toast.show( 446 - replyTo 446 + thread.posts.length > 1 447 + ? _(msg`Your posts have been published`) 448 + : replyTo 447 449 ? _(msg`Your reply has been published`) 448 450 : _(msg`Your post has been published`), 449 451 ) ··· 523 525 } 524 526 }, [composerState]) 525 527 528 + const isLastThreadedPost = thread.posts.length > 1 && nextPost === undefined 526 529 const { 527 530 scrollHandler, 528 531 onScrollViewContentSizeChange, ··· 531 534 bottomBarAnimatedStyle, 532 535 } = useScrollTracker({ 533 536 scrollViewRef, 534 - stickyBottom: true, 537 + stickyBottom: isLastThreadedPost, 535 538 }) 536 539 537 540 const keyboardVerticalOffset = useKeyboardVerticalOffset() ··· 564 567 </> 565 568 ) 566 569 567 - const isFooterSticky = !isNative && thread.posts.length > 1 570 + const isWebFooterSticky = !isNative && thread.posts.length > 1 568 571 return ( 569 572 <BottomSheetPortalProvider> 570 573 <KeyboardAvoidingView ··· 615 618 dispatch={composerDispatch} 616 619 textInput={post.id === activePost.id ? textInput : null} 617 620 isFirstPost={index === 0} 621 + isPartOfThread={thread.posts.length > 1} 618 622 isReply={index > 0 || !!replyTo} 619 623 isActive={post.id === activePost.id} 620 624 canRemovePost={thread.posts.length > 1} ··· 624 628 onPublish={onComposerPostPublish} 625 629 onError={setError} 626 630 /> 627 - {isFooterSticky && post.id === activePost.id && footer} 631 + {isWebFooterSticky && post.id === activePost.id && ( 632 + <View style={styles.stickyFooterWeb}>{footer}</View> 633 + )} 628 634 </React.Fragment> 629 635 ))} 630 636 </Animated.ScrollView> 631 - {!isFooterSticky && footer} 637 + {!isWebFooterSticky && footer} 632 638 </View> 633 639 634 640 <Prompt.Basic ··· 651 657 isActive, 652 658 isReply, 653 659 isFirstPost, 660 + isPartOfThread, 654 661 canRemovePost, 655 662 canRemoveQuote, 656 663 onClearVideo, ··· 664 671 isActive: boolean 665 672 isReply: boolean 666 673 isFirstPost: boolean 674 + isPartOfThread: boolean 667 675 canRemovePost: boolean 668 676 canRemoveQuote: boolean 669 677 onClearVideo: (postId: string) => void ··· 743 751 placeholder={selectTextInputPlaceholder} 744 752 autoFocus 745 753 webForceMinHeight={forceMinHeight} 754 + // To avoid overlap with the close button: 755 + hasRightPadding={isPartOfThread} 746 756 isActive={isActive} 747 757 setRichText={rt => { 748 758 dispatchPost({type: 'update_richtext', richtext: rt}) ··· 1394 1404 paddingHorizontal: 20, 1395 1405 paddingVertical: 6, 1396 1406 marginLeft: 12, 1407 + }, 1408 + stickyFooterWeb: { 1409 + // @ts-ignore web-only 1410 + position: 'sticky', 1411 + bottom: 0, 1397 1412 }, 1398 1413 errorLine: { 1399 1414 flexDirection: 'row',

+3 -1

src/view/com/composer/text-input/TextInput.tsx

··· 44 44 richtext: RichText 45 45 placeholder: string 46 46 webForceMinHeight: boolean 47 + hasRightPadding: boolean 47 48 isActive: boolean 48 49 setRichText: (v: RichText) => void 49 50 onPhotoPasted: (uri: string) => void ··· 61 62 { 62 63 richtext, 63 64 placeholder, 65 + hasRightPadding, 64 66 setRichText, 65 67 onPhotoPasted, 66 68 onNewLink, ··· 232 234 }, [t, richtext, inputTextStyle]) 233 235 234 236 return ( 235 - <View style={[a.flex_1, a.pl_md]}> 237 + <View style={[a.flex_1, a.pl_md, hasRightPadding && a.pr_4xl]}> 236 238 <PasteInput 237 239 testID="composerTextInput" 238 240 ref={textInput}

+6 -1

src/view/com/composer/text-input/TextInput.web.tsx

··· 42 42 placeholder: string 43 43 suggestedLinks: Set<string> 44 44 webForceMinHeight: boolean 45 + hasRightPadding: boolean 45 46 isActive: boolean 46 47 setRichText: (v: RichText | ((v: RichText) => RichText)) => void 47 48 onPhotoPasted: (uri: string) => void ··· 56 57 richtext, 57 58 placeholder, 58 59 webForceMinHeight, 60 + hasRightPadding, 59 61 isActive, 60 62 setRichText, 61 63 onPhotoPasted, ··· 307 309 308 310 return ( 309 311 <> 310 - <View style={styles.container}> 312 + <View style={[styles.container, hasRightPadding && styles.rightPadding]}> 311 313 {/* @ts-ignore inputStyle is fine */} 312 314 <EditorContent editor={editor} style={inputStyle} /> 313 315 </View> ··· 372 374 padding: 5, 373 375 marginLeft: 8, 374 376 marginBottom: 10, 377 + }, 378 + rightPadding: { 379 + paddingRight: 32, 375 380 }, 376 381 dropContainer: { 377 382 backgroundColor: '#0007',

Configure Feed

Configure Feed