Merge branch 'icon-improvements'

CHANGELOG.md

@@ -16,7 +16,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   *
 
 ### Fixed
-  *
+  * Improve layout (and implementation) of the icon panel in file tiles and cards
   *
 
 ### Deprecated

ui/js/component/fileCard/view.jsx

@@ -2,12 +2,13 @@ import React from "react";
 import lbryuri from "lbryuri.js";
 import CardMedia from "component/cardMedia";
 import Link from "component/link";
-import { TruncatedText, Icon } from "component/common";
+import { TruncatedText } from "component/common";
-import IconFeatured from "component/iconFeatured";
+import Icon from "component/icon";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 import NsfwOverlay from "component/nsfwOverlay";
 import TruncatedMarkdown from "component/truncatedMarkdown";
+import * as icons from "constants/icons";
 
 class FileCard extends React.PureComponent {
   constructor(props) {
@@ -94,11 +95,12 @@ class FileCard extends React.PureComponent {
                 <TruncatedText lines={1}>{title}</TruncatedText>
               </div>
               <div className="card__subtitle">
-                <span style={{ float: "right" }}>
+                <span className="card__indicators">
                   <FilePrice uri={uri} />
-                  {isRewardContent && <span>{" "}<IconFeatured /></span>}
+                  {" "}
-                  {fileInfo &&
+                  {isRewardContent && <Icon icon={icons.FEATURED} />}
-                    <span>{" "}<Icon fixed icon="icon-folder" /></span>}
+                  {" "}
+                  {fileInfo && <Icon icon={icons.LOCAL} />}
                 </span>
                 <UriIndicator uri={uri} />
               </div>

ui/js/component/fileList/view.jsx

@@ -87,7 +87,8 @@ class FileList extends React.PureComponent {
         <FileTile
           key={fileInfo.outpoint || fileInfo.claim_id}
           uri={uri}
-          hidePrice={true}
+          showPrice={false}
+          showLocal={false}
           showActions={true}
           showEmpty={this.props.fileTileShowEmpty}
         />

ui/js/component/fileTile/view.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import * as icons from "constants/icons";
 import lbryuri from "lbryuri.js";
 import CardMedia from "component/cardMedia";
 import FileActions from "component/fileActions";
@@ -6,12 +7,17 @@ import Link from "component/link";
 import { TruncatedText } from "component/common.js";
 import FilePrice from "component/filePrice";
 import NsfwOverlay from "component/nsfwOverlay";
-import IconFeatured from "component/iconFeatured";
+import Icon from "component/icon";
 
 class FileTile extends React.PureComponent {
   static SHOW_EMPTY_PUBLISH = "publish";
   static SHOW_EMPTY_PENDING = "pending";
 
+  static defaultProps = {
+    showPrice: true,
+    showLocal: true,
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -59,8 +65,10 @@ class FileTile extends React.PureComponent {
       isResolvingUri,
       showEmpty,
       navigate,
-      hidePrice,
+      showPrice,
+      showLocal,
       rewardedContentClaimIds,
+      fileInfo,
     } = this.props;
 
     const uri = lbryuri.normalize(this.props.uri);
@@ -111,8 +119,13 @@ class FileTile extends React.PureComponent {
             <CardMedia title={title} thumbnail={thumbnail} />
             <div className="file-tile__content">
               <div className="card__title-primary">
-                {!hidePrice ? <FilePrice uri={this.props.uri} /> : null}
+                <span className="card__indicators">
-                {isRewardContent && <IconFeatured />}
+                  {showPrice && <FilePrice uri={this.props.uri} />}
+                  {" "}
+                  {isRewardContent && <Icon icon={icons.FEATURED} />}
+                  {" "}
+                  {showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
+                </span>
                 <div className="meta">{uri}</div>
                 <h3>
                   <TruncatedText lines={1}>{title}</TruncatedText>

ui/js/component/icon/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import Icon from "./view";
+
+export default connect(null, null)(Icon);

ui/js/component/icon/view.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import * as icons from "constants/icons";
+
+export default class Icon extends React.PureComponent {
+  static propTypes = {
+    icon: React.PropTypes.string.isRequired,
+    fixed: React.PropTypes.bool,
+  };
+
+  static defaultProps = {
+    fixed: false,
+  };
+
+  getIconClass() {
+    const { icon } = this.props;
+
+    return icon.startsWith("icon-") ? icon : "icon-" + icon;
+  }
+
+  getIconTitle() {
+    switch (this.props.icon) {
+      case icons.FEATURED:
+        return __("Watch this and earn rewards.");
+      case icons.LOCAL:
+        return __("You have a copy of this file.");
+      default:
+        return "";
+    }
+  }
+
+  render() {
+    const className = this.getIconClass(),
+      title = this.getIconTitle();
+
+    const spanClassName =
+      "icon " + className + (this.props.fixed ? " icon-fixed-width " : "");
+
+    return <span className={spanClassName} title={title} />;
+  }
+}

ui/js/component/iconFeatured/index.js

@@ -1,5 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import IconFeatured from "./view";
-
-export default connect(null, null)(IconFeatured);

ui/js/component/iconFeatured/view.jsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Icon } from "component/common.js";
-
-const IconFeatured = props => {
-  return (
-    <span
-      className="icon-featured"
-      title={__("Watch content with this icon to earn weekly rewards.")}
-    >
-      <Icon icon="icon-rocket" fixed className="card__icon-featured-content" />
-    </span>
-  );
-};
-
-export default IconFeatured;

ui/js/constants/icons.js

@@ -0,0 +1,2 @@
+export const FEATURED = "rocket";
+export const LOCAL = "folder";

ui/js/page/file/view.jsx

@@ -6,8 +6,40 @@ import { Thumbnail } from "component/common";
 import FilePrice from "component/filePrice";
 import FileDetails from "component/fileDetails";
 import UriIndicator from "component/uriIndicator";
-import IconFeatured from "component/iconFeatured";
+import Icon from "component/icon";
 import WalletSendTip from "component/walletSendTip";
+import DateTime from "component/dateTime";
+import * as icons from "constants/icons";
+
+const FormatItem = props => {
+  const {
+    publishedDate,
+    contentType,
+    claim: { height },
+    metadata: { language, license },
+  } = props;
+
+  const mediaType = lbry.getMediaType(contentType);
+
+  return (
+    <table className="table-standard">
+      <tbody>
+        <tr>
+          <td>{__("Published on")}</td><td><DateTime block={height} /></td>
+        </tr>
+        <tr>
+          <td>{__("Content-Type")}</td><td>{mediaType}</td>
+        </tr>
+        <tr>
+          <td>{__("Language")}</td><td>{language}</td>
+        </tr>
+        <tr>
+          <td>{__("License")}</td><td>{license}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
 
 class FilePage extends React.PureComponent {
   componentDidMount() {
@@ -77,7 +109,7 @@ class FilePage extends React.PureComponent {
                   {!fileInfo || fileInfo.written_bytes <= 0
                     ? <span style={{ float: "right" }}>
                         <FilePrice uri={lbryuri.normalize(uri)} />
-                        {isRewardContent && <span>{" "}<IconFeatured /></span>}
+                        {isRewardContent && <span>{" "}<Icon icon={icons.FEATURED} /></span>}
                       </span>
                     : null}
                   <h1>{title}</h1>

ui/scss/_icons.scss

@@ -23,6 +23,17 @@
   transform: translate(0, 0);
 }
 
+
+/* Adjustments for icon size and alignment */
+.icon-rocket {
+  color: orangered;
+  font-size: 0.95em;
+  position: relative;
+  top: -0.04em;
+  margin-left: 0.025em;
+  margin-right: 0.025em;
+}
+
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .icon-glass:before {

ui/scss/component/_card.scss

@@ -167,6 +167,11 @@ $font-size-subtext-multiple: 0.82;
   position: absolute;
   top: 36%
 }
+
+.card__indicators {
+  float: right;
+}
+
 .card--small {
   width: var(--card-small-width);
   overflow-x: hidden;
@@ -269,10 +274,6 @@ $padding-right-card-hover-hack: 30px;
   right: 0;
 }
 
-.card__icon-featured-content {
-  color: orangered;
-}
-
 /*
 if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
  */

ui/scss/component/_file-tile.scss

@@ -3,12 +3,6 @@ $height-file-tile: $spacing-vertical * 6;
 .file-tile__row {
   overflow: hidden;
   height: $height-file-tile;
-  .credit-amount {
-    float: right;
-  }
-  .icon-featured {
-    float: right;
-  }
   //also a hack
   .card__media {
     height: $height-file-tile;