Feed UI update working branch [WIP] (#1420)
* Feeds navigation on right side of desktop (#1403) * Remove home feed header on desktop * Add feeds to right sidebar * Add simple non-moving header to desktop * Improve loading state of custom feed header * Remove log Co-authored-by: Eric Bailey <git@esb.lol> * Remove dead comment --------- Co-authored-by: Eric Bailey <git@esb.lol> * Redesign feeds tab (#1439) * consolidate saved feeds and discover into one screen * Add hoverStyle behavior to <Link> * More UI work on SavedFeeds * Replace satellite icon with a hashtag * Tune My Feeds mobile ui * Handle no results in my feeds * Remove old DiscoverFeeds screen * Remove multifeed * Remove DiscoverFeeds from router * Improve loading placeholders * Small fixes * Fix types * Fix overflow issue on firefox * Add icons prompting to open feeds --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com> * Merge feed prototype [WIP] (#1398) * POC WIP for the mergefeed * Add feed API wrapper and move mergefeed into it * Show feed source in mergefeed * Add lodash.random dep * Improve mergefeed sampling and reliability * Tune source ui element * Improve mergefeed edge condition handling * Remove in-place update of feeds for performance * Fix link on native * Fix bad ref * Improve variety in mergefeed sampling * Fix types * Fix rebase error * Add missing source field (got dropped in merge) * Update find more link * Simplify the right hand feeds nav * Bring back load latest button on desktop & unify impl * Add 'From' to source * Add simple headers to desktop home & notifications * Fix thread view jumping around horizontally * Add unread indicators to desktop headers * Add home feed preference for enabling the mergefeed * Add a preference for showing replies among followed users only (#1448) * Add a preference for showing replies among followed users only * Simplify the reply filter UI * Fix typo * Simplified custom feed header * Add soft reset to custom feed screen * Drop all the in-post translate links except when expanded (#1455) * Update mobile feed settings links to match desktop * Fixes to feeds screen loading states * Bolder active state of feeds tab on mobile web * Fix dark mode issue --------- Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Ansh <anshnanda10@gmail.com>
This commit is contained in:
Paul Frazee
GitHub
parent
3118e3e933
commit
ea885339cf
57 changed files with 1884 additions and 1497 deletions
|
|
@ -1 +1,86 @@
|
|||
export * from './LoadLatestBtnMobile'
|
||||
import React from 'react'
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
import {clamp} from 'lodash'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {colors} from 'lib/styles'
|
||||
import {HITSLOP_20} from 'lib/constants'
|
||||
|
||||
export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
|
||||
onPress,
|
||||
label,
|
||||
showIndicator,
|
||||
}: {
|
||||
onPress: () => void
|
||||
label: string
|
||||
showIndicator: boolean
|
||||
minimalShellMode?: boolean // NOTE not used on mobile -prf
|
||||
}) {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const {isDesktop, isTablet, isMobile} = useWebMediaQueries()
|
||||
const safeAreaInsets = useSafeAreaInsets()
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.loadLatest,
|
||||
isDesktop && styles.loadLatestDesktop,
|
||||
isTablet && styles.loadLatestTablet,
|
||||
pal.borderDark,
|
||||
pal.view,
|
||||
isMobile &&
|
||||
!store.shell.minimalShellMode && {
|
||||
bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
|
||||
},
|
||||
]}
|
||||
onPress={onPress}
|
||||
hitSlop={HITSLOP_20}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={label}
|
||||
accessibilityHint="">
|
||||
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
|
||||
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
})
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
loadLatest: {
|
||||
position: 'absolute',
|
||||
left: 18,
|
||||
bottom: 35,
|
||||
borderWidth: 1,
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: 26,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
loadLatestTablet: {
|
||||
// @ts-ignore web only
|
||||
left: '50vw',
|
||||
// @ts-ignore web only -prf
|
||||
transform: 'translateX(-282px)',
|
||||
},
|
||||
loadLatestDesktop: {
|
||||
// @ts-ignore web only
|
||||
left: '50vw',
|
||||
// @ts-ignore web only -prf
|
||||
transform: 'translateX(-382px)',
|
||||
},
|
||||
indicator: {
|
||||
position: 'absolute',
|
||||
top: 3,
|
||||
right: 3,
|
||||
backgroundColor: colors.blue3,
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 6,
|
||||
borderWidth: 1,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,109 +0,0 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, TouchableOpacity} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {Text} from '../text/Text'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
|
||||
import {HITSLOP_20} from 'lib/constants'
|
||||
|
||||
export const LoadLatestBtn = ({
|
||||
onPress,
|
||||
label,
|
||||
showIndicator,
|
||||
minimalShellMode,
|
||||
}: {
|
||||
onPress: () => void
|
||||
label: string
|
||||
showIndicator: boolean
|
||||
minimalShellMode?: boolean
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
if (isMobile) {
|
||||
return (
|
||||
<LoadLatestBtnMobile
|
||||
onPress={onPress}
|
||||
label={label}
|
||||
showIndicator={showIndicator}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{showIndicator && (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
pal.view,
|
||||
pal.borderDark,
|
||||
styles.loadLatestCentered,
|
||||
minimalShellMode && styles.loadLatestCenteredMinimal,
|
||||
]}
|
||||
onPress={onPress}
|
||||
hitSlop={HITSLOP_20}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={label}
|
||||
accessibilityHint="">
|
||||
<Text type="md-bold" style={pal.text}>
|
||||
{label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={[pal.view, pal.borderDark, styles.loadLatest]}
|
||||
onPress={onPress}
|
||||
hitSlop={HITSLOP_20}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={label}
|
||||
accessibilityHint="">
|
||||
<Text type="md-bold" style={pal.text}>
|
||||
<FontAwesomeIcon
|
||||
icon="angle-up"
|
||||
size={21}
|
||||
style={[pal.text, styles.icon]}
|
||||
/>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
loadLatest: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'absolute',
|
||||
// @ts-ignore web only
|
||||
left: '50vw',
|
||||
// @ts-ignore web only -prf
|
||||
transform: 'translateX(-282px)',
|
||||
bottom: 40,
|
||||
width: 54,
|
||||
height: 54,
|
||||
borderRadius: 30,
|
||||
borderWidth: 1,
|
||||
},
|
||||
icon: {
|
||||
position: 'relative',
|
||||
top: 2,
|
||||
},
|
||||
loadLatestCentered: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'absolute',
|
||||
// @ts-ignore web only
|
||||
left: '50vw',
|
||||
// @ts-ignore web only -prf
|
||||
transform: 'translateX(-50%)',
|
||||
top: 60,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 30,
|
||||
borderWidth: 1,
|
||||
},
|
||||
loadLatestCenteredMinimal: {
|
||||
top: 20,
|
||||
},
|
||||
})
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
import {clamp} from 'lodash'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {colors} from 'lib/styles'
|
||||
import {HITSLOP_20} from 'lib/constants'
|
||||
|
||||
export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
|
||||
onPress,
|
||||
label,
|
||||
showIndicator,
|
||||
}: {
|
||||
onPress: () => void
|
||||
label: string
|
||||
showIndicator: boolean
|
||||
minimalShellMode?: boolean // NOTE not used on mobile -prf
|
||||
}) {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const safeAreaInsets = useSafeAreaInsets()
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.loadLatest,
|
||||
pal.borderDark,
|
||||
pal.view,
|
||||
!store.shell.minimalShellMode && {
|
||||
bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
|
||||
},
|
||||
]}
|
||||
onPress={onPress}
|
||||
hitSlop={HITSLOP_20}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={label}
|
||||
accessibilityHint="">
|
||||
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
|
||||
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
})
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
loadLatest: {
|
||||
position: 'absolute',
|
||||
left: 18,
|
||||
bottom: 35,
|
||||
borderWidth: 1,
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: 26,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
indicator: {
|
||||
position: 'absolute',
|
||||
top: 3,
|
||||
right: 3,
|
||||
backgroundColor: colors.blue3,
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 6,
|
||||
borderWidth: 1,
|
||||
},
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue