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} isResolvingUri={isResolvingUri}
style={mediaStyle} /> 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}> {!compactView && <View style={isRewardContent ? discoverStyle.rewardTitleContainer : null}>
<Text numberOfLines={1} style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text> <Text numberOfLines={1} style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
{isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={14} />} {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 Colors from 'styles/colors';
import DateTime from 'component/dateTime'; import DateTime from 'component/dateTime';
import FileItemMedia from 'component/fileItemMedia'; import FileItemMedia from 'component/fileItemMedia';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from 'component/link'; import Link from 'component/link';
import NsfwOverlay from 'component/nsfwOverlay'; import NsfwOverlay from 'component/nsfwOverlay';
import fileListStyle from 'styles/fileList'; import fileListStyle from 'styles/fileList';
@ -85,6 +86,7 @@ class FileListItem extends React.PureComponent {
resizeMode="cover" resizeMode="cover"
title={(title || name)} title={(title || name)}
thumbnail={metadata ? metadata.thumbnail : null} /> 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}> <View style={fileListStyle.detailsContainer}>
{featuredResult && <Text style={fileListStyle.featuredUri} numberOfLines={1}>{uri}</Text>} {featuredResult && <Text style={fileListStyle.featuredUri} numberOfLines={1}>{uri}</Text>}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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