Rename location-menu to location-navigator and add an actual location-menu

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,

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}
         />
-        <TouchableOpacity style={styles.topBarBtn}>
+        <TouchableOpacity style={styles.topBarBtn} onPress={onPressEllipsis}>
           <FontAwesomeIcon icon="ellipsis" />
         </TouchableOpacity>
       </View>
@@ -171,10 +174,10 @@ export const MobileShell: React.FC = observer(() => {
         onCloseTab={onCloseTab}
       />
       {isLocationMenuActive && (
-        <LocationMenu
+        <LocationNavigator
           url={stores.nav.tab.current.url}
-          onNavigate={onNavigateLocationMenu}
+          onNavigate={onNavigateLocation}
-          onDismiss={onDismissLocationMenu}
+          onDismiss={onDismissLocationNavigator}
         />
       )}
     </View>

src/view/shell/mobile/location-menu.tsx

@@ -1,176 +1,81 @@
-import React, {useState, useRef} from 'react'
+import React from 'react'
-import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
+import {
-import LinearGradient from 'react-native-linear-gradient'
+  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, colors} from '../../lib/styles'
-import {s, gradients, colors} from '../../lib/styles'
 
-export function LocationMenu({
+export function createLocationMenu(): RootSiblings {
-  url,
+  const onPressItem = (_index: number) => {
-  onNavigate,
+    sibling.destroy()
-  onDismiss,
-}: {
-  url: string
-  onNavigate: (url: string) => void
-  onDismiss: () => void
-}) {
-  const [searchText, onChangeSearchText] = useState(url !== '/' ? url : '')
-  const inputRef = useRef<TextInput | null>(null)
-
-  const onFocusSearchText = () => {
-    if (inputRef.current && searchText.length) {
-      // select the text on focus
-      inputRef.current.setNativeProps({
-        selection: {start: 0, end: searchText.length},
-      })
-    }
   }
-
+  const onOuterPress = () => sibling.destroy()
-  const FatMenuItem = ({
+  const sibling = new RootSiblings(
-    icon,
+    (
-    label,
+      <>
-    url,
+        <TouchableWithoutFeedback onPress={onOuterPress}>
-    gradient,
+          <View style={styles.bg} />
-  }: {
+        </TouchableWithoutFeedback>
-    icon: IconProp
+        <View style={[styles.menu]}>
-    label: string
+          <TouchableOpacity
-    url: string
+            style={[styles.menuItem]}
-    gradient: keyof typeof gradients
+            onPress={() => onPressItem(0)}>
-  }) => (
+            <FontAwesomeIcon style={styles.icon} icon="share" />
-    <TouchableOpacity
+            <Text style={styles.label}>Share</Text>
-      style={styles.fatMenuItem}
+          </TouchableOpacity>
-      onPress={() => onNavigate(url)}>
+          <TouchableOpacity
-      <LinearGradient
+            style={[styles.menuItem, styles.menuItemBorder]}
-        style={[styles.fatMenuItemIconWrapper]}
+            onPress={() => onPressItem(0)}>
-        colors={[gradients[gradient].start, gradients[gradient].end]}
+            <FontAwesomeIcon style={styles.icon} icon="link" />
-        start={{x: 0, y: 0}}
+            <Text style={styles.label}>Copy Link</Text>
-        end={{x: 1, y: 1}}>
+          </TouchableOpacity>
-        <FontAwesomeIcon icon={icon} style={styles.fatMenuItemIcon} size={24} />
-      </LinearGradient>
-      <Text style={styles.fatMenuItemLabel}>{label}</Text>
-    </TouchableOpacity>
-  )
-
-  const ThinMenuItem = ({label, url}: {label: string; url: string}) => (
-    <TouchableOpacity
-      style={styles.thinMenuItem}
-      onPress={() => onNavigate(url)}>
-      <Text style={styles.thinMenuItemLabel}>{label}</Text>
-    </TouchableOpacity>
-  )
-
-  return (
-    <View style={styles.menu}>
-      <View style={styles.searchContainer}>
-        <FontAwesomeIcon
-          icon="magnifying-glass"
-          size={18}
-          style={styles.searchIcon}
-        />
-        <TextInput
-          autoFocus
-          ref={inputRef}
-          value={searchText}
-          style={styles.searchInput}
-          onChangeText={onChangeSearchText}
-          onFocus={onFocusSearchText}
-        />
-        <TouchableOpacity onPress={() => onDismiss()}>
-          <Text style={[s.blue3, s.f15]}>Cancel</Text>
-        </TouchableOpacity>
-      </View>
-      <View style={styles.menuItemsContainer}>
-        <View style={styles.fatMenuItems}>
-          <FatMenuItem icon="house" label="Feed" url="/" gradient="primary" />
-          <FatMenuItem
-            icon="bell"
-            label="Notifications"
-            url="/notifications"
-            gradient="purple"
-          />
-          <FatMenuItem
-            icon={['far', 'user']}
-            label="My Profile"
-            url="/"
-            gradient="blue"
-          />
-          <FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" />
         </View>
-        <View style={styles.thinMenuItems}>
+      </>
-          <ThinMenuItem label="Send us feedback" url="/" />
+    ),
-          <ThinMenuItem label="Get help..." url="/" />
-          <ThinMenuItem label="Settings" url="/" />
-        </View>
-      </View>
-    </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: 0,
+    right: 4,
-    top: 0,
+    top: 70,
-    width: '100%',
-    height: '100%',
     backgroundColor: '#fff',
+    borderRadius: 14,
     opacity: 1,
+    paddingVertical: 2,
   },
-  searchContainer: {
+  menuItem: {
     flexDirection: 'row',
-    backgroundColor: colors.gray1,
+    alignItems: 'center',
-    borderBottomWidth: 1,
+    paddingVertical: 8,
-    borderColor: colors.gray2,
+    paddingLeft: 10,
-    paddingHorizontal: 16,
+    paddingRight: 30,
-    paddingTop: 48,
-    paddingBottom: 8,
   },
-  searchIcon: {
+  menuItemBorder: {
-    color: colors.gray5,
+    borderTopWidth: 1,
+    borderTopColor: colors.gray1,
+  },
+  icon: {
+    marginLeft: 6,
     marginRight: 8,
   },
-  searchInput: {
+  label: {
-    flex: 1,
+    fontSize: 15,
-  },
-  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,
   },
 })

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<TextInput | null>(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
+  }) => (
+    <TouchableOpacity
+      style={styles.fatMenuItem}
+      onPress={() => onNavigate(url)}>
+      <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} />
+      </LinearGradient>
+      <Text style={styles.fatMenuItemLabel}>{label}</Text>
+    </TouchableOpacity>
+  )
+
+  const ThinMenuItem = ({label, url}: {label: string; url: string}) => (
+    <TouchableOpacity
+      style={styles.thinMenuItem}
+      onPress={() => onNavigate(url)}>
+      <Text style={styles.thinMenuItemLabel}>{label}</Text>
+    </TouchableOpacity>
+  )
+
+  return (
+    <View style={styles.menu}>
+      <View style={styles.searchContainer}>
+        <FontAwesomeIcon
+          icon="magnifying-glass"
+          size={18}
+          style={styles.searchIcon}
+        />
+        <TextInput
+          autoFocus
+          ref={inputRef}
+          value={searchText}
+          style={styles.searchInput}
+          onChangeText={onChangeSearchText}
+          onFocus={onFocusSearchText}
+        />
+        <TouchableOpacity onPress={() => onDismiss()}>
+          <Text style={[s.blue3, s.f15]}>Cancel</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.menuItemsContainer}>
+        <View style={styles.fatMenuItems}>
+          <FatMenuItem icon="house" label="Feed" url="/" gradient="primary" />
+          <FatMenuItem
+            icon="bell"
+            label="Notifications"
+            url="/notifications"
+            gradient="purple"
+          />
+          <FatMenuItem
+            icon={['far', 'user']}
+            label="My Profile"
+            url="/"
+            gradient="blue"
+          />
+          <FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" />
+        </View>
+        <View style={styles.thinMenuItems}>
+          <ThinMenuItem label="Send us feedback" url="/" />
+          <ThinMenuItem label="Get help..." url="/" />
+          <ThinMenuItem label="Settings" url="/" />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+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,
+  },
+})