First sorta-working draft of Settings page

- Includes all fields except some I need to ask Jack about (layout details)
  - Loads current settings and saves one (run_on_startup)
  - Also made success callback in lbry.call() optional (don't need it for set_settings)
This commit is contained in:
Alex Liebowitz 2016-04-03 08:45:33 -04:00
parent 485c7fafbe
commit 790124d25a
4 changed files with 128 additions and 7 deletions

1
dist/index.html vendored
View file

@ -20,6 +20,7 @@
<div id="canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.7.4/polyfill.js"></script>
<script src="./js/lbry.js"></script>
<script src="./js/gui.js"></script>
</body>

117
js/gui.js
View file

@ -362,23 +362,128 @@ var HomePage = React.createClass({
});
var settingsPageStyles = {
paddingTop: '80px'
paddingTop: '60px',
fontSize: '16px',
}, settingsPageHeaderStyles = {
textAlign: 'center'
}, settingsBottomButtonsStyles = {
textAlign: 'center'
}, settingsSectionStyles = {
paddingBottom: '15px',
}, settingsQuestionStyles = {
display: 'block',
}, settingsRadioOptionStyles = {
display: 'block',
marginLeft: '13px'
}, settingsCheckBoxOptionStyles = {
display: 'block',
marginLeft: '13px'
}, settingsNumberFieldStyles = {
width: '40px'
};
var SettingsPage = React.createClass({
storeSetting: function(setting, val) {
var settings = Object.assign({}, this.state.settings);
settings[setting] = val;
this.setState({
'settings': settings
});
},
onRunOnStartChange: function (event) {
this.storeSetting('run_on_startup', event.target.checked);
},
onDownloadDirPrefChange: function(useCustom) {
this.setState({
isCustomDownloadDirectory: useCustom
});
},
onMaxUploadPrefChange: function(isLimited) {
this.setState({
isMaxUpload: isLimited
});
},
onMaxDownloadPrefChange: function(isLimited) {
this.setState({
isMaxDownload: isLimited
});
},
getInitialState: function() {
return {
settings: null,
isCustomDownloadDirectory: false,
isBandwidthCap: false
}
},
componentWillMount: function() {
lbry.getSettings(function(settings) {
this.setState({
settings: settings
});
}.bind(this));
},
onDone: function() {
lbry.setSettings(this.state.settings);
this.props.closeCallback();
},
render: function() {
if (!this.state.settings) { // If the settings aren't loaded yet, don't render anything.
return null;
}
return (
<div style={settingsPageStyles}>
<h3 style={settingsPageHeaderStyles}>Settings</h3>
<p>Lots of settings and stuff</p>
<p style={ {paddingTop: '100px', paddingBottom: '100px'} }>...</p> {/* Placeholder */}
<h1 style={settingsPageHeaderStyles}>Settings</h1>
<section style={settingsSectionStyles}>
<h4>Run on startup</h4>
<label style={settingsCheckBoxOptionStyles}>
<input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={false} /> Run LBRY automatically when I start my computer
</label>
</section>
<section style={settingsSectionStyles}>
<h4>Download directory</h4>
<span style={settingsQuestionStyles}>Where would you like files you download from LBRY to be saved?</span>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="download_dir_pref" defaultChecked={true} onChange={this.onDownloadDirPrefChange.bind(this, false)}/> My "Downloads" directory
</label>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="download_dir_pref" onChange={this.onDownloadDirPrefChange.bind(this, true)}/> Somewhere else
</label>
<label className={ this.state.isCustomDownloadDirectory ? '' : 'hidden'}>
Download directory: <input type="text" style={{width: '300px'}} defaultValue={this.state.settings['default_download_directory']}/>
</label>
</section>
<section style={settingsSectionStyles}>
<h4>Bandwidth limits</h4>
<span style={settingsQuestionStyles}>How much of your upload bandwidth may LBRY use?</span>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)}/> Unlimited
</label>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)}/> Choose limit...
</label>
<label className={ this.state.isMaxUpload ? '' : 'hidden'}>
Maximum upload rate <input type="number" min="0" step=".5" defaultValue={this.state.settings['max_upload']} style={settingsNumberFieldStyles}/> MB/s
</label>
<span style={settingsQuestionStyles}>How much of your download bandwidth may LBRY use?</span>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)}/> Unlimited
</label>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)}/> Choose limit...
</label>
<label className={ this.state.isMaxDownload ? '' : 'hidden'}>
Maximum download rate <input type="number" min="0" step=".5" defaultValue={this.state.settings['max_download']} style={settingsNumberFieldStyles}/> MB/s
</label>
</section>
<section style={settingsSectionStyles}>
<h4>Default payment rules</h4>
...
</section>
<div style={settingsBottomButtonsStyles}>
<Link href="#" onClick={this.props.onExit} label="Done" button="primary" icon="icon-check"/>
<Link href="#" onClick={this.onDone} label="Done" button="primary" icon="icon-check"/>
</div>
</div>
);
@ -406,7 +511,7 @@ var App = React.createClass({
if (this.state.viewingPage == 'home') {
var content = <HomePage/>;
} else if (this.state.viewingPage == 'settings') {
var content = <SettingsPage onExit={this.handlePageChosen.bind(this, 'home')}/>;
var content = <SettingsPage closeCallback={this.handlePageChosen.bind(this, 'home')}/>;
}
return (
<div style={appStyles}>

View file

@ -15,7 +15,10 @@ lbry.call = function (method, params, callback, connectFailedCallback)
if (response.error) {
throw new Error('Call to method ' + method + ' failed with message: ' + response.error);
}
callback(response.result);
if (callback) {
callback(response.result);
}
});
if (connectFailedCallback) {
@ -66,6 +69,14 @@ lbry.daemonRunningStatus = function (callback) {
});
};
lbry.getSettings = function(callback) {
lbry.call('get_settings', {}, callback);
};
lbry.setSettings = function(settings, callback) {
lbry.call('set_settings', settings, callback);
};
lbry.getBalance = function(callback)
{
lbry.call("get_balance", {}, callback);

View file

@ -33,6 +33,10 @@ sub { top: 0.4em; }
}
}
.hidden {
display: none;
}
input[type="search"]
{
border: 0 none;