improve file page ux

src/renderer/component/common/tooltip.jsx

@@ -5,10 +5,10 @@ import classnames from 'classnames';
 type Props = {
   body: string,
   label?: string,
-  children: ?React.Node,
+  children?: React.Node,
-  icon: ?boolean,
+  icon?: boolean,
   direction: string,
-  onFormField?: boolean,
+  onComponent?: boolean, // extra padding to account for button/form field size
 };
 
 class ToolTip extends React.PureComponent<Props> {
@@ -17,9 +17,11 @@ class ToolTip extends React.PureComponent<Props> {
   };
 
   render() {
-    const { children, label, body, icon, direction, onFormField } = this.props;
+    const { children, label, body, icon, direction, onComponent } = this.props;
 
     const tooltipContent = children || label;
+    const bodyLength = body.length;
+    const isShortDescription = bodyLength < 30;
 
     return (
       <span
@@ -30,11 +32,17 @@ class ToolTip extends React.PureComponent<Props> {
           'tooltip--right': direction === 'right',
           'tooltip--bottom': direction === 'bottom',
           'tooltip--left': direction === 'left',
-          'tooltip--on-formfield': onFormField,
+          'tooltip--on-component': onComponent,
         })}
       >
         {tooltipContent}
-        <span className="tooltip__body">{body}</span>
+        <span
+          className={classnames('tooltip__body', {
+            'tooltip__body--short': isShortDescription,
+          })}
+        >
+          {body}
+        </span>
       </span>
     );
   }

src/renderer/component/fileActions/view.jsx

@@ -1,9 +1,9 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import Button from 'component/button';
 import { MODALS } from 'lbry-redux';
-import classnames from 'classnames';
 import * as icons from 'constants/icons';
+import Tooltip from 'component/common/tooltip';
 
 type FileInfo = {
   claim_id: string,
@@ -15,34 +15,35 @@ type Props = {
   openModal: ({ id: string }, { uri: string }) => void,
   claimIsMine: boolean,
   fileInfo: FileInfo,
-  vertical?: boolean, // should the buttons be stacked vertically?
 };
 
 class FileActions extends React.PureComponent<Props> {
   render() {
-    const { fileInfo, uri, openModal, claimIsMine, vertical, claimId } = this.props;
+    const { fileInfo, uri, openModal, claimIsMine, claimId } = this.props;
     const showDelete = fileInfo && Object.keys(fileInfo).length > 0;
 
     return (
-      <section className={classnames('card__actions', { 'card__actions--vertical': vertical })}>
+      <React.Fragment>
         {showDelete && (
+          <Tooltip onComponent body={__('Delete this file')}>
             <Button
               button="alt"
               icon={icons.TRASH}
-            iconColor="red"
+              description={__('Delete')}
-            label={__('Delete')}
               onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })}
             />
+          </Tooltip>
         )}
         {!claimIsMine && (
+          <Tooltip onComponent body={__('Report content')}>
             <Button
               button="alt"
               icon={icons.REPORT}
               href={`https://lbry.io/dmca?claim_id=${claimId}`}
-            label={__('Report content')}
             />
+          </Tooltip>
         )}
-      </section>
+      </React.Fragment>
     );
   }
 }

src/renderer/component/fileDownloadLink/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import Button from 'component/button';
 import * as icons from 'constants/icons';
