Add accounts menu to shell

zio/stable
Paul Frazee 2022-09-02 09:30:21 -05:00
parent 156a6a100f
commit 62a4e9aed1
5 changed files with 116 additions and 26 deletions

View File

@ -44,6 +44,9 @@ export const colors = {
export const gradients = { export const gradients = {
primary: {start: '#db00ff', end: '#ff007a'}, primary: {start: '#db00ff', end: '#ff007a'},
purple: {start: colors.pink3, end: colors.purple3},
blue: {start: colors.purple3, end: colors.blue3},
green: {start: colors.blue3, end: colors.green3},
} }
export const s = StyleSheet.create({ export const s = StyleSheet.create({

View File

@ -5,6 +5,7 @@ import {FAB} from '../com/util/FloatingActionButton'
import {useStores} from '../../state' import {useStores} from '../../state'
import {FeedViewModel} from '../../state/models/feed-view' import {FeedViewModel} from '../../state/models/feed-view'
import {ScreenParams} from '../routes' import {ScreenParams} from '../routes'
import {s} from '../lib/styles'
export function Home({visible}: ScreenParams) { export function Home({visible}: ScreenParams) {
const [hasSetup, setHasSetup] = useState<boolean>(false) const [hasSetup, setHasSetup] = useState<boolean>(false)
@ -32,7 +33,7 @@ export function Home({visible}: ScreenParams) {
} }
return ( return (
<View> <View style={s.flex1}>
{feedView && <Feed feed={feedView} />} {feedView && <Feed feed={feedView} />}
<FAB icon="pen-nib" onPress={onComposePress} /> <FAB icon="pen-nib" onPress={onComposePress} />
</View> </View>

View File

@ -0,0 +1,89 @@
import React from 'react'
import {
Image,
StyleSheet,
Text,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native'
import RootSiblings from 'react-native-root-siblings'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {AVIS} from '../../lib/assets'
import {s, colors} from '../../lib/styles'
export function createAccountsMenu(): RootSiblings {
const onPressItem = (_index: number) => {
sibling.destroy()
}
const onOuterPress = () => sibling.destroy()
const sibling = new RootSiblings(
(
<>
<TouchableWithoutFeedback onPress={onOuterPress}>
<View style={styles.bg} />
</TouchableWithoutFeedback>
<View style={[styles.menu]}>
<TouchableOpacity
style={[styles.menuItem]}
onPress={() => onPressItem(0)}>
<Image style={styles.avi} source={AVIS['alice.com']} />
<Text style={[styles.label, s.bold]}>Alice</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.menuItem, styles.menuItemBorder]}
onPress={() => onPressItem(0)}>
<FontAwesomeIcon style={styles.icon} icon="plus" />
<Text style={styles.label}>New Account</Text>
</TouchableOpacity>
</View>
</>
),
)
return sibling
}
const styles = StyleSheet.create({
bg: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#000',
opacity: 0.1,
},
menu: {
position: 'absolute',
left: 4,
top: 70,
backgroundColor: '#fff',
borderRadius: 14,
opacity: 1,
paddingVertical: 2,
},
menuItem: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 8,
paddingLeft: 10,
paddingRight: 30,
},
menuItemBorder: {
borderTopWidth: 1,
borderTopColor: colors.gray1,
},
avi: {
width: 28,
height: 28,
marginRight: 8,
borderRadius: 14,
},
icon: {
marginLeft: 6,
marginRight: 6,
},
label: {
fontSize: 16,
},
})

View File

@ -18,6 +18,7 @@ import {match, MatchResult} from '../../routes'
import {TabsSelectorModal} from './tabs-selector' import {TabsSelectorModal} from './tabs-selector'
import {LocationMenu} from './location-menu' import {LocationMenu} from './location-menu'
import {createBackMenu, createForwardMenu} from './history-menu' import {createBackMenu, createForwardMenu} from './history-menu'
import {createAccountsMenu} from './accounts-menu'
import {colors} from '../../lib/styles' import {colors} from '../../lib/styles'
import {AVIS} from '../../lib/assets' import {AVIS} from '../../lib/assets'
@ -96,6 +97,7 @@ export const MobileShell: React.FC = observer(() => {
const [isLocationMenuActive, setLocationMenuActive] = useState(false) const [isLocationMenuActive, setLocationMenuActive] = useState(false)
const screenRenderDesc = constructScreenRenderDesc(stores.nav) const screenRenderDesc = constructScreenRenderDesc(stores.nav)
const onPressAvi = () => createAccountsMenu()
const onPressLocation = () => setLocationMenuActive(true) const onPressLocation = () => setLocationMenuActive(true)
const onNavigateLocationMenu = (url: string) => { const onNavigateLocationMenu = (url: string) => {
setLocationMenuActive(false) setLocationMenuActive(false)
@ -119,7 +121,9 @@ export const MobileShell: React.FC = observer(() => {
return ( return (
<View style={styles.outerContainer}> <View style={styles.outerContainer}>
<View style={styles.topBar}> <View style={styles.topBar}>
<Image style={styles.avi} source={AVIS['alice.com']} /> <TouchableOpacity onPress={onPressAvi}>
<Image style={styles.avi} source={AVIS['alice.com']} />
</TouchableOpacity>
<Location <Location
icon={screenRenderDesc.icon} icon={screenRenderDesc.icon}
title={stores.nav.tab.current.title} title={stores.nav.tab.current.title}

View File

@ -1,16 +1,9 @@
import React, {useState, useRef} from 'react' import React, {useState, useRef} from 'react'
import { import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
SafeAreaView, import LinearGradient from 'react-native-linear-gradient'
StyleSheet,
Text,
TextInput,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {IconProp} from '@fortawesome/fontawesome-svg-core' import {IconProp} from '@fortawesome/fontawesome-svg-core'
import {s, colors} from '../../lib/styles' import {s, gradients, colors} from '../../lib/styles'
export function LocationMenu({ export function LocationMenu({
url, url,
@ -37,19 +30,23 @@ export function LocationMenu({
icon, icon,
label, label,
url, url,
color, gradient,
}: { }: {
icon: IconProp icon: IconProp
label: string label: string
url: string url: string
color: string gradient: keyof typeof gradients
}) => ( }) => (
<TouchableOpacity <TouchableOpacity
style={styles.fatMenuItem} style={styles.fatMenuItem}
onPress={() => onNavigate(url)}> onPress={() => onNavigate(url)}>
<View style={[styles.fatMenuItemIconWrapper, {backgroundColor: color}]}> <LinearGradient
style={[styles.fatMenuItemIconWrapper]}
colors={[gradients[gradient].start, gradients[gradient].end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}>
<FontAwesomeIcon icon={icon} style={styles.fatMenuItemIcon} size={24} /> <FontAwesomeIcon icon={icon} style={styles.fatMenuItemIcon} size={24} />
</View> </LinearGradient>
<Text style={styles.fatMenuItemLabel}>{label}</Text> <Text style={styles.fatMenuItemLabel}>{label}</Text>
</TouchableOpacity> </TouchableOpacity>
) )
@ -84,25 +81,20 @@ export function LocationMenu({
</View> </View>
<View style={styles.menuItemsContainer}> <View style={styles.menuItemsContainer}>
<View style={styles.fatMenuItems}> <View style={styles.fatMenuItems}>
<FatMenuItem icon="house" label="Feed" url="/" color={colors.red3} /> <FatMenuItem icon="house" label="Feed" url="/" gradient="primary" />
<FatMenuItem <FatMenuItem
icon="bell" icon="bell"
label="Notifications" label="Notifications"
url="/notifications" url="/notifications"
color={colors.pink3} gradient="purple"
/> />
<FatMenuItem <FatMenuItem
icon={['far', 'user']} icon={['far', 'user']}
label="My Profile" label="My Profile"
url="/" url="/"
color={colors.purple3} gradient="blue"
/>
<FatMenuItem
icon="gear"
label="Settings"
url="/"
color={colors.blue3}
/> />
<FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" />
</View> </View>
<View style={styles.thinMenuItems}> <View style={styles.thinMenuItems}>
<ThinMenuItem label="Send us feedback" url="/" /> <ThinMenuItem label="Send us feedback" url="/" />
@ -142,13 +134,14 @@ const styles = StyleSheet.create({
}, },
menuItemsContainer: { menuItemsContainer: {
paddingVertical: 30, paddingVertical: 30,
paddingHorizontal: 8,
}, },
fatMenuItems: { fatMenuItems: {
flexDirection: 'row', flexDirection: 'row',
marginBottom: 20, marginBottom: 20,
}, },
fatMenuItem: { fatMenuItem: {
width: 90, width: 86,
alignItems: 'center', alignItems: 'center',
marginRight: 6, marginRight: 6,
}, },