forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Clipclop] Input polish (#3819)
* tweak input styles + add min-shell mode
* android tweaks + hitslop
authored by
Samuel Newman
and committed by
GitHub
bff055f6
e977c99c
+109
-91
+43
-37
src/screens/Messages/Conversation/MessageInput.tsx
+43
-37
src/screens/Messages/Conversation/MessageInput.tsx
···
12
12
import {msg} from '@lingui/macro'
13
13
import {useLingui} from '@lingui/react'
14
14
15
+
import {HITSLOP_10} from '#/lib/constants'
15
16
import {atoms as a, useTheme} from '#/alf'
16
17
import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
17
18
···
60
61
)
61
62
62
63
return (
63
-
<View
64
-
style={[
65
-
a.flex_row,
66
-
a.py_sm,
67
-
a.px_sm,
68
-
a.pl_md,
69
-
a.mt_sm,
70
-
t.atoms.bg_contrast_25,
71
-
{borderRadius: 23},
72
-
]}>
73
-
<TextInput
74
-
accessibilityLabel={_(msg`Message input field`)}
75
-
accessibilityHint={_(msg`Type your message here`)}
76
-
placeholder={_(msg`Write a message`)}
77
-
placeholderTextColor={t.palette.contrast_500}
78
-
value={message}
79
-
multiline={true}
80
-
onChangeText={setMessage}
81
-
style={[a.flex_1, a.text_md, a.px_sm, t.atoms.text, {maxHeight}]}
82
-
keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
83
-
scrollEnabled={isInputScrollable}
84
-
blurOnSubmit={false}
85
-
onFocus={onFocus}
86
-
onBlur={onBlur}
87
-
onContentSizeChange={onInputLayout}
88
-
ref={inputRef}
89
-
/>
90
-
<Pressable
91
-
accessibilityRole="button"
64
+
<View style={a.p_sm}>
65
+
<View
92
66
style={[
93
-
a.rounded_full,
94
-
a.align_center,
95
-
a.justify_center,
96
-
{height: 30, width: 30, backgroundColor: t.palette.primary_500},
97
-
]}
98
-
onPress={onSubmit}>
99
-
<PaperPlane fill={t.palette.white} />
100
-
</Pressable>
67
+
a.w_full,
68
+
a.flex_row,
69
+
a.py_sm,
70
+
a.px_sm,
71
+
a.pl_md,
72
+
t.atoms.bg_contrast_25,
73
+
{borderRadius: 23},
74
+
]}>
75
+
<TextInput
76
+
accessibilityLabel={_(msg`Message input field`)}
77
+
accessibilityHint={_(msg`Type your message here`)}
78
+
placeholder={_(msg`Write a message`)}
79
+
placeholderTextColor={t.palette.contrast_500}
80
+
value={message}
81
+
multiline={true}
82
+
onChangeText={setMessage}
83
+
style={[a.flex_1, a.text_md, a.px_sm, t.atoms.text, {maxHeight}]}
84
+
keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
85
+
scrollEnabled={isInputScrollable}
86
+
blurOnSubmit={false}
87
+
onFocus={onFocus}
88
+
onBlur={onBlur}
89
+
onContentSizeChange={onInputLayout}
90
+
ref={inputRef}
91
+
/>
92
+
<Pressable
93
+
accessibilityRole="button"
94
+
accessibilityLabel={_(msg`Send message`)}
95
+
accessibilityHint=""
96
+
hitSlop={HITSLOP_10}
97
+
style={[
98
+
a.rounded_full,
99
+
a.align_center,
100
+
a.justify_center,
101
+
{height: 30, width: 30, backgroundColor: t.palette.primary_500},
102
+
]}
103
+
onPress={onSubmit}>
104
+
<PaperPlane fill={t.palette.white} />
105
+
</Pressable>
106
+
</View>
101
107
</View>
102
108
)
103
109
}
+40
-39
src/screens/Messages/Conversation/MessageInput.web.tsx
+40
-39
src/screens/Messages/Conversation/MessageInput.web.tsx
···
45
45
)
46
46
47
47
return (
48
-
<View
49
-
style={[
50
-
a.flex_row,
51
-
a.py_sm,
52
-
a.px_sm,
53
-
a.pl_md,
54
-
a.mt_sm,
55
-
t.atoms.bg_contrast_25,
56
-
{borderRadius: 23},
57
-
]}>
58
-
<TextareaAutosize
59
-
style={StyleSheet.flatten([
60
-
a.flex_1,
48
+
<View style={a.p_sm}>
49
+
<View
50
+
style={[
51
+
a.flex_row,
52
+
a.py_sm,
61
53
a.px_sm,
62
-
a.border_0,
63
-
t.atoms.text,
64
-
{
65
-
backgroundColor: 'transparent',
66
-
resize: 'none',
67
-
paddingTop: 6,
68
-
},
69
-
])}
70
-
maxRows={12}
71
-
placeholder={_(msg`Write a message`)}
72
-
defaultValue=""
73
-
value={message}
74
-
dirName="ltr"
75
-
autoFocus={true}
76
-
onChange={onChange}
77
-
onKeyDown={onKeyDown}
78
-
/>
79
-
<Pressable
80
-
accessibilityRole="button"
81
-
style={[
82
-
a.rounded_full,
83
-
a.align_center,
84
-
a.justify_center,
85
-
{height: 30, width: 30, backgroundColor: t.palette.primary_500},
54
+
a.pl_md,
55
+
t.atoms.bg_contrast_25,
56
+
{borderRadius: 23},
86
57
]}>
87
-
<PaperPlane fill={t.palette.white} />
88
-
</Pressable>
58
+
<TextareaAutosize
59
+
style={StyleSheet.flatten([
60
+
a.flex_1,
61
+
a.px_sm,
62
+
a.border_0,
63
+
t.atoms.text,
64
+
{
65
+
backgroundColor: 'transparent',
66
+
resize: 'none',
67
+
paddingTop: 4,
68
+
},
69
+
])}
70
+
maxRows={12}
71
+
placeholder={_(msg`Write a message`)}
72
+
defaultValue=""
73
+
value={message}
74
+
dirName="ltr"
75
+
autoFocus={true}
76
+
onChange={onChange}
77
+
onKeyDown={onKeyDown}
78
+
/>
79
+
<Pressable
80
+
accessibilityRole="button"
81
+
style={[
82
+
a.rounded_full,
83
+
a.align_center,
84
+
a.justify_center,
85
+
{height: 30, width: 30, backgroundColor: t.palette.primary_500},
86
+
]}>
87
+
<PaperPlane fill={t.palette.white} />
88
+
</Pressable>
89
+
</View>
89
90
</View>
90
91
)
91
92
}
+1
-1
src/screens/Messages/Conversation/MessageItem.tsx
+1
-1
src/screens/Messages/Conversation/MessageItem.tsx
+25
-14
src/screens/Messages/Conversation/MessagesList.tsx
+25
-14
src/screens/Messages/Conversation/MessagesList.tsx
···
6
6
View,
7
7
} from 'react-native'
8
8
import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
9
+
import {useSafeAreaInsets} from 'react-native-safe-area-context'
9
10
import {msg, Trans} from '@lingui/macro'
10
11
import {useLingui} from '@lingui/react'
12
+
import {useFocusEffect} from '@react-navigation/native'
11
13
14
+
import {isIOS} from '#/platform/detection'
12
15
import {useChat} from '#/state/messages'
13
16
import {ConvoItem, ConvoStatus} from '#/state/messages/convo'
14
-
import {isWeb} from 'platform/detection'
17
+
import {useSetMinimalShellMode} from '#/state/shell'
15
18
import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
16
19
import {MessageItem} from '#/screens/Messages/Conversation/MessageItem'
20
+
import {atoms as a} from '#/alf'
17
21
import {Button, ButtonText} from '#/components/Button'
18
22
import {Loader} from '#/components/Loader'
19
23
import {Text} from '#/components/Typography'
···
112
116
[],
113
117
)
114
118
119
+
const setMinShellMode = useSetMinimalShellMode()
120
+
useFocusEffect(
121
+
useCallback(() => {
122
+
setMinShellMode(true)
123
+
return () => setMinShellMode(false)
124
+
}, [setMinShellMode]),
125
+
)
126
+
127
+
const {bottom: bottomInset} = useSafeAreaInsets()
128
+
115
129
return (
116
130
<KeyboardAvoidingView
117
-
style={{flex: 1, marginBottom: isWeb ? 20 : 85}}
131
+
style={[a.flex_1, {marginBottom: bottomInset}]}
132
+
keyboardVerticalOffset={isIOS ? 60 : 25}
118
133
behavior="padding"
119
-
keyboardVerticalOffset={70}
120
-
contentContainerStyle={{flex: 1}}>
134
+
contentContainerStyle={a.flex_1}>
121
135
<FlatList
136
+
ref={flatListRef}
122
137
data={
123
138
chat.state.status === ConvoStatus.Ready ? chat.state.items : undefined
124
139
}
···
150
165
/>
151
166
}
152
167
removeClippedSubviews={true}
153
-
ref={flatListRef}
154
-
keyboardDismissMode="none"
168
+
keyboardDismissMode="on-drag"
155
169
/>
156
-
157
-
<View style={{paddingHorizontal: 10}}>
158
-
<MessageInput
159
-
onSendMessage={onSendMessage}
160
-
onFocus={onInputFocus}
161
-
onBlur={onInputBlur}
162
-
/>
163
-
</View>
170
+
<MessageInput
171
+
onSendMessage={onSendMessage}
172
+
onFocus={onInputFocus}
173
+
onBlur={onInputBlur}
174
+
/>
164
175
</KeyboardAvoidingView>
165
176
)
166
177
}