Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

ALF TabBar (#6924)

* alf tabbar

* reduce indicator height

authored by

Samuel Newman and committed by
GitHub
79f807dc 3607cfb9

+29 -32
+11 -15
src/view/com/pager/TabBar.tsx
··· 12 12 useSharedValue, 13 13 } from 'react-native-reanimated' 14 14 15 - import {usePalette} from '#/lib/hooks/usePalette' 16 - import {PressableWithHover} from '../util/PressableWithHover' 17 - import {Text} from '../util/text/Text' 15 + import {PressableWithHover} from '#/view/com/util/PressableWithHover' 16 + import {atoms as a, useTheme} from '#/alf' 17 + import {Text} from '#/components/Typography' 18 18 19 19 export interface TabBarProps { 20 20 testID?: string ··· 41 41 dragProgress, 42 42 dragState, 43 43 }: TabBarProps) { 44 - const pal = usePalette('default') 44 + const t = useTheme() 45 45 const scrollElRef = useAnimatedRef<ScrollView>() 46 46 const syncScrollState = useSharedValue<'synced' | 'unsynced' | 'needs-sync'>( 47 47 'synced', ··· 264 264 return ( 265 265 <View 266 266 testID={testID} 267 - style={[pal.view, styles.outer]} 267 + style={[t.atoms.bg, a.flex_row]} 268 268 accessibilityRole="tablist"> 269 269 <ScrollView 270 270 testID={`${testID}-selector`} ··· 309 309 left: 0, 310 310 bottom: 0, 311 311 right: 0, 312 - borderBottomWidth: 3, 313 - borderColor: pal.link.color, 312 + borderBottomWidth: 2, 313 + borderColor: t.palette.primary_500, 314 314 }, 315 315 ]} 316 316 /> 317 317 </Animated.View> 318 318 </ScrollView> 319 - <View style={[pal.border, styles.outerBottomBorder]} /> 319 + <View style={[t.atoms.border_contrast_low, styles.outerBottomBorder]} /> 320 320 </View> 321 321 ) 322 322 } ··· 336 336 onPressItem: (index: number) => void 337 337 onItemLayout: (index: number, layout: {x: number; width: number}) => void 338 338 }) { 339 - const pal = usePalette('default') 339 + const t = useTheme() 340 340 const style = useAnimatedStyle(() => { 341 341 if (!_WORKLET) { 342 342 return {opacity: 0.7} ··· 363 363 <PressableWithHover 364 364 testID={`${testID}-selector-${index}`} 365 365 style={styles.item} 366 - hoverStyle={pal.viewLight} 366 + hoverStyle={t.atoms.bg_contrast_25} 367 367 onPress={() => onPressItem(index)} 368 368 accessibilityRole="tab"> 369 369 <Animated.View style={[style, styles.itemInner]}> 370 370 <Text 371 371 emoji 372 - type="lg-bold" 373 372 testID={testID ? `${testID}-${item}` : undefined} 374 - style={[pal.text, {lineHeight: 20}]}> 373 + style={[t.atoms.text, a.text_md, a.font_bold, {lineHeight: 20}]}> 375 374 {item} 376 375 </Text> 377 376 </Animated.View> ··· 381 380 } 382 381 383 382 const styles = StyleSheet.create({ 384 - outer: { 385 - flexDirection: 'row', 386 - }, 387 383 contentContainer: { 388 384 backgroundColor: 'transparent', 389 385 paddingHorizontal: CONTENT_PADDING,
+18 -17
src/view/com/pager/TabBar.web.tsx
··· 1 - import {useCallback, useEffect, useMemo, useRef} from 'react' 1 + import {useCallback, useEffect, useRef} from 'react' 2 2 import {ScrollView, StyleSheet, View} from 'react-native' 3 3 4 - import {usePalette} from '#/lib/hooks/usePalette' 5 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 4 + import {atoms as a, useBreakpoints, useTheme} from '#/alf' 5 + import {Text} from '#/components/Typography' 6 6 import {PressableWithHover} from '../util/PressableWithHover' 7 - import {Text} from '../util/text/Text' 8 7 import {DraggableScrollView} from './DraggableScrollView' 9 8 10 9 export interface TabBarProps { ··· 12 11 selectedPage: number 13 12 items: string[] 14 13 indicatorColor?: string 14 + backgroundColor?: string 15 + 15 16 onSelect?: (index: number) => void 16 17 onPressSelected?: (index: number) => void 17 18 } ··· 28 29 onSelect, 29 30 onPressSelected, 30 31 }: TabBarProps) { 31 - const pal = usePalette('default') 32 + const t = useTheme() 32 33 const scrollElRef = useRef<ScrollView>(null) 33 34 const itemRefs = useRef<Array<Element>>([]) 34 - const indicatorStyle = useMemo( 35 - () => ({borderBottomColor: indicatorColor || pal.colors.link}), 36 - [indicatorColor, pal], 37 - ) 38 - const {isDesktop, isTablet} = useWebMediaQueries() 39 - const styles = isDesktop || isTablet ? desktopStyles : mobileStyles 35 + const indicatorStyle = { 36 + borderBottomColor: indicatorColor || t.palette.primary_500, 37 + } 38 + const {gtMobile} = useBreakpoints() 39 + const styles = gtMobile ? desktopStyles : mobileStyles 40 40 41 41 useEffect(() => { 42 42 // On the web, the primary interaction is tapping. ··· 96 96 return ( 97 97 <View 98 98 testID={testID} 99 - style={[pal.view, styles.outer]} 99 + style={[t.atoms.bg, styles.outer]} 100 100 accessibilityRole="tablist"> 101 101 <DraggableScrollView 102 102 testID={`${testID}-selector`} ··· 112 112 key={`${item}-${i}`} 113 113 ref={node => (itemRefs.current[i] = node as any)} 114 114 style={styles.item} 115 - hoverStyle={pal.viewLight} 115 + hoverStyle={t.atoms.bg_contrast_25} 116 116 onPress={() => onPressItem(i)} 117 117 accessibilityRole="tab"> 118 118 <View style={[styles.itemInner, selected && indicatorStyle]}> 119 119 <Text 120 120 emoji 121 - type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'} 122 121 testID={testID ? `${testID}-${item}` : undefined} 123 122 style={[ 124 - selected ? pal.text : pal.textLight, 123 + selected ? t.atoms.text : t.atoms.text_contrast_medium, 124 + a.text_md, 125 + a.font_bold, 125 126 {lineHeight: 20}, 126 127 ]}> 127 128 {item} ··· 131 132 ) 132 133 })} 133 134 </DraggableScrollView> 134 - <View style={[pal.border, styles.outerBottomBorder]} /> 135 + <View style={[t.atoms.border_contrast_low, styles.outerBottomBorder]} /> 135 136 </View> 136 137 ) 137 138 } ··· 179 180 }, 180 181 itemInner: { 181 182 paddingBottom: 10, 182 - borderBottomWidth: 3, 183 + borderBottomWidth: 2, 183 184 borderBottomColor: 'transparent', 184 185 }, 185 186 outerBottomBorder: {