From b2fd38a1c82ed341d4de33a524d31edcfed428a3 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Wed, 18 Jan 2017 03:45:23 -0500 Subject: [PATCH 1/7] Reduce padding around text buttons After moving the padding to the content of buttons, we ended up with extra padding around text buttons that wasn't there before. The "Download" bar doesn't look great with no padding at all, but it needs to match the text buttons so the text doesn't jump to the right when it switches from "Download" (text button) to "Connecting" (progress bar). So we pad both text buttons and progress bars just a little bit, less than a standard button but enough that progress bars look OK. --- js/component/file-actions.js | 2 +- js/component/link.js | 9 +++++---- scss/_global.scss | 1 + scss/_gui.scss | 4 ++++ scss/component/_file-actions.scss | 6 ++++++ 5 files changed, 17 insertions(+), 5 deletions(-) diff --git a/js/component/file-actions.js b/js/component/file-actions.js index 0ad8ba04d..569efabf1 100644 --- a/js/component/file-actions.js +++ b/js/component/file-actions.js @@ -185,7 +185,7 @@ let FileActionsRow = React.createClass({ ); } else { - linkBlock = ; + linkBlock = ; } return ( diff --git a/js/component/link.js b/js/component/link.js index d19e0b46c..497409e38 100644 --- a/js/component/link.js +++ b/js/component/link.js @@ -28,7 +28,8 @@ export let Link = React.createClass({ /* The way the class name is generated here is a mess -- refactor */ const className = (this.props.className || '') + - (this.props.button ? ' button-block button-' + this.props.button : '') + + (!this.props.className && !this.props.button ? 'button-block button-text' : '') + // Non-button links get the same look as text buttons + (this.props.button ? 'button-block button-' + this.props.button : '') + (this.props.disabled ? ' disabled' : ''); let content; @@ -45,9 +46,9 @@ export let Link = React.createClass({ return ( - {('button' in this.props) && this.props.button != 'text' - ? {content} - : content} + {'button' in this.props + ? {content} + : content} ); } diff --git a/scss/_global.scss b/scss/_global.scss index 4fc770831..5997470d7 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -3,6 +3,7 @@ $spacing-vertical: 24px; $padding-button: 12px; +$padding-text-link: 4px; $color-primary: #155B4A; $color-light-alt: hsl(hue($color-primary), 15, 85); diff --git a/scss/_gui.scss b/scss/_gui.scss index 5d7685037..be4fefcbf 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -198,6 +198,10 @@ input[type="text"], input[type="search"] { @include text-link(); display: inline-block; + + .button__content { + margin: 0 $padding-text-link; + } } .button-text-help { diff --git a/scss/component/_file-actions.scss b/scss/component/_file-actions.scss index 6b3e934ee..4eda16b51 100644 --- a/scss/component/_file-actions.scss +++ b/scss/component/_file-actions.scss @@ -8,6 +8,12 @@ $color-download: #444; min-height: $height-button; } +.file-actions__download-status-bar, .file-actions__download-status-bar-overlay { + .button__content { + margin: 0 $padding-text-link; + } +} + .file-actions__download-status-bar { position: relative; From ef393ca360ce3bd0312638342cd936c49640e216 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 23 Jan 2017 19:22:25 -0500 Subject: [PATCH 2/7] Simplify content wrapping logic in Link --- js/component/link.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/js/component/link.js b/js/component/link.js index 497409e38..d1a920346 100644 --- a/js/component/link.js +++ b/js/component/link.js @@ -36,19 +36,19 @@ export let Link = React.createClass({ if (this.props.children) { // Custom content content = this.props.children; } else { - content = [ - 'icon' in this.props ? : null, - {this.props.label}, - 'badge' in this.props ? {this.props.badge} : null, - ]; + content = ( + + {'icon' in this.props ? : null} + {{this.props.label}} + {'badge' in this.props ? {this.props.badge} : null} + + ); } return ( - {'button' in this.props - ? {content} - : content} + {content} ); } From 13886f41563e236f9d94fcc2865bdd1949871494 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 23 Jan 2017 23:06:29 -0500 Subject: [PATCH 3/7] Fix padding issue with download progress bar Label was not wrapped in span, so the wrong styles were applying --- js/component/file-actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/component/file-actions.js b/js/component/file-actions.js index 569efabf1..80ca4fdd1 100644 --- a/js/component/file-actions.js +++ b/js/component/file-actions.js @@ -176,7 +176,7 @@ let FileActionsRow = React.createClass({ const progress = this.state.fileInfo ? this.state.fileInfo.written_bytes / this.state.fileInfo.total_bytes * 100 : 0, label = this.state.fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...', - labelWithIcon = {label}; + labelWithIcon = {label}; linkBlock = (
From 3c339492a099bdd1d9405d158a3d3dce3a53d680 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 23 Jan 2017 23:18:01 -0500 Subject: [PATCH 4/7] Use new API method name in lbry.getPeersForBlobHash() --- js/lbry.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/lbry.js b/js/lbry.js index 96965ec99..fa73f854c 100644 --- a/js/lbry.js +++ b/js/lbry.js @@ -190,7 +190,7 @@ lbry.getTotalCost = function(name, size, callback) { } lbry.getPeersForBlobHash = function(blobHash, callback) { - lbry.call('get_peers_for_hash', { blob_hash: blobHash }, callback) + lbry.call('peer_list', { blob_hash: blobHash }, callback); } lbry.getCostInfoForName = function(name, callback) { From f3a501cf14c3b7a75fd909f1e953b90e881c3925 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 23 Jan 2017 23:31:06 -0500 Subject: [PATCH 5/7] Add temporary timeout for blob peer list lookups Returns an empty array for the peer list if the API call takes more than 6 seconds. If the lookup takes that long, there are almost never never any peers. --- js/lbry.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/js/lbry.js b/js/lbry.js index fa73f854c..2f804e365 100644 --- a/js/lbry.js +++ b/js/lbry.js @@ -5,6 +5,7 @@ var lbry = { rootPath: '.', daemonConnectionString: 'http://localhost:5279/lbryapi', webUiUri: 'http://localhost:5279', + peerListTimeout: 6000, colors: { primary: '#155B4A' }, @@ -190,7 +191,18 @@ lbry.getTotalCost = function(name, size, callback) { } lbry.getPeersForBlobHash = function(blobHash, callback) { - lbry.call('peer_list', { blob_hash: blobHash }, callback); + let timedOut = false; + const timeout = setTimeout(() => { + timedOut = true; + callback([]); + }, lbry.peerListTimeout); + + lbry.call('peer_list', { blob_hash: blobHash }, function(peers) { + if (!timedOut) { + clearTimeout(timeout); + callback(peers); + } + }); } lbry.getCostInfoForName = function(name, callback) { From 0af15751f736bda6dd8f00de9cbe1baa9280058c Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 23 Jan 2017 23:36:41 -0500 Subject: [PATCH 6/7] Fix typo in "file unavailable" message Missing period --- js/component/file-actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/component/file-actions.js b/js/component/file-actions.js index 80ca4fdd1..053aae535 100644 --- a/js/component/file-actions.js +++ b/js/component/file-actions.js @@ -263,7 +263,7 @@ export let FileActions = React.createClass({
This file is not currently available.
+ body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment." />
From 2286fc992e82b5ef043e797937c905a98ecb35e3 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Mon, 23 Jan 2017 23:47:02 -0500 Subject: [PATCH 7/7] Add z-index to menus Prevents elements with position stacking on top --- scss/component/_menu.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/component/_menu.scss b/scss/component/_menu.scss index d46926bba..68ceb5d7d 100644 --- a/scss/component/_menu.scss +++ b/scss/component/_menu.scss @@ -10,6 +10,7 @@ $border-radius-menu: 2px; border-radius: $border-radius-menu; padding-top: $spacing-vertical / 2; padding-bottom: $spacing-vertical / 2; + z-index: 1; } .menu__menu-item {