Update compose prompts for web
parent
cd96c94d3a
commit
e6b63e3f53
|
@ -3,7 +3,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
|||
import {Text} from '../util/text/Text'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
|
||||
export function PromptButtons({
|
||||
export function ComposerPrompt({
|
||||
onPressCompose,
|
||||
}: {
|
||||
onPressCompose: (imagesOpen?: boolean) => void
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
import {s} from '../../lib/styles'
|
||||
|
||||
export function ComposerPrompt({
|
||||
onPressCompose,
|
||||
}: {
|
||||
onPressCompose: (imagesOpen?: boolean) => void
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={() => onPressCompose(false)}>
|
||||
<View style={[pal.view, pal.border, styles.container]}>
|
||||
<Text type="xl" style={pal.textLight}>
|
||||
What's up?
|
||||
</Text>
|
||||
<View style={s.flex1} />
|
||||
<View style={[styles.btn, pal.btn]}>
|
||||
<Text>Post</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 18,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
btn: {
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 30,
|
||||
},
|
||||
})
|
|
@ -13,7 +13,7 @@ import {EmptyState} from '../util/EmptyState'
|
|||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {FeedModel} from '../../../state/models/feed-view'
|
||||
import {FeedItem} from './FeedItem'
|
||||
import {PromptButtons} from './PromptButtons'
|
||||
import {ComposerPrompt} from './ComposerPrompt'
|
||||
import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
|
||||
import {s} from '../../lib/styles'
|
||||
|
||||
|
@ -43,7 +43,7 @@ export const Feed = observer(function Feed({
|
|||
// like PureComponent, shouldComponentUpdate, etc
|
||||
const renderItem = ({item}: {item: any}) => {
|
||||
if (item === COMPOSE_PROMPT_ITEM) {
|
||||
return <PromptButtons onPressCompose={onPressCompose} />
|
||||
return <ComposerPrompt onPressCompose={onPressCompose} />
|
||||
} else if (item === EMPTY_FEED_ITEM) {
|
||||
return (
|
||||
<EmptyState
|
||||
|
@ -87,7 +87,7 @@ export const Feed = observer(function Feed({
|
|||
return (
|
||||
<View testID={testID} style={style}>
|
||||
<CenteredView>
|
||||
{!data && <PromptButtons onPressCompose={onPressCompose} />}
|
||||
{!data && <ComposerPrompt onPressCompose={onPressCompose} />}
|
||||
{feed.isLoading && !data && <PostFeedLoadingPlaceholder />}
|
||||
{feed.hasError && (
|
||||
<ErrorMessage
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
import React from 'react'
|
||||
import {GestureResponderEvent, View} from 'react-native'
|
||||
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||
|
||||
type OnPress = ((event: GestureResponderEvent) => void) | undefined
|
||||
export const FAB = (_opts: {icon: IconProp; onPress: OnPress}) => {
|
||||
return <View />
|
||||
}
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react'
|
||||
import {Pressable, StyleSheet, View} from 'react-native'
|
||||
import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import LinearGradient from 'react-native-linear-gradient'
|
||||
import {Link} from '../../com/util/Link'
|
||||
import {Text} from '../../com/util/text/Text'
|
||||
import {UserAvatar} from '../../com/util/UserAvatar'
|
||||
import {colors} from '../../lib/styles'
|
||||
import {s, colors, gradients} from '../../lib/styles'
|
||||
import {useStores} from '../../../state'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
import {
|
||||
|
@ -63,6 +64,7 @@ export const NavItem = observer(
|
|||
export const DesktopLeftColumn = observer(() => {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const onPressCompose = () => store.shell.openComposer({})
|
||||
const avi = (
|
||||
<UserAvatar
|
||||
handle={store.me.handle}
|
||||
|
@ -105,6 +107,17 @@ export const DesktopLeftColumn = observer(() => {
|
|||
icon={<CogIcon strokeWidth={1.5} />}
|
||||
iconFilled={<CogIcon strokeWidth={2} />}
|
||||
/>
|
||||
<TouchableOpacity onPress={onPressCompose}>
|
||||
<LinearGradient
|
||||
colors={[gradients.blueLight.start, gradients.blueLight.end]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
style={styles.composeBtn}>
|
||||
<Text type="xl-medium" style={[s.white, s.textCenter]}>
|
||||
New Post
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
@ -148,4 +161,13 @@ const styles = StyleSheet.create({
|
|||
navItemLabel: {
|
||||
fontSize: 19,
|
||||
},
|
||||
composeBtn: {
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
marginLeft: 10,
|
||||
marginRight: 20,
|
||||
borderRadius: 30,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue