more progress but probably more breakage

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)),

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 {
+    const { fileInfo, uri, openModal, claimIsMine, editClaim } = this.props;
-      fileInfo,
-      platform,
-      uri,
-      openInFolder,
-      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
+        <Link
-          ? <div className="button-set-item">
+          button="text"
-              <DropDownMenu>
+          icon="icon-trash"
-                <DropDownMenuItem
+          label={__("Remove")}
-                  key={0}
+          className="card__action--right"
-                  onClick={() => openInFolder(fileInfo)}
+          onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
-                  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>
-          : ""}
-
       </section>
     );
   }

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}

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}
         />
       );

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">
+              {description &&
-                <TruncatedText lines={3}>
+                <div className="card__content card__subtext">
-                  {description}
+                  <TruncatedText lines={!showActions ? 4 : 2}>
-                </TruncatedText>
+                    {description}
-              </div>
+                  </TruncatedText>
+                </div>}
             </div>
           </div>
-        </Link>
+        </div>
         {this.state.showNsfwHelp && <NsfwOverlay />}
       </section>
     );

ui/js/component/video/internal/play-button.jsx

@@ -47,15 +47,16 @@ class VideoPlayButton extends React.PureComponent {
       ? "icon-play"
       : "icon-folder-o";
 
-    return;
+    return (
-    <Link
+      <Link
-      button={button ? button : null}
+        button={button ? button : null}
-      disabled={disabled}
+        disabled={disabled}
-      label={label ? label : ""}
+        label={label ? label : ""}
-      className="video__play-button"
+        className="video__play-button"
-      icon={icon}
+        icon={icon}
-      onClick={this.onWatchClick.bind(this)}
+        onClick={this.onWatchClick.bind(this)}
-    />;
+      />
+    );
   }
 }
 

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
-                <FileActions
+                uri={uri}
-                  uri={uri}
+                onTipShow={this.handleTipShow.bind(this)}
-                  onTipShow={this.handleTipShow.bind(this)}
+              />
-                />
-              </div>
             </div>
             {!showTipBox &&
               <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">

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";

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;

ui/scss/component/_file-download.scss

@@ -1,22 +1,15 @@
-
+.file-download, .file-download__overlay {
-.file-actions
-{
-  line-height: var(--button-height);
-  min-height: var(--button-height);
-}
-
-.file-actions__download-status-bar, .file-actions__download-status-bar-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);
+}
+
+ */