LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Seed Support #56

Closed
ocnios wants to merge 173 commits from master into build
pull from: master
merge into: LBRYCommunity:build
Conversation 3 Commits 173 Files changed 100 +169 -140
9 changed files with 169 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit cb4af24cd7 - Show all commits

3
ui/js/app.js
View file

@ -2,7 +2,6 @@ import React from 'react';
import {Line} from 'rc-progress'; import {Line} from 'rc-progress';
import lbry from './lbry.js'; import lbry from './lbry.js';
import EmailPage from './page/email.js';
import SettingsPage from './page/settings.js'; import SettingsPage from './page/settings.js';
import HelpPage from './page/help.js'; import HelpPage from './page/help.js';
import WatchPage from './page/watch.js'; import WatchPage from './page/watch.js';
@ -277,8 +276,6 @@ var App = React.createClass({
return <ShowPage uri={this.state.pageArgs} />; return <ShowPage uri={this.state.pageArgs} />;
case 'publish': case 'publish':
return <PublishPage />; return <PublishPage />;
case 'email':
return <EmailPage />;
case 'developer': case 'developer':
return <DeveloperPage />; return <DeveloperPage />;
case 'discover': case 'discover':

44
ui/js/component/form.js
View file

@ -15,6 +15,8 @@ export let FormField = React.createClass({
propTypes: { propTypes: {
type: React.PropTypes.string.isRequired, type: React.PropTypes.string.isRequired,
prefix: React.PropTypes.string,
postfix: React.PropTypes.string,
hasError: React.PropTypes.bool hasError: React.PropTypes.bool
}, },
getInitialState: function() { getInitialState: function() {
@ -41,9 +43,6 @@ export let FormField = React.createClass({
errorMessage: text, errorMessage: text,
}); });
}, },
showRequiredError: function() {
this.showError(this._fieldRequiredText);
},
focus: function() { focus: function() {
this.refs.field.focus(); this.refs.field.focus();
}, },
@ -51,7 +50,7 @@ export let FormField = React.createClass({
if (this.props.type == 'checkbox') { if (this.props.type == 'checkbox') {
return this.refs.field.checked; return this.refs.field.checked;
} else if (this.props.type == 'file') { } else if (this.props.type == 'file') {
return this.refs.field.files.length && this.refs.field.files[0].path; return !!(this.refs.field.files.length && this.refs.field.files[0].path);
} else { } else {
return this.refs.field.value; return this.refs.field.value;
} }
@ -69,6 +68,9 @@ export let FormField = React.createClass({
delete otherProps.type; delete otherProps.type;
delete otherProps.label; delete otherProps.label;
delete otherProps.hasError; delete otherProps.hasError;
delete otherProps.className;
delete otherProps.postfix;
delete otherProps.prefix;
const element = <this._element id={elementId} type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder} const element = <this._element id={elementId} type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder}
className={'form-field__input form-field__input-' + this.props.type + ' ' + (this.props.className || '') + (isError ? 'form-field__input--error' : '')} className={'form-field__input form-field__input-' + this.props.type + ' ' + (this.props.className || '') + (isError ? 'form-field__input--error' : '')}
@ -77,35 +79,25 @@ export let FormField = React.createClass({
</this._element>; </this._element>;
return <div className="form-field"> return <div className="form-field">
{ this.props.prefix ? <span className="form-field__prefix">{this.props.prefix}</span> : '' }
{ renderElementInsideLabel ? { renderElementInsideLabel ?
<label htmlFor={elementId} className={"form-field__label " + (isError ? 'form-field__label--error' : '')}> <label htmlFor={elementId} className={"form-field__label " + (isError ? 'form-field__label--error' : '')}>
{element} {element}
{this.props.label} {this.props.label}
</label> : element } </label> :
{ isError ? <div className="form-field__error">{this.state.errorMessage}</div> : '' } element }
{ this.props.postfix ? <span className="form-field__postfix">{this.props.postfix}</span> : '' }
{ isError && this.state.errorMessage ? <div className="form-field__error">{this.state.errorMessage}</div> : '' }
</div> </div>
return (
this.props.row ?
<div className="form-row">{field}</div> :
field
);
} }
}) })
export let FormRow = React.createClass({ export let FormRow = React.createClass({
_fieldRequiredText: 'This field is required',
propTypes: { propTypes: {
label: React.PropTypes.string, label: React.PropTypes.string,
// helper: React.PropTypes.html, // helper: React.PropTypes.html,
}, },
getValue: function() {
if (this.props.type == 'checkbox') {
return this.refs.field.checked;
} else if (this.props.type == 'file') {
return this.refs.field.files[0].path;
} else {
return this.refs.field.value;
}
},
getInitialState: function() { getInitialState: function() {
return { return {
isError: false, isError: false,
@ -118,12 +110,24 @@ export let FormRow = React.createClass({
errorMessage: text, errorMessage: text,
}); });
}, },
showRequiredError: function() {
this.showError(this._fieldRequiredText);
},
clearError: function(text) {
this.setState({
isError: false,
errorMessage: ''
});
},
getValue: function() { getValue: function() {
return this.refs.field.getValue(); return this.refs.field.getValue();
}, },
getSelectedElement: function() { getSelectedElement: function() {
return this.refs.field.getSelectedElement(); return this.refs.field.getSelectedElement();
}, },
focus: function() {
this.refs.field.focus();
},
render: function() { render: function() {
const fieldProps = Object.assign({}, this.props), const fieldProps = Object.assign({}, this.props),
elementId = formFieldId(), elementId = formFieldId(),

36
ui/js/page/email.js
View file

@ -1,36 +0,0 @@
import React from 'react';
import lbryio from '../lbryio.js';
import {getLocal, setLocal} from '../utils.js';
import {FormField} from '../component/form.js'
import {Link} from '../component/link.js'
import rewards from '../rewards.js';
const EmailPage = React.createClass({
handleSubmit: function(event) {
if (event !== undefined) {
event.preventDefault();
}
if (!this.state.email) {
this._emailField.showRequiredError();
}
},
componentWillMount: function() {
this._getRewardType();
},
render: function() {
return (
<main>
<section className="card">
<h1>Verify your Email Address</h1>
<form onSubmit={this.handleSubmit}>
<section><label>Email <FormField ref={(field) => { this._emailField = field }} type="text" name="email" value={this.state.email} /></label></section>
<div><Link button="primary" label="Submit" onClick={this.handleSubmit} /></div>
</form>
</section>
</main>
);
}
});
export default EmailPage;

79
ui/js/page/publish.js
View file

@ -6,7 +6,7 @@ import {Link} from '../component/link.js';
import Modal from '../component/modal.js'; import Modal from '../component/modal.js';
var PublishPage = React.createClass({ var PublishPage = React.createClass({
_requiredFields: ['name', 'bid', 'meta_title'], _requiredFields: ['meta_title', 'name', 'bid'],
_updateChannelList: function(channel) { _updateChannelList: function(channel) {
// Calls API to update displayed list of channels. If a channel name is provided, will select // Calls API to update displayed list of channels. If a channel name is provided, will select
@ -27,19 +27,23 @@ var PublishPage = React.createClass({
submitting: true, submitting: true,
}); });
var checkFields = this._requiredFields.slice(); let checkFields = this._requiredFields;
if (!this.state.myClaimExists) { if (!this.state.myClaimExists) {
checkFields.push('file'); checkFields.unshift('file');
} }
var missingFieldFound = false; let missingFieldFound = false;
for (let fieldName of checkFields) { for (let fieldName of checkFields) {
var field = this.refs[fieldName]; const field = this.refs[fieldName];
if (field.getValue() === '') { if (field) {
field.showRequiredError(); if (field.getValue() === '' || field.getValue() === false) {
if (!missingFieldFound) { field.showRequiredError();
field.focus(); if (!missingFieldFound) {
missingFieldFound = true; field.focus();
missingFieldFound = true;
}
} else {
field.clearError();
} }
} }
} }
@ -281,6 +285,8 @@ var PublishPage = React.createClass({
if (newChannelName.length > 1 && !lbry.nameIsValid(newChannelName.substr(1), false)) { if (newChannelName.length > 1 && !lbry.nameIsValid(newChannelName.substr(1), false)) {
this.refs.newChannelName.showError('LBRY channel names must contain only letters, numbers and dashes.'); this.refs.newChannelName.showError('LBRY channel names must contain only letters, numbers and dashes.');
return; return;
} else {
this.refs.newChannelName.clearError()
} }
this.setState({ this.setState({
@ -351,17 +357,24 @@ var PublishPage = React.createClass({
} else if (this.state.myClaimExists) { } else if (this.state.myClaimExists) {
return "You have already used this URL. Publishing to it again will update your previous publish." return "You have already used this URL. Publishing to it again will update your previous publish."
} else if (this.state.topClaimValue) { } else if (this.state.topClaimValue) {
return <span>A deposit of at least <strong>{this.state.topClaimValue}</strong> {this.state.topClaimValue == 1 ? 'credit' : 'credits'} return <span>A deposit of at least <strong>{this.state.topClaimValue}</strong> {this.state.topClaimValue == 1 ? 'credit ' : 'credits '}
is required to win <strong>{this.state.name}</strong>. However, you can still get a perminent URL for any amount.</span> is required to win <strong>{this.state.name}</strong>. However, you can still get a perminent URL for any amount.</span>
} else { } else {
return ''; return '';
} }
}, },
closeModal: function() {
this.setState({
modal: null,
});
},
render: function() { render: function() {
if (this.state.channels === null) { if (this.state.channels === null) {
return null; return null;
} }
const lbcInputHelp = "This LBC remains yours and the deposit can be undone at any time."
return ( return (
<main ref="page"> <main ref="page">
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
@ -377,10 +390,17 @@ var PublishPage = React.createClass({
helper={this.state.myClaimExists ? "If you don't choose a file, the file from your existing claim will be used." : null}/> helper={this.state.myClaimExists ? "If you don't choose a file, the file from your existing claim will be used." : null}/>
</div> </div>
{ !this.state.hasFile ? '' : { !this.state.hasFile ? '' :
<div>
<div className="card__content">
<FormRow label="Title" type="text" ref="meta_title" name="title" placeholder="UFOs Are Real" />
</div>
<div className="card__content"> <div className="card__content">
<FormRow label="Title" type="text" ref="meta_title" name="title" placeholder="Me Not Being A Loser" />
<FormRow type="text" label="Thumbnail URL" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" /> <FormRow type="text" label="Thumbnail URL" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" />
</div>
<div className="card__content">
<FormRow label="Description" type="textarea" ref="meta_description" name="description" placeholder="Description of your content" /> <FormRow label="Description" type="textarea" ref="meta_description" name="description" placeholder="Description of your content" />
</div>
<div className="card__content">
<FormRow label="Language" type="select" defaultValue="en" ref="meta_language" name="language"> <FormRow label="Language" type="select" defaultValue="en" ref="meta_language" name="language">
<option value="en">English</option> <option value="en">English</option>
<option value="zh">Chinese</option> <option value="zh">Chinese</option>
@ -390,12 +410,15 @@ var PublishPage = React.createClass({
<option value="ru">Russian</option> <option value="ru">Russian</option>
<option value="es">Spanish</option> <option value="es">Spanish</option>
</FormRow> </FormRow>
</div>
<div className="card__content">
<FormRow type="select" label="Maturity" defaultValue="en" ref="meta_nsfw" name="nsfw"> <FormRow type="select" label="Maturity" defaultValue="en" ref="meta_nsfw" name="nsfw">
<option value=""></option> <option value=""></option>
<option value="0">All Ages</option> <option value="0">All Ages</option>
<option value="1">Adults Only</option> <option value="1">Adults Only</option>
</FormRow> </FormRow>
</div> } </div>
</div>}
</section> </section>
<section className="card"> <section className="card">
@ -409,27 +432,28 @@ var PublishPage = React.createClass({
<div className="form-row__label-row"> <div className="form-row__label-row">
<label className="form-row__label">Price</label> <label className="form-row__label">Price</label>
</div> </div>
<FormRow label="Free" type="radio" name="isFree" value="1" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> <FormRow label="Free" type="radio" name="isFree" value="1" onChange={ () => { this.handleFeePrefChange(false) } } defaultChecked={!this.state.isFee} />
<FormField type="radio" name="isFree" label={!this.state.isFee ? 'Choose price...' : 'Price ' } <FormField type="radio" name="isFree" label={!this.state.isFee ? 'Choose price...' : 'Price ' }
onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} /> onChange={ () => { this.handleFeePrefChange(true) } } defaultChecked={this.state.isFee} />
<span className={!this.state.isFee ? 'hidden' : ''}> <span className={!this.state.isFee ? 'hidden' : ''}>
<FormField type="number" step="0.01" placeholder="1.00" onChange={this.handleFeeAmountChange} /> <FormField type="select" onChange={this.handleFeeCurrencyChange}> <FormField type="number" className="form-field__input--inline" step="0.01" placeholder="1.00" onChange={this.handleFeeAmountChange} /> <FormField type="select" onChange={this.handleFeeCurrencyChange}>
<option value="USD">US Dollars</option> <option value="USD">US Dollars</option>
<option value="LBC">LBRY credits</option> <option value="LBC">LBRY credits</option>
</FormField> </FormField>
</span> </span>
{ this.state.isFee ? { this.state.isFee ?
<div className="help"> <div className="form-field__helper">
If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase. If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
</div> : '' } </div> : '' }
<FormRow label="License" type="select" ref="meta_license" name="license" onChange={this.handleLicenseChange}> <FormRow label="License" type="select" ref="meta_license" name="license" onChange={this.handleLicenseChange}>
<option></option>
<option>Public Domain</option>
<option data-url="https://creativecommons.org/licenses/by/4.0/legalcode">Creative Commons Attribution 4.0 International</option> <option data-url="https://creativecommons.org/licenses/by/4.0/legalcode">Creative Commons Attribution 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode">Creative Commons Attribution-ShareAlike 4.0 International</option> <option data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode">Creative Commons Attribution-ShareAlike 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode">Creative Commons Attribution-NoDerivatives 4.0 International</option> <option data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode">Creative Commons Attribution-NoDerivatives 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode">Creative Commons Attribution-NonCommercial 4.0 International</option> <option data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode">Creative Commons Attribution-NonCommercial 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option> <option data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option> <option data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
<option>Public Domain</option>
<option data-license-type="copyright" {... this.state.copyrightChosen ? {value: this.state.copyrightNotice} : {}}>Copyrighted...</option> <option data-license-type="copyright" {... this.state.copyrightChosen ? {value: this.state.copyrightNotice} : {}}>Copyrighted...</option>
<option data-license-type="other" {... this.state.otherLicenseChosen ? {value: this.state.otherLicenseDescription} : {}}>Other...</option> <option data-license-type="other" {... this.state.otherLicenseChosen ? {value: this.state.otherLicenseDescription} : {}}>Other...</option>
</FormRow> </FormRow>
@ -465,7 +489,13 @@ var PublishPage = React.createClass({
<div className="card__content"> <div className="card__content">
<FormRow label="Name" type="text" onChange={this.handleNewChannelNameChange} ref={newChannelName => { this.refs.newChannelName = newChannelName }} <FormRow label="Name" type="text" onChange={this.handleNewChannelNameChange} ref={newChannelName => { this.refs.newChannelName = newChannelName }}
value={this.state.newChannelName} /> value={this.state.newChannelName} />
<FormRow label="Deposit" step="0.01" defaultValue="0.01" type="number" onChange={this.handleNewChannelBidChange} value={this.state.newChannelBid} /> <FormRow label="Deposit"
postfix="LBC"
step="0.01"
type="number"
helper={lbcInputHelp}
onChange={this.handleNewChannelBidChange}
value={this.state.newChannelBid ? this.state.newChannelBid : '10'} />
<div className="form-row-submit"> <div className="form-row-submit">
<Link button="primary" label={!this.state.creatingChannel ? 'Creating identity' : 'Creating identity...'} onClick={this.handleCreateChannelClick} disabled={this.state.creatingChannel} /> <Link button="primary" label={!this.state.creatingChannel ? 'Creating identity' : 'Creating identity...'} onClick={this.handleCreateChannelClick} disabled={this.state.creatingChannel} />
</div> </div>
@ -477,11 +507,11 @@ var PublishPage = React.createClass({
<section className="card"> <section className="card">
<div className="card__title-primary"> <div className="card__title-primary">
<h4>Address</h4> <h4>Address</h4>
<div className="card__subtitle">Where should this content permanently reside?</div> <div className="card__subtitle">Where should this content permanently reside? <Link label="Read more" href="https://lbry.io/faq/naming" />.</div>
</div> </div>
<div className="card__content"> <div className="card__content">
<FormRow label="lbry://" type="text" ref="name" placeholder="lbry://myname" value={this.state.rawName} onChange={this.handleNameChange} <FormRow prefix="lbry://" type="text" ref="name" placeholder="myname" value={this.state.rawName} onChange={this.handleNameChange}
helper={(<div>Select a URL for this publish. <Link label="Read more" href="https://lbry.io/faq/naming" />.</div>)} /> helper={this.getNameBidHelpText()} />
</div> </div>
{ this.state.rawName ? { this.state.rawName ?
<div className="card__content"> <div className="card__content">
@ -489,10 +519,11 @@ var PublishPage = React.createClass({
type="number" type="number"
step="0.01" step="0.01"
label="Deposit" label="Deposit"
postfix="LBC"
onChange={this.handleBidChange} onChange={this.handleBidChange}
value={this.state.bid} value={this.state.bid ? this.state.bid : '1'}
placeholder={this.state.nameResolved ? this.state.topClaimValue + 10 : 100} placeholder={this.state.nameResolved ? this.state.topClaimValue + 10 : 100}
helper={this.getNameBidHelpText()} /> helper={lbcInputHelp} />
</div> : '' } </div> : '' }
</section> </section>

116
ui/js/page/settings.js
View file

@ -3,36 +3,51 @@ import {FormField, FormRow} from '../component/form.js';
import lbry from '../lbry.js'; import lbry from '../lbry.js';
var SettingsPage = React.createClass({ var SettingsPage = React.createClass({
_onSettingSaveSuccess: function() {
// This is bad.
// document.dispatchEvent(new CustomEvent('globalNotice', {
// detail: {
// message: "Settings saved",
// },
// }))
},
setDaemonSetting: function(name, value) {
lbry.setDaemonSetting(name, value, this._onSettingSaveSuccess)
},
setClientSetting: function(name, value) {
lbry.setClientSetting(name, value)
this._onSettingSaveSuccess()
},
onRunOnStartChange: function (event) { onRunOnStartChange: function (event) {
lbry.setDaemonSetting('run_on_startup', event.target.checked); this.setDaemonSetting('run_on_startup', event.target.checked);
}, },
onShareDataChange: function (event) { onShareDataChange: function (event) {
lbry.setDaemonSetting('share_debug_info', event.target.checked); this.setDaemonSetting('share_debug_info', event.target.checked);
}, },
onDownloadDirChange: function(event) { onDownloadDirChange: function(event) {
lbry.setDaemonSetting('download_directory', event.target.value); this.setDaemonSetting('download_directory', event.target.value);
}, },
onMaxUploadPrefChange: function(isLimited) { onMaxUploadPrefChange: function(isLimited) {
if (!isLimited) { if (!isLimited) {
lbry.setDaemonSetting('max_upload', 0.0); this.setDaemonSetting('max_upload', 0.0);
} }
this.setState({ this.setState({
isMaxUpload: isLimited isMaxUpload: isLimited
}); });
}, },
onMaxUploadFieldChange: function(event) { onMaxUploadFieldChange: function(event) {
lbry.setDaemonSetting('max_upload', Number(event.target.value)); this.setDaemonSetting('max_upload', Number(event.target.value));
}, },
onMaxDownloadPrefChange: function(isLimited) { onMaxDownloadPrefChange: function(isLimited) {
if (!isLimited) { if (!isLimited) {
lbry.setDaemonSetting('max_download', 0.0); this.setDaemonSetting('max_download', 0.0);
} }
this.setState({ this.setState({
isMaxDownload: isLimited isMaxDownload: isLimited
}); });
}, },
onMaxDownloadFieldChange: function(event) { onMaxDownloadFieldChange: function(event) {
lbry.setDaemonSetting('max_download', Number(event.target.value)); this.setDaemonSetting('max_download', Number(event.target.value));
}, },
getInitialState: function() { getInitialState: function() {
return { return {
@ -57,7 +72,7 @@ var SettingsPage = React.createClass({
lbry.setClientSetting('showNsfw', event.target.checked); lbry.setClientSetting('showNsfw', event.target.checked);
}, },
onShowUnavailableChange: function(event) { onShowUnavailableChange: function(event) {
lbry.setClientSetting('showUnavailable', event.target.checked);
}, },
render: function() { render: function() {
if (!this.state.daemonSettings) { if (!this.state.daemonSettings) {
@ -94,38 +109,60 @@ var SettingsPage = React.createClass({
<h3>Bandwidth Limits</h3> <h3>Bandwidth Limits</h3>
</div> </div>
<div className="card__content"> <div className="card__content">
<h4>Max Upload</h4> <div className="form-row__label-row"><div className="form-field__label">Max Upload</div></div>
<FormRow type="radio" <FormRow type="radio"
name="max_upload_pref" name="max_upload_pref"
onChange={this.onMaxUploadPrefChange.bind(this, false)} onChange={this.onMaxUploadPrefChange.bind(this, false)}
defaultChecked={!this.state.isMaxUpload} defaultChecked={!this.state.isMaxUpload}
label="Unlimited" /> label="Unlimited" />
<FormRow type="radio" <div className="form-row">
name="max_upload_pref" <FormField type="radio"
onChange={this.onMaxUploadPrefChange.bind(this, true)} name="max_upload_pref"
defaultChecked={this.state.isMaxUpload} onChange={this.onMaxUploadPrefChange.bind(this, true)}
label={ this.state.isMaxUpload ? 'Up to' : 'Choose limit...' } /> defaultChecked={this.state.isMaxUpload}
{ this.state.isMaxUpload ? label={ this.state.isMaxUpload ? 'Up to' : 'Choose limit...' } />
<FormField type="number" { this.state.isMaxUpload ?
min="0" <FormField type="number"
step=".5" min="0"
label="MB/s" step=".5"
onChange={this.onMaxUploadFieldChange} defaultValue={this.state.daemonSettings.max_upload}
/> : '' placeholder="10"
} className="form-field__input--inline"
onChange={this.onMaxUploadFieldChange}
/>
: ''
}
{ this.state.isMaxUpload ? <span className="form-field__label">MB/s</span> : '' }
</div>
</div> </div>
<div className="card__content"> <div className="card__content">
<h4>Max Download</h4> <div className="form-row__label-row"><div className="form-field__label">Max Download</div></div>
<FormField label="Unlimited" <FormRow label="Unlimited"
type="radio" type="radio"
name="max_download_pref" name="max_download_pref"
onChange={this.onMaxDownloadPrefChange.bind(this, false)} onChange={this.onMaxDownloadPrefChange.bind(this, false)}
defaultChecked={!this.state.isMaxDownload} /> defaultChecked={!this.state.isMaxDownload} />
{ /* <div className="form-row">
<label style={settingsRadioOptionStyles}> <FormField type="radio"
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' } name="max_download_pref"
<span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.daemonSettings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span> onChange={this.onMaxDownloadPrefChange.bind(this, true)}
</label> */ } defaultChecked={this.state.isMaxDownload}
label={ this.state.isMaxDownload ? 'Up to' : 'Choose limit...' } />
{ this.state.isMaxDownload ?
<FormField type="number"
min="0"
step=".5"
defaultValue={this.state.daemonSettings.max_download}
placeholder="10"
className="form-field__input--inline"
onChange={this.onMaxDownloadFieldChange}
/>
: ''
}
{ this.state.isMaxDownload ? <span className="form-field__label">MB/s</span> : '' }
</div>
</div> </div>
</section> </section>
<section className="card"> <section className="card">
@ -160,25 +197,4 @@ var SettingsPage = React.createClass({
} }
}); });
/*
<section className="card">
<h3>Search</h3>
<div className="form-row">
<div className="help">
Would you like search results to include items that are not currently available for download?
</div>
<label style={settingsCheckBoxOptionStyles}>
<input type="checkbox" onChange={this.onShowUnavailableChange} defaultChecked={this.state.showUnavailable} /> Show unavailable content in search results
</label>
</div>
</section>
<section className="card">
<h3>Share Diagnostic Data</h3>
<label style={settingsCheckBoxOptionStyles}>
<input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.daemonSettings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage
</label>
</section>
*/
export default SettingsPage; export default SettingsPage;

2
ui/js/page/wallet.js
View file

@ -152,7 +152,7 @@ var SendToAddressSection = React.createClass({
<h3>Send Credits</h3> <h3>Send Credits</h3>
</div> </div>
<div className="card__content"> <div className="card__content">
<FormRow label="Amount" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} /> <FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
</div> </div>
<div className="card__content"> <div className="card__content">
<FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} /> <FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />

7
ui/scss/component/_file-tile.scss
View file

@ -1,16 +1,19 @@
@import "../global"; @import "../global";
.file-tile__row { .file-tile__row {
height: $spacing-vertical * 7;
.credit-amount { .credit-amount {
float: right; float: right;
} }
//Hack! Remove below!
.card__title-primary {
margin-top: $spacing-vertical * 2/3;
}
} }
.file-tile__thumbnail { .file-tile__thumbnail {
max-width: 100%; max-width: 100%;
max-height: $spacing-vertical * 7; max-height: $spacing-vertical * 7;
vertical-align: middle;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

20
ui/scss/component/_form-field.scss
View file

@ -8,10 +8,10 @@ $width-input-border: 2px;
} }
.form-row__label-row { .form-row__label-row {
margin-top: $spacing-vertical * 2/3; margin-top: $spacing-vertical * 5/6;
margin-bottom: $spacing-vertical * 1/3; margin-bottom: $spacing-vertical * 1/6;
line-height: 1; line-height: 1;
font-size: 0.9em; font-size: 0.9 * $font-size;
} }
.form-row__label-row--prefix { .form-row__label-row--prefix {
float: left; float: left;
@ -72,6 +72,13 @@ $width-input-border: 2px;
&.form-field__input--error { &.form-field__input--error {
border-color: $color-error; border-color: $color-error;
} }
&.form-field__input--inline {
padding-top: 0;
padding-bottom: 0;
border-bottom-width: 1px;
margin-left: 8px;
margin-right: 8px;
}
} }
textarea:focus, textarea:focus,
@ -104,6 +111,13 @@ $width-input-border: 2px;
width: 330px; width: 330px;
} }
.form-field__prefix {
margin-right: 4px;
}
.form-field__postfix {
margin-left: 4px;
}
.form-field__input-number { .form-field__input-number {
width: 70px; width: 70px;
text-align: right; text-align: right;