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

wallet code + some finer touches on header + nav

Browse source
This commit is contained in:
Jeremy Kauffman 2016-08-07 20:20:14 -04:00 • committed by Alex Liebowitz
parent 0d2775138a
commit a36f0f2691
13 changed files with 132 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/app.js
View file

@ -9,7 +9,7 @@ var App = React.createClass({
if (param && ['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
viewingPage = param;
}
return {
viewingPage: viewingPage ? viewingPage : 'home',
drawerOpen: drawerOpenRaw !== null ? JSON.parse(drawerOpenRaw) : true,

4
js/component/common.js
View file

@ -61,6 +61,10 @@ var creditAmountStyle = {
color: '#aaa',
};
var CurrencySymbol = React.createClass({
render: function() { return <span>LBC</span>; }
});
var CreditAmount = React.createClass({
propTypes: {
amount: React.PropTypes.number,

2
js/component/drawer.js
View file

@ -32,7 +32,7 @@ var Drawer = React.createClass({
<DrawerItem href='/?home' viewingPage={this.props.viewingPage} label="Discover" icon="icon-search" />
<DrawerItem href='/?publish' viewingPage={this.props.viewingPage} label="Publish" icon="icon-upload" />
<DrawerItem href='/?files' viewingPage={this.props.viewingPage} label="My Files" icon='icon-cloud-download' />
<DrawerItem href="/?wallet" viewingPage={this.props.viewingPage} label={ lbry.formatCredits(this.state.balance) } icon="icon-bank" />
<DrawerItem href="/?wallet" viewingPage={this.props.viewingPage} label="My Wallet" badge={lbry.formatCredits(this.state.balance) } icon="icon-bank" />
<DrawerItem href='/?settings' viewingPage={this.props.viewingPage} label="Settings" icon='icon-gear' />
<DrawerItem href='/?help' viewingPage={this.props.viewingPage} label="Help" icon='icon-question-circle' />
</nav>

16
js/component/header.js
View file

@ -1,7 +1,8 @@
var Header = React.createClass({
getInitialState: function() {
return {
title: "LBRY"
title: "LBRY",
isScrolled: false
};
},
componentWillMount: function() {
@ -12,10 +13,21 @@ var Header = React.createClass({
{ subtree: true, characterData: true, childList: true }
);
},
componentDidMount() {
document.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount() {
document.removeEventListener('scroll', this.handleScroll);
},
handleScroll() {
this.setState({
isScrolled: event.srcElement.body.scrollTop > 0
});
},
render: function() {
var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
return (
<header id="header">
<header id="header" className={this.state.isScrolled ? 'header-scrolled' : 'header-unscrolled'}>
<Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
{isLinux ? <Link href="/?start" icon="icon-close" className="close-lbry-link" /> : null}
<h1>{ this.state.title }</h1>

14
js/component/link.js
View file

@ -16,7 +16,8 @@ var Link = React.createClass({
<a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
title={this.props.title} onClick={this.handleClick}>
{this.props.icon ? icon : '' }
{this.props.label}
<span className="link-label">{this.props.label}</span>
{this.props.badge ? <span className="badge">{this.props.badge}</span> : '' }
</a>
);
}
@ -72,17 +73,6 @@ var ToolTipLink = React.createClass({
}
});
var ReturnLink = React.createClass({
render: function() {
return <div style={ { padding: '24px 0' } }><Link
href={this.props.href ? this.props.href : '/'}
icon="icon-chevron-left"
label={this.props.label ? this.props.label : 'Return'}
/></div>;
}
});
var DownloadLink = React.createClass({
propTypes: {
type: React.PropTypes.string,

42
js/page/claim_code.js
View file

@ -1,6 +1,4 @@
var claimCodePageStyle = {
textAlign: 'center',
}, claimCodeContentStyle = {
var claimCodeContentStyle = {
display: 'inline-block',
textAlign: 'left',
width: '600px',
@ -72,24 +70,26 @@ var ClaimCodePage = React.createClass({
},
render: function() {
return (
<main className="page" style={claimCodePageStyle}>
<h1>Claim your beta invitation code</h1>
<section style={claimCodeContentStyle}>
<p>Thanks for beta testing LBRY! Enter your invitation code and email address below to receive your initial
LBRY credits.</p>
<p>You will be added to our mailing list (if you're not already on it) and will be eligible for future rewards for beta testers.</p>
</section>
<section>
<form onSubmit={this.handleSubmit}>
<section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section>
<section><label style={claimCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
</form>
</section>
<section>
<Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
disabled={this.state.submitting} onClick={this.handleSubmit} />
<Link button="alt" label="Skip" disabled={this.state.submitting} onClick={this.handleSkip} />
</section>
<main>
<div className="card">
<h2>Claim your beta invitation code</h2>
<section style={claimCodeContentStyle}>
<p>Thanks for beta testing LBRY! Enter your invitation code and email address below to receive your initial
LBRY credits.</p>
<p>You will be added to our mailing list (if you're not already on it) and will be eligible for future rewards for beta testers.</p>
</section>
<section>
<form onSubmit={this.handleSubmit}>
<section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section>
<section><label style={claimCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
</form>
</section>
<section>
<Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
disabled={this.state.submitting} onClick={this.handleSubmit} />
<Link button="alt" label="Skip" disabled={this.state.submitting} onClick={this.handleSkip} />
</section>
</div>
</main>
);
}

3
js/page/my_files.js
View file

@ -191,9 +191,6 @@ var MyFilesPage = React.createClass({
<section>
{content}
</section>
<section>
<ReturnLink />
</section>
</main>
);
}

6
js/page/settings.js
View file

@ -78,13 +78,13 @@ var SettingsPage = React.createClass({
return (
<main>
<section className="card">
<h3>Run on startup</h3>
<h3>Run on Startup</h3>
<label style={settingsCheckBoxOptionStyles}>
<input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={this.state.settings.run_on_startup} /> Run LBRY automatically when I start my computer
</label>
</section>
<section className="card">
<h3>Download directory</h3>
<h3>Download Directory</h3>
<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}/>
</section>
@ -108,7 +108,7 @@ var SettingsPage = React.createClass({
</label>
</section>
<section className="card">
<h3>Share diagnostic data</h3>
<h3>Share Diagnostic Data</h3>
<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
</label>

3
js/page/show.js
View file

@ -142,9 +142,6 @@ var DetailPage = React.createClass({
return (
<main className="page">
<FormatsSection name={name} claimInfo={claimInfo} amount={amount} />
<section>
<ReturnLink />
</section>
</main>);
}
});

60
js/page/wallet.js
View file

@ -13,8 +13,8 @@ var NewAddressSection = React.createClass({
},
render: function() {
return (
<section>
<h1>Generate New Address</h1>
<section className="card">
<h3>Generate New Address</h3>
<section><input type="text" size="60" value={this.state.address}></input></section>
<Link button="primary" label="Generate" onClick={this.generateAddress} />
</section>
@ -80,35 +80,57 @@ var SendToAddressSection = React.createClass({
},
render: function() {
return (
<section>
<h1>Send Credits</h1>
<section className="card">
<h3>Send Credits</h3>
<section>
<section><label for="balance">Balance {this.state.balance}</label></section>
<label for="amount">Amount <input id="amount" type="text" size="10" onChange={this.setAmount}></input></label>
<label for="address">Recipient address <input id="address" type="text" size="60" onChange={this.setAddress}></input></label>
<label htmlFor="amount">Amount <input id="amount" type="text" size="10" onChange={this.setAmount}></input></label>
<label htmlFor="address">Recipient address <input id="address" type="text" size="60" onChange={this.setAddress}></input></label>
<Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
</section>
<section className={!this.state.results ? 'hidden' : ''}>
<h4>Results:</h4>
{this.state.results}
</section>
</section>
{
this.state.results ?
<section>
<h4>Results</h4>
{this.state.results}
</section>
: ''
}
);
}
});
var WalletPage = React.createClass({
componentDidMount: function() {
document.title = "My Wallet";
},
/*
Below should be refactored so that balance is shared all of wallet page. Or even broader?
What is the proper React pattern for sharing a global state like balance?
*/
getInitialState: function() {
return {
balance: "Checking balance...",
}
},
componentWillMount: function() {
lbry.getBalance((results) => {
this.setState({
balance: results,
});
});
},
render: function() {
return (
<main className="page">
<NewAddressSection />
<SendToAddressSection />
<section>
<h4>Claim invite code</h4>
<Link href="?claim" label="Claim a LBRY beta invite code"/>
<section className="card">
<h3>Balance</h3>
{this.state.balance} <CurrencySymbol />
</section>
<section>
<ReturnLink />
<SendToAddressSection />
<NewAddressSection />
<section className="card">
<h3>Claim Invite Code</h3>
<Link href="?claim" label="Claim a LBRY beta invite code" button="alt" />
</section>
</main>
);

53
scss/_canvas.scss
View file

@ -9,41 +9,54 @@ body
{
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.3333;
min-height: 100%;
position: relative;
}
#window
{
position: relative;
}
$drawer-width: 240px;
#drawer
{
width: 240px;
width: $drawer-width;
position: absolute;
min-height: 100vh;
left: 0;
top: 0;
background: $color-bg;
z-index: 1;
.drawer-item
{
display: block;
padding: $spacing-vertical / 2;
font-size: 1.2em;
height: $spacing-vertical * 1.5;
.icon
{
margin-right: 6px;
}
.link-label
{
line-height: $spacing-vertical * 1.5;
}
.badge
{
float: right;
background: $color-money;
display: inline-block;
padding: 2px;
color: white;
margin-top: $spacing-vertical * 0.25 - 2;
border-radius: 2px;
}
}
.drawer-item-selected
{
background: $color-canvas;
color: $color-primary;
}
}
#drawer-handle
{
padding: $spacing-vertical / 2;
max-height: $header-height;
max-height: $header-height - $spacing-vertical;
text-align: center;
}
@ -53,7 +66,7 @@ body
}
#window.drawer-open
{
#main-content { margin-left: 240px; }
#main-content { margin-left: $drawer-width; }
.open-drawer-link { display: none; }
}
@ -62,16 +75,26 @@ body
background: $color-primary;
color: white;
height: $header-height;
padding: $spacing-vertical / 2;
h1 { font-size: 1.8em; line-height: $header-height; }
padding: $spacing-vertical / 2 $spacing-vertical / 2 $spacing-vertical / 2 $drawer-width + $spacing-vertical / 2;
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
h1 { font-size: 1.8em; line-height: $header-height - $spacing-vertical; }
&.header-scrolled
{
box-shadow: $default-box-shadow;
}
}
#main-content
{
background: $color-canvas;
min-height: 100vh;
min-height: calc(100vh - 60px); //should be -$header-height, but I'm dumb I guess? It wouldn't work
main
{
margin-top: $header-height;
padding: $spacing-vertical;
}
}
@ -98,6 +121,12 @@ $header-icon-size: 1.5em;
max-width: 800px;
padding: $spacing-vertical;
background: $color-bg;
box-shadow: $default-box-shadow;
border-radius: 2px;
h2
{
margin-bottom: $spacing-vertical;
}
h3, h4
{
margin-bottom: $spacing-vertical / 2;

4
scss/_global.scss
View file

@ -17,7 +17,9 @@ $mobile-width-threshold: 801px;
$max-content-width: 1000px;
$max-text-width: 660px;
$header-height: $spacing-vertical * 1.5;
$header-height: $spacing-vertical * 2.5;
$default-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
@mixin clearfix()

2
scss/_gui.scss
View file

@ -135,7 +135,7 @@ select {
border: 0 none;
text-align: center;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
box-shadow: $default-box-shadow;
text-transform: uppercase;
+ .button-block
{