diff options
Diffstat (limited to 'src/view/shell/mobile')
| -rw-r--r-- | src/view/shell/mobile/Menu.tsx | 288 | ||||
| -rw-r--r-- | src/view/shell/mobile/index.tsx | 8 |
2 files changed, 145 insertions, 151 deletions
diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx index 26cb5b9bd..a7d3e2142 100644 --- a/src/view/shell/mobile/Menu.tsx +++ b/src/view/shell/mobile/Menu.tsx @@ -23,163 +23,157 @@ import {Text} from '../../com/util/text/Text' import {ToggleButton} from '../../com/util/forms/ToggleButton' import {usePalette} from '../../lib/hooks/usePalette' -export const Menu = observer( - ({visible, onClose}: {visible: boolean; onClose: () => void}) => { - const pal = usePalette('default') - const store = useStores() +export const Menu = observer(({onClose}: {onClose: () => void}) => { + const pal = usePalette('default') + const store = useStores() - // events - // = + // events + // = - const onNavigate = (url: string) => { - onClose() - if (url === '/notifications') { - store.nav.switchTo(1, true) - } else { - store.nav.switchTo(0, true) - if (url !== '/') { - store.nav.navigate(url) - } + const onNavigate = (url: string) => { + onClose() + if (url === '/notifications') { + store.nav.switchTo(1, true) + } else { + store.nav.switchTo(0, true) + if (url !== '/') { + store.nav.navigate(url) } } + } - // rendering - // = + // rendering + // = - const MenuItem = ({ - icon, - label, - count, - url, - bold, - onPress, - }: { - icon: JSX.Element - label: string - count?: number - url?: string - bold?: boolean - onPress?: () => void - }) => ( - <TouchableOpacity - testID={`menuItemButton-${label}`} - style={styles.menuItem} - onPress={onPress ? onPress : () => onNavigate(url || '/')}> - <View style={[styles.menuItemIconWrapper]}> - {icon} - {count ? ( - <View style={styles.menuItemCount}> - <Text style={styles.menuItemCountLabel}>{count}</Text> - </View> - ) : undefined} - </View> - <Text - type="title" - style={[ - pal.text, - bold ? styles.menuItemLabelBold : styles.menuItemLabel, - ]} - numberOfLines={1}> - {label} - </Text> - </TouchableOpacity> - ) - - return ( - <ScrollView testID="menuView" style={[styles.view, pal.view]}> - <TouchableOpacity - testID="profileCardButton" - onPress={() => onNavigate(`/profile/${store.me.handle}`)} - style={styles.profileCard}> - <UserAvatar - size={60} - displayName={store.me.displayName} - handle={store.me.handle} - avatar={store.me.avatar} - /> - <View style={s.flex1}> - <Text - type="title-lg" - style={[pal.text, styles.profileCardDisplayName]} - numberOfLines={1}> - {store.me.displayName || store.me.handle} - </Text> - <Text - style={[pal.textLight, styles.profileCardHandle]} - numberOfLines={1}> - @{store.me.handle} - </Text> + const MenuItem = ({ + icon, + label, + count, + url, + bold, + onPress, + }: { + icon: JSX.Element + label: string + count?: number + url?: string + bold?: boolean + onPress?: () => void + }) => ( + <TouchableOpacity + testID={`menuItemButton-${label}`} + style={styles.menuItem} + onPress={onPress ? onPress : () => onNavigate(url || '/')}> + <View style={[styles.menuItemIconWrapper]}> + {icon} + {count ? ( + <View style={styles.menuItemCount}> + <Text style={styles.menuItemCountLabel}>{count}</Text> </View> - </TouchableOpacity> - <TouchableOpacity - testID="searchBtn" - style={[styles.searchBtn, pal.btn]} - onPress={() => onNavigate('/search')}> - <MagnifyingGlassIcon - style={pal.text as StyleProp<ViewStyle>} - size={25} - /> - <Text type="title" style={[pal.text, styles.searchBtnLabel]}> - Search + ) : undefined} + </View> + <Text + type="title" + style={[ + pal.text, + bold ? styles.menuItemLabelBold : styles.menuItemLabel, + ]} + numberOfLines={1}> + {label} + </Text> + </TouchableOpacity> + ) + + return ( + <ScrollView testID="menuView" style={[styles.view, pal.view]}> + <TouchableOpacity + testID="profileCardButton" + onPress={() => onNavigate(`/profile/${store.me.handle}`)} + style={styles.profileCard}> + <UserAvatar + size={60} + displayName={store.me.displayName} + handle={store.me.handle} + avatar={store.me.avatar} + /> + <View style={s.flex1}> + <Text + type="title-lg" + style={[pal.text, styles.profileCardDisplayName]} + numberOfLines={1}> + {store.me.displayName || store.me.handle} </Text> - </TouchableOpacity> - <View style={[styles.section, pal.border, {paddingTop: 5}]}> - <MenuItem - icon={ - <HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" /> - } - label="Home" - url="/" - /> - <MenuItem - icon={ - <BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" /> - } - label="Notifications" - url="/notifications" - count={store.me.notificationCount} - /> - <MenuItem - icon={ - <UserIcon - style={pal.text as StyleProp<ViewStyle>} - size="30" - strokeWidth={2} - /> - } - label="Profile" - url={`/profile/${store.me.handle}`} - /> - <MenuItem - icon={ - <CogIcon - style={pal.text as StyleProp<ViewStyle>} - size="30" - strokeWidth={2} - /> - } - label="Settings" - url="/settings" - /> - </View> - <View style={[styles.section, pal.border]}> - <ToggleButton - label="Dark mode" - isSelected={store.shell.darkMode} - onPress={() => store.shell.setDarkMode(!store.shell.darkMode)} - /> - </View> - <View style={styles.footer}> - <Text style={[pal.textLight]}> - Build version {VersionNumber.appVersion} ( - {VersionNumber.buildVersion}) + <Text + style={[pal.textLight, styles.profileCardHandle]} + numberOfLines={1}> + @{store.me.handle} </Text> </View> - <View style={s.footerSpacer} /> - </ScrollView> - ) - }, -) + </TouchableOpacity> + <TouchableOpacity + testID="searchBtn" + style={[styles.searchBtn, pal.btn]} + onPress={() => onNavigate('/search')}> + <MagnifyingGlassIcon + style={pal.text as StyleProp<ViewStyle>} + size={25} + /> + <Text type="title" style={[pal.text, styles.searchBtnLabel]}> + Search + </Text> + </TouchableOpacity> + <View style={[styles.section, pal.border, s.pt5]}> + <MenuItem + icon={<HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />} + label="Home" + url="/" + /> + <MenuItem + icon={<BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" />} + label="Notifications" + url="/notifications" + count={store.me.notificationCount} + /> + <MenuItem + icon={ + <UserIcon + style={pal.text as StyleProp<ViewStyle>} + size="30" + strokeWidth={2} + /> + } + label="Profile" + url={`/profile/${store.me.handle}`} + /> + <MenuItem + icon={ + <CogIcon + style={pal.text as StyleProp<ViewStyle>} + size="30" + strokeWidth={2} + /> + } + label="Settings" + url="/settings" + /> + </View> + <View style={[styles.section, pal.border]}> + <ToggleButton + label="Dark mode" + isSelected={store.shell.darkMode} + onPress={() => store.shell.setDarkMode(!store.shell.darkMode)} + /> + </View> + <View style={styles.footer}> + <Text style={[pal.textLight]}> + Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion} + ) + </Text> + </View> + <View style={s.footerSpacer} /> + </ScrollView> + ) +}) const styles = StyleSheet.create({ view: { diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index fb14211eb..62ab7a2ad 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -32,7 +32,7 @@ import {Text} from '../../com/util/text/Text' import {ErrorBoundary} from '../../com/util/ErrorBoundary' import {TabsSelector} from './TabsSelector' import {Composer} from './Composer' -import {colors} from '../../lib/styles' +import {s, colors} from '../../lib/styles' import {clamp} from '../../../lib/numbers' import { GridIcon, @@ -385,7 +385,7 @@ export const MobileShell: React.FC = observer(() => { /> <Animated.View style={[ - {height: '100%'}, + s.h100pct, screenBg, current ? [ @@ -486,7 +486,7 @@ export const MobileShell: React.FC = observer(() => { */ type ScreenRenderDesc = MatchResult & { key: string - navIdx: [number, number] + navIdx: string current: boolean previous: boolean isNewTab: boolean @@ -514,7 +514,7 @@ function constructScreenRenderDesc(nav: NavigationModel): { hasNewTab = hasNewTab || tab.isNewTab return Object.assign(matchRes, { key: `t${tab.id}-s${screen.index}`, - navIdx: [tab.id, screen.id], + navIdx: `${tab.id}-${screen.id}`, current: isCurrent, previous: isPrevious, isNewTab: tab.isNewTab, |