From 91fadadb5848404bc47b69879bbc38a9011a0c62 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Sat, 15 Apr 2023 10:15:30 -0700 Subject: Fix web home feed sizing and related issues (close #432) (#475) * Fix web home feed sizing (close #432) * Fix lint * Fix positioning of profile not found error * Fix load latest on mobile * Fix overflow issues on mobile web (visible in postthread) * Fix bottom pad on mobile web * Remove old comment --- src/lib/styles.ts | 3 +- src/view/com/pager/FeedsTabBar.web.tsx | 58 ++++++++++++++++++--- src/view/com/post-thread/PostThread.tsx | 26 +++++++--- src/view/com/util/LoadLatestBtn.tsx | 59 ---------------------- src/view/com/util/LoadLatestBtn.web.tsx | 53 ------------------- src/view/com/util/Views.web.tsx | 19 ++++++- src/view/com/util/error/ErrorScreen.tsx | 5 +- src/view/com/util/load-latest/LoadLatestBtn.tsx | 1 + .../com/util/load-latest/LoadLatestBtn.web.tsx | 58 +++++++++++++++++++++ .../com/util/load-latest/LoadLatestBtnMobile.tsx | 59 ++++++++++++++++++++++ src/view/screens/Home.tsx | 10 ++-- src/view/screens/Notifications.tsx | 2 +- 12 files changed, 219 insertions(+), 134 deletions(-) delete mode 100644 src/view/com/util/LoadLatestBtn.tsx delete mode 100644 src/view/com/util/LoadLatestBtn.web.tsx create mode 100644 src/view/com/util/load-latest/LoadLatestBtn.tsx create mode 100644 src/view/com/util/load-latest/LoadLatestBtn.web.tsx create mode 100644 src/view/com/util/load-latest/LoadLatestBtnMobile.tsx (limited to 'src') diff --git a/src/lib/styles.ts b/src/lib/styles.ts index 409c77548..37d169679 100644 --- a/src/lib/styles.ts +++ b/src/lib/styles.ts @@ -1,5 +1,6 @@ import {StyleProp, StyleSheet, TextStyle} from 'react-native' import {Theme, TypographyVariant} from './ThemeContext' +import {isMobileWeb} from 'platform/detection' // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest export const colors = { @@ -162,7 +163,7 @@ export const s = StyleSheet.create({ // dimensions w100pct: {width: '100%'}, h100pct: {height: '100%'}, - hContentRegion: {height: '100%'}, + hContentRegion: isMobileWeb ? {flex: 1} : {height: '100%'}, // text align textLeft: {textAlign: 'left'}, diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx index 5cee2fd6d..d80b140ce 100644 --- a/src/view/com/pager/FeedsTabBar.web.tsx +++ b/src/view/com/pager/FeedsTabBar.web.tsx @@ -1,30 +1,76 @@ import React from 'react' +import {Animated, StyleSheet} from 'react-native' import {observer} from 'mobx-react-lite' import {TabBar} from 'view/com/pager/TabBar' -import {CenteredView} from 'view/com/util/Views' import {RenderTabBarFnProps} from 'view/com/pager/Pager' +import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' +import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile' export const FeedsTabBar = observer( - (props: RenderTabBarFnProps & {onPressSelected: () => void}) => { - const pal = usePalette('default') + ( + props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, + ) => { const {isDesktop} = useWebMediaQueries() - if (!isDesktop) { return + } else { + return } + }, +) + +const FeedsTabBarDesktop = observer( + ( + props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, + ) => { + const store = useStores() + const pal = usePalette('default') + const interp = useAnimatedValue(0) + React.useEffect(() => { + Animated.timing(interp, { + toValue: store.shell.minimalShellMode ? 1 : 0, + duration: 100, + useNativeDriver: true, + isInteraction: false, + }).start() + }, [interp, store.shell.minimalShellMode]) + const transform = { + transform: [ + {translateX: '-50%'}, + {translateY: Animated.multiply(interp, -100)}, + ], + } return ( - + // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf + - + ) }, ) + +const styles = StyleSheet.create({ + tabBar: { + position: 'absolute', + zIndex: 1, + left: '50%', + width: 640, + top: 0, + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 18, + }, + tabBarAvi: { + marginTop: 1, + marginRight: 18, + }, +}) diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index 40a6f48c8..a1e25a6ad 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -21,14 +21,14 @@ import {ComposePrompt} from '../composer/Prompt' import {ErrorMessage} from '../util/error/ErrorMessage' import {Text} from '../util/text/Text' import {s} from 'lib/styles' -import {isDesktopWeb} from 'platform/detection' +import {isDesktopWeb, isMobileWeb} from 'platform/detection' import {usePalette} from 'lib/hooks/usePalette' import {useNavigation} from '@react-navigation/native' import {NavigationProp} from 'lib/routes/types' const REPLY_PROMPT = {_reactKey: '__reply__', _isHighlightedPost: false} -const BOTTOM_BORDER = { - _reactKey: '__bottom_border__', +const BOTTOM_COMPONENT = { + _reactKey: '__bottom_component__', _isHighlightedPost: false, } type YieldedItem = PostThreadItemModel | typeof REPLY_PROMPT @@ -48,7 +48,7 @@ export const PostThread = observer(function PostThread({ const navigation = useNavigation() const posts = React.useMemo(() => { if (view.thread) { - return Array.from(flattenThread(view.thread)).concat([BOTTOM_BORDER]) + return Array.from(flattenThread(view.thread)).concat([BOTTOM_COMPONENT]) } return [] }, [view.thread]) @@ -103,12 +103,23 @@ export const PostThread = observer(function PostThread({ ({item}: {item: YieldedItem}) => { if (item === REPLY_PROMPT) { return - } else if (item === BOTTOM_BORDER) { + } else if (item === BOTTOM_COMPONENT) { // HACK // due to some complexities with how flatlist works, this is the easiest way // I could find to get a border positioned directly under the last item + // - + // addendum -- it's also the best way to get mobile web to add padding + // at the bottom of the thread since paddingbottom is ignored. yikes. // -prf - return + return ( + + ) } else if (item instanceof PostThreadItemModel) { return } @@ -224,4 +235,7 @@ const styles = StyleSheet.create({ bottomBorder: { borderBottomWidth: 1, }, + bottomSpacer: { + height: 200, + }, }) diff --git a/src/view/com/util/LoadLatestBtn.tsx b/src/view/com/util/LoadLatestBtn.tsx deleted file mode 100644 index 88b6dffd9..000000000 --- a/src/view/com/util/LoadLatestBtn.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity} from 'react-native' -import {observer} from 'mobx-react-lite' -import LinearGradient from 'react-native-linear-gradient' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {Text} from './text/Text' -import {colors, gradients} from 'lib/styles' -import {clamp} from 'lodash' -import {useStores} from 'state/index' - -const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20} - -export const LoadLatestBtn = observer( - ({onPress, label}: {onPress: () => void; label: string}) => { - const store = useStores() - const safeAreaInsets = useSafeAreaInsets() - return ( - - - - Load new {label} - - - - ) - }, -) - -const styles = StyleSheet.create({ - loadLatest: { - position: 'absolute', - left: 20, - bottom: 35, - shadowColor: '#000', - shadowOpacity: 0.3, - shadowOffset: {width: 0, height: 1}, - }, - loadLatestInner: { - flexDirection: 'row', - paddingHorizontal: 14, - paddingVertical: 10, - borderRadius: 30, - }, - loadLatestText: { - color: colors.white, - }, -}) diff --git a/src/view/com/util/LoadLatestBtn.web.tsx b/src/view/com/util/LoadLatestBtn.web.tsx deleted file mode 100644 index c85f44f30..000000000 --- a/src/view/com/util/LoadLatestBtn.web.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity} from 'react-native' -import {Text} from './text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {UpIcon} from 'lib/icons' - -const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20} - -export const LoadLatestBtn = ({ - onPress, - label, -}: { - onPress: () => void - label: string -}) => { - const pal = usePalette('default') - return ( - - - - Load new {label} - - - ) -} - -const styles = StyleSheet.create({ - loadLatest: { - flexDirection: 'row', - position: 'absolute', - left: '50vw', - // @ts-ignore web only -prf - transform: 'translateX(-50%)', - top: 30, - shadowColor: '#000', - shadowOpacity: 0.2, - shadowOffset: {width: 0, height: 2}, - shadowRadius: 4, - paddingLeft: 20, - paddingRight: 24, - paddingVertical: 10, - borderRadius: 30, - borderWidth: 1, - }, - icon: { - position: 'relative', - top: 2, - marginRight: 5, - }, -}) diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index aa27d7f88..d4bb377e5 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -35,6 +35,8 @@ export function CenteredView({ export const FlatList = React.forwardRef(function ( { contentContainerStyle, + style, + contentOffset, ...props }: React.PropsWithChildren>, ref: React.Ref, @@ -43,10 +45,25 @@ export const FlatList = React.forwardRef(function ( contentContainerStyle, styles.containerScroll, ) + if (contentOffset && contentOffset?.y !== 0) { + // NOTE + // we use paddingTop & contentOffset to space around the floating header + // but reactnative web puts the paddingTop on the wrong element (style instead of the contentContainer) + // so we manually correct it here + // -prf + style = addStyle(style, { + paddingTop: 0, + }) + contentContainerStyle = addStyle(contentContainerStyle, { + paddingTop: Math.abs(contentOffset.y), + }) + } return ( ) diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx index 0221ea153..c66ee7903 100644 --- a/src/view/com/util/error/ErrorScreen.tsx +++ b/src/view/com/util/error/ErrorScreen.tsx @@ -8,6 +8,7 @@ import {Text} from '../text/Text' import {colors} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' import {usePalette} from 'lib/hooks/usePalette' +import {CenteredView} from '../Views' export function ErrorScreen({ title, @@ -25,7 +26,7 @@ export function ErrorScreen({ const theme = useTheme() const pal = usePalette('error') return ( - + )} - + ) } diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx new file mode 100644 index 000000000..ae9cb9361 --- /dev/null +++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx @@ -0,0 +1 @@ +export * from './LoadLatestBtnMobile' diff --git a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx new file mode 100644 index 000000000..22a8fbada --- /dev/null +++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx @@ -0,0 +1,58 @@ +import React from 'react' +import {StyleSheet, TouchableOpacity} from 'react-native' +import {Text} from '../text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {UpIcon} from 'lib/icons' +import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile' +import {isMobileWeb} from 'platform/detection' + +const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20} + +export const LoadLatestBtn = ({ + onPress, + label, +}: { + onPress: () => void + label: string +}) => { + const pal = usePalette('default') + if (isMobileWeb) { + return + } + return ( + + + + Load new {label} + + + ) +} + +const styles = StyleSheet.create({ + loadLatest: { + flexDirection: 'row', + position: 'absolute', + left: '50vw', + // @ts-ignore web only -prf + transform: 'translateX(-50%)', + top: 30, + shadowColor: '#000', + shadowOpacity: 0.2, + shadowOffset: {width: 0, height: 2}, + shadowRadius: 4, + paddingLeft: 20, + paddingRight: 24, + paddingVertical: 10, + borderRadius: 30, + borderWidth: 1, + }, + icon: { + position: 'relative', + top: 2, + marginRight: 5, + }, +}) diff --git a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx new file mode 100644 index 000000000..75a812760 --- /dev/null +++ b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import {StyleSheet, TouchableOpacity} from 'react-native' +import {observer} from 'mobx-react-lite' +import LinearGradient from 'react-native-linear-gradient' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {Text} from '../text/Text' +import {colors, gradients} from 'lib/styles' +import {clamp} from 'lodash' +import {useStores} from 'state/index' + +const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20} + +export const LoadLatestBtn = observer( + ({onPress, label}: {onPress: () => void; label: string}) => { + const store = useStores() + const safeAreaInsets = useSafeAreaInsets() + return ( + + + + Load new {label} + + + + ) + }, +) + +const styles = StyleSheet.create({ + loadLatest: { + position: 'absolute', + left: 20, + bottom: 35, + shadowColor: '#000', + shadowOpacity: 0.3, + shadowOffset: {width: 0, height: 1}, + }, + loadLatestInner: { + flexDirection: 'row', + paddingHorizontal: 14, + paddingVertical: 10, + borderRadius: 30, + }, + loadLatestText: { + color: colors.white, + }, +}) diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index ca9c25f55..1361fc3f2 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {FlatList, View, Platform} from 'react-native' +import {FlatList, View} from 'react-native' import {useFocusEffect, useIsFocused} from '@react-navigation/native' import {observer} from 'mobx-react-lite' import useAppState from 'react-native-appstate-hook' @@ -8,7 +8,7 @@ import {PostsFeedModel} from 'state/models/feeds/posts' import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {Feed} from '../com/posts/Feed' import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState' -import {LoadLatestBtn} from '../com/util/LoadLatestBtn' +import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn' import {FeedsTabBar} from '../com/pager/FeedsTabBar' import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager' import {FAB} from '../com/util/fab/FAB' @@ -17,9 +17,9 @@ import {s} from 'lib/styles' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {useAnalytics} from 'lib/analytics' import {ComposeIcon2} from 'lib/icons' -import {isDesktopWeb, isMobileWeb} from 'platform/detection' +import {isDesktopWeb} from 'platform/detection' -const HEADER_OFFSET = isDesktopWeb ? 0 : isMobileWeb ? 20 : 40 +const HEADER_OFFSET = isDesktopWeb ? 50 : 40 type Props = NativeStackScreenProps export const HomeScreen = withAuthRequired((_opts: Props) => { @@ -191,7 +191,7 @@ const FeedPage = observer( onPressTryAgain={onPressTryAgain} onScroll={onMainScroll} renderEmptyState={renderEmptyState} - headerOffset={Platform.OS === 'web' ? 0 : HEADER_OFFSET} // only offset on mobile + headerOffset={HEADER_OFFSET} /> {feed.hasNewLatest && !feed.isRefreshing && ( diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 8fc47b248..76ad81611 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -10,7 +10,7 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {ViewHeader} from '../com/util/ViewHeader' import {Feed} from '../com/notifications/Feed' import {InvitedUsers} from '../com/notifications/InvitedUsers' -import {LoadLatestBtn} from 'view/com/util/LoadLatestBtn' +import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' import {useStores} from 'state/index' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {s} from 'lib/styles' -- cgit 1.4.1