From 44412437ce7fc60dc2e55babdf3f8d9a2b7ab56b Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Sat, 21 Jan 2017 16:31:41 -0500
Subject: [PATCH] unavailable content cleanup

---
 js/component/common.js                        | 14 ---
 js/component/file-actions.js                  | 97 ++++++++++++-------
 js/component/file-tile.js                     |  2 +-
 js/component/file-unavailable-message.js      | 23 -----
 js/component/link.js                          | 49 +---------
 js/component/tooltip.js                       | 36 +++++++
 js/page/discover.js                           |  8 +-
 scss/_canvas.scss                             |  2 +-
 scss/_global.scss                             |  1 +
 scss/_gui.scss                                |  5 +-
 scss/all.scss                                 |  2 -
 scss/component/_file-actions.scss             |  5 +-
 scss/component/_file-tile.scss                | 12 +--
 scss/component/_file-unavailable-message.scss | 13 ---
 scss/component/_tooltip.scss                  | 34 +++++--
 scss/component/_tooltiplink.scss              | 12 ---
 16 files changed, 144 insertions(+), 171 deletions(-)
 delete mode 100644 js/component/file-unavailable-message.js
 create mode 100644 js/component/tooltip.js
 delete mode 100644 scss/component/_file-unavailable-message.scss
 delete mode 100644 scss/component/_tooltiplink.scss

diff --git a/js/component/common.js b/js/component/common.js
index f5c78633e..fcb7fbd0d 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -50,20 +50,6 @@ export let BusyMessage = React.createClass({
   }
 });
 
