From 2ec42aad2637bdb1bde1f96d06792ec2d890d6ce Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Sun, 7 Aug 2016 18:13:17 -0400
Subject: [PATCH] basic nav design, new title scheme, light page clean up

---
 js/app.js              | 53 +++++++++++++++++++++++++++---------------
 js/component/drawer.js | 19 ++++++++-------
 js/component/header.js | 15 +++++++++++-
 js/page/help.js        | 23 +++++++++++++-----
 js/page/my_files.js    |  4 +++-
 js/page/publish.js     |  4 +++-
 js/page/settings.js    |  1 -
 scss/_canvas.scss      | 18 ++++++++++++--
 scss/_global.scss      |  2 ++
 scss/_gui.scss         | 10 +-------
 10 files changed, 100 insertions(+), 49 deletions(-)

diff --git a/js/app.js b/js/app.js
index 53475dde9..7c59307e6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -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>
     );
diff --git a/js/component/drawer.js b/js/component/drawer.js
index d2c2de6f2..1d39640c7 100644
--- a/js/component/drawer.js
+++ b/js/component/drawer.js
@@ -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>
     );
   }
diff --git a/js/component/header.js b/js/component/header.js
index 217f0f755..084d122f7 100644
--- a/js/component/header.js
+++ b/js/component/header.js
@@ -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>
     );
   }
diff --git a/js/page/help.js b/js/page/help.js
index af5d43a60..e60ca7df5 100644
--- a/js/page/help.js
+++ b/js/page/help.js
@@ -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>
diff --git a/js/page/my_files.js b/js/page/my_files.js
index b6beb0b62..60c82fdb7 100644
--- a/js/page/my_files.js
+++ b/js/page/my_files.js
@@ -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>
diff --git a/js/page/publish.js b/js/page/publish.js
index b7d2c0671..60a6a7184 100644
--- a/js/page/publish.js
+++ b/js/page/publish.js
@@ -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} />
diff --git a/js/page/settings.js b/js/page/settings.js
index b8ef78cef..848b00e2a 100644
--- a/js/page/settings.js
+++ b/js/page/settings.js
@@ -77,7 +77,6 @@ var SettingsPage = React.createClass({
 
     return (
       <main className="page">
-        <h1>Settings</h1>
         <section>
           <h4>Run on startup</h4>
           <label style={settingsCheckBoxOptionStyles}>
diff --git a/scss/_canvas.scss b/scss/_canvas.scss
index 7ca959e85..ad8944f5d 100644
--- a/scss/_canvas.scss
+++ b/scss/_canvas.scss
@@ -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
 {
diff --git a/scss/_global.scss b/scss/_global.scss
index 74edd975a..6962e461b 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -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;
 
diff --git a/scss/_gui.scss b/scss/_gui.scss
index 2fb986624..e0b83b555 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -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;