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

Integrate menu into design system

zio/stable
Paul Frazee 2022-12-30 15:08:10 -06:00
parent 58a591f314
commit d952c550ea
1 changed files with 39 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/view/shell/mobile/Menu.tsx
View File

@ -19,6 +19,7 @@ import {
import {UserAvatar} from '../../com/util/UserAvatar' import {UserAvatar} from '../../com/util/UserAvatar'
import {Text} from '../../com/util/text/Text' import {Text} from '../../com/util/text/Text'
import {CreateSceneModal} from '../../../state/models/shell-ui' import {CreateSceneModal} from '../../../state/models/shell-ui'
import {usePalette} from '../../lib/hooks/usePalette'
export const Menu = ({ export const Menu = ({
visible, visible,
@ -27,6 +28,7 @@ export const Menu = ({
visible: boolean visible: boolean
onClose: () => void onClose: () => void
}) => { }) => {
const pal = usePalette('default')
const store = useStores() const store = useStores()
useEffect(() => { useEffect(() => {
@ -86,9 +88,10 @@ export const Menu = ({
) : undefined} ) : undefined}
</View> </View>
<Text <Text
type="h4"
style={[ style={[
styles.menuItemLabel, pal.text,
bold ? styles.menuItemLabelBold : undefined, bold ? styles.menuItemLabelBold : styles.menuItemLabel,
]} ]}
numberOfLines={1}> numberOfLines={1}>
{label} {label}
@ -97,7 +100,7 @@ export const Menu = ({
) )
return ( return (
<View style={styles.view}> <View style={[styles.view, pal.view]}>
<TouchableOpacity <TouchableOpacity
onPress={() => onNavigate(`/profile/${store.me.handle}`)} onPress={() => onNavigate(`/profile/${store.me.handle}`)}
style={styles.profileCard}> style={styles.profileCard}>
@ -108,46 +111,47 @@ export const Menu = ({
avatar={store.me.avatar} avatar={store.me.avatar}
/> />
<View style={s.flex1}> <View style={s.flex1}>
<Text style={styles.profileCardDisplayName}> <Text
type="h3"
style={[pal.text, styles.profileCardDisplayName]}
numberOfLines={1}>
{store.me.displayName} {store.me.displayName}
</Text> </Text>
<Text style={styles.profileCardHandle}>{store.me.handle}</Text> <Text
style={[pal.textLight, styles.profileCardHandle]}
numberOfLines={1}>
@{store.me.handle}
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={styles.searchBtn} style={[styles.searchBtn, pal.btn]}
onPress={() => onNavigate('/search')}> onPress={() => onNavigate('/search')}>
<MagnifyingGlassIcon <MagnifyingGlassIcon
style={{color: colors.gray5} as StyleProp<ViewStyle>} style={pal.text as StyleProp<ViewStyle>}
size={25} size={25}
/> />
<Text style={styles.searchBtnLabel}>Search</Text> <Text type="h4" style={[pal.text, styles.searchBtnLabel]}>
Search
</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.section}> <View style={[styles.section, pal.border]}>
<MenuItem <MenuItem
icon={ icon={<HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />}
<HomeIcon
style={{color: colors.gray6} as StyleProp<ViewStyle>}
size="26"
/>
}
label="Home" label="Home"
url="/" url="/"
/> />
<MenuItem <MenuItem
icon={ icon={<BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" />}
<BellIcon
style={{color: colors.gray6} as StyleProp<ViewStyle>}
size="28"
/>
}
label="Notifications" label="Notifications"
url="/notifications" url="/notifications"
count={store.me.notificationCount} count={store.me.notificationCount || 10}
/> />
</View> </View>
<View style={styles.section}> <View style={[styles.section, pal.border]}>
<Text style={styles.heading}>Scenes</Text> <Text type="h5" style={[pal.text, styles.heading]}>
Scenes
</Text>
{store.me.memberships {store.me.memberships
? store.me.memberships.memberships.map((membership, i) => ( ? store.me.memberships.memberships.map((membership, i) => (
<MenuItem <MenuItem
@ -166,13 +170,10 @@ export const Menu = ({
)) ))
: undefined} : undefined}
</View> </View>
<View style={styles.section}> <View style={[styles.section, pal.border]}>
<MenuItem <MenuItem
icon={ icon={
<UserGroupIcon <UserGroupIcon style={pal.text as StyleProp<ViewStyle>} size="30" />
style={{color: colors.gray6} as StyleProp<ViewStyle>}
size="30"
/>
} }
label="Create a scene" label="Create a scene"
onPress={onPressCreateScene} onPress={onPressCreateScene}
@ -180,7 +181,7 @@ export const Menu = ({
<MenuItem <MenuItem
icon={ icon={
<CogIcon <CogIcon
style={{color: colors.gray6} as StyleProp<ViewStyle>} style={pal.text as StyleProp<ViewStyle>}
size="30" size="30"
strokeWidth={2} strokeWidth={2}
/> />
@ -190,7 +191,7 @@ export const Menu = ({
/> />
</View> </View>
<View style={styles.footer}> <View style={styles.footer}>
<Text style={s.gray4}> <Text style={[pal.textLight]}>
Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion} Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion}
) )
</Text> </Text>
@ -202,18 +203,14 @@ export const Menu = ({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
view: { view: {
flex: 1, flex: 1,
backgroundColor: colors.white,
}, },
section: { section: {
paddingHorizontal: 10, paddingHorizontal: 10,
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: colors.gray1,
}, },
heading: { heading: {
fontSize: 16,
fontWeight: 'bold',
paddingVertical: 8, paddingVertical: 8,
paddingHorizontal: 4, paddingHorizontal: 4,
}, },
@ -226,19 +223,13 @@ const styles = StyleSheet.create({
}, },
profileCardDisplayName: { profileCardDisplayName: {
marginLeft: 12, marginLeft: 12,
fontSize: 24,
fontWeight: 'bold',
color: colors.gray7,
}, },
profileCardHandle: { profileCardHandle: {
marginLeft: 12, marginLeft: 12,
fontSize: 18,
color: colors.gray6,
}, },
searchBtn: { searchBtn: {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: colors.gray1,
borderRadius: 8, borderRadius: 8,
margin: 10, margin: 10,
marginBottom: 0, marginBottom: 0,
@ -246,16 +237,16 @@ const styles = StyleSheet.create({
paddingHorizontal: 12, paddingHorizontal: 12,
}, },
searchBtnLabel: { searchBtnLabel: {
marginLeft: 8, marginLeft: 14,
fontSize: 19, fontWeight: 'normal',
color: colors.gray6,
}, },
menuItem: { menuItem: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingVertical: 8, paddingVertical: 8,
paddingHorizontal: 6, paddingLeft: 6,
paddingRight: 10,
}, },
menuItemIconWrapper: { menuItemIconWrapper: {
width: 36, width: 36,
@ -265,10 +256,11 @@ const styles = StyleSheet.create({
marginRight: 12, marginRight: 12,
}, },
menuItemLabel: { menuItemLabel: {
fontSize: 19, flex: 1,
color: colors.gray7, fontWeight: 'normal',
}, },
menuItemLabelBold: { menuItemLabelBold: {
flex: 1,
fontWeight: 'bold', fontWeight: 'bold',
}, },
menuItemCount: { menuItemCount: {