forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+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
+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,