Desktop styling fixes
parent
ed7293ea66
commit
bec94ed82c
|
@ -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
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -126,5 +126,6 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
fixedHeight: {
|
||||
height: '100vh',
|
||||
scrollbarGutter: 'stable both-edges',
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue