Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

only show divider when scrolled (#4275)

authored by

Samuel Newman and committed by
GitHub
cd497a39 d92036f2

+54 -19
+47 -14
src/view/com/composer/Composer.tsx
··· 9 9 import { 10 10 ActivityIndicator, 11 11 Keyboard, 12 - ScrollView, 13 12 StyleSheet, 14 13 TouchableOpacity, 15 14 View, ··· 18 17 KeyboardAvoidingView, 19 18 KeyboardStickyView, 20 19 } from 'react-native-keyboard-controller' 20 + import Animated, { 21 + interpolateColor, 22 + useAnimatedStyle, 23 + useSharedValue, 24 + withTiming, 25 + } from 'react-native-reanimated' 21 26 import {useSafeAreaInsets} from 'react-native-safe-area-context' 22 27 import {LinearGradient} from 'expo-linear-gradient' 23 28 import {RichText} from '@atproto/api' ··· 30 35 createGIFDescription, 31 36 parseAltFromGIFDescription, 32 37 } from '#/lib/gif-alt-text' 38 + import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' 33 39 import {LikelyType} from '#/lib/link-meta/link-meta' 34 40 import {logEvent} from '#/lib/statsig/statsig' 35 41 import {logger} from '#/logger' ··· 61 67 import {GalleryModel} from 'state/models/media/gallery' 62 68 import {ComposerOpts} from 'state/shell/composer' 63 69 import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo' 64 - import {atoms as a} from '#/alf' 70 + import {atoms as a, useTheme} from '#/alf' 65 71 import {Button} from '#/components/Button' 66 72 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji' 67 73 import * as Prompt from '#/components/Prompt' ··· 109 115 const {closeComposer} = useComposerControls() 110 116 const {track} = useAnalytics() 111 117 const pal = usePalette('default') 112 - const {isDesktop, isMobile} = useWebMediaQueries() 118 + const {isTabletOrDesktop, isMobile} = useWebMediaQueries() 113 119 const {_} = useLingui() 114 120 const requireAltTextEnabled = useRequireAltTextEnabled() 115 121 const langPrefs = useLanguagePrefs() ··· 117 123 const textInput = useRef<TextInputRef>(null) 118 124 const discardPromptControl = Prompt.usePromptControl() 119 125 const {closeAllDialogs} = useDialogStateControlContext() 126 + const t = useTheme() 120 127 121 128 const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true}) 122 129 const [isProcessing, setIsProcessing] = useState(false) ··· 163 170 [insets, isKeyboardVisible, isMobile], 164 171 ) 165 172 173 + const hasScrolled = useSharedValue(0) 174 + const scrollHandler = useAnimatedScrollHandler({ 175 + onScroll: event => { 176 + hasScrolled.value = withTiming(event.contentOffset.y > 0 ? 1 : 0) 177 + }, 178 + }) 179 + const topBarAnimatedStyle = useAnimatedStyle(() => { 180 + return { 181 + borderColor: interpolateColor( 182 + hasScrolled.value, 183 + [0, 1], 184 + [ 185 + 'transparent', 186 + isWeb ? t.palette.contrast_100 : t.palette.contrast_400, 187 + ], 188 + ), 189 + } 190 + }) 191 + 166 192 const onPressCancel = useCallback(() => { 167 193 if (graphemeLength > 0 || !gallery.isEmpty) { 168 194 closeAllDialogs() ··· 380 406 style={s.flex1} 381 407 keyboardVerticalOffset={replyTo ? 60 : isAndroid ? 120 : 100}> 382 408 <View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal> 383 - <View style={[styles.topbar, isDesktop && styles.topbarDesktop]}> 409 + <Animated.View 410 + style={[ 411 + styles.topbar, 412 + topBarAnimatedStyle, 413 + isWeb && isTabletOrDesktop && styles.topbarDesktop, 414 + ]}> 384 415 <TouchableOpacity 385 416 testID="composerDiscardButton" 386 417 onPress={onPressCancel} ··· 444 475 )} 445 476 </> 446 477 )} 447 - </View> 478 + </Animated.View> 448 479 {isAltTextRequiredAndMissing && ( 449 480 <View style={[styles.reminderLine, pal.viewLight]}> 450 481 <View style={styles.errorIcon}> ··· 471 502 <Text style={[s.red4, s.flex1]}>{error}</Text> 472 503 </View> 473 504 )} 474 - <ScrollView 505 + <Animated.ScrollView 506 + onScroll={scrollHandler} 475 507 style={styles.scrollView} 476 508 keyboardShouldPersistTaps="always"> 477 509 {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined} 478 510 479 511 <View 480 512 style={[ 481 - pal.border, 482 513 styles.textInputLayout, 483 514 isNative && styles.textInputLayoutMobile, 484 515 ]}> ··· 533 564 )} 534 565 </View> 535 566 ) : undefined} 536 - </ScrollView> 567 + </Animated.ScrollView> 537 568 <SuggestedLanguage text={richtext.text} /> 538 569 </View> 539 570 </KeyboardAvoidingView> ··· 589 620 topbar: { 590 621 flexDirection: 'row', 591 622 alignItems: 'center', 592 - marginTop: -14, 593 - paddingBottom: 4, 594 - paddingHorizontal: 20, 595 - height: 50, 623 + marginTop: -10, 624 + paddingHorizontal: 4, 625 + marginHorizontal: 16, 626 + height: 44, 596 627 gap: 4, 628 + borderBottomWidth: StyleSheet.hairlineWidth, 597 629 }, 598 630 topbarDesktop: { 599 631 paddingTop: 10, 600 632 paddingBottom: 10, 633 + height: 50, 634 + marginTop: 0, 601 635 }, 602 636 postBtn: { 603 637 borderRadius: 20, ··· 636 670 }, 637 671 scrollView: { 638 672 flex: 1, 639 - paddingHorizontal: 15, 673 + paddingHorizontal: 16, 640 674 }, 641 675 textInputLayout: { 642 676 flexDirection: 'row', 643 - borderTopWidth: 1, 644 677 paddingTop: 16, 645 678 }, 646 679 textInputLayoutMobile: {
+7 -5
src/view/com/composer/labels/LabelsBtn.tsx
··· 1 1 import React from 'react' 2 2 import {Keyboard, StyleSheet} from 'react-native' 3 - import {Button} from 'view/com/util/forms/Button' 4 - import {usePalette} from 'lib/hooks/usePalette' 5 - import {ShieldExclamation} from 'lib/icons' 6 3 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 7 4 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' 8 - import {isNative} from 'platform/detection' 5 + import {msg} from '@lingui/macro' 9 6 import {useLingui} from '@lingui/react' 10 - import {msg} from '@lingui/macro' 7 + 11 8 import {useModalControls} from '#/state/modals' 9 + import {usePalette} from 'lib/hooks/usePalette' 10 + import {ShieldExclamation} from 'lib/icons' 11 + import {isNative} from 'platform/detection' 12 + import {Button} from 'view/com/util/forms/Button' 12 13 13 14 export function LabelsBtn({ 14 15 labels, ··· 54 55 button: { 55 56 flexDirection: 'row', 56 57 alignItems: 'center', 58 + paddingVertical: 2, 57 59 paddingHorizontal: 6, 58 60 }, 59 61 dimmed: {