Explore page redesign #518
8 changed files with 34 additions and 14 deletions
|
@ -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} />}
|
||||
|
|
|
@ -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>}
|
||||
|
||||
|
|
|
@ -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))
|
||||
});
|
||||
|
|
|
@ -46,12 +46,14 @@ class DiscoverPage extends React.PureComponent {
|
|||
const {
|
||||
fetchFeaturedUris,
|
||||
fetchRewardedContent,
|
||||
fetchSubscriptions
|
||||
fetchSubscriptions,
|
||||
fileList
|
||||
} = this.props;
|
||||
|
||||
fetchFeaturedUris();
|
||||
fetchRewardedContent();
|
||||
fetchSubscriptions();
|
||||
fileList();
|
||||
|
||||
this.showRatingReminder();
|
||||
}
|
||||
|
|
|
@ -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 = {
|
||||
|
|
|
@ -4,6 +4,7 @@ const Colors = {
|
|||
DarkGrey: '#555555',
|
||||
DescriptionGrey: '#999999',
|
||||
LbryGreen: '#2f9176',
|
||||
BrightGreen: '#61fcd8',
|
||||
BrighterLbryGreen: '#40b887',
|
||||
LightGrey: '#cccccc',
|
||||
LighterGrey: '#e5e5e5',
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -81,6 +81,11 @@ const fileListStyle = StyleSheet.create({
|
|||
backgroundColor: Colors.LbryGreen,
|
||||
opacity: 0.2
|
||||
},
|
||||
downloadedIcon: {
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
left: 8
|
||||
}
|
||||
});
|
||||
|
||||
export default fileListStyle;
|
||||
|
|
Loading…
Reference in a new issue