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 React from 'react';
import AboutPage from '../page/about'; import AboutPage from 'page/about';
import DiscoverPage from '../page/discover'; import DiscoverPage from 'page/discover';
import DownloadsPage from '../page/downloads'; import DownloadsPage from 'page/downloads';
import FilePage from '../page/file'; import FilePage from 'page/file';
import FirstRunScreen from '../page/firstRun'; import FirstRunScreen from 'page/firstRun';
import RewardsPage from '../page/rewards'; import RewardsPage from 'page/rewards';
import TrendingPage from '../page/trending'; import TrendingPage from 'page/trending';
import SearchPage from '../page/search'; import SearchPage from 'page/search';
import SettingsPage from '../page/settings'; import SettingsPage from 'page/settings';
import SplashScreen from '../page/splash'; import SplashScreen from 'page/splash';
import SubscriptionsPage from '../page/subscriptions'; import SubscriptionsPage from 'page/subscriptions';
import TransactionHistoryPage from '../page/transactionHistory'; import TransactionHistoryPage from 'page/transactionHistory';
import WalletPage from '../page/wallet'; import WalletPage from 'page/wallet';
import SearchInput from '../component/searchInput'; import SearchInput from 'component/searchInput';
import { import {
createDrawerNavigator, createDrawerNavigator,
createStackNavigator, createStackNavigator,

View file

@ -29,7 +29,14 @@ class UriBarItem extends React.PureComponent {
return ( return (
<TouchableOpacity style={uriBarStyle.item} onPress={onPress}> <TouchableOpacity style={uriBarStyle.item} onPress={onPress}>
{icon} {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> </TouchableOpacity>
) )
} }

View file

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

View file

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