Explore page redesign #518

Merged
akinwale merged 6 commits from redesign into master 2019-04-24 16:31:45 +02:00
8 changed files with 34 additions and 14 deletions
Showing only changes of commit 9b486bc453 - Show all commits

View file

@ -78,7 +78,8 @@ class FileItem extends React.PureComponent {
isResolvingUri={isResolvingUri}
style={mediaStyle} />
{!compactView && <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />}
{(!compactView && fileInfo && fileInfo.completed) && <Icon style={discoverStyle.downloadedIcon} solid={true} color={Colors.BrightGreen} name={"folder"} size={16} />}
{(!compactView && (!fileInfo || !fileInfo.completed)) && <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />}
{!compactView && <View style={isRewardContent ? discoverStyle.rewardTitleContainer : null}>
<Text numberOfLines={1} style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
{isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={14} />}

View file

@ -12,6 +12,7 @@ import { navigateToUri, formatBytes } from 'utils/helper';
import Colors from 'styles/colors';
import DateTime from 'component/dateTime';
import FileItemMedia from 'component/fileItemMedia';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from 'component/link';
import NsfwOverlay from 'component/nsfwOverlay';
import fileListStyle from 'styles/fileList';
@ -85,6 +86,7 @@ class FileListItem extends React.PureComponent {
resizeMode="cover"
title={(title || name)}
thumbnail={metadata ? metadata.thumbnail : null} />
{fileInfo && fileInfo.completed && <Icon style={fileListStyle.downloadedIcon} solid={true} color={Colors.BrightGreen} name={"folder"} size={16} />}
<View style={fileListStyle.detailsContainer}>
{featuredResult && <Text style={fileListStyle.featuredUri} numberOfLines={1}>{uri}</Text>}

View file

@ -1,6 +1,8 @@
import { connect } from 'react-redux';
import {
doFileList,
selectBalance,
selectFileInfosDownloaded,
} from 'lbry-redux';
import {
doFetchFeaturedUris,
@ -24,6 +26,7 @@ const select = state => ({
enabledChannelNotifications: selectEnabledChannelNotifications(state),
featuredUris: selectFeaturedUris(state),
fetchingFeaturedUris: selectFetchingFeaturedUris(state),
fileInfos: selectFileInfosDownloaded(state),
ratingReminderDisabled: makeSelectClientSetting(Constants.SETTING_RATING_REMINDER_DISABLED)(state),
ratingReminderLastShown: makeSelectClientSetting(Constants.SETTING_RATING_REMINDER_LAST_SHOWN)(state),
unreadSubscriptions: selectUnreadSubscriptions(state),
@ -33,6 +36,7 @@ const perform = dispatch => ({
fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
fetchSubscriptions: () => dispatch(doFetchMySubscriptions()),
fileList: () => dispatch(doFileList()),
removeUnreadSubscriptions: () => dispatch(doRemoveUnreadSubscriptions()),
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value))
});

View file

@ -46,12 +46,14 @@ class DiscoverPage extends React.PureComponent {
const {
fetchFeaturedUris,
fetchRewardedContent,
fetchSubscriptions
fetchSubscriptions,
fileList
} = this.props;
fetchFeaturedUris();
fetchRewardedContent();
fetchSubscriptions();
fileList();
this.showRatingReminder();
}

View file

@ -9,15 +9,15 @@ import {
View,
ScrollView
} from 'react-native';
import { navigateToUri, uriFromFileInfo } from '../../utils/helper';
import Colors from '../../styles/colors';
import PageHeader from '../../component/pageHeader';
import FileListItem from '../../component/fileListItem';
import FloatingWalletBalance from '../../component/floatingWalletBalance';
import StorageStatsCard from '../../component/storageStatsCard';
import UriBar from '../../component/uriBar';
import downloadsStyle from '../../styles/downloads';
import fileListStyle from '../../styles/fileList';
import { navigateToUri, uriFromFileInfo } from 'utils/helper';
import Colors from 'styles/colors';
import PageHeader from 'component/pageHeader';
import FileListItem from 'component/fileListItem';
import FloatingWalletBalance from 'component/floatingWalletBalance';
import StorageStatsCard from 'component/storageStatsCard';
import UriBar from 'component/uriBar';
import downloadsStyle from 'styles/downloads';
import fileListStyle from 'styles/fileList';
class DownloadsPage extends React.PureComponent {
static navigationOptions = {

View file

@ -4,6 +4,7 @@ const Colors = {
DarkGrey: '#555555',
DescriptionGrey: '#999999',
LbryGreen: '#2f9176',
BrightGreen: '#61fcd8',
BrighterLbryGreen: '#40b887',
LightGrey: '#cccccc',
LighterGrey: '#e5e5e5',

View file

@ -70,12 +70,17 @@ const discoverStyle = StyleSheet.create({
marginTop: 4,
color: Colors.LbryGreen
},
downloadedIcon: {
position: 'absolute',
right: 8,
top: 8
},
filePriceContainer: {
backgroundColor: '#61fcd8',
backgroundColor: Colors.BrightGreen,
justifyContent: 'center',
position: 'absolute',
right: 16,
top: 16,
right: 8,
top: 8,
width: 56,
height: 24,
borderRadius: 4

View file

@ -81,6 +81,11 @@ const fileListStyle = StyleSheet.create({
backgroundColor: Colors.LbryGreen,
opacity: 0.2
},
downloadedIcon: {
position: 'absolute',
top: 8,
left: 8
}
});
export default fileListStyle;