zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Integrate ViewHeader into the design system

zio/stable
Paul Frazee 2022-12-30 12:29:11 -06:00
parent 55ca7dcce1
commit 434d874598
1 changed files with 31 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/view/com/util/ViewHeader.tsx
View File

@ -9,9 +9,10 @@ import {
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UserAvatar} from './UserAvatar' import {UserAvatar} from './UserAvatar'
import {Text} from './text/Text' import {Text} from './text/Text'
import {s, colors} from '../../lib/styles'
import {MagnifyingGlassIcon} from '../../lib/icons' import {MagnifyingGlassIcon} from '../../lib/icons'
import {useStores} from '../../../state' import {useStores} from '../../../state'
import {useTheme} from '../../lib/ThemeContext'
import {usePalette} from '../../lib/hooks/usePalette'
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10} const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10} const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
@ -27,6 +28,8 @@ export const ViewHeader = observer(function ViewHeader({
canGoBack?: boolean canGoBack?: boolean
onPost?: () => void onPost?: () => void
}) { }) {
const theme = useTheme()
const pal = usePalette('default')
const store = useStores() const store = useStores()
const onPressBack = () => { const onPressBack = () => {
store.nav.tab.goBack() store.nav.tab.goBack()
@ -50,7 +53,7 @@ export const ViewHeader = observer(function ViewHeader({
canGoBack = store.nav.tab.canGoBack canGoBack = store.nav.tab.canGoBack
} }
return ( return (
<View style={styles.header}> <View style={[styles.header, pal.view]}>
<TouchableOpacity <TouchableOpacity
onPress={canGoBack ? onPressBack : onPressMenu} onPress={canGoBack ? onPressBack : onPressMenu}
hitSlop={BACK_HITSLOP} hitSlop={BACK_HITSLOP}
@ -59,7 +62,7 @@ export const ViewHeader = observer(function ViewHeader({
<FontAwesomeIcon <FontAwesomeIcon
size={18} size={18}
icon="angle-left" icon="angle-left"
style={{marginTop: 6, color: colors.black}} style={[{marginTop: 6}, pal.text]}
/> />
) : ( ) : (
<UserAvatar <UserAvatar
@ -71,9 +74,14 @@ export const ViewHeader = observer(function ViewHeader({
)} )}
</TouchableOpacity> </TouchableOpacity>
<View style={styles.titleContainer} pointerEvents="none"> <View style={styles.titleContainer} pointerEvents="none">
<Text style={styles.title}>{title}</Text> <Text type="h3" style={pal.text}>
{title}
</Text>
{subtitle ? ( {subtitle ? (
<Text style={styles.subtitle} numberOfLines={1}> <Text
type="h4"
style={[styles.subtitle, pal.textLight]}
numberOfLines={1}>
{subtitle} {subtitle}
</Text> </Text>
) : undefined} ) : undefined}
@ -81,38 +89,40 @@ export const ViewHeader = observer(function ViewHeader({
<TouchableOpacity <TouchableOpacity
onPress={onPressCompose} onPress={onPressCompose}
hitSlop={HITSLOP} hitSlop={HITSLOP}
style={styles.btn}> style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
<FontAwesomeIcon size={18} icon="plus" /> <FontAwesomeIcon size={18} icon="plus" style={pal.text} />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={onPressSearch} onPress={onPressSearch}
hitSlop={HITSLOP} hitSlop={HITSLOP}
style={[styles.btn, {marginLeft: 8}]}> style={[
<MagnifyingGlassIcon styles.btn,
size={18} {backgroundColor: pal.colors.backgroundLight, marginLeft: 4},
strokeWidth={3} ]}>
style={styles.searchBtnIcon} <MagnifyingGlassIcon size={18} strokeWidth={3} style={pal.text} />
/>
</TouchableOpacity> </TouchableOpacity>
{!store.session.online ? ( {!store.session.online ? (
<TouchableOpacity <TouchableOpacity
style={[styles.btn, {marginLeft: 8}, styles.offline]} style={[
styles.btn,
{backgroundColor: pal.colors.backgroundLight, marginLeft: 4},
]}
onPress={onPressReconnect}> onPress={onPressReconnect}>
{store.session.attemptingConnect ? ( {store.session.attemptingConnect ? (
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (
<> <>
<FontAwesomeIcon icon="signal" style={[s.black]} size={18} /> <FontAwesomeIcon icon="signal" style={pal.text} size={16} />
<FontAwesomeIcon <FontAwesomeIcon
icon="x" icon="x"
style={{ style={{
backgroundColor: colors.white, backgroundColor: pal.colors.backgroundLight,
color: colors.red4, color: theme.palette.error.background,
position: 'relative', position: 'absolute',
left: -4, right: 7,
top: 6, bottom: 7,
}} }}
size={12} size={8}
/> />
</> </>
)} )}
@ -126,12 +136,9 @@ const styles = StyleSheet.create({
header: { header: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
backgroundColor: colors.white,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingTop: 6, paddingTop: 6,
paddingBottom: 6, paddingBottom: 6,
borderBottomColor: colors.gray1,
borderBottomWidth: 1,
}, },
titleContainer: { titleContainer: {
@ -139,15 +146,8 @@ const styles = StyleSheet.create({
alignItems: 'baseline', alignItems: 'baseline',
marginRight: 'auto', marginRight: 'auto',
}, },
title: {
fontSize: 21,
fontWeight: '600',
color: colors.black,
},
subtitle: { subtitle: {
fontSize: 18,
marginLeft: 6, marginLeft: 6,
color: colors.gray4,
maxWidth: 200, maxWidth: 200,
}, },
@ -157,24 +157,8 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: colors.gray1,
width: 36, width: 36,
height: 36, height: 36,
borderRadius: 20, borderRadius: 20,
}, },
searchBtnIcon: {
color: colors.black,
position: 'relative',
top: -1,
},
offline: {
backgroundColor: colors.white,
},
offlineBtn: {
backgroundColor: colors.white,
borderRadius: 5,
paddingVertical: 5,
paddingHorizontal: 10,
},
}) })