publish: sidebar switch + popout to note.js

pkg/interface/publish/src/js/components/lib/note-navigation.js

@@ -14,9 +14,11 @@ export class NoteNavigation extends Component {
     let nextUrl = ''
     let prevUrl = ''
 
+    let popout = (this.props.popout) ? "popout/" : "";
+
     if (this.props.next && this.props.prev) {
-      nextUrl = `/~publish/note/${this.props.ship}/${this.props.book}/${this.props.next.id}`;
-      prevUrl = `/~publish/note/${this.props.ship}/${this.props.book}/${this.props.prev.id}`;
+      nextUrl = `/~publish/${popout}note/${this.props.ship}/${this.props.book}/${this.props.next.id}`;
+      prevUrl = `/~publish/${popout}note/${this.props.ship}/${this.props.book}/${this.props.prev.id}`;
       nextComponent =
       <Link to={nextUrl} className="di flex-column tr w-100 pv6 bt bb b--gray3">
         <div className="f9 gray2 mb2">Next</div>
@@ -32,7 +34,7 @@ export class NoteNavigation extends Component {
       </Link>
 
     } else if (this.props.prev) {
-      prevUrl = `/~publish/note/${this.props.ship}/${this.props.book}/${this.props.prev.id}`;
+      prevUrl = `/~publish/${popout}note/${this.props.ship}/${this.props.book}/${this.props.prev.id}`;
       prevComponent =
       <Link to={prevUrl} className="di flex-column w-100 pv6 bt bb b--gray3">
         <div className="f9 gray2 mb2">Previous</div>
@@ -40,7 +42,7 @@ export class NoteNavigation extends Component {
         <div className="f9 gray2">{this.props.prev.date}</div>
       </Link>
     } else if (this.props.next) {
-      nextUrl = `/~publish/note/${this.props.ship}/${this.props.book}/${this.props.next.id}`;
+      nextUrl = `/~publish/${popout}note/${this.props.ship}/${this.props.book}/${this.props.next.id}`;
       nextComponent =
       <Link to={nextUrl} className="di flex-column tr w-100 pv6 bt bb b--gray3">
         <div className="f9 gray2 mb2">Next</div>

pkg/interface/publish/src/js/components/lib/note.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { Route, Link } from 'react-router-dom';
+import { SidebarSwitcher } from './icons/icon-sidebar-switch';
 import { Comments } from './comments';
 import { NoteNavigation } from './note-navigation';
 import moment from 'moment';
@@ -129,18 +131,49 @@ export class Note extends Component {
           date: moment(notebook.notes[nextId]["date-created"]).fromNow()
         }
 
+    let popout = (props.popout) ? "popout/" : "";
 
+    let hrefIndex = props.location.pathname.indexOf("/note/");
+    let publishsubStr = props.location.pathname.substr(hrefIndex);
+    let popoutHref = `/~publish/popout${publishsubStr}`;
+
+    let hiddenOnPopout = props.popout ? "" : "dib-m dib-l dib-xl";
+
+    let baseUrl = `/~publish/${popout}notebook/${props.ship}/${props.book}`;
     return (
-      <div className="h-100 overflow-container no-scrollbar"
+      <div
+        className="h-100 no-scrollbar"
         onScroll={this.onScroll}
-           ref={(el) => {this.scrollElement = el}}>
-        <div className="flex justify-center mt4 ph4 pb4">
-          <div className="w-100 mw6">
+        ref={el => {
+          this.scrollElement = el;
+        }}>
+        <div className="h-100 flex flex-column items-center mt4 ph4 pb4">
+          <div className="w-100 flex justify-center pb6">
+            <SidebarSwitcher
+              popout={props.popout}
+              sidebarShown={props.sidebarShown}
+            />
+            <Link className="f9 w-100 mw6 tl" to={baseUrl}>
+              {"<- Notebook index"}
+            </Link>
+            <Link
+            to={popoutHref}
+            className={"dn absolute right-1 top-1 " + hiddenOnPopout}
+            target="_blank">
+              <img src="/~publish/popout.png"
+                height={16}
+                width={16}
+              />
+            </Link>
+          </div>
+          <div className="w-100 mw6 overflow-container">
             <div className="flex flex-column">
               <div className="f9 mb1">{title}</div>
               <div className="flex mb6">
-                <div className={"di f9 gray2 mr2 " +
-                ((name === author) ? "mono" : "")}>
+                <div
+                  className={
+                    "di f9 gray2 mr2 " + (name === author ? "mono" : "")
+                  }>
                   {name}
                 </div>
                 <div className="di f9 gray2">{date}</div>
@@ -150,11 +183,14 @@ export class Note extends Component {
               <ReactMarkdown source={newfile} />
             </div>
             <NoteNavigation
+              popout={props.popout}
               prev={prev}
               next={next}
               ship={props.ship}
-              book={props.book}/>
-            <Comments ship={props.ship}
+              book={props.book}
+            />
+            <Comments
+              ship={props.ship}
               book={props.book}
               note={props.note}
               comments={comments}
@@ -163,7 +199,7 @@ export class Note extends Component {
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 

pkg/interface/publish/src/js/components/root.js

@@ -181,6 +181,7 @@ export class Root extends Component {
                 note={note}
                 sidebarShown={state.sidebarShown}
                 popout={popout}
+                {...props}
               />
             </Skeleton>
           );