forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Update compose prompts for web
+77
-6
+41
src/view/com/posts/ComposerPrompt.web.tsx
+41
src/view/com/posts/ComposerPrompt.web.tsx
···
1
+
import React from 'react'
2
+
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
3
+
import {Text} from '../util/text/Text'
4
+
import {usePalette} from '../../lib/hooks/usePalette'
5
+
import {s} from '../../lib/styles'
6
+
7
+
export function ComposerPrompt({
8
+
onPressCompose,
9
+
}: {
10
+
onPressCompose: (imagesOpen?: boolean) => void
11
+
}) {
12
+
const pal = usePalette('default')
13
+
return (
14
+
<TouchableWithoutFeedback onPress={() => onPressCompose(false)}>
15
+
<View style={[pal.view, pal.border, styles.container]}>
16
+
<Text type="xl" style={pal.textLight}>
17
+
What's up?
18
+
</Text>
19
+
<View style={s.flex1} />
20
+
<View style={[styles.btn, pal.btn]}>
21
+
<Text>Post</Text>
22
+
</View>
23
+
</View>
24
+
</TouchableWithoutFeedback>
25
+
)
26
+
}
27
+
28
+
const styles = StyleSheet.create({
29
+
container: {
30
+
paddingVertical: 16,
31
+
paddingHorizontal: 18,
32
+
flexDirection: 'row',
33
+
alignItems: 'center',
34
+
borderTopWidth: 1,
35
+
},
36
+
btn: {
37
+
paddingVertical: 6,
38
+
paddingHorizontal: 14,
39
+
borderRadius: 30,
40
+
},
41
+
})
+3
-3
src/view/com/posts/Feed.tsx
+3
-3
src/view/com/posts/Feed.tsx
···
13
13
import {ErrorMessage} from '../util/error/ErrorMessage'
14
14
import {FeedModel} from '../../../state/models/feed-view'
15
15
import {FeedItem} from './FeedItem'
16
-
import {PromptButtons} from './PromptButtons'
16
+
import {ComposerPrompt} from './ComposerPrompt'
17
17
import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
18
18
import {s} from '../../lib/styles'
19
19
···
43
43
// like PureComponent, shouldComponentUpdate, etc
44
44
const renderItem = ({item}: {item: any}) => {
45
45
if (item === COMPOSE_PROMPT_ITEM) {
46
-
return <PromptButtons onPressCompose={onPressCompose} />
46
+
return <ComposerPrompt onPressCompose={onPressCompose} />
47
47
} else if (item === EMPTY_FEED_ITEM) {
48
48
return (
49
49
<EmptyState
···
87
87
return (
88
88
<View testID={testID} style={style}>
89
89
<CenteredView>
90
-
{!data && <PromptButtons onPressCompose={onPressCompose} />}
90
+
{!data && <ComposerPrompt onPressCompose={onPressCompose} />}
91
91
{feed.isLoading && !data && <PostFeedLoadingPlaceholder />}
92
92
{feed.hasError && (
93
93
<ErrorMessage
+1
-1
src/view/com/posts/PromptButtons.tsx
src/view/com/posts/ComposerPrompt.tsx
+1
-1
src/view/com/posts/PromptButtons.tsx
src/view/com/posts/ComposerPrompt.tsx
+8
src/view/com/util/FAB.web.tsx
+8
src/view/com/util/FAB.web.tsx
···
1
+
import React from 'react'
2
+
import {GestureResponderEvent, View} from 'react-native'
3
+
import {IconProp} from '@fortawesome/fontawesome-svg-core'
4
+
5
+
type OnPress = ((event: GestureResponderEvent) => void) | undefined
6
+
export const FAB = (_opts: {icon: IconProp; onPress: OnPress}) => {
7
+
return <View />
8
+
}
+24
-2
src/view/shell/web/left-column.tsx
+24
-2
src/view/shell/web/left-column.tsx
···
1
1
import React from 'react'
2
-
import {Pressable, StyleSheet, View} from 'react-native'
2
+
import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native'
3
3
import {observer} from 'mobx-react-lite'
4
+
import LinearGradient from 'react-native-linear-gradient'
4
5
import {Link} from '../../com/util/Link'
5
6
import {Text} from '../../com/util/text/Text'
6
7
import {UserAvatar} from '../../com/util/UserAvatar'
7
-
import {colors} from '../../lib/styles'
8
+
import {s, colors, gradients} from '../../lib/styles'
8
9
import {useStores} from '../../../state'
9
10
import {usePalette} from '../../lib/hooks/usePalette'
10
11
import {
···
63
64
export const DesktopLeftColumn = observer(() => {
64
65
const store = useStores()
65
66
const pal = usePalette('default')
67
+
const onPressCompose = () => store.shell.openComposer({})
66
68
const avi = (
67
69
<UserAvatar
68
70
handle={store.me.handle}
···
105
107
icon={<CogIcon strokeWidth={1.5} />}
106
108
iconFilled={<CogIcon strokeWidth={2} />}
107
109
/>
110
+
<TouchableOpacity onPress={onPressCompose}>
111
+
<LinearGradient
112
+
colors={[gradients.blueLight.start, gradients.blueLight.end]}
113
+
start={{x: 0, y: 0}}
114
+
end={{x: 1, y: 1}}
115
+
style={styles.composeBtn}>
116
+
<Text type="xl-medium" style={[s.white, s.textCenter]}>
117
+
New Post
118
+
</Text>
119
+
</LinearGradient>
120
+
</TouchableOpacity>
108
121
</View>
109
122
)
110
123
})
···
147
160
},
148
161
navItemLabel: {
149
162
fontSize: 19,
163
+
},
164
+
composeBtn: {
165
+
marginTop: 20,
166
+
marginBottom: 10,
167
+
marginLeft: 10,
168
+
marginRight: 20,
169
+
borderRadius: 30,
170
+
paddingHorizontal: 20,
171
+
paddingVertical: 12,
150
172
},
151
173
})