-export let ToolTip = React.createClass({
-  propTypes: {
-    open: React.PropTypes.bool.isRequired,
-    onMouseOut: React.PropTypes.func
-  },
-  render: function() {
-    return (
-      <div className={'tooltip ' + (this.props.className || '') + (this.props.open ? '' : ' hidden')} onMouseOut={this.props.onMouseOut}>
-        {this.props.children}
-      </div>
-    );
-  }
-});
-
 var creditAmountStyle = {
   color: '#216C2A',
   fontWeight: 'bold',
diff --git a/js/component/file-actions.js b/js/component/file-actions.js
index c670964ce..0ad8ba04d 100644
--- a/js/component/file-actions.js
+++ b/js/component/file-actions.js
@@ -2,9 +2,9 @@ import React from 'react';
 import lbry from '../lbry.js';
 import {Link} from '../component/link.js';
 import {Icon} from '../component/common.js';
-import FileUnavailableMessage from '../component/file-unavailable-message.js';
 import Modal from './modal.js';
 import FormField from './form.js';
+import {ToolTip} from '../component/tooltip.js';
 import {DropDownMenu, DropDownMenuItem} from './menu.js';
 
 let WatchLink = React.createClass({
@@ -51,18 +51,14 @@ let WatchLink = React.createClass({
   }
 });
 
-export let FileActions = React.createClass({
+let FileActionsRow = React.createClass({
   _isMounted: false,
   _fileInfoSubscribeId: null,
 
   propTypes: {
     streamName: React.PropTypes.string,
     sdHash: React.PropTypes.string.isRequired,
-    metadata: React.PropTypes.object,
-    path: React.PropTypes.string,
-    hidden: React.PropTypes.bool,
-    deleteChecked: React.PropTypes.bool,
-    onRemove: React.PropTypes.func,
+    metadata: React.PropTypes.object
   },
   getInitialState: function() {
     return {
@@ -71,9 +67,7 @@ export let FileActions = React.createClass({
       menuOpen: false,
       deleteChecked: false,
       attemptingDownload: false,
-      attemptingRemove: false,
-      available: null,
-      forceShowActions: false,
+      attemptingRemove: false
     }
   },
   onFileInfoUpdate: function(fileInfo) {
@@ -139,11 +133,6 @@ export let FileActions = React.createClass({
       modal: 'confirmRemove',
     });
   },
-  showActions: function() {
-    this.setState({
-      forceShowActions: true,
-    });
-  },
   handleRemoveConfirmed: function() {
     if (this.props.streamName) {
       lbry.removeFile(this.props.sdHash, this.props.streamName, this.state.deleteChecked);
@@ -164,15 +153,6 @@ export let FileActions = React.createClass({
   componentDidMount: function() {
     this._isMounted = true;
     this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate);
-    lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
-      if (!this._isMounted) {
-        return;
-      }
-
-      this.setState({
-        available: peers.length > 0,
-      });
-    });
   },
   componentWillUnmount: function() {
     this._isMounted = false;
@@ -183,15 +163,11 @@ export let FileActions = React.createClass({
   render: function() {
     if (this.state.fileInfo === null)
     {
-      return <section className="file-actions--stub"></section>;
-    }
-
-    if (this.state.available === false && !this.state.forceShowActions) {
-      return <FileUnavailableMessage onShowActionsClicked={this.showActions} />;
+      return null;
     }
 
     const openInFolderMessage = window.navigator.platform.startsWith('Mac') ? 'Open in Finder' : 'Open in Folder',
-          showMenu = !!this.state.fileInfo;
+      showMenu = !!this.state.fileInfo;
 
     let linkBlock;
     if (this.state.fileInfo === false && !this.state.attemptingDownload) {
@@ -213,10 +189,10 @@ export let FileActions = React.createClass({
     }
 
     return (
-      <section className="file-actions">
+      <div>
         {(this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/')) ? <WatchLink streamName={this.props.streamName} /> : null}
         {this.state.fileInfo !== null || this.state.fileInfo.isMine ?
-          <div className="button-container">{linkBlock}</div>
+         <div className="button-container">{linkBlock}</div>
           : null}
         { showMenu ?
           <DropDownMenu>
@@ -238,7 +214,62 @@ export let FileActions = React.createClass({
 
           <label><FormField type="checkbox" checked={this.state.deleteChecked} onClick={this.handleDeleteCheckboxClicked} /> Delete this file from my computer</label>
         </Modal>
-      </section>
+      </div>
     );
   }
 });
+
+export let FileActions = React.createClass({
+  _isMounted: false,
+  _fileInfoSubscribeId: null,
+
+  propTypes: {
+    streamName: React.PropTypes.string,
+    sdHash: React.PropTypes.string.isRequired,
+    metadata: React.PropTypes.object
+  },
+  getInitialState: function() {
+    return {
+      available: true,
+      forceShowActions: false,
+    }
+  },
+  onShowFileActionsRowClicked: function() {
+    this.setState({
+      forceShowActions: true,
+    });
+  },
+  componentDidMount: function() {
+    this._isMounted = true;
+    lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
+      if (!this._isMounted) {
+        return;
+      }
+
+      this.setState({
+        available: peers.length > 0,
+      });
+    });
+  },
+  componentWillUnmount: function() {
+    this._isMounted = false;
+  },
+  render: function() {
+    return (<section className="file-actions">
+      {
+        this.state.available || this.state.forceShowActions ?
+         <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} /> :
+         (<div>
+           <div className="button-container empty">This file is not currently available.</div>
+           <div className="button-container">
+             <ToolTip label="Why?"
+                      body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment" />
+           </div>
+           <div className="button-container">
+             <Link label="Try Anyway" className="button-text" onClick={this.onShowFileActionsRowClicked} />
+           </div>
+         </div>)
+      }
+    </section>);
+  }
+});
diff --git a/js/component/file-tile.js b/js/component/file-tile.js
index f4e3c747b..e3a4b83d1 100644
--- a/js/component/file-tile.js
+++ b/js/component/file-tile.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import lbry from '../lbry.js';
-import {Link, ToolTipLink} from '../component/link.js';
+import {Link} from '../component/link.js';
 import {FileActions} from '../component/file-actions.js';
 import {Thumbnail, TruncatedText, CreditAmount} from '../component/common.js';
 
diff --git a/js/component/file-unavailable-message.js b/js/component/file-unavailable-message.js
deleted file mode 100644
index 29cf76de7..000000000
--- a/js/component/file-unavailable-message.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import {Link, ToolTipLink} from '../component/link.js';
-
-const FileUnavailableMessage = React.createClass({
-  _unavailableMessage: "The content on LBRY is hosted by its users. It appears there are no users " +
-                       "connected that have this file at the moment.",
-  propTypes: {
-    onShowActionsClicked: React.PropTypes.func,
-  },
-  render: function() {
-    return (
-      <div className="file-unavailable-message">
-        <span className="empty">This file is not currently available.</span> { ' ' }
-        <ToolTipLink label="Why?" tooltip={this._unavailableMessage} className="not-available-tooltip-link" /> { ' ' }
-        {'onShowActionsClicked' in this.props
-          ? <Link label="Try Anyway" className="button-text" onClick={this.props.onShowActionsClicked} />
-          : null}
-      </div>
-    );
-  }
-});
-
-export default FileUnavailableMessage;
diff --git a/js/component/link.js b/js/component/link.js
index a3d931852..d19e0b46c 100644
--- a/js/component/link.js
+++ b/js/component/link.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Icon, ToolTip} from './common.js';
+import {Icon} from './common.js';
 
 export let Link = React.createClass({
   propTypes: {
@@ -51,49 +51,4 @@ export let Link = React.createClass({
       </a>
     );
   }
-});
-
-export let ToolTipLink = React.createClass({
-  getInitialState: function() {
-    return {
-      showTooltip: false,
-    };
-  },
-  handleClick: function() {
-    if (this.props.tooltip) {
-      this.setState({
-        showTooltip: !this.state.showTooltip,
-      });
-    }
-    if (this.props.onClick) {
-      this.props.onClick();
-    }
-  },
-  handleTooltipMouseOut: function() {
-    this.setState({
-      showTooltip: false,
-    });
-  },
-  render: function() {
-    const linkClass = 'tooltip-link__link ' + (this.props.className ? this.props.className + '__link' : '') +
-                      (this.props.button ? ' button-block button-' + this.props.button : '') +
-                      (this.props.hidden ? ' hidden' : '') +
-                      (this.props.disabled ? ' disabled' : '');
-    const toolTipClass = 'tooltip-link__tooltip ' + (this.props.className ? this.props.className + '__tooltip' : '');
-
-    return (
-      <span className={'tooltip-link ' + (this.props.className || '')}>
-        <a className={linkClass} href={this.props.href || 'javascript:;'}
-           title={this.props.title} onClick={this.handleClick}>
-          {this.props.icon ? <Icon icon={this.props.icon} />  : null }
-          {this.props.label}
-        </a>
-        {(!this.props.tooltip ? null :
-          <ToolTip className={toolTipClass} open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
-            {this.props.tooltip}
-          </ToolTip>
-        )}
-      </span>
-    );
-  }
-});
+});
\ No newline at end of file
diff --git a/js/component/tooltip.js b/js/component/tooltip.js
new file mode 100644
index 000000000..eb7d7d4fb
--- /dev/null
+++ b/js/component/tooltip.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+export let ToolTip = React.createClass({
+  propTypes: {
+    body: React.PropTypes.string.isRequired,
+    label: React.PropTypes.string.isRequired
+  },
+  getInitialState: function() {
+    return {
+      showTooltip: false,
+    };
+  },
+  handleClick: function() {
+    this.setState({
+      showTooltip: !this.state.showTooltip,
+    });
+  },
+  handleTooltipMouseOut: function() {
+    this.setState({
+      showTooltip: false,
+    });
+  },
+  render: function() {
+    return (
+      <span className={'tooltip ' + (this.props.className || '')}>
+        <a className="tooltip__link" onClick={this.handleClick}>
+          {this.props.label}
+        </a>
+        <div className={'tooltip__body ' + (this.state.showTooltip ? '' : ' hidden')}
+             onMouseOut={this.handleTooltipMouseOut}>
+          {this.props.body}
+        </div>
+      </span>
+    );
+  }
+});
\ No newline at end of file
diff --git a/js/page/discover.js b/js/page/discover.js
index a35515ff7..de59d09d7 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -2,7 +2,8 @@ import React from 'react';
 import lbry from '../lbry.js';
 import lighthouse from '../lighthouse.js';
 import {FileTile} from '../component/file-tile.js';
-import {Link, ToolTipLink} from '../component/link.js';
+import {Link} from '../component/link.js';
+import {ToolTip} from '../component/tooltip.js';
 import {BusyMessage} from '../component/common.js';
 
 var fetchResultsStyle = {
@@ -81,9 +82,8 @@ var FeaturedContent = React.createClass({
         </div>
         <div className="span6">
           <h3>
-            Community Content {' '}
-            <ToolTipLink label="What's this?"
-                         tooltip={toolTipText} />
+            Community Content
+            <ToolTip label="What's this?" body={toolTipText} className="tooltip--header"/>
           </h3>
           <FileTile name="one" />
           <FileTile name="two" />
diff --git a/scss/_canvas.scss b/scss/_canvas.scss
index 7a6184a95..a5082d0d9 100644
--- a/scss/_canvas.scss
+++ b/scss/_canvas.scss
@@ -8,7 +8,7 @@ html
 body
 {
   font-family: 'Source Sans Pro', sans-serif;
-  line-height: 1.3333;
+  line-height: $font-line-height;
 }
 
 $drawer-width: 240px;
diff --git a/scss/_global.scss b/scss/_global.scss
index 7c616ac29..4fc770831 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -16,6 +16,7 @@ $color-money: #216C2A;
 $color-meta-light: #505050;
 
 $font-size: 16px;
+$font-line-height: 1.3333;
 
 $mobile-width-threshold: 801px;
 $max-content-width: 1000px;
diff --git a/scss/_gui.scss b/scss/_gui.scss
index a184f6ace..5d7685037 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -1,7 +1,7 @@
 @import "global";
 
 @mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
-  color: $color;
+
   .icon
   {
     &:first-child {
@@ -29,6 +29,7 @@
   }
 
   color: $color;
+  cursor: pointer;
 }
 
 .icon-fixed-width {
@@ -200,7 +201,7 @@ input[type="text"], input[type="search"]
 }
 .button-text-help
 {
-  @include text-link(#5b8c80);
+  @include text-link(#aaa);
   font-size: 0.8em;
 }
 
diff --git a/scss/all.scss b/scss/all.scss
index 1621fc47f..5193fe5e1 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -7,8 +7,6 @@
 @import "component/_table";
 @import "component/_file-actions.scss";
 @import "component/_file-tile.scss";
-@import "component/_file-unavailable-message.scss";
 @import "component/_menu.scss";
-@import "component/_tooltiplink.scss";
 @import "component/_tooltip.scss";
 @import "page/_developer.scss";
\ No newline at end of file
diff --git a/scss/component/_file-actions.scss b/scss/component/_file-actions.scss
index 5117b11f5..6b3e934ee 100644
--- a/scss/component/_file-actions.scss
+++ b/scss/component/_file-actions.scss
@@ -2,9 +2,10 @@
 
 $color-download: #444;
 
-.file-actions--stub
+.file-actions
 {
-  height: $height-button;
+  line-height: $height-button;
+  min-height: $height-button;
 }
 
 .file-actions__download-status-bar
diff --git a/scss/component/_file-tile.scss b/scss/component/_file-tile.scss
index b5118fb22..a5c73a175 100644
--- a/scss/component/_file-tile.scss
+++ b/scss/component/_file-tile.scss
@@ -28,14 +28,4 @@
   color: #444;
   margin-top: 12px;
   font-size: 0.9em;
-}
-
-.file-tile__not-available-message {
-  height: auto;
-  text-align: right;
-  color: $color-notice;
-}
-
-.file-tile .not-available-tooltip-link__tooltip { /* temporary */
-  left: -225px;
-}
+}
\ No newline at end of file
diff --git a/scss/component/_file-unavailable-message.scss b/scss/component/_file-unavailable-message.scss
deleted file mode 100644
index d2f062a64..000000000
--- a/scss/component/_file-unavailable-message.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.file-unavailable-message {
-  font-size: 14px;
-
-  .not-available-tooltip-link__tooltip { /* temporary */
-    left: -225px;
-  }
-
-  .not-available-tooltip-link__link {
-    @include text-link();
-    font-size: 14px;
-    vertical-align: baseline;
-  }
-}
\ No newline at end of file
diff --git a/scss/component/_tooltip.scss b/scss/component/_tooltip.scss
index c856f3a02..9a6ccd7da 100644
--- a/scss/component/_tooltip.scss
+++ b/scss/component/_tooltip.scss
@@ -1,13 +1,35 @@
+@import "../global";
+
 .tooltip {
-  text-align: left;
+  position: relative;
+}
+
+.tooltip__link {
+  @include text-link();
+}
+
+.tooltip__body {
+  $tooltip-body-width: 300px;
+
   position: absolute;
   z-index: 1;
-  top: 100%;
-  left: -120px;
-  width: 260px;
-  padding: 15px;
+  left: 50%;
+  margin-left: $tooltip-body-width * -1 / 2;
+
+  box-sizing: border-box;
+  padding: $spacing-vertical / 2;
+  width: $tooltip-body-width;
   border: 1px solid #aaa;
   color: $color-text-dark;
   background-color: $color-bg;
-  font-size: 14px;
+  font-size: $font-size * 7/8;
+  line-height: $font-line-height;
+  box-shadow: $default-box-shadow;
 }
+
+.tooltip--header .tooltip__link {
+  @include text-link(#aaa);
+  font-size: $font-size * 3/4;
+  margin-left: $padding-button;
+  vertical-align: middle;
+}
\ No newline at end of file
diff --git a/scss/component/_tooltiplink.scss b/scss/component/_tooltiplink.scss
deleted file mode 100644
index 085a2d8ad..000000000
--- a/scss/component/_tooltiplink.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.tooltip-link {
-  position: relative;
-}
-
-.tooltip-link__link {
-  font-size: 12px;
-  color: #aaa;
-  vertical-align: 15%;
-  &:hover {
-    text-decoration: underline;
-  }
-}