Merge pull request #22 from lbryio/community-content

Community content (WIP)

js/component/common.js

@@ -11,19 +11,73 @@ var Icon = React.createClass({
   }
 });
 
-var Link = React.createClass({
+var toolTipStyle = {
+  position: 'absolute',
+  top: '100%',
+  left: '-120px',
+  width: '260px',
+  padding: '15px',
+  border: '1px solid #aaa',
+  fontSize: '14px',
+};
+var ToolTip = React.createClass({
+  propTypes: {
+    open: React.PropTypes.bool.isRequired,
+    onMouseOut: React.PropTypes.func
+  },
+  render: function() {
+    return (
+      <div className={this.props.open ? '' : 'hidden'} style={toolTipStyle} onMouseOut={this.props.onMouseOut}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+
+var linkContainerStyle = {
+  position: 'relative',
+};
+var Link = 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() {
-    console.log(this.props);
     var href = this.props.href ? this.props.href : 'javascript:;',
       icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
       className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
                   (this.props.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '');
+
+
     return (
+      <span style={linkContainerStyle}>
         <a className={className} href={href} style={this.props.style ? this.props.style : {}}
-        title={this.props.title} onClick={this.props.onClick}>
+          title={this.props.title} onClick={this.handleClick}>
           {this.props.icon ? icon : '' }
           {this.props.label}
         </a>
+        {(!this.props.tooltip ? null :
+          <ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
+            {this.props.tooltip}
+          </ToolTip>
+        )}
+      </span>
     );
   }
 });

js/page/home.js

@@ -207,27 +207,55 @@ var FeaturedContentItem = React.createClass({
 var featuredContentStyle = {
   width: '100%',
   marginTop: '-8px',
+}, featuredContentLegendStyle = {
+  fontSize: '12px',
+  color: '#aaa',
+  verticalAlign: '15%',
 };
 
 var FeaturedContent = React.createClass({
   render: function() {
     return (<section style={featuredContentStyle}>
+      <div className="row-fluid">
+        <div className="span6">
           <h3>Featured Content</h3>
+        </div>
+        <div className="span6">
+          <h3>Community Content <Link style={featuredContentLegendStyle} label="What's this?" tooltip='Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three" and "four" to put your content here!' /></h3>
+        </div>
+      </div>
+
       <div className="row-fluid">
         <div className="span6">
           <FeaturedContentItem name="what" />
         </div>
         <div className="span6">
-          <FeaturedContentItem name="itsadisaster" narrow />
+          <FeaturedContentItem name="one" narrow />
+        </div>
+      </div>
+      <div className="row-fluid">
+        <div className="span6">
+          <FeaturedContentItem name="itsadisaster" />
+        </div>
+        <div className="span6">
+          <FeaturedContentItem name="two" />
         </div>
       </div>
       <div className="row-fluid">
         <div className="span6">
           <FeaturedContentItem name="keynesvhayek" />
         </div>
+        <div className="span6">
+          <FeaturedContentItem name="three" />
+        </div>
+      </div>
+      <div className="row-fluid">
         <div className="span6">
           <FeaturedContentItem name="meetlbry1" />
         </div>
+        <div className="span6">
+          <FeaturedContentItem name="four" />
+        </div>
       </div>
     </section>);
   }