Improved uri bar (#450)

* add descriptions to uri bar items
This commit is contained in:
Akinwale Ariwodola 2019-03-05 10:17:50 +01:00 committed by GitHub
parent 7e76e47d77
commit caa9c80d44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 19 deletions

View file

@ -1,18 +1,18 @@
import React from 'react';
import AboutPage from '../page/about';
import DiscoverPage from '../page/discover';
import DownloadsPage from '../page/downloads';
import FilePage from '../page/file';
import FirstRunScreen from '../page/firstRun';
import RewardsPage from '../page/rewards';
import TrendingPage from '../page/trending';
import SearchPage from '../page/search';
import SettingsPage from '../page/settings';
import SplashScreen from '../page/splash';
import SubscriptionsPage from '../page/subscriptions';
import TransactionHistoryPage from '../page/transactionHistory';
import WalletPage from '../page/wallet';
import SearchInput from '../component/searchInput';
import AboutPage from 'page/about';
import DiscoverPage from 'page/discover';
import DownloadsPage from 'page/downloads';
import FilePage from 'page/file';
import FirstRunScreen from 'page/firstRun';
import RewardsPage from 'page/rewards';
import TrendingPage from 'page/trending';
import SearchPage from 'page/search';
import SettingsPage from 'page/settings';
import SplashScreen from 'page/splash';
import SubscriptionsPage from 'page/subscriptions';
import TransactionHistoryPage from 'page/transactionHistory';
import WalletPage from 'page/wallet';
import SearchInput from 'component/searchInput';
import {
createDrawerNavigator,
createStackNavigator,

View file

@ -29,7 +29,14 @@ class UriBarItem extends React.PureComponent {
return (
<TouchableOpacity style={uriBarStyle.item} onPress={onPress}>
{icon}
<Text style={uriBarStyle.itemText} numberOfLines={1}>{shorthand || value} - {type === 'search' ? 'Search' : value}</Text>
<View style={uriBarStyle.itemContent}>
<Text style={uriBarStyle.itemText} numberOfLines={1}>{shorthand || value} - {type === SEARCH_TYPES.SEARCH ? 'Search' : value}</Text>
<Text style={uriBarStyle.itemDesc} numberOfLines={1}>
{type === SEARCH_TYPES.SEARCH && `Search for '${value}'`}
{type === SEARCH_TYPES.CHANNEL && `View the @${shorthand} channel`}
{type === SEARCH_TYPES.FILE && `View content at ${value}`}
</Text>
</View>
</TouchableOpacity>
)
}

View file

@ -11,6 +11,7 @@ const Colors = {
Red: '#ff0000',
VeryLightGrey: '#f1f1f1',
White: '#ffffff',
UriDescBlue: '#3971db',
StatsAudio: '#f6a637',
StatsImage: '#ff4a7d',

View file

@ -45,14 +45,24 @@ const uriBarStyle = StyleSheet.create({
},
item: {
flexDirection: 'row',
justifyContent: 'flex-start',
padding: 12
alignItems: 'center',
padding: 12,
paddingTop: 8,
paddingBottom: 8
},
itemContent: {
marginLeft: 12,
marginRight: 12,
flex: 1
},
itemText: {
fontFamily: 'Inter-UI-Regular',
fontSize: 16,
marginLeft: 12,
marginRight: 12
},
itemDesc: {
fontFamily: 'Inter-UI-Regular',
fontSize: 14,
color: Colors.UriDescBlue
},
drawerMenuButton: {
height: '100%',