clean up file-card/file-tile

lbryio · Feb 14, 2019 · c631189 · c631189
1 parent 4c76050
commit c631189
Show file tree

Hide file tree

Showing 17 changed files with 334 additions and 418 deletions.
diff --git a/src/renderer/component/channelTile/view.jsx b/src/renderer/component/channelTile/view.jsx
@@ -9,13 +9,11 @@ import type { Claim } from 'types/claim';
 type Props = {
   uri: string,
   isResolvingUri: boolean,
-  isSearchResult: boolean,
   totalItems: number,
   size: string,
   claim: ?Claim,
   resolveUri: string => void,
   navigate: (string, ?{}) => void,
-  buttonStyle: string,
 };
 
 class ChannelTile extends React.PureComponent<Props> {
@@ -38,16 +36,7 @@ class ChannelTile extends React.PureComponent<Props> {
   }
 
   render() {
-    const {
-      claim,
-      navigate,
-      isResolvingUri,
-      isSearchResult,
-      totalItems,
-      uri,
-      size,
-      buttonStyle,
-    } = this.props;
+    const { claim, navigate, isResolvingUri, totalItems, uri, size } = this.props;
 
     let channelName;
     let subscriptionUri;
@@ -63,9 +52,8 @@ class ChannelTile extends React.PureComponent<Props> {
         onClick={onClick}
         role="button"
         className={classnames('media-tile card--link', {
-          'media--search-result': isSearchResult,
-          'media--small': size === 'small',
-          'media--large': size === 'large',
+          'media-tile--small': size === 'small',
+          'media-tile--large': size === 'large',
         })}
       >
         <CardMedia title={channelName} thumbnail={null} />

diff --git a/src/renderer/component/common/yrbl.jsx b/src/renderer/component/common/yrbl.jsx
@@ -1,11 +1,13 @@
 // @flow
 import * as React from 'react';
 import Native from 'native';
+import classnames from 'classnames';
 
 type Props = {
   title: string,
   subtitle: string | React.Node,
   type: string,
+  className: ?string,
 };
 
 const yrblTypes = {
@@ -19,12 +21,12 @@ export default class extends React.PureComponent<Props> {
   };
 
   render() {
-    const { title, subtitle, type } = this.props;
+    const { title, subtitle, type, className } = this.props;
 
     const image = yrblTypes[type];
 
     return (
-      <div className="yrbl-wrap">
+      <div className={classnames('yrbl-wrap', className)}>
         <img alt="Friendly gerbil" className="yrbl" src={Native.imagePath(image)} />
         <div className="card__content">
           <h2 className="card__title">{title}</h2>

diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx
@@ -82,12 +82,12 @@ class FileCard extends React.PureComponent<Props> {
 
     if (!claim && (!pending || placeholder)) {
       return (
-        <li className="media-card media--placeholder">
-          <div className="media__thumb media__thumb--placeholder" />
-          <div className="media__title media__title--placeholder" />
-          <div className="media__channel media__channel--placeholder" />
-          <div className="media__date media__date--placeholder" />
-          <div className="media__properties media__properties--placeholder" />
+        <li className="media-card media-placeholder">
+          <div className="media__thumb placeholder" />
+          <div className="media__title placeholder" />
+          <div className="media__channel placeholder" />
+          <div className="media__date placeholder" />
+          <div className="media__properties" />
         </li>
       );
     }
@@ -127,11 +127,9 @@ class FileCard extends React.PureComponent<Props> {
         <div className="media__title">
           <TruncatedText text={title} lines={2} />
         </div>
-        <div className="media__subtext">
-          <div className="media__subtitle">
-            {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
-          </div>
-          <div className="media__date">
+        <div className="media__subtitle">
+          {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
+          <div>
             <DateTime timeAgo block={height} />
           </div>
         </div>

diff --git a/src/renderer/component/fileListSearch/view.jsx b/src/renderer/component/fileListSearch/view.jsx
@@ -39,7 +39,7 @@ class FileListSearch extends React.PureComponent<Props> {
               <div className="search__results-title">{__('Search Results')}</div>
               <HiddenNsfwClaims uris={uris} />
               {!isSearching && fileResults.length ? (
-                fileResults.map(uri => <FileTile isSearchResult key={uri} uri={uri} />)
+                fileResults.slice(0, 5).map(uri => <FileTile key={uri} uri={uri} />)
               ) : (
                 <NoResults />
               )}
@@ -48,7 +48,7 @@ class FileListSearch extends React.PureComponent<Props> {
             <section className="search__results-section">
               <div className="search__results-title">{__('Channels')}</div>
               {!isSearching && channelResults.length ? (
-                channelResults.map(uri => <ChannelTile isSearchResult key={uri} uri={uri} />)
+                channelResults.map(uri => <ChannelTile key={uri} uri={uri} />)
               ) : (
                 <NoResults />
               )}
@@ -57,9 +57,7 @@ class FileListSearch extends React.PureComponent<Props> {
             <section className="search__results-section">
               <div className="search__results-title">{__('Your downloads')}</div>
               {downloadUris && downloadUris.length ? (
-                downloadUris.map(uri => (
-                  <FileTile hideNoResult isSearchResult key={uri} uri={uri} />
-                ))
+                downloadUris.map(uri => <FileTile hideNoResult key={uri} uri={uri} />)
               ) : (
                 <NoResults />
               )}

diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx
@@ -1,7 +1,7 @@
 // @flow
 import type { Claim, Metadata } from 'types/claim';
 import * as ICONS from 'constants/icons';
-import * as React from 'react';
+import React, { Fragment } from 'react';
 import { normalizeURI, parseURI } from 'lbry-redux';
 import CardMedia from 'component/cardMedia';
 import TruncatedText from 'component/common/truncated-text';
@@ -11,12 +11,12 @@ import classnames from 'classnames';
 import FilePrice from 'component/filePrice';
 import UriIndicator from 'component/uriIndicator';
 import DateTime from 'component/dateTime';
+import Yrbl from 'component/common/yrbl';
 
 type Props = {
   obscureNsfw: boolean,
   claimIsMine: boolean,
   isDownloaded: boolean,
-  isSearchResult: boolean,
   uri: string,
   isResolvingUri: boolean,
   rewardedContentClaimIds: Array<string>,
@@ -28,15 +28,13 @@ type Props = {
   updatePublishForm: ({}) => void,
   hideNoResult: boolean, // don't show the tile if there is no claim at this uri
   displayHiddenMessage?: boolean,
-  displayDescription?: boolean,
   size: string,
   isSubscribed: boolean,
   isNew: boolean,
 };
 
 class FileTile extends React.PureComponent<Props> {
   static defaultProps = {
-    displayDescription: true,
     size: 'regular',
   };
 
@@ -57,7 +55,6 @@ class FileTile extends React.PureComponent<Props> {
       claim,
       uri,
       rewardedContentClaimIds,
-      size,
       isNew,
       claimIsMine,
     } = this.props;
@@ -70,7 +67,7 @@ class FileTile extends React.PureComponent<Props> {
     return (
       // TODO: turn this into it's own component and share it with FileCard
       // The only issue is icon placement on the search page
-      <div className={classnames('media__properties', { card__subtitle: size === 'large' })}>
+      <div className="media__properties">
         <FilePrice hideFree uri={uri} />
         {isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
         {isSubscribed && <Icon icon={ICONS.SUBSCRIPTION} />}
@@ -86,30 +83,28 @@ class FileTile extends React.PureComponent<Props> {
       claim,
       metadata,
       isResolvingUri,
-      isSearchResult,
       navigate,
       obscureNsfw,
       claimIsMine,
       clearPublish,
       updatePublishForm,
       hideNoResult,
       displayHiddenMessage,
-      displayDescription,
       size,
     } = this.props;
 
     if (!claim && isResolvingUri) {
       return (
         <div
-          className={classnames('media-tile', {
-            large: size === 'large',
+          className={classnames('media-tile media-placeholder', {
+            'media-tile--large': size === 'large',
           })}
         >
-          <div className="card__placeholder card__media" />
-          <div className="file-tile__info">
-            <div className="card__placeholder title" />
-            <div className="card__placeholder channel" />
-            <div className="card__placeholder date" />
+          <div className="media__thumb placeholder" />
+          <div className="media__info">
+            <div className="media__title placeholder" />
+            <div className="media__channel placeholder" />
+            <div className="media__subtitle placeholder" />
           </div>
         </div>
       );
@@ -132,69 +127,91 @@ class FileTile extends React.PureComponent<Props> {
     const title =
       isClaimed && metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
     const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
-    const onClick = () => navigate('/show', { uri });
 
     let height;
     let name;
     if (claim) {
       ({ name, height } = claim);
     }
 
+    const wrapperProps = name
+      ? {
+          onClick: () => navigate('/show', { uri }),
+          role: 'button',
+        }
+      : {};
+
     return !name && hideNoResult ? null : (
       <section
-        className={classnames('media-tile card--link', {
-          'media--search-result': isSearchResult,
-          'media--small': size === 'small',
-          'media--large': size === 'large',
+        className={classnames('media-tile', {
+          'media-tile--small': size === 'small',
+          'media-tile--large': size === 'large',
+          'card--link': name,
         })}
-        onClick={onClick}
-        onKeyUp={onClick}
-        role="button"
-        tabIndex="0"
+        {...wrapperProps}
       >
         <CardMedia title={title || name} thumbnail={thumbnail} />
         <div className="media__info">
-          <div className="media__title">
-            {(title || name) && (
-              <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
-            )}
-          </div>
-          <div className="media__subtext">
-            <div className="media__subtitle">
-              <UriIndicator uri={uri} link />
-            </div>
-            <div className="media__subtitle card--space-between">
-              <div className="media__date">
-                <DateTime timeAgo block={height} />
+          {name && (
+            <Fragment>
+              <div className="media__title">
+                {(title || name) && (
+                  <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
+                )}
               </div>
-              {size !== 'large' && this.renderFileProperties()}
-            </div>
-          </div>
-          {displayDescription && (
-            <div className="media__subtext">
+
+              {size !== 'small' ? (
+                <div className="media__subtext">
+                  {__('Published to')} <UriIndicator uri={uri} link />{' '}
+                  <DateTime timeAgo block={height} />
+                </div>
+              ) : (
+                <Fragment>
+                  <div className="media__subtext">
+                    <UriIndicator uri={uri} link />
+                  </div>
+                  <div className="media__subtext">
+                    <DateTime timeAgo block={height} />
+                  </div>
+                </Fragment>
+              )}
+            </Fragment>
+          )}
+
+          {size !== 'small' && (
+            <div className="media__subtitle">
               <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
             </div>
           )}
-          {size === 'large' && this.renderFileProperties()}
+
+          {this.renderFileProperties()}
+
           {!name && (
-            <React.Fragment>
-              {__('This location is unused.')}{' '}
-              <Button
-                button="link"
-                label={__('Put something here!')}
-                onClick={e => {
-                  // avoid navigating to /show from clicking on the section
-                  e.stopPropagation();
-
-                  // strip prefix from the Uri and use that as navigation parameter
-                  const { claimName } = parseURI(uri);
-
-                  clearPublish(); // to remove any existing publish data
-                  updatePublishForm({ name: claimName }); // to populate the name
-                  navigate('/publish');
-                }}
-              />
-            </React.Fragment>
+            <Yrbl
+              className="yrbl--search"
+              title={__("You get first dibs! There aren't any files here yet.")}
+              subtitle={
+                <Button
+                  button="link"
+                  label={
+                    <Fragment>
+                      {__('Publish something at')} {uri}
+                    </Fragment>
+                  }
+                  onClick={e => {
+                    // avoid navigating to /show from clicking on the section
+                    e.stopPropagation();
+
+                    // strip prefix from the Uri and use that as navigation parameter
+                    const { claimName } = parseURI(uri);
+
+                    clearPublish(); // to remove any existing publish data
+                    updatePublishForm({ name: claimName }); // to populate the name
+                    navigate('/publish');
+                  }}
+                />
+              }
+            />
           )}
         </div>
       </section>

diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx
@@ -54,17 +54,11 @@ export default class RecommendedContent extends React.PureComponent<Props> {
         <span>Related</span>
         {recommendedContent &&
           recommendedContent.map(recommendedUri => (
-            <FileTile
-              size="small"
-              hideNoResult
-              displayDescription={false}
-              key={recommendedUri}
-              uri={recommendedUri}
-            />
+            <FileTile hideNoResult size="small" key={recommendedUri} uri={recommendedUri} />
           ))}
-        {recommendedContent && !recommendedContent.length && !isSearching && (
-          <div className="media__subtitle">No related content found</div>
-        )}
+        {recommendedContent &&
+          !recommendedContent.length &&
+          !isSearching && <div className="media__subtitle">No related content found</div>}
       </section>
     );
   }

diff --git a/src/renderer/constants/icons.js b/src/renderer/constants/icons.js
@@ -41,3 +41,4 @@ export const WALLET = 'CreditCard';
 export const SETTINGS = 'Settings';
 export const INVITE = 'Users';
 export const FILE = 'File';
+export const OPTIONS = 'Sliders';