From e119533973c4d0d77c38b742fde5ed20392f2d73 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Fri, 15 Sep 2017 09:56:32 -0400
Subject: [PATCH] more progress but probably more breakage

---
 ui/js/component/fileActions/index.js          |  2 -
 ui/js/component/fileActions/view.jsx          | 55 ++++++-------------
 ui/js/component/fileDownloadLink/view.jsx     |  4 +-
 ui/js/component/fileList/view.jsx             |  1 +
 ui/js/component/fileTile/view.jsx             | 17 +++---
 .../component/video/internal/play-button.jsx  | 19 ++++---
 ui/js/page/file/view.jsx                      | 12 ++--
 ui/scss/all.scss                              |  2 +-
 ui/scss/component/_card.scss                  |  4 ++
 ..._file-actions.scss => _file-download.scss} | 23 ++++----
 10 files changed, 63 insertions(+), 76 deletions(-)
 rename ui/scss/component/{_file-actions.scss => _file-download.scss} (70%)

diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js
index f8a5d8424..fea552312 100644
--- a/ui/js/component/fileActions/index.js
+++ b/ui/js/component/fileActions/index.js
@@ -14,14 +14,12 @@ import FileActions from "./view";
 const select = (state, props) => ({
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   /*availability check is disabled due to poor performance, TBD if it dies forever or requires daemon fix*/
-  platform: selectPlatform(state),
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
 });
 
 const perform = dispatch => ({
   checkAvailability: uri => dispatch(doFetchAvailability(uri)),
-  openInFolder: fileInfo => dispatch(doOpenFileInFolder(fileInfo)),
   openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)),
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   startDownload: uri => dispatch(doPurchaseUri(uri)),
diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx
index d530f4ea7..eed07ab44 100644
--- a/ui/js/component/fileActions/view.jsx
+++ b/ui/js/component/fileActions/view.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Link from "component/link";
 import FileDownloadLink from "component/fileDownloadLink";
-import { DropDownMenu, DropDownMenuItem } from "component/menu";
 import * as modals from "constants/modal_types";
 
 class FileActions extends React.PureComponent {
@@ -10,58 +9,38 @@ class FileActions extends React.PureComponent {
   }
 
   render() {
-    const {
-      fileInfo,
-      platform,
-      uri,
-      openInFolder,
-      openModal,
-      claimIsMine,
-      editClaim,
-    } = this.props;
+    const { fileInfo, uri, openModal, claimIsMine, editClaim } = this.props;
 
     const name = fileInfo ? fileInfo.name : null;
     const channel = fileInfo ? fileInfo.channel_name : null;
 
     const metadata = fileInfo ? fileInfo.metadata : null,
-      openInFolderMessage = platform.startsWith("Mac")
-        ? __("Open in Finder")
-        : __("Open in Folder"),
       showMenu = fileInfo && Object.keys(fileInfo).length > 0,
       title = metadata ? metadata.title : uri;
 
     return (
-      <section className="file-actions">
+      <section className="card__actions">
+        {claimIsMine &&
+          <Link
+            button="text"
+            icon="icon-edit"
+            label={__("Edit")}
+            onClick={() => editClaim({ name, channel })}
+          />}
         <FileDownloadLink uri={uri} />
         <Link
-          label={__("Support")}
           button="text"
           icon="icon-gift"
+          label={__("Support")}
           onClick={this.handleSupportButtonClicked.bind(this)}
         />
-        {showMenu
-          ? <div className="button-set-item">
-              <DropDownMenu>
-                <DropDownMenuItem
-                  key={0}
-                  onClick={() => openInFolder(fileInfo)}
-                  label={openInFolderMessage}
-                />
-                {claimIsMine &&
-                  <DropDownMenuItem
-                    key={1}
-                    onClick={() => editClaim({ name, channel })}
-                    label={__("Edit claim")}
-                  />}
-                <DropDownMenuItem
-                  key={2}
-                  onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
-                  label={__("Remove...")}
-                />
-              </DropDownMenu>
-            </div>
-          : ""}
-
+        <Link
+          button="text"
+          icon="icon-trash"
+          label={__("Remove")}
+          className="card__action--right"
+          onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
+        />
       </section>
     );
   }
diff --git a/ui/js/component/fileDownloadLink/view.jsx b/ui/js/component/fileDownloadLink/view.jsx
index fd1818ed7..82bae5b8a 100644
--- a/ui/js/component/fileDownloadLink/view.jsx
+++ b/ui/js/component/fileDownloadLink/view.jsx
@@ -61,9 +61,9 @@ class FileDownloadLink extends React.PureComponent {
         );
 
       return (
-        <div className="faux-button-block file-actions__download-status-bar button-set-item">
+        <div className="faux-button-block file-download button-set-item">
           <div
-            className="faux-button-block file-actions__download-status-bar-overlay"
+            className="faux-button-block file-download__overlay"
             style={{ width: progress + "%" }}
           >
             {labelWithIcon}
diff --git a/ui/js/component/fileList/view.jsx b/ui/js/component/fileList/view.jsx
index 57d4d991f..8fad10cdc 100644
--- a/ui/js/component/fileList/view.jsx
+++ b/ui/js/component/fileList/view.jsx
@@ -88,6 +88,7 @@ class FileList extends React.PureComponent {
           key={fileInfo.outpoint || fileInfo.claim_id}
           uri={uri}
           hidePrice={true}
+          showActions={true}
           showEmpty={this.props.fileTileShowEmpty}
         />
       );
diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx
index c57172408..1abd44952 100644
--- a/ui/js/component/fileTile/view.jsx
+++ b/ui/js/component/fileTile/view.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import lbryuri from "lbryuri.js";
 import CardMedia from "component/cardMedia";
+import FileActions from "component/fileActions";
 import Link from "component/link";
 import { TruncatedText } from "component/common.js";
 import FilePrice from "component/filePrice";
@@ -53,6 +54,7 @@ class FileTile extends React.PureComponent {
   render() {
     const {
       claim,
+      showActions,
       metadata,
       isResolvingUri,
       showEmpty,
@@ -104,7 +106,7 @@ class FileTile extends React.PureComponent {
         onMouseEnter={this.handleMouseOver.bind(this)}
         onMouseLeave={this.handleMouseOut.bind(this)}
       >
-        <Link onClick={onClick} className="card__link">
+        <div onClick={onClick} className="card__link">
           <div className={"card__inner file-tile__row"}>
             <CardMedia title={title} thumbnail={thumbnail} />
             <div className="file-tile__content">
@@ -116,14 +118,15 @@ class FileTile extends React.PureComponent {
                   <TruncatedText lines={1}>{title}</TruncatedText>
                 </h3>
               </div>
-              <div className="card__content card__subtext">
-                <TruncatedText lines={3}>
-                  {description}
-                </TruncatedText>
-              </div>
+              {description &&
+                <div className="card__content card__subtext">
+                  <TruncatedText lines={!showActions ? 4 : 2}>
+                    {description}
+                  </TruncatedText>
+                </div>}
             </div>
           </div>
-        </Link>
+        </div>
         {this.state.showNsfwHelp && <NsfwOverlay />}
       </section>
     );
diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx
index 2df2b2ea4..23f9259aa 100644
--- a/ui/js/component/video/internal/play-button.jsx
+++ b/ui/js/component/video/internal/play-button.jsx
@@ -47,15 +47,16 @@ class VideoPlayButton extends React.PureComponent {
       ? "icon-play"
       : "icon-folder-o";
 
-    return;
-    <Link
-      button={button ? button : null}
-      disabled={disabled}
-      label={label ? label : ""}
-      className="video__play-button"
-      icon={icon}
-      onClick={this.onWatchClick.bind(this)}
-    />;
+    return (
+      <Link
+        button={button ? button : null}
+        disabled={disabled}
+        label={label ? label : ""}
+        className="video__play-button"
+        icon={icon}
+        onClick={this.onWatchClick.bind(this)}
+      />
+    );
   }
 }
 
diff --git a/ui/js/page/file/view.jsx b/ui/js/page/file/view.jsx
index 0d2ed0bc3..3e1a2e2f9 100644
--- a/ui/js/page/file/view.jsx
+++ b/ui/js/page/file/view.jsx
@@ -23,7 +23,7 @@ const FormatItem = props => {
   const mediaType = lbry.getMediaType(contentType);
 
   return (
-    <table className="table-standard">
+    <table className="table-standard table-stretch">
       <tbody>
         <tr>
           <td>{__("Published on")}</td><td><DateTime block={height} /></td>
@@ -156,12 +156,10 @@ class FilePage extends React.PureComponent {
                     </Link>
                   : uriIndicator}
               </div>
-              <div className="card__actions">
-                <FileActions
-                  uri={uri}
-                  onTipShow={this.handleTipShow.bind(this)}
-                />
-              </div>
+              <FileActions
+                uri={uri}
+                onTipShow={this.handleTipShow.bind(this)}
+              />
             </div>
             {!showTipBox &&
               <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 61f636b77..69656fa41 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -6,7 +6,7 @@
 @import "component/_table";
 @import "component/_button.scss";
 @import "component/_card.scss";
-@import "component/_file-actions.scss";
+@import "component/_file-download.scss";
 @import "component/_file-selector.scss";
 @import "component/_file-tile.scss";
 @import "component/_form-field.scss";
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index d81f408ac..156a5406f 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -51,6 +51,9 @@
   margin-top: $spacing-vertical;
   margin-bottom: var(--card-margin);
 }
+.card__action--right {
+  float: right;
+}
 .card__content {
   margin-top: var(--card-margin);
   margin-bottom: var(--card-margin);
@@ -84,6 +87,7 @@ $font-size-subtext-multiple: 0.82;
 
 .card__link {
   display: block;
+  cursor: pointer;
 }
 .card--link {
   transition: transform 120ms ease-in-out;
diff --git a/ui/scss/component/_file-actions.scss b/ui/scss/component/_file-download.scss
similarity index 70%
rename from ui/scss/component/_file-actions.scss
rename to ui/scss/component/_file-download.scss
index 0350dad90..13ce6e1f3 100644
--- a/ui/scss/component/_file-actions.scss
+++ b/ui/scss/component/_file-download.scss
@@ -1,22 +1,15 @@
-
-.file-actions
-{
-  line-height: var(--button-height);
-  min-height: var(--button-height);
-}
-
-.file-actions__download-status-bar, .file-actions__download-status-bar-overlay {
+.file-download, .file-download__overlay {
    .button__content {
      margin: 0 var(--text-link-padding);
    }
 }
 
-.file-actions__download-status-bar
+.file-download
 {
   position: relative;
   color: var(--color-download);
 }
-.file-actions__download-status-bar-overlay
+.file-download__overlay
 {
   background: var(--color-download);
   color: white;
@@ -27,3 +20,13 @@
   top: 0px;
   left: 0px;
 }
+
+/*
+
+.file-actions
+{
+  line-height: var(--button-height);
+  min-height: var(--button-height);
+}
+
+ */
\ No newline at end of file