this repo has no description
Tweak tabbar sizing on web (#2996)
+23
-22
+23
-22
src/view/com/pager/TabBar.tsx
+23
-22
src/view/com/pager/TabBar.tsx
···
4
4
import {PressableWithHover} from '../util/PressableWithHover'
5
5
import {usePalette} from 'lib/hooks/usePalette'
6
6
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
7
-
import {isWeb} from 'platform/detection'
8
7
import {DraggableScrollView} from './DraggableScrollView'
9
8
10
9
export interface TabBarProps {
···
32
31
[indicatorColor, pal],
33
32
)
34
33
const {isDesktop, isTablet} = useWebMediaQueries()
34
+
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
35
35
36
36
// scrolls to the selected item when the page changes
37
37
useEffect(() => {
38
38
scrollElRef.current?.scrollTo({
39
-
x: itemXs[selectedPage] || 0,
39
+
x:
40
+
(itemXs[selectedPage] || 0) - styles.contentContainer.paddingHorizontal,
40
41
})
41
-
}, [scrollElRef, itemXs, selectedPage])
42
+
}, [scrollElRef, itemXs, selectedPage, styles])
42
43
43
44
const onPressItem = useCallback(
44
45
(index: number) => {
···
63
64
[],
64
65
)
65
66
66
-
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
67
-
68
67
return (
69
68
<View testID={testID} style={[pal.view, styles.outer]}>
70
69
<DraggableScrollView
···
80
79
testID={`${testID}-selector-${i}`}
81
80
key={`${item}-${i}`}
82
81
onLayout={e => onItemLayout(e, i)}
83
-
style={[styles.item, selected && indicatorStyle]}
82
+
style={styles.item}
84
83
hoverStyle={pal.viewLight}
85
84
onPress={() => onPressItem(i)}>
86
-
<Text
87
-
type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
88
-
testID={testID ? `${testID}-${item}` : undefined}
89
-
style={selected ? pal.text : pal.textLight}>
90
-
{item}
91
-
</Text>
85
+
<View style={[styles.itemInner, selected && indicatorStyle]}>
86
+
<Text
87
+
type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
88
+
testID={testID ? `${testID}-${item}` : undefined}
89
+
style={selected ? pal.text : pal.textLight}>
90
+
{item}
91
+
</Text>
92
+
</View>
92
93
</PressableWithHover>
93
94
)
94
95
})}
···
103
104
width: 598,
104
105
},
105
106
contentContainer: {
106
-
columnGap: 8,
107
-
marginLeft: 14,
108
-
paddingRight: 14,
107
+
paddingHorizontal: 0,
109
108
backgroundColor: 'transparent',
110
109
},
111
110
item: {
112
111
paddingTop: 14,
112
+
paddingHorizontal: 14,
113
+
justifyContent: 'center',
114
+
},
115
+
itemInner: {
113
116
paddingBottom: 12,
114
-
paddingHorizontal: 10,
115
117
borderBottomWidth: 3,
116
118
borderBottomColor: 'transparent',
117
-
justifyContent: 'center',
118
119
},
119
120
})
120
121
···
123
124
flexDirection: 'row',
124
125
},
125
126
contentContainer: {
126
-
columnGap: isWeb ? 0 : 20,
127
-
marginLeft: isWeb ? 0 : 18,
128
-
paddingRight: isWeb ? 0 : 36,
129
127
backgroundColor: 'transparent',
128
+
paddingHorizontal: 8,
130
129
},
131
130
item: {
132
131
paddingTop: 10,
132
+
paddingHorizontal: 10,
133
+
justifyContent: 'center',
134
+
},
135
+
itemInner: {
133
136
paddingBottom: 10,
134
-
paddingHorizontal: isWeb ? 8 : 0,
135
137
borderBottomWidth: 3,
136
138
borderBottomColor: 'transparent',
137
-
justifyContent: 'center',
138
139
},
139
140
})