diff options
| -rw-r--r-- | src/view/lib/styles.ts | 3 | ||||
| -rw-r--r-- | src/view/screens/Home.tsx | 3 | ||||
| -rw-r--r-- | src/view/shell/mobile/accounts-menu.tsx | 89 | ||||
| -rw-r--r-- | src/view/shell/mobile/index.tsx | 6 | ||||
| -rw-r--r-- | src/view/shell/mobile/location-menu.tsx | 41 |
5 files changed, 116 insertions, 26 deletions
diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts index 5d624b83e..82fe41546 100644 --- a/src/view/lib/styles.ts +++ b/src/view/lib/styles.ts @@ -44,6 +44,9 @@ export const colors = { export const gradients = { 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({ diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 9d0356fbb..299e9cdea 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -5,6 +5,7 @@ import {FAB} from '../com/util/FloatingActionButton' import {useStores} from '../../state' import {FeedViewModel} from '../../state/models/feed-view' import {ScreenParams} from '../routes' +import {s} from '../lib/styles' export function Home({visible}: ScreenParams) { const [hasSetup, setHasSetup] = useState<boolean>(false) @@ -32,7 +33,7 @@ export function Home({visible}: ScreenParams) { } return ( - <View> + <View style={s.flex1}> {feedView && <Feed feed={feedView} />} <FAB icon="pen-nib" onPress={onComposePress} /> </View> diff --git a/src/view/shell/mobile/accounts-menu.tsx b/src/view/shell/mobile/accounts-menu.tsx new file mode 100644 index 000000000..e3b61ce42 --- /dev/null +++ b/src/view/shell/mobile/accounts-menu.tsx @@ -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, + }, +}) diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 68387883b..3d35efa1a 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -18,6 +18,7 @@ import {match, MatchResult} from '../../routes' import {TabsSelectorModal} from './tabs-selector' import {LocationMenu} from './location-menu' import {createBackMenu, createForwardMenu} from './history-menu' +import {createAccountsMenu} from './accounts-menu' import {colors} from '../../lib/styles' import {AVIS} from '../../lib/assets' @@ -96,6 +97,7 @@ export const MobileShell: React.FC = observer(() => { const [isLocationMenuActive, setLocationMenuActive] = useState(false) const screenRenderDesc = constructScreenRenderDesc(stores.nav) + const onPressAvi = () => createAccountsMenu() const onPressLocation = () => setLocationMenuActive(true) const onNavigateLocationMenu = (url: string) => { setLocationMenuActive(false) @@ -119,7 +121,9 @@ export const MobileShell: React.FC = observer(() => { return ( <View style={styles.outerContainer}> <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 icon={screenRenderDesc.icon} title={stores.nav.tab.current.title} diff --git a/src/view/shell/mobile/location-menu.tsx b/src/view/shell/mobile/location-menu.tsx index 77d09a226..5e3e7eb77 100644 --- a/src/view/shell/mobile/location-menu.tsx +++ b/src/view/shell/mobile/location-menu.tsx @@ -1,16 +1,9 @@ import React, {useState, useRef} from 'react' -import { - SafeAreaView, - StyleSheet, - Text, - TextInput, - TouchableOpacity, - TouchableWithoutFeedback, - View, -} from 'react-native' +import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {s, colors} from '../../lib/styles' +import {s, gradients, colors} from '../../lib/styles' export function LocationMenu({ url, @@ -37,19 +30,23 @@ export function LocationMenu({ icon, label, url, - color, + gradient, }: { icon: IconProp label: string url: string - color: string + gradient: keyof typeof gradients }) => ( <TouchableOpacity style={styles.fatMenuItem} 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} /> - </View> + </LinearGradient> <Text style={styles.fatMenuItemLabel}>{label}</Text> </TouchableOpacity> ) @@ -84,25 +81,20 @@ export function LocationMenu({ </View> <View style={styles.menuItemsContainer}> <View style={styles.fatMenuItems}> - <FatMenuItem icon="house" label="Feed" url="/" color={colors.red3} /> + <FatMenuItem icon="house" label="Feed" url="/" gradient="primary" /> <FatMenuItem icon="bell" label="Notifications" url="/notifications" - color={colors.pink3} + gradient="purple" /> <FatMenuItem icon={['far', 'user']} label="My Profile" url="/" - color={colors.purple3} - /> - <FatMenuItem - icon="gear" - label="Settings" - url="/" - color={colors.blue3} + gradient="blue" /> + <FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" /> </View> <View style={styles.thinMenuItems}> <ThinMenuItem label="Send us feedback" url="/" /> @@ -142,13 +134,14 @@ const styles = StyleSheet.create({ }, menuItemsContainer: { paddingVertical: 30, + paddingHorizontal: 8, }, fatMenuItems: { flexDirection: 'row', marginBottom: 20, }, fatMenuItem: { - width: 90, + width: 86, alignItems: 'center', marginRight: 6, }, |