Desktop styling fixes

zio/stable
Paul Frazee 2023-05-17 22:58:53 -05:00
parent ed7293ea66
commit bec94ed82c
6 changed files with 84 additions and 42 deletions

View File

@ -1,10 +1,10 @@
import React, {useEffect, useCallback} from 'react'
import {FlatList, RefreshControl, StyleSheet, View} from 'react-native'
import {RefreshControl, StyleSheet, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from 'lib/hooks/usePalette'
import {observer} from 'mobx-react-lite'
import {useStores} from 'state/index'
import {CenteredView} from 'view/com/util/Views'
import {FlatList} from 'view/com/util/Views'
import {Text} from 'view/com/util/text/Text'
import {isDesktopWeb} from 'platform/detection'
import {s} from 'lib/styles'
@ -65,31 +65,29 @@ export const SavedFeeds = observer(
)
return (
<CenteredView style={[s.flex1]}>
<FlatList
style={[!isDesktopWeb && s.flex1, {paddingTop: headerOffset}]}
data={store.me.savedFeeds.feeds}
keyExtractor={item => item.data.uri}
refreshing={store.me.savedFeeds.isRefreshing}
refreshControl={
<RefreshControl
refreshing={store.me.savedFeeds.isRefreshing}
onRefresh={() => store.me.savedFeeds.refresh()}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
progressViewOffset={headerOffset}
/>
}
renderItem={renderItem}
initialNumToRender={10}
ListFooterComponent={renderListFooterComponent}
ListEmptyComponent={renderListEmptyComponent}
extraData={store.me.savedFeeds.isLoading}
contentOffset={{x: 0, y: headerOffset * -1}}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>
</CenteredView>
<FlatList
style={[!isDesktopWeb && s.flex1, {paddingTop: headerOffset}]}
data={store.me.savedFeeds.feeds}
keyExtractor={item => item.data.uri}
refreshing={store.me.savedFeeds.isRefreshing}
refreshControl={
<RefreshControl
refreshing={store.me.savedFeeds.isRefreshing}
onRefresh={() => store.me.savedFeeds.refresh()}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
progressViewOffset={headerOffset}
/>
}
renderItem={renderItem}
initialNumToRender={10}
ListFooterComponent={renderListFooterComponent}
ListEmptyComponent={renderListEmptyComponent}
extraData={store.me.savedFeeds.isLoading}
contentOffset={{x: 0, y: headerOffset * -1}}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>
)
},
)

View File

@ -28,7 +28,12 @@ const FeedsTabBarDesktop = observer(
) => {
const store = useStores()
const items = useMemo(
() => ['Following', "What's hot", ...store.me.savedFeeds.pinnedFeedNames],
() => [
'Following',
"What's hot",
...store.me.savedFeeds.pinnedFeedNames,
'My feeds',
],
[store.me.savedFeeds.pinnedFeedNames],
)
const pal = usePalette('default')

View File

@ -107,11 +107,12 @@ const styles = isDesktopWeb
? StyleSheet.create({
outer: {
flexDirection: 'row',
paddingHorizontal: 18,
width: 598,
paddingHorizontal: 14,
},
item: {
paddingTop: 14,
paddingBottom: 16,
paddingBottom: 12,
paddingHorizontal: 12,
borderBottomWidth: 3,
borderBottomColor: 'transparent',

View File

@ -20,12 +20,14 @@ export const ViewHeader = observer(function ({
canGoBack,
hideOnScroll,
showOnDesktop,
showBorder,
renderButton,
}: {
title: string
canGoBack?: boolean
hideOnScroll?: boolean
showOnDesktop?: boolean
showBorder?: boolean
renderButton?: () => JSX.Element
}) {
const pal = usePalette('default')
@ -57,7 +59,7 @@ export const ViewHeader = observer(function ({
}
return (
<Container hideOnScroll={hideOnScroll || false}>
<Container hideOnScroll={hideOnScroll || false} showBorder={showBorder}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
onPress={canGoBack ? onPressBack : onPressMenu}
@ -115,9 +117,11 @@ const Container = observer(
({
children,
hideOnScroll,
showBorder,
}: {
children: React.ReactNode
hideOnScroll: boolean
showBorder: boolean
}) => {
const store = useStores()
const pal = usePalette('default')
@ -145,11 +149,28 @@ const Container = observer(
}
if (!hideOnScroll) {
return <View style={[styles.header, pal.view]}>{children}</View>
return (
<View
style={[
styles.header,
pal.view,
pal.border,
showBorder && styles.border,
]}>
{children}
</View>
)
}
return (
<Animated.View
style={[styles.header, pal.view, styles.headerFloating, transform]}>
style={[
styles.header,
pal.view,
pal.border,
styles.headerFloating,
transform,
showBorder && styles.border,
]}>
{children}
</Animated.View>
)
@ -172,6 +193,9 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
paddingVertical: 12,
},
border: {
borderBottomWidth: 1,
},
titleContainer: {
marginLeft: 'auto',

View File

@ -126,5 +126,6 @@ const styles = StyleSheet.create({
},
fixedHeight: {
height: '100vh',
scrollbarGutter: 'stable both-edges',
},
})

View File

@ -71,8 +71,17 @@ export const SavedFeeds = withAuthRequired(
}
return (
<CenteredView style={[s.flex1]}>
<ViewHeader title="Edit My Feeds" showOnDesktop />
<CenteredView
style={[
s.hContentRegion,
pal.border,
isDesktopWeb && styles.desktopContainer,
]}>
<ViewHeader
title="Edit My Feeds"
showOnDesktop
showBorder={!isDesktopWeb}
/>
<DraggableFlatList
containerStyle={[!isDesktopWeb && s.flex1]}
data={[...savedFeeds.pinned, ...savedFeeds.unpinned]} // make a copy so this FlatList re-renders when pinned changes
@ -92,8 +101,6 @@ export const SavedFeeds = withAuthRequired(
ListEmptyComponent={_ListEmptyComponent}
extraData={savedFeeds.isLoading}
onDragEnd={({data}) => savedFeeds.reorderPinnedFeeds(data)}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>
</CenteredView>
)
@ -126,8 +133,8 @@ const ListItem = observer(
}}>
<FontAwesomeIcon
icon="arrow-up"
size={20}
style={[s.mr10, pal.text, styles.webArrowUpButton]}
size={12}
style={[pal.text, styles.webArrowUpButton]}
/>
</TouchableOpacity>
<TouchableOpacity
@ -137,8 +144,8 @@ const ListItem = observer(
}}>
<FontAwesomeIcon
icon="arrow-down"
size={20}
style={[s.mr10, pal.text]}
size={12}
style={[pal.text]}
/>
</TouchableOpacity>
</View>
@ -173,6 +180,11 @@ const ListItem = observer(
)
const styles = StyleSheet.create({
desktopContainer: {
borderLeftWidth: 1,
borderRightWidth: 1,
minHeight: '100vh',
},
footer: {
paddingVertical: 20,
},
@ -187,10 +199,11 @@ const styles = StyleSheet.create({
flex: 1,
flexDirection: 'row',
alignItems: 'center',
borderTopWidth: 1,
borderBottomWidth: 1,
paddingRight: 16,
},
webArrowButtonsContainer: {
paddingLeft: 16,
flexDirection: 'column',
justifyContent: 'space-around',
},