@@ -157,7 +157,8 @@ export let FileTile = React.createClass({
_isMounted: false,
propTypes: {
- name: React.PropTypes.string.isRequired
+ name: React.PropTypes.string.isRequired,
+ available: React.PropTypes.bool,
},
getInitialState: function() {
@@ -187,6 +188,6 @@ export let FileTile = React.createClass({
return null;
}
- return
;
+ return
;
}
});
\ No newline at end of file
diff --git a/js/component/link.js b/js/component/link.js
index 4a80ee830..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,54 +51,4 @@ export let Link = React.createClass({
);
}
-});
-
-var linkContainerStyle = {
- position: 'relative',
-};
-
-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() {
- var href = this.props.href ? this.props.href : 'javascript:;',
- icon = this.props.icon ?
: '',
- className = this.props.className +
- (this.props.button ? ' button-block button-' + this.props.button : '') +
- (this.props.hidden ? ' hidden' : '') +
- (this.props.disabled ? ' disabled' : '');
-
- return (
-
-
- {this.props.icon ? icon : '' }
- {this.props.label}
-
- {(!this.props.tooltip ? null :
-
- {this.props.tooltip}
-
- )}
-
- );
- }
-});
+});
\ 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 (
+
+
+ {this.props.label}
+
+
+ {this.props.body}
+
+
+ );
+ }
+});
\ No newline at end of file
diff --git a/js/lbry.js b/js/lbry.js
index 9063aca2e..96965ec99 100644
--- a/js/lbry.js
+++ b/js/lbry.js
@@ -10,6 +10,7 @@ var lbry = {
},
defaultClientSettings: {
showNsfw: false,
+ showUnavailable: true,
debug: false,
useCustomLighthouseServers: false,
customLighthouseServers: [],
diff --git a/js/page/discover.js b/js/page/discover.js
index 3e0bf65e2..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 = {
@@ -47,7 +48,7 @@ var SearchResults = React.createClass({
if (!seenNames[name]) {
seenNames[name] = name;
rows.push(
-
+
);
}
});
@@ -65,6 +66,9 @@ var featuredContentLegendStyle = {
var FeaturedContent = React.createClass({
render: function() {
+ const toolTipText = ('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," "four" and ' +
+ '"five" to put your content here!');
return (
@@ -77,8 +81,10 @@ var FeaturedContent = React.createClass({
-
Community Content
+
+ Community Content
+
+
diff --git a/js/page/settings.js b/js/page/settings.js
index 81403492b..b192f15c9 100644
--- a/js/page/settings.js
+++ b/js/page/settings.js
@@ -51,7 +51,8 @@ var SettingsPage = React.createClass({
getInitialState: function() {
return {
settings: null,
- showNsfw: lbry.getClientSetting('showNsfw')
+ showNsfw: lbry.getClientSetting('showNsfw'),
+ showUnavailable: lbry.getClientSetting('showUnavailable'),
}
},
componentDidMount: function() {
@@ -69,6 +70,9 @@ var SettingsPage = React.createClass({
onShowNsfwChange: function(event) {
lbry.setClientSetting('showNsfw', event.target.checked);
},
+ onShowUnavailableChange: function(event) {
+ lbry.setClientSetting('showUnavailable', event.target.checked);
+ },
render: function() {
if (!this.state.daemonSettings) {
return null;
@@ -114,7 +118,7 @@ var SettingsPage = React.createClass({
Content
+
+ Search
+
+
+ Would you like search results to include items that are not currently available for download?
+
+
+ Show unavailable content in search results
+
+
+
Share Diagnostic Data
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 b59b5821f..4fc770831 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -8,6 +8,7 @@ $color-primary: #155B4A;
$color-light-alt: hsl(hue($color-primary), 15, 85);
$color-text-dark: #000;
$color-help: rgba(0,0,0,.6);
+$color-notice: #921010;
$color-canvas: #f5f5f5;
$color-bg: #ffffff;
$color-bg-alt: #D9D9D9;
@@ -15,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 4055cc708..5193fe5e1 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -8,4 +8,5 @@
@import "component/_file-actions.scss";
@import "component/_file-tile.scss";
@import "component/_menu.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 11a071232..a5c73a175 100644
--- a/scss/component/_file-tile.scss
+++ b/scss/component/_file-tile.scss
@@ -4,6 +4,10 @@
height: $spacing-vertical * 7;
}
+.file-tile__row--unavailable {
+ opacity: 0.5;
+}
+
.file-tile__thumbnail {
max-width: 100%;
max-height: $spacing-vertical * 7;
diff --git a/scss/component/_tooltip.scss b/scss/component/_tooltip.scss
new file mode 100644
index 000000000..9a6ccd7da
--- /dev/null
+++ b/scss/component/_tooltip.scss
@@ -0,0 +1,35 @@
+@import "../global";
+
+.tooltip {
+ position: relative;
+}
+
+.tooltip__link {
+ @include text-link();
+}
+
+.tooltip__body {
+ $tooltip-body-width: 300px;
+
+ position: absolute;
+ z-index: 1;
+ 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: $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