LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-02 02:05:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

clean up help, report, and settings

Browse source
This commit is contained in:
Jeremy Kauffman 2016-08-07 18:45:26 -04:00 • committed by Alex Liebowitz
parent 7b18774e81
commit 0d2775138a
6 changed files with 72 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
js/page/help.js
View file

@ -7,36 +7,40 @@ var HelpPage = React.createClass({
render: function() { render: function() {
return ( return (
<main className="page"> <main className="page">
<h3>Read the FAQ</h3> <section className="card">
<p>Our FAQ answers many common questions.</p> <h3>Read the FAQ</h3>
<p><Link href="https://lbry.io/faq" label="Read the FAQ" icon="icon-help" button="alt"/></p> <p>Our FAQ answers many common questions.</p>
<h3>Get Live Help</h3> <p><Link href="https://lbry.io/faq" label="Read the FAQ" icon="icon-question" button="alt"/></p>
<p> </section>
Live help is available most hours in the #help channel of our Slack chat room. <section className="card">
</p> <h3>Get Live Help</h3>
<p> <p>
<Link button="alt" label="Join Our Slack" icon="icon-slack" href="https://slack.lbry.io" /> Live help is available most hours in the #help channel of our Slack chat room.
</p> </p>
<h3>Common Issues</h3> <p>
<h4>Nothing seems to start downloading.</h4> <Link button="alt" label="Join Our Slack" icon="icon-slack" href="https://slack.lbry.io" />
<p>If you can't download anything, including 'wonderfullife', try forwarding ports 4444 and 3333 on your firewall or router. If you can access 'wonderfullife' but not other content, it's possible the content is not longer hosted on the network.</p> </p>
</section>
<section className="card">
<h3>Common Issues</h3>
<h4>Nothing seems to start downloading.</h4>
<p>If you can't download anything, including 'wonderfullife', try forwarding ports 4444 and 3333 on your firewall or router. If you can access 'wonderfullife' but not other content, it's possible the content is not longer hosted on the network.</p>
<h4>Videos have trouble playing.</h4> <h4>Videos have trouble playing.</h4>
<p>Sometimes your video player will start the file while it's still empty. Try reloading the page after a few seconds and it may work. You should also see the file appear in your downloads folder (configured in <a href="/?settings">settings</a>).</p> <p>Sometimes your video player will start the file while it's still empty. Try reloading the page after a few seconds and it may work. You should also see the file appear in your downloads folder (configured in <a href="/?settings">settings</a>).</p>
<p>A real fix for this is underway!</p> <p>A real fix for this is underway!</p>
<h4>How do I turn LBRY off?</h4> <h4>How do I turn LBRY off?</h4>
<p>If you're on OS X you can find the app running in the notification area at the top right of your screen. Click the LBRY icon and choose <code>Quit</code>.</p> <p>If you're on OS X you can find the app running in the notification area at the top right of your screen. Click the LBRY icon and choose <code>Quit</code>.</p>
<p>On Linux, you'll find a close button in the menu at the top right of LBRY.</p> <p>On Linux, you'll find a close button in the menu at the top right of LBRY.</p>
<p>If you're running LBRY from the command line, you may also close the app with the command <code>stop-lbrynet-daemon</code></p> <p>If you're running LBRY from the command line, you may also close the app with the command <code>stop-lbrynet-daemon</code></p>
</section>
<h3>None of this applies to me, or it didn't work.</h3> <section className="card">
<p>Please <Link href="/?report" label="send us a bug report" />. Thanks!</p> <h3>None of this applies to me, or it didn't work.</h3>
<section> <p>Please <Link href="/?report" label="send us a bug report" />. Thanks!</p>
<ReturnLink />
</section> </section>
</main> </main>
); );

21
js/page/report.js
View file

@ -13,6 +13,9 @@ var ReportPage = React.createClass({
this._messageArea.value = ''; this._messageArea.value = '';
} }
}, },
componentDidMount: function() {
document.title = "Report an Issue";
},
getInitialState: function() { getInitialState: function() {
return { return {
submitting: false, submitting: false,
@ -21,17 +24,15 @@ var ReportPage = React.createClass({
render: function() { render: function() {
return ( return (
<main className="page"> <main className="page">
<h1>Report an Issue</h1> <section className="card">
<section> <h3>Report an Issue</h3>
<p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p> <p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>
<textarea ref={(t) => this._messageArea = t} cols="50" rows="10" name="message" type="text"/> <textarea ref={(t) => this._messageArea = t} cols="50" rows="10" name="message" type="text"/>
<div><button onClick={this.submitMessage} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button></div> <div><button onClick={this.submitMessage} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button></div>
</section> </section>
<section> <section className="card">
Developers, feel free to instead <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>. <h3>Developer?</h3>
</section> You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
<section>
<ReturnLink href="/?help" label="Return to Help"/>
</section> </section>
</main> </main>
); );

27
js/page/settings.js
View file

@ -76,19 +76,20 @@ var SettingsPage = React.createClass({
} }
return ( return (
<main className="page"> <main>
<section> <section className="card">
<h4>Run on startup</h4> <h3>Run on startup</h3>
<label style={settingsCheckBoxOptionStyles}> <label style={settingsCheckBoxOptionStyles}>
<input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={this.state.settings.run_on_startup} /> Run LBRY automatically when I start my computer <input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={this.state.settings.run_on_startup} /> Run LBRY automatically when I start my computer
</label> </label>
</section> </section>
<section> <section className="card">
<h4>Download directory</h4> <h3>Download directory</h3>
<div className="help">Where would you like the files you download from LBRY to be saved?</div> <div className="help">Where would you like the files you download from LBRY to be saved?</div>
<input style={downloadDirectoryFieldStyles} type="text" name="download_directory" defaultValue={this.state.settings.download_directory} onChange={this.onDownloadDirChange}/> <input style={downloadDirectoryFieldStyles} type="text" name="download_directory" defaultValue={this.state.settings.download_directory} onChange={this.onDownloadDirChange}/>
</section> </section>
<section> <section className="card">
<h3>Bandwidth Limits</h3>
<h4>Max Upload</h4> <h4>Max Upload</h4>
<label style={settingsRadioOptionStyles}> <label style={settingsRadioOptionStyles}>
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
@ -97,8 +98,6 @@ var SettingsPage = React.createClass({
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' } <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
<span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span> <span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
</label> </label>
</section>
<section>
<h4>Max Download</h4> <h4>Max Download</h4>
<label style={settingsRadioOptionStyles}> <label style={settingsRadioOptionStyles}>
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited <input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
@ -108,20 +107,12 @@ var SettingsPage = React.createClass({
<span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span> <span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
</label> </label>
</section> </section>
<section> <section className="card">
<h4>Share diagnostic data</h4> <h3>Share diagnostic data</h3>
<label style={settingsCheckBoxOptionStyles}> <label style={settingsCheckBoxOptionStyles}>
<input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.settings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage <input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.settings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage
</label> </label>
</section> </section>
<section>
<h4>Claim invite code</h4>
<Link href="?claim" label="Claim a LBRY beta invite code"/>
</section>
<section>
<ReturnLink />
</section>
</main> </main>
); );
} }

4
js/page/wallet.js
View file

@ -103,6 +103,10 @@ var WalletPage = React.createClass({
<main className="page"> <main className="page">
<NewAddressSection /> <NewAddressSection />
<SendToAddressSection /> <SendToAddressSection />
<section>
<h4>Claim invite code</h4>
<Link href="?claim" label="Claim a LBRY beta invite code"/>
</section>
<section> <section>
<ReturnLink /> <ReturnLink />
</section> </section>

17
scss/_canvas.scss
View file

@ -64,13 +64,16 @@ body
height: $header-height; height: $header-height;
padding: $spacing-vertical / 2; padding: $spacing-vertical / 2;
h1 { font-size: 1.8em; line-height: $header-height; } h1 { font-size: 1.8em; line-height: $header-height; }
margin-bottom: $spacing-vertical;
} }
#main-content #main-content
{ {
background: $color-canvas; background: $color-canvas;
min-height: 100vh; min-height: 100vh;
main
{
padding: $spacing-vertical;
}
} }
$header-icon-size: 1.5em; $header-icon-size: 1.5em;
@ -89,13 +92,23 @@ $header-icon-size: 1.5em;
padding: 0 6px 0 18px; padding: 0 6px 0 18px;
} }
.page { .card {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 800px; max-width: 800px;
padding: $spacing-vertical; padding: $spacing-vertical;
background: $color-bg; background: $color-bg;
h3, h4
{
margin-bottom: $spacing-vertical / 2;
margin-top: $spacing-vertical;
&:first-child
{
margin-top: 0;
}
}
} }
.full-screen .full-screen
{ {
width: 100%; width: 100%;

4
scss/_gui.scss
View file

@ -59,6 +59,10 @@ label {
p p
{ {
margin-bottom: 0.8em; margin-bottom: 0.8em;
&:last-child
{
margin-bottom: 0;
}
} }
textarea { textarea {