+import ToolTip from 'component/common/tooltip';
 
 type Props = {
   uri: string,
@@ -59,7 +60,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
     if (loading || downloading) {
       const progress =
         fileInfo && fileInfo.written_bytes
-          ? fileInfo.written_bytes / fileInfo.total_bytes * 100
+          ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100
           : 0;
       const label = fileInfo
         ? __('Downloading: ') + progress.toFixed(0) + __('% complete')
@@ -72,25 +73,22 @@ class FileDownloadLink extends React.PureComponent<Props> {
       }
 
       return (
+        <ToolTip onComponent body={__('Download')}>
           <Button
             button="alt"
-          label={__('Download')}
             icon={icons.DOWNLOAD}
             iconColor="purple"
             onClick={() => {
               purchaseUri(uri);
             }}
           />
+        </ToolTip>
       );
     } else if (fileInfo && fileInfo.download_path) {
       return (
-        <Button
+        <ToolTip onComponent body={__('Open file')}>
-          button="alt"
+          <Button button="alt" iconColor="purple" icon={icons.LOCAL} onClick={() => openFile()} />
-          iconColor="purple"
+        </ToolTip>
-          label={__('Open File')}
-          icon={icons.OPEN}
-          onClick={() => openFile()}
-        />
       );
     }
 

src/renderer/component/wunderbar/index.js

@@ -3,8 +3,6 @@ import {
   selectSearchState as selectSearch,
   selectWunderBarAddress,
   doUpdateSearchQuery,
-  doNotify,
-  MODALS,
   doFocusSearchInput,
   doBlurSearchInput,
   doSearch,
@@ -37,4 +35,7 @@ const perform = dispatch => ({
   doBlur: () => dispatch(doBlurSearchInput()),
 });
 
-export default connect(select, perform)(Wunderbar);
+export default connect(
+  select,
+  perform
+)(Wunderbar);

src/renderer/page/file/view.jsx

@@ -167,10 +167,10 @@ class FilePage extends React.Component<Props> {
               <div className="card__title-identity--file">
                 <h1 className="card__title card__title--file">{title}</h1>
                 <div className="card__title-identity-icons">
-                  <FilePrice uri={normalizeURI(uri)} />
                   {isRewardContent && (
                     <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />
                   )}
+                  <FilePrice uri={normalizeURI(uri)} />
                 </div>
               </div>
               <span className="card__subtitle card__subtitle--file">
@@ -180,7 +180,10 @@ class FilePage extends React.Component<Props> {
               {metadata.nsfw && <div>NSFW</div>}
               <div className="card__channel-info">
                 <UriIndicator uri={uri} link />
-                <div className="card__actions card__actions--no-margin">
+              </div>
+              <div className="card__actions card__actions--between">
+                {(claimIsMine || subscriptionUri || speechSharable) && (
+                  <div className="card__actions">
                     {claimIsMine ? (
                       <Button
                         button="primary"
@@ -194,10 +197,6 @@ class FilePage extends React.Component<Props> {
                     ) : (
                       <SubscribeButton uri={subscriptionUri} channelName={channelName} />
                     )}
-                </div>
-              </div>
-              {(!claimIsMine || speechSharable) && (
-                <div className="card__actions card__actions--end">
                     {!claimIsMine && (
                       <Button
                         button="alt"
@@ -211,29 +210,25 @@ class FilePage extends React.Component<Props> {
                     )}
                   </div>
                 )}
-              <FormRow alignRight padded>
+
+                <div className="card__actions">
+                  <FileDownloadLink uri={uri} />
+                  <FileActions uri={uri} claimId={claim.claim_id} />
+                </div>
+              </div>
+              <FormRow padded>
+                <ToolTip onComponent body={__('Automatically download and play free content.')}>
                   <FormField
                     useToggle
                     name="autoplay"
                     type="checkbox"
+                    postfix={__('Autoplay')}
                     checked={autoplay}
                     onChange={this.onAutoplayChange}
-                  postfix={
-                    <ToolTip
-                      onFormField
-                      label={__('Autoplay')}
-                      body={__('Automatically download and play free content.')}
-                    />
-                  }
                   />
+                </ToolTip>
               </FormRow>
             </div>
-
-            <div className="card__content">
-              <FileDownloadLink uri={uri} />
-              <FileActions uri={uri} claimId={claim.claim_id} />
-            </div>
-
             <div className="card__content--extra-padding">
               <FileDetails uri={uri} />
             </div>

src/renderer/scss/component/_card.scss

@@ -93,9 +93,9 @@
 .card__title-identity--file {
   display: flex;
   align-items: center;
-  .credit-amount,
+
   .icon {
-    margin: $spacing-vertical * 1/3;
+    margin: 0 $spacing-vertical * 1/3;
   }
 }
 
@@ -198,7 +198,7 @@
 
 .card__subtext-title {
   color: var(--text-color);
-  font-size: calc(var(--font-size-subtext-multiple) * 1.5em);
+  font-size: calc(var(--font-size-subtext-multiple) * 1.2em);
 
   &:not(:first-of-type) {
     margin-top: $spacing-vertical * 3/2;
@@ -220,10 +220,14 @@
   margin-top: $spacing-vertical * 2/3;
   display: flex;
 
-  &:not(.card__actions--vertical) .btn:nth-child(n + 2) {
+  &:not(.card__actions--vertical) {
+    .btn:nth-child(n + 2),
+    // For buttons wrapped in a tooltip
+    .tooltip:nth-child(n + 2) { 
       margin-left: $spacing-vertical / 3;
     }
   }
+}
 
 .card__actions--no-margin {
   margin-top: 0;
@@ -258,6 +262,11 @@
   justify-content: flex-end;
 }
 
+.card__actions--between {
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
 /*
  .card-row is used on the discover page
  It is a list of cards that extend past the right edge of the screen

src/renderer/scss/component/_file-download.scss

@@ -1,3 +1,4 @@
 .file-download {
   font-size: 0.8em;
+  align-self: center;
 }

src/renderer/scss/component/_tooltip.scss

@@ -13,16 +13,13 @@
   }
 }
 
-.tooltip--on-formfield {
-  padding: 0;
-}
-
 .tooltip--icon {
   margin-top: 5px;
 }
 
 /* Tooltip text */
-.tooltip .tooltip__body {
+.tooltip {
+  .tooltip__body {
     background-color: var(--tooltip-bg);
     font-family: 'metropolis-medium';
     font-size: 12px;
@@ -37,7 +34,11 @@
     visibility: hidden;
   }
 
-.tooltip .tooltip__body::after {
+  .tooltip__body--short {
+    width: 130px;
+  }
+
+  .tooltip__body::after {
     content: ' ';
     width: 0;
     height: 0;
@@ -46,11 +47,24 @@
     border-style: solid;
   }
 
-.tooltip--top .tooltip__body {
+  &.tooltip--on-component {
+    .tooltip__body {
+      margin-top: 10px;
+    }
+  }
+}
+
+.tooltip--top {
+  .tooltip__body {
     bottom: 100%;
     left: 50%;
     margin-left: -100px;
 
+    &.tooltip__body--short {
+      margin-left: -65px;
+    }
+  }
+
   &::after {
     top: 100%;
     left: 50%;
@@ -59,7 +73,8 @@
   }
 }
 
-.tooltip--right .tooltip__body {
+.tooltip--right {
+  .tooltip__body {
     margin-top: -5px;
     margin-left: 10px;
 
@@ -70,12 +85,18 @@
       border-color: transparent var(--tooltip-bg) transparent transparent;
     }
   }
+}
 
-.tooltip--bottom .tooltip__body {
+.tooltip--bottom {
+  .tooltip__body {
     top: 90%;
     left: 50%;
     margin-left: -100px;
 
+    &.tooltip__body--short {
+      margin-left: -65px;
+    }
+
     &::after {
       bottom: 100%;
       left: 50%;
@@ -83,6 +104,7 @@
       border-color: transparent transparent var(--tooltip-bg) transparent;
     }
   }
+}
 
 .tooltip--left .tooltip__body {
   top: -5px;