forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Move border positioning to FlatList and ScrollView (#509)
* Move border positioning to FlatList and ScrollView
* Fix mobile web tab bar border
authored by
Ollie Hsieh
and committed by
GitHub
aa56f4a5
f0706dbe
+22
-34
+1
-2
src/view/com/pager/FeedsTabBar.web.tsx
+1
-2
src/view/com/pager/FeedsTabBar.web.tsx
+2
-1
src/view/com/pager/FeedsTabBarMobile.tsx
+2
-1
src/view/com/pager/FeedsTabBarMobile.tsx
···
33
33
}, [store])
34
34
35
35
return (
36
-
<Animated.View style={[pal.view, styles.tabBar, transform]}>
36
+
<Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
37
37
<TouchableOpacity
38
38
testID="viewHeaderDrawerBtn"
39
39
style={styles.tabBarAvi}
···
61
61
flexDirection: 'row',
62
62
alignItems: 'center',
63
63
paddingHorizontal: 18,
64
+
borderBottomWidth: 1,
64
65
},
65
66
tabBarAvi: {
66
67
marginTop: 1,
+19
-3
src/view/com/util/Views.web.tsx
+19
-3
src/view/com/util/Views.web.tsx
···
23
23
ViewProps,
24
24
} from 'react-native'
25
25
import {addStyle, colors} from 'lib/styles'
26
+
import {usePalette} from 'lib/hooks/usePalette'
26
27
27
28
export function CenteredView({
28
29
style,
···
41
42
}: React.PropsWithChildren<FlatListProps<ItemT>>,
42
43
ref: React.Ref<RNFlatList>,
43
44
) {
45
+
const pal = usePalette('default')
44
46
contentContainerStyle = addStyle(
45
47
contentContainerStyle,
46
48
styles.containerScroll,
···
61
63
return (
62
64
<RNFlatList
63
65
ref={ref}
64
-
contentContainerStyle={contentContainerStyle}
66
+
contentContainerStyle={[
67
+
contentContainerStyle,
68
+
pal.border,
69
+
styles.contentContainer,
70
+
]}
65
71
style={style}
66
72
contentOffset={contentOffset}
67
73
{...props}
···
73
79
{contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
74
80
ref: React.Ref<RNScrollView>,
75
81
) {
82
+
const pal = usePalette('default')
83
+
76
84
contentContainerStyle = addStyle(
77
85
contentContainerStyle,
78
86
styles.containerScroll,
79
87
)
80
88
return (
81
89
<RNScrollView
82
-
contentContainerStyle={contentContainerStyle}
90
+
contentContainerStyle={[
91
+
contentContainerStyle,
92
+
pal.border,
93
+
styles.contentContainer,
94
+
]}
83
95
ref={ref}
84
96
{...props}
85
97
/>
···
87
99
})
88
100
89
101
const styles = StyleSheet.create({
102
+
contentContainer: {
103
+
borderLeftWidth: 1,
104
+
borderRightWidth: 1,
105
+
minHeight: '100vh',
106
+
},
90
107
container: {
91
108
width: '100%',
92
109
maxWidth: 600,
···
95
112
},
96
113
containerScroll: {
97
114
width: '100%',
98
-
maxHeight: '100vh',
99
115
maxWidth: 600,
100
116
marginLeft: 'auto',
101
117
marginRight: 'auto',
-28
src/view/shell/index.web.tsx
-28
src/view/shell/index.web.tsx
···
14
14
import {DrawerContent} from './Drawer'
15
15
import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
16
16
import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
17
-
import {usePalette} from 'lib/hooks/usePalette'
18
17
19
18
const ShellInner = observer(() => {
20
19
const store = useStores()
21
-
const pal = usePalette('default')
22
20
const {isDesktop} = useWebMediaQueries()
23
21
24
22
return (
···
32
30
<>
33
31
<DesktopLeftNav />
34
32
<DesktopRightNav />
35
-
<View
36
-
style={[
37
-
styles.viewBorder,
38
-
{borderLeftColor: pal.colors.border},
39
-
styles.viewBorderLeft,
40
-
]}
41
-
/>
42
-
<View
43
-
style={[
44
-
styles.viewBorder,
45
-
{borderLeftColor: pal.colors.border},
46
-
styles.viewBorderRight,
47
-
]}
48
-
/>
49
33
</>
50
34
)}
51
35
<Composer
···
89
73
},
90
74
bgDark: {
91
75
backgroundColor: colors.black, // TODO
92
-
},
93
-
viewBorder: {
94
-
position: 'absolute',
95
-
width: 1,
96
-
height: '100%',
97
-
borderLeftWidth: 1,
98
-
},
99
-
viewBorderLeft: {
100
-
left: 'calc(50vw - 300px)',
101
-
},
102
-
viewBorderRight: {
103
-
left: 'calc(50vw + 300px)',
104
76
},
105
77
drawerMask: {
106
78
position: 'absolute',