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

basic nav design, new title scheme, light page clean up

Browse source
This commit is contained in:
Jeremy Kauffman 2016-08-07 18:13:17 -04:00 committed by Alex Liebowitz
parent 640001c597
commit 2ec42aad26
10 changed files with 100 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
js/app.js
View file

@ -59,30 +59,45 @@ var App = React.createClass({
sessionStorage.setItem('drawerOpen', false);
this.setState({ drawerOpen: false });
},
getMainContent: function()
{
switch(this.state.viewingPage)
{
case 'home':
return <HomePage />;
case 'settings':
return <SettingsPage />;
case 'help':
return <HelpPage />;
case 'watch':
return <WatchPage name={this.state.pageArgs} />;
case 'report':
return <ReportPage />;
case 'files':
return <MyFilesPage />;
case 'start':
return <StartPage />;
case 'claim':
return <ClaimCodePage />;
case 'wallet':
return <WalletPage />;
case 'show':
return <DetailPage name={this.state.pageArgs} />;
case 'wallet':
return <WalletPage />;
case 'publish':
return <PublishPage />;
}
},
render: function() {
console.log(this.state);
var mainContent = this.getMainContent();
return (
<div id="window" className={ this.state.drawerOpen ? 'drawer-open' : 'drawer-closed' }>
<Drawer onCloseDrawer={this.closeDrawer} />
<Drawer onCloseDrawer={this.closeDrawer} viewingPage={this.state.viewingPage} />
<div id="main-content">
<Header onOpenDrawer={this.openDrawer} />
{(() => {
switch(this.state.viewingPage)
{
case 'home': return <HomePage />;
case 'settings': return <SettingsPage />;
case 'help': return <HelpPage />;
case 'watch': return <WatchPage name={this.state.pageArgs}/>;
case 'report': return <ReportPage />;
case 'files': return <MyFilesPage />;
case 'start': return <StartPage />;
case 'claim': return <ClaimCodePage />;
case 'wallet': return <WalletPage />;
case 'show': return <DetailPage name={this.state.pageArgs}/>;
case 'wallet': return <WalletPage />;
case 'publish': return <PublishPage />;
}
})()}
{mainContent}
</div>
</div>
);

19
js/component/drawer.js
View file

@ -1,6 +1,7 @@
var DrawerItem = React.createClass({
render: function() {
return <Link {...this.props} className="drawer-item" />
var isSelected = this.props.viewingPage == this.props.href.substr(2);
return <Link {...this.props} className={ 'drawer-item ' + (isSelected ? 'drawer-item-selected' : '') } />
}
});
@ -26,16 +27,16 @@ var Drawer = React.createClass({
return (
<nav id="drawer">
<div id="drawer-handle">
<Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" className="button-text close-drawer-link"/>
<Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" className="close-drawer-link"/>
<a href="/"><img src="./img/lbry-dark-1600x528.png" style={drawerImageStyle}/></a>
</div>
<DrawerItem href='/?home' label="Discover" icon="icon-search" />
<DrawerItem href='/?publish' label="Publish" icon="icon-upload" />
<DrawerItem href='/?files' label="My Files" icon='icon-cloud-download' />
<DrawerItem href="/?wallet" label={ lbry.formatCredits(this.state.balance) } icon="icon-bank" />
<DrawerItem href='/?settings' label="Settings" icon='icon-gear' />
<DrawerItem href='/?help' label="Help" icon='icon-question-circle' />
{isLinux ? <DrawerItem href="/?start" label="Exit LBRY" icon="icon-close" /> : null}
<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='/?settings' viewingPage={this.props.viewingPage} label="Settings" icon='icon-gear' />
<DrawerItem href='/?help' viewingPage={this.props.viewingPage} label="Help" icon='icon-question-circle' />
{isLinux ? <DrawerItem href="/?start" viewingPage={this.props.viewingPage} label="Exit LBRY" icon="icon-close" /> : null}
</nav>
);
}

15
js/component/header.js
View file

@ -1,9 +1,22 @@
var Header = React.createClass({
getInitialState: function() {
return {
title: "LBRY"
};
},
componentWillMount: function() {
new MutationObserver(function(mutations) {
this.setState({ title: mutations[0].target.innerHTML });
}.bind(this)).observe(
document.querySelector('title'),
{ subtree: true, characterData: true, childList: true }
);
},
render: function() {
return (
<header id="header">
<h1>{ document.title ? document.title : 'LBRY' }</h1>
<Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
<h1>{ this.state.title }</h1>
</header>
);
}

23
js/page/help.js
View file

@ -1,21 +1,32 @@
//@TODO: Customize advice based on OS
var HelpPage = React.createClass({
componentDidMount: function() {
document.title = "Help";
},
render: function() {
return (
<main className="page">
<h1>Troubleshooting</h1>
<p>Here are the most commonly encountered problems and what to try doing about them.</p>
<h3>Nothing seems to start downloading.</h3>
<h3>Read the FAQ</h3>
<p>Our FAQ answers many common questions.</p>
<p><Link href="https://lbry.io/faq" label="Read the FAQ" icon="icon-help" button="alt"/></p>
<h3>Get Live Help</h3>
<p>
Live help is available most hours in the #help channel of our Slack chat room.
</p>
<p>
<Link button="alt" label="Join Our Slack" icon="icon-slack" href="https://slack.lbry.io" />
</p>
<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>
<h3>Videos have trouble playing.</h3>
<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>A real fix for this is underway!</p>
<h3>How do I turn LBRY off?</h3>
<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>On Linux, you'll find a close button in the menu at the top right of LBRY.</p>

4
js/page/my_files.js
View file

@ -131,6 +131,9 @@ var MyFilesPage = React.createClass({
filesInfo: null,
};
},
componentDidMount: function() {
document.title = "My Files";
},
componentWillMount: function() {
this.updateFilesInfo();
},
@ -185,7 +188,6 @@ var MyFilesPage = React.createClass({
}
return (
<main className="page">
<h1>My Files</h1>
<section>
{content}
</section>

4
js/page/publish.js
View file

@ -241,6 +241,9 @@ var PublishPage = React.createClass({
isFee: feeEnabled
});
},
componentDidMount: function() {
document.title = "Publish";
},
componentDidUpdate: function() {
if (this.state.fileInfo && !this.state.tempFileReady) {
// A file was chosen but the daemon hasn't finished processing it yet, i.e. it's loading, so
@ -261,7 +264,6 @@ var PublishPage = React.createClass({
render: function() {
return (
<main className="page" ref="page">
<h1>Publish Content</h1>
<section className="section-block">
<h4>LBRY Name</h4>
lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />

1
js/page/settings.js
View file

@ -77,7 +77,6 @@ var SettingsPage = React.createClass({
return (
<main className="page">
<h1>Settings</h1>
<section>
<h4>Run on startup</h4>
<label style={settingsCheckBoxOptionStyles}>

18
scss/_canvas.scss
View file

@ -35,11 +35,16 @@ body
margin-right: 6px;
}
}
.drawer-item-selected
{
background: $color-canvas;
}
}
#drawer-handle
{
padding: $spacing-vertical / 2;
max-height: $header-height;
text-align: center;
}
#window.drawer-closed
@ -58,6 +63,13 @@ body
color: white;
height: $header-height;
padding: $spacing-vertical / 2;
h1 { font-size: 1.8em; line-height: $header-height; }
margin-bottom: $spacing-vertical;
}
#main-content
{
background: $color-canvas;
}
.open-drawer-link, .close-drawer-link
@ -65,13 +77,15 @@ body
display: inline-block;
font-size: 1.5em;
padding: 0 18px 0 6px;
float: left;
}
.page {
margin-left: auto;
margin-right: auto;
width: 800px;
padding-bottom: $spacing-vertical*3;
max-width: 800px;
padding: $spacing-vertical;
background: $color-bg;
}
.full-screen
{

2
scss/_global.scss
View file

@ -6,6 +6,8 @@ $color-primary: #155B4A;
$color-light-alt: hsl(hue($color-primary), 15, 85);
$color-text-dark: #000;
$color-help: rgba(0,0,0,.6);
$color-canvas: #f5f5f5;
$color-bg: #ffffff;
$color-money: #216C2A;
$color-meta-light: #505050;

10
scss/_gui.scss
View file

@ -26,7 +26,7 @@ section
margin-bottom: $spacing-vertical;
}
h1 {
main h1 {
font-size: 2.0em;
margin-bottom: $spacing-vertical;
margin-top: $spacing-vertical*2;
@ -40,10 +40,7 @@ h2 {
h3 { font-size: 1.4em; }
h4 {
font-weight: 600;
font-size: 1.2em;
margin: 0;
margin-bottom: $spacing-vertical/2;
}
h5 { font-size: 1.1em; }
@ -59,11 +56,6 @@ label {
display: block;
}
header
{
line-height: $spacing-vertical;
}
p
{
margin-bottom: 0.8em;