From 8de3b066ebb7cd420051670b446d520adca6cb23 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Fri, 2 Sep 2022 09:55:52 -0500 Subject: [PATCH] Rename location-menu to location-navigator and add an actual location-menu --- src/view/index.ts | 8 + src/view/shell/mobile/index.tsx | 17 +- src/view/shell/mobile/location-menu.tsx | 219 ++++++------------- src/view/shell/mobile/location-navigator.tsx | 176 +++++++++++++++ 4 files changed, 256 insertions(+), 164 deletions(-) create mode 100644 src/view/shell/mobile/location-navigator.tsx diff --git a/src/view/index.ts b/src/view/index.ts index 9fcebcc3b7..3dcadf6768 100644 --- a/src/view/index.ts +++ b/src/view/index.ts @@ -3,6 +3,8 @@ import {library} from '@fortawesome/fontawesome-svg-core' import {faAngleLeft} from '@fortawesome/free-solid-svg-icons/faAngleLeft' import {faAngleRight} from '@fortawesome/free-solid-svg-icons/faAngleRight' import {faArrowLeft} from '@fortawesome/free-solid-svg-icons/faArrowLeft' +import {faArrowUpFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowUpFromBracket' +import {faArrowUpRightFromSquare} from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare' import {faBars} from '@fortawesome/free-solid-svg-icons/faBars' import {faBell} from '@fortawesome/free-solid-svg-icons/faBell' import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell' @@ -16,10 +18,12 @@ import {faGear} from '@fortawesome/free-solid-svg-icons/faGear' import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart' import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart' import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse' +import {faLink} from '@fortawesome/free-solid-svg-icons/faLink' import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass' import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage' import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib' import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus' +import {faShare} from '@fortawesome/free-solid-svg-icons/faShare' import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare' import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet' import {faUser} from '@fortawesome/free-regular-svg-icons/faUser' @@ -31,6 +35,8 @@ export function setup() { faAngleLeft, faAngleRight, faArrowLeft, + faArrowUpFromBracket, + faArrowUpRightFromSquare, faBars, faBell, farBell, @@ -44,11 +50,13 @@ export function setup() { faHeart, fasHeart, faHouse, + faLink, faMagnifyingGlass, faMessage, faPenNib, faPlus, faRetweet, + faShare, faShareFromSquare, faUser, faUsers, diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 3d35efa1ad..8ce2e63d76 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -16,9 +16,10 @@ import {useStores} from '../../../state' import {NavigationModel} from '../../../state/models/navigation' import {match, MatchResult} from '../../routes' import {TabsSelectorModal} from './tabs-selector' -import {LocationMenu} from './location-menu' +import {LocationNavigator} from './location-navigator' import {createBackMenu, createForwardMenu} from './history-menu' import {createAccountsMenu} from './accounts-menu' +import {createLocationMenu} from './location-menu' import {colors} from '../../lib/styles' import {AVIS} from '../../lib/assets' @@ -99,11 +100,13 @@ export const MobileShell: React.FC = observer(() => { const onPressAvi = () => createAccountsMenu() const onPressLocation = () => setLocationMenuActive(true) - const onNavigateLocationMenu = (url: string) => { + const onPressEllipsis = () => createLocationMenu() + + const onNavigateLocation = (url: string) => { setLocationMenuActive(false) stores.nav.navigate(url) } - const onDismissLocationMenu = () => setLocationMenuActive(false) + const onDismissLocationNavigator = () => setLocationMenuActive(false) const onPressBack = () => stores.nav.tab.goBack() const onPressForward = () => stores.nav.tab.goForward() @@ -129,7 +132,7 @@ export const MobileShell: React.FC = observer(() => { title={stores.nav.tab.current.title} onPress={onPressLocation} /> - + @@ -171,10 +174,10 @@ export const MobileShell: React.FC = observer(() => { onCloseTab={onCloseTab} /> {isLocationMenuActive && ( - )} diff --git a/src/view/shell/mobile/location-menu.tsx b/src/view/shell/mobile/location-menu.tsx index 5e3e7eb772..b5f4d80364 100644 --- a/src/view/shell/mobile/location-menu.tsx +++ b/src/view/shell/mobile/location-menu.tsx @@ -1,176 +1,81 @@ -import React, {useState, useRef} from 'react' -import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native' -import LinearGradient from 'react-native-linear-gradient' +import React from 'react' +import { + StyleSheet, + Text, + TouchableOpacity, + TouchableWithoutFeedback, + View, +} from 'react-native' +import RootSiblings from 'react-native-root-siblings' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {s, gradients, colors} from '../../lib/styles' +import {s, colors} from '../../lib/styles' -export function LocationMenu({ - url, - onNavigate, - onDismiss, -}: { - url: string - onNavigate: (url: string) => void - onDismiss: () => void -}) { - const [searchText, onChangeSearchText] = useState(url !== '/' ? url : '') - const inputRef = useRef(null) - - const onFocusSearchText = () => { - if (inputRef.current && searchText.length) { - // select the text on focus - inputRef.current.setNativeProps({ - selection: {start: 0, end: searchText.length}, - }) - } +export function createLocationMenu(): RootSiblings { + const onPressItem = (_index: number) => { + sibling.destroy() } - - const FatMenuItem = ({ - icon, - label, - url, - gradient, - }: { - icon: IconProp - label: string - url: string - gradient: keyof typeof gradients - }) => ( - onNavigate(url)}> - - - - {label} - - ) - - const ThinMenuItem = ({label, url}: {label: string; url: string}) => ( - onNavigate(url)}> - {label} - - ) - - return ( - - - - - onDismiss()}> - Cancel - - - - - - - - + const onOuterPress = () => sibling.destroy() + const sibling = new RootSiblings( + ( + <> + + + + + onPressItem(0)}> + + Share + + onPressItem(0)}> + + Copy Link + - - - - - - - + + ), ) + 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: 0, - top: 0, - width: '100%', - height: '100%', + right: 4, + top: 70, backgroundColor: '#fff', + borderRadius: 14, opacity: 1, + paddingVertical: 2, }, - searchContainer: { + menuItem: { flexDirection: 'row', - backgroundColor: colors.gray1, - borderBottomWidth: 1, - borderColor: colors.gray2, - paddingHorizontal: 16, - paddingTop: 48, - paddingBottom: 8, + alignItems: 'center', + paddingVertical: 8, + paddingLeft: 10, + paddingRight: 30, }, - searchIcon: { - color: colors.gray5, + menuItemBorder: { + borderTopWidth: 1, + borderTopColor: colors.gray1, + }, + icon: { + marginLeft: 6, marginRight: 8, }, - searchInput: { - flex: 1, - }, - menuItemsContainer: { - paddingVertical: 30, - paddingHorizontal: 8, - }, - fatMenuItems: { - flexDirection: 'row', - marginBottom: 20, - }, - fatMenuItem: { - width: 86, - alignItems: 'center', - marginRight: 6, - }, - fatMenuItemIconWrapper: { - borderRadius: 6, - width: 50, - height: 50, - justifyContent: 'center', - alignItems: 'center', - marginBottom: 5, - shadowColor: '#000', - shadowOpacity: 0.2, - shadowOffset: {width: 0, height: 2}, - shadowRadius: 2, - }, - fatMenuItemIcon: { - color: colors.white, - }, - fatMenuItemLabel: { - fontSize: 12, - }, - thinMenuItems: { - paddingHorizontal: 18, - }, - thinMenuItem: { - paddingVertical: 4, - }, - thinMenuItemLabel: { - color: colors.blue3, - fontSize: 16, + label: { + fontSize: 15, }, }) diff --git a/src/view/shell/mobile/location-navigator.tsx b/src/view/shell/mobile/location-navigator.tsx new file mode 100644 index 0000000000..28ca23101d --- /dev/null +++ b/src/view/shell/mobile/location-navigator.tsx @@ -0,0 +1,176 @@ +import React, {useState, useRef} from 'react' +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, gradients, colors} from '../../lib/styles' + +export function LocationNavigator({ + url, + onNavigate, + onDismiss, +}: { + url: string + onNavigate: (url: string) => void + onDismiss: () => void +}) { + const [searchText, onChangeSearchText] = useState(url !== '/' ? url : '') + const inputRef = useRef(null) + + const onFocusSearchText = () => { + if (inputRef.current && searchText.length) { + // select the text on focus + inputRef.current.setNativeProps({ + selection: {start: 0, end: searchText.length}, + }) + } + } + + const FatMenuItem = ({ + icon, + label, + url, + gradient, + }: { + icon: IconProp + label: string + url: string + gradient: keyof typeof gradients + }) => ( + onNavigate(url)}> + + + + {label} + + ) + + const ThinMenuItem = ({label, url}: {label: string; url: string}) => ( + onNavigate(url)}> + {label} + + ) + + return ( + + + + + onDismiss()}> + Cancel + + + + + + + + + + + + + + + + + ) +} + +const styles = StyleSheet.create({ + menu: { + position: 'absolute', + left: 0, + top: 0, + width: '100%', + height: '100%', + backgroundColor: '#fff', + opacity: 1, + }, + searchContainer: { + flexDirection: 'row', + backgroundColor: colors.gray1, + borderBottomWidth: 1, + borderColor: colors.gray2, + paddingHorizontal: 16, + paddingTop: 48, + paddingBottom: 8, + }, + searchIcon: { + color: colors.gray5, + marginRight: 8, + }, + searchInput: { + flex: 1, + }, + menuItemsContainer: { + paddingVertical: 30, + paddingHorizontal: 8, + }, + fatMenuItems: { + flexDirection: 'row', + marginBottom: 20, + }, + fatMenuItem: { + width: 86, + alignItems: 'center', + marginRight: 6, + }, + fatMenuItemIconWrapper: { + borderRadius: 6, + width: 50, + height: 50, + justifyContent: 'center', + alignItems: 'center', + marginBottom: 5, + shadowColor: '#000', + shadowOpacity: 0.2, + shadowOffset: {width: 0, height: 2}, + shadowRadius: 2, + }, + fatMenuItemIcon: { + color: colors.white, + }, + fatMenuItemLabel: { + fontSize: 12, + }, + thinMenuItems: { + paddingHorizontal: 18, + }, + thinMenuItem: { + paddingVertical: 4, + }, + thinMenuItemLabel: { + color: colors.blue3, + fontSize: 16, + }, +})