Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

Composer - unbork web (#4344)

* reduce side gap + add overflow hidden

also remove the animations since they don't appear in prod, and are kinda broken

* removed fixed height to fix alt text

authored by

Samuel Newman and committed by
GitHub
d918f8dc d0327342

+13 -31
+2 -11
src/view/com/composer/Composer.tsx
··· 117 117 const {closeComposer} = useComposerControls() 118 118 const {track} = useAnalytics() 119 119 const pal = usePalette('default') 120 - const {isTabletOrDesktop, isMobile} = useWebMediaQueries() 120 + const {isMobile} = useWebMediaQueries() 121 121 const {_} = useLingui() 122 122 const requireAltTextEnabled = useRequireAltTextEnabled() 123 123 const langPrefs = useLanguagePrefs() ··· 400 400 style={[a.flex_1, viewStyles]} 401 401 aria-modal 402 402 accessibilityViewIsModal> 403 - <Animated.View 404 - style={[ 405 - styles.topbar, 406 - topBarAnimatedStyle, 407 - isWeb && isTabletOrDesktop && styles.topbarDesktop, 408 - ]}> 403 + <Animated.View style={topBarAnimatedStyle}> 409 404 <View style={styles.topbarInner}> 410 405 <TouchableOpacity 411 406 testID="composerDiscardButton" ··· 727 722 } 728 723 729 724 const styles = StyleSheet.create({ 730 - topbar: {}, 731 - topbarDesktop: { 732 - height: 50, 733 - }, 734 725 topbarInner: { 735 726 flexDirection: 'row', 736 727 alignItems: 'center',
+11 -20
src/view/shell/Composer.web.tsx
··· 1 1 import React from 'react' 2 2 import {StyleSheet, View} from 'react-native' 3 - import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated' 4 3 5 4 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' 6 - import {usePalette} from 'lib/hooks/usePalette' 7 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 8 5 import {useComposerState} from 'state/shell/composer' 9 6 import { 10 7 EmojiPicker, 11 8 EmojiPickerState, 12 9 } from 'view/com/composer/text-input/web/EmojiPicker.web' 10 + import {useBreakpoints, useTheme} from '#/alf' 13 11 import {ComposePost} from '../com/composer/Composer' 14 12 15 13 const BOTTOM_BAR_HEIGHT = 61 16 14 17 15 export function Composer({}: {winHeight: number}) { 18 - const pal = usePalette('default') 19 - const {isMobile} = useWebMediaQueries() 16 + const t = useTheme() 17 + const {gtMobile} = useBreakpoints() 20 18 const state = useComposerState() 21 19 const isActive = !!state 22 20 useWebBodyScrollLock(isActive) ··· 49 47 } 50 48 51 49 return ( 52 - <Animated.View 53 - style={styles.mask} 54 - aria-modal 55 - accessibilityViewIsModal 56 - entering={FadeIn.duration(100)} 57 - exiting={FadeOut}> 58 - <Animated.View 59 - entering={FadeInDown.duration(150)} 60 - exiting={FadeOut} 50 + <View style={styles.mask} aria-modal accessibilityViewIsModal> 51 + <View 61 52 style={[ 62 53 styles.container, 63 - isMobile && styles.containerMobile, 64 - pal.view, 65 - pal.border, 54 + !gtMobile && styles.containerMobile, 55 + t.atoms.bg, 56 + t.atoms.border_contrast_medium, 66 57 ]}> 67 58 <ComposePost 68 59 replyTo={state.replyTo} ··· 72 63 openPicker={onOpenPicker} 73 64 text={state.text} 74 65 /> 75 - </Animated.View> 66 + </View> 76 67 <EmojiPicker state={pickerState} close={onClosePicker} /> 77 - </Animated.View> 68 + </View> 78 69 ) 79 70 } 80 71 ··· 94 85 maxWidth: 600, 95 86 width: '100%', 96 87 paddingVertical: 0, 97 - paddingHorizontal: 2, 98 88 borderRadius: 8, 99 89 marginBottom: 0, 100 90 borderWidth: 1, 101 91 // @ts-ignore web only 102 92 maxHeight: 'calc(100% - (40px * 2))', 93 + overflow: 'hidden', 103 94 }, 104 95 containerMobile: { 105 96 borderRadius: 0,