From c37a6f5c270901e525b38b899a7e0f31e408fec2 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Fri, 1 Mar 2019 19:25:16 +0100 Subject: [PATCH] move uri omnibar to top (#444) --- app/src/component/AppNavigator.js | 35 +++--- app/src/component/uriBar/view.js | 35 ++++-- app/src/page/discover/view.js | 2 +- app/src/page/downloads/view.js | 2 +- app/src/page/file/view.js | 2 +- app/src/page/rewards/view.js | 20 ++-- app/src/page/search/view.js | 6 +- app/src/page/subscriptions/view.js | 153 ++++++++++++------------ app/src/page/transactionHistory/view.js | 34 +++--- app/src/page/trending/view.js | 2 +- app/src/page/wallet/view.js | 31 +++-- app/src/styles/channelPage.js | 3 +- app/src/styles/discover.js | 4 +- app/src/styles/downloads.js | 3 +- app/src/styles/filePage.js | 10 +- app/src/styles/floatingButton.js | 2 +- app/src/styles/pageHeader.js | 2 +- app/src/styles/reward.js | 3 + app/src/styles/search.js | 2 +- app/src/styles/subscriptions.js | 7 +- app/src/styles/uriBar.js | 15 ++- app/src/styles/wallet.js | 8 +- 22 files changed, 209 insertions(+), 172 deletions(-) diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js index f043a2b..d658360 100644 --- a/app/src/component/AppNavigator.js +++ b/app/src/component/AppNavigator.js @@ -68,9 +68,8 @@ const discoverStack = createStackNavigator({ screen: DiscoverPage, navigationOptions: ({ navigation }) => ({ title: 'Explore', - headerLeft: menuNavigationButton(navigation), - headerTitleStyle: discoverStyle.titleText - }) + header: null + }), }, File: { screen: FilePage, @@ -81,18 +80,19 @@ const discoverStack = createStackNavigator({ Search: { screen: SearchPage, navigationOptions: ({ navigation }) => ({ - headerTitleStyle: discoverStyle.titleText + header: null }) } }, { - headerMode: 'screen' + headerMode: 'screen', + transitionConfig: () => ({ screenInterpolator: () => null }), }); discoverStack.navigationOptions = ({ navigation }) => { let drawerLockMode = 'unlocked'; - if (navigation.state.index > 0) { + /*if (navigation.state.index > 0) { drawerLockMode = 'locked-closed'; - } + }*/ return { drawerLockMode @@ -104,8 +104,7 @@ const trendingStack = createStackNavigator({ screen: TrendingPage, navigationOptions: ({ navigation }) => ({ title: 'Trending', - headerLeft: menuNavigationButton(navigation), - headerTitleStyle: discoverStyle.titleText + header: null }) } }); @@ -115,8 +114,7 @@ const myLbryStack = createStackNavigator({ screen: DownloadsPage, navigationOptions: ({ navigation }) => ({ title: 'Downloads', - headerLeft: menuNavigationButton(navigation), - headerTitleStyle: discoverStyle.titleText + header: null }) } }); @@ -126,8 +124,7 @@ const mySubscriptionsStack = createStackNavigator({ screen: SubscriptionsPage, navigationOptions: ({ navigation }) => ({ title: 'Subscriptions', - headerLeft: menuNavigationButton(navigation), - headerTitleStyle: discoverStyle.titleText + header: null }) } }); @@ -137,8 +134,7 @@ const rewardsStack = createStackNavigator({ screen: RewardsPage, navigationOptions: ({ navigation }) => ({ title: 'Rewards', - headerLeft: menuNavigationButton(navigation), - headerTitleStyle: discoverStyle.titleText + header: null }) } }); @@ -148,20 +144,19 @@ const walletStack = createStackNavigator({ screen: WalletPage, navigationOptions: ({ navigation }) => ({ title: 'Wallet', - headerLeft: menuNavigationButton(navigation), - headerTitleStyle: discoverStyle.titleText + header: null }) }, TransactionHistory: { screen: TransactionHistoryPage, navigationOptions: { title: 'Transaction History', - drawerLockMode: 'locked-closed', - headerTitleStyle: discoverStyle.titleText + header: null } } }, { - headerMode: 'screen' + headerMode: 'screen', + transitionConfig: () => ({ screenInterpolator: () => null }), }); const drawer = createDrawerNavigator({ diff --git a/app/src/component/uriBar/view.js b/app/src/component/uriBar/view.js index 85cec42..2313203 100644 --- a/app/src/component/uriBar/view.js +++ b/app/src/component/uriBar/view.js @@ -2,9 +2,11 @@ import React from 'react'; import { SEARCH_TYPES, isNameValid, isURIValid, normalizeURI } from 'lbry-redux'; import { FlatList, Keyboard, TextInput, View } from 'react-native'; -import { navigateToUri } from '../../utils/helper'; +import { navigateToUri } from 'utils/helper'; import UriBarItem from './internal/uri-bar-item'; -import uriBarStyle from '../../styles/uriBar'; +import NavigationButton from 'component/navigationButton'; +import discoverStyle from 'styles/discover'; +import uriBarStyle from 'styles/uriBar'; class UriBar extends React.PureComponent { static INPUT_TIMEOUT = 500; @@ -93,17 +95,13 @@ class UriBar extends React.PureComponent { return ( - {this.state.focused && ( - - item.value} - renderItem={({item}) => this.handleItemPress(item)} />} /> - )} + navigation.openDrawer() } /> { this.textInput = ref }} style={uriBarStyle.uriText} onLayout={() => { this.setSelection(); }} @@ -143,6 +141,19 @@ class UriBar extends React.PureComponent { } }}/> + {this.state.focused && ( + + item.value} + renderItem={({item}) => ( + this.handleItemPress(item)} + />)} /> + )} ); } diff --git a/app/src/page/discover/view.js b/app/src/page/discover/view.js index 9dfcef2..a2fee5d 100644 --- a/app/src/page/discover/view.js +++ b/app/src/page/discover/view.js @@ -158,6 +158,7 @@ class DiscoverPage extends React.PureComponent { return ( + {!hasContent && fetchingFeaturedUris && ( @@ -186,7 +187,6 @@ class DiscoverPage extends React.PureComponent { />) } - ); } diff --git a/app/src/page/downloads/view.js b/app/src/page/downloads/view.js index 0a0606b..a4c00b4 100644 --- a/app/src/page/downloads/view.js +++ b/app/src/page/downloads/view.js @@ -36,6 +36,7 @@ class DownloadsPage extends React.PureComponent { return ( + {!fetching && !hasDownloads && You have not downloaded anything from LBRY yet. @@ -69,7 +70,6 @@ class DownloadsPage extends React.PureComponent { /> } - ); } diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js index 3566c31..72b473d 100644 --- a/app/src/page/file/view.js +++ b/app/src/page/file/view.js @@ -480,6 +480,7 @@ class FilePage extends React.PureComponent { innerContent = ( + {!this.state.fullscreenMode && } {this.state.showWebView && isWebViewable && } @@ -624,7 +625,6 @@ class FilePage extends React.PureComponent { )} {!this.state.fullscreenMode && } - {!this.state.fullscreenMode && } ); } diff --git a/app/src/page/rewards/view.js b/app/src/page/rewards/view.js index 82e7b82..e18fd18 100644 --- a/app/src/page/rewards/view.js +++ b/app/src/page/rewards/view.js @@ -7,14 +7,15 @@ import { Text, View } from 'react-native'; -import Colors from '../../styles/colors'; -import Link from '../../component/link'; -import CustomRewardCard from '../../component/customRewardCard'; -import PhoneNumberRewardSubcard from '../../component/phoneNumberRewardSubcard'; -import EmailRewardSubcard from '../../component/emailRewardSubcard'; -import PageHeader from '../../component/pageHeader'; -import RewardCard from '../../component/rewardCard'; -import rewardStyle from '../../styles/reward'; +import Colors from 'styles/colors'; +import Link from 'component/link'; +import CustomRewardCard from 'component/customRewardCard'; +import PhoneNumberRewardSubcard from 'component/phoneNumberRewardSubcard'; +import EmailRewardSubcard from 'component/emailRewardSubcard'; +import PageHeader from 'component/pageHeader'; +import RewardCard from 'component/rewardCard'; +import UriBar from 'component/uriBar'; +import rewardStyle from 'styles/reward'; class RewardsPage extends React.PureComponent { state = { @@ -134,10 +135,11 @@ class RewardsPage extends React.PureComponent { } render() { - const { user } = this.props; + const { user, navigation } = this.props; return ( + + search(keywords)} /> {!isSearching && (!uris || uris.length === 0) && No results to display.} @@ -52,9 +55,6 @@ class SearchPage extends React.PureComponent { {isSearching && } - search(keywords)} /> ); } diff --git a/app/src/page/subscriptions/view.js b/app/src/page/subscriptions/view.js index 14ada1d..8f2b82f 100644 --- a/app/src/page/subscriptions/view.js +++ b/app/src/page/subscriptions/view.js @@ -67,90 +67,91 @@ class SubscriptionsPage extends React.PureComponent { return ( + - {hasSubscriptions && !loading && - - this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_ALL)} - /> - this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST)} - /> - } - - {(hasSubscriptions && !loading) && - - {(viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) && - ( - - ) - } - data={allSubscriptions.sort((a, b) => { - return b.height - a.height; - })} - keyExtractor={(item, index) => uriFromFileInfo(item)} />} - - {(viewMode === Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST) && - - {unreadSubscriptions.length ? - ( - {unreadSubscriptions.map(({ channel, uris }) => { - const { claimName } = parseURI(channel); - return uris.map(uri => ( - )); - })} - ) : - ( - All caught up! You might like the channels below. - - ) - } + {hasSubscriptions && !loading && + + this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_ALL)} + /> + this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST)} + /> } - } + {(hasSubscriptions && !loading) && + + + {(viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) && + ( + + ) + } + data={allSubscriptions.sort((a, b) => { + return b.height - a.height; + })} + keyExtractor={(item, index) => uriFromFileInfo(item)} />} - {(hasSubscriptions && loading) && - - - - } + {(viewMode === Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST) && + + {unreadSubscriptions.length ? + ( + {unreadSubscriptions.map(({ channel, uris }) => { + const { claimName } = parseURI(channel); + return uris.map(uri => ( + )); + })} + ) : + ( + All caught up! You might like the channels below. + + ) + } + } - {(!hasSubscriptions && !loading) && - - - You are not subscribed to any channels at the moment. Here are some channels that we think you might enjoy. - - {loadingSuggested && } - {!loadingSuggested && } } + {(hasSubscriptions && loading) && + + + + } + + {(!hasSubscriptions && !loading) && + + + You are not subscribed to any channels at the moment. Here are some channels that we think you might enjoy. + + {loadingSuggested && } + {!loadingSuggested && } + } + - ) } diff --git a/app/src/page/transactionHistory/view.js b/app/src/page/transactionHistory/view.js index 27b8c44..8be76ab 100644 --- a/app/src/page/transactionHistory/view.js +++ b/app/src/page/transactionHistory/view.js @@ -1,7 +1,8 @@ import React from 'react'; import { View, ScrollView, Text } from 'react-native'; -import TransactionList from '../../component/transactionList'; -import walletStyle from '../../styles/wallet'; +import TransactionList from 'component/transactionList'; +import UriBar from 'component/uriBar'; +import walletStyle from 'styles/wallet'; class TransactionHistoryPage extends React.PureComponent { componentWillMount() { @@ -16,19 +17,22 @@ class TransactionHistoryPage extends React.PureComponent { const { fetchingTransactions, transactions, navigation } = this.props; return ( - - - {fetchingTransactions && !transactions.length && ( - Loading transactions... - )} - {!fetchingTransactions && transactions.length === 0 && ( - No transactions to list. - )} - {!fetchingTransactions && transactions && (transactions.length > 0) && ( - - )} - - + + + + + {fetchingTransactions && !transactions.length && ( + Loading transactions... + )} + {!fetchingTransactions && transactions.length === 0 && ( + No transactions to list. + )} + {!fetchingTransactions && transactions && (transactions.length > 0) && ( + + )} + + + ); } } diff --git a/app/src/page/trending/view.js b/app/src/page/trending/view.js index 85b21e6..0735038 100644 --- a/app/src/page/trending/view.js +++ b/app/src/page/trending/view.js @@ -30,6 +30,7 @@ class TrendingPage extends React.PureComponent { return ( + {!hasContent && fetchingTrendingUris && ( @@ -54,7 +55,6 @@ class TrendingPage extends React.PureComponent { /> } - ); } diff --git a/app/src/page/wallet/view.js b/app/src/page/wallet/view.js index 9229592..42e0594 100644 --- a/app/src/page/wallet/view.js +++ b/app/src/page/wallet/view.js @@ -5,7 +5,8 @@ import WalletAddress from 'component/walletAddress'; import WalletBalance from 'component/walletBalance'; import WalletSend from 'component/walletSend'; import Button from 'component/button'; -import Link from 'component/link' +import Link from 'component/link'; +import UriBar from 'component/uriBar'; import Constants from 'constants'; import walletStyle from 'styles/wallet'; @@ -15,11 +16,12 @@ class WalletPage extends React.PureComponent { } render() { - const { understandsRisks, setClientSetting } = this.props; + const { understandsRisks, setClientSetting, navigation } = this.props; if (!understandsRisks) { return ( + This is beta software. You may lose any LBC that you send to your wallet due to uninstallation, software bugs, deleted files, or malicious third-party software. You should not use this wallet as your primary wallet. If you understand the risks and you wish to continue, please tap the button below. @@ -32,18 +34,21 @@ class WalletPage extends React.PureComponent { } return ( - - - - Please backup your wallet file using the instructions at . - - + + + + + + Please backup your wallet file using the instructions at . + + - - - - - + + + + + + ); } } diff --git a/app/src/styles/channelPage.js b/app/src/styles/channelPage.js index 683d407..43b8f06 100644 --- a/app/src/styles/channelPage.js +++ b/app/src/styles/channelPage.js @@ -11,8 +11,7 @@ const channelPageStyle = StyleSheet.create({ }, fileList: { flex: 1, - paddingTop: 30, - marginBottom: 60, + paddingTop: 30 }, fileListContent: { paddingBottom: 16 diff --git a/app/src/styles/discover.js b/app/src/styles/discover.js index 4499dde..ec7fbda 100644 --- a/app/src/styles/discover.js +++ b/app/src/styles/discover.js @@ -18,12 +18,12 @@ const discoverStyle = StyleSheet.create({ }, scrollContainer: { flex: 1, - marginBottom: 60, + marginTop: 60, paddingTop: 12 }, trendingContainer: { flex: 1, - marginBottom: 60, + marginTop: 60, paddingTop: 30 }, busyContainer: { diff --git a/app/src/styles/downloads.js b/app/src/styles/downloads.js index a25fb4e..34ba520 100644 --- a/app/src/styles/downloads.js +++ b/app/src/styles/downloads.js @@ -11,7 +11,8 @@ const downloadsStyle = StyleSheet.create({ flexDirection: 'row' }, subContainer: { - flex: 1 + flex: 1, + marginTop: 60 }, itemList: { flex: 1, diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js index efd6b3d..834d2d4 100644 --- a/app/src/styles/filePage.js +++ b/app/src/styles/filePage.js @@ -22,8 +22,7 @@ const filePageStyle = StyleSheet.create({ marginBottom: 20 }, innerPageContainer: { - flex: 1, - marginBottom: 60 + flex: 1 }, innerPageContainerFsMode: { flex: 1, @@ -32,7 +31,8 @@ const filePageStyle = StyleSheet.create({ mediaContainer: { alignItems: 'center', width: screenWidth, - height: containedMediaHeightWithControls + height: containedMediaHeightWithControls, + marginTop: 60 }, emptyClaimText: { fontFamily: 'Inter-UI-Regular', @@ -116,10 +116,12 @@ const filePageStyle = StyleSheet.create({ containedPlayer: { width: '100%', height: containedMediaHeightWithControls, + top: 60 }, containedPlayerLandscape: { width: '100%', - height: '100%' + height: '100%', + top: 60 }, fullscreenPlayer: { width: '100%', diff --git a/app/src/styles/floatingButton.js b/app/src/styles/floatingButton.js index 4e04966..21587e3 100644 --- a/app/src/styles/floatingButton.js +++ b/app/src/styles/floatingButton.js @@ -27,7 +27,7 @@ const floatingButtonStyle = StyleSheet.create({ }, bottomRight: { right: 10, - bottom: 70 + bottom: 10 } }); diff --git a/app/src/styles/pageHeader.js b/app/src/styles/pageHeader.js index c8921ea..7566a3b 100644 --- a/app/src/styles/pageHeader.js +++ b/app/src/styles/pageHeader.js @@ -1,7 +1,7 @@ import { Platform, StyleSheet } from 'react-native'; const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0; -const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56; +export const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56; let platformContainerStyles; if (Platform.OS === 'ios') { diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js index 352af03..132dd73 100644 --- a/app/src/styles/reward.js +++ b/app/src/styles/reward.js @@ -29,6 +29,9 @@ const rewardStyle = StyleSheet.create({ rewardsContainer: { flex: 1 }, + scrollContainer: { + marginTop: 60 + }, scrollContentContainer: { paddingBottom: 16 }, diff --git a/app/src/styles/search.js b/app/src/styles/search.js index b7a336a..8596cf4 100644 --- a/app/src/styles/search.js +++ b/app/src/styles/search.js @@ -12,7 +12,7 @@ const searchStyle = StyleSheet.create({ height: '100%', paddingLeft: 16, paddingRight: 16, - marginBottom: 60 + marginTop: 60 }, scrollPadding: { paddingBottom: 16 diff --git a/app/src/styles/subscriptions.js b/app/src/styles/subscriptions.js index cb7174a..131556b 100644 --- a/app/src/styles/subscriptions.js +++ b/app/src/styles/subscriptions.js @@ -11,6 +11,10 @@ const subscriptionsStyle = StyleSheet.create({ container: { flex: 1, }, + subContainer: { + flex: 1, + marginTop: 60 + }, busyContainer: { flex: 1, justifyContent: 'center', @@ -19,8 +23,7 @@ const subscriptionsStyle = StyleSheet.create({ padding: 16 }, scrollContainer: { - flex: 1, - marginBottom: 60 + flex: 1 }, scrollPadding: { paddingTop: 24 diff --git a/app/src/styles/uriBar.js b/app/src/styles/uriBar.js index a7d8a13..23923bb 100644 --- a/app/src/styles/uriBar.js +++ b/app/src/styles/uriBar.js @@ -1,11 +1,13 @@ import { StyleSheet } from 'react-native'; +import { TITLE_OFFSET } from 'styles/pageHeader'; import Colors from './colors'; const uriBarStyle = StyleSheet.create({ uriContainer: { + flexDirection: 'row', backgroundColor: Colors.White, padding: 8, - alignSelf: 'flex-end', + alignSelf: 'flex-start', height: 60, width: '100%', shadowColor: Colors.Black, @@ -24,12 +26,12 @@ const uriBarStyle = StyleSheet.create({ borderRadius: 4, fontFamily: 'Inter-UI-Regular', fontSize: 16, - width: '100%' + flex: 17 }, overlay: { position: 'absolute', backgroundColor: 'transparent', - bottom: 0, + top: 0, width: '100%', zIndex: 200, elevation: 16 @@ -51,7 +53,12 @@ const uriBarStyle = StyleSheet.create({ fontSize: 16, marginLeft: 12, marginRight: 12 - } + }, + drawerMenuButton: { + height: '100%', + justifyContent: 'center', + flex: 3 + }, }); export default uriBarStyle; diff --git a/app/src/styles/wallet.js b/app/src/styles/wallet.js index 935de4e..31a5afa 100644 --- a/app/src/styles/wallet.js +++ b/app/src/styles/wallet.js @@ -37,7 +37,7 @@ const walletStyle = StyleSheet.create({ backgroundColor: Colors.Orange, padding: 16, marginLeft: 16, - marginTop: 16, + marginTop: 76, marginRight: 16 }, transactionsCard: { @@ -132,7 +132,8 @@ const walletStyle = StyleSheet.create({ warning: { backgroundColor: Colors.Orange, padding: 16, - margin: 16 + margin: 16, + marginTop: 76 }, warningText: { color: Colors.White, @@ -161,6 +162,9 @@ const walletStyle = StyleSheet.create({ }, bottomMarginLarge: { marginBottom: 24 + }, + transactionHistoryScroll: { + marginTop: 60 } });