publish: sidebar switch + popout to notebook.js

pkg/interface/publish/src/css/custom.css

@@ -96,7 +96,7 @@ a {
 
 .NewPost {
   width: 100%;
-  height: calc(100% - 103px);
+  height: calc(100% - 115px);
   display: flex;
   padding-top: 8px;
 }

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

@@ -1,16 +0,0 @@
-import React, { Component } from 'react';
-
-//TODO "About" subcomponent of Notebook.js
-//Fill in with "description" from props.notebook
-
-export class About extends Component {
-  render() {
-    return (
-      <p className="f8 lh-solid">
-
-      </p>
-    )
-  }
-}
-
-export default About

pkg/interface/publish/src/js/components/lib/new-post.js

@@ -46,8 +46,9 @@ export class NewPost extends Component {
   componentDidUpdate(prevProps, prevState) {
     let notebook = this.props.notebooks[this.props.ship][this.props.book];
     if (notebook.notes[this.state.awaiting]) {
+      let popout = (this.props.popout) ? "popout/" : "";
       let redirect =
-     `/~publish/note/${this.props.ship}/${this.props.book}/${this.state.awaiting}`;
+     `/~publish/${popout}note/${this.props.ship}/${this.props.book}/${this.state.awaiting}`;
       this.props.history.push(redirect);
     }
   }
@@ -82,13 +83,12 @@ export class NewPost extends Component {
       ? { color: '#2AA779', cursor: "pointer" }
       : { color: '#B1B2B3', cursor: "auto" };
 
-    let publishHrefIndex = props.location.pathname.indexOf("/notebook/");
+    let hrefIndex = props.location.pathname.indexOf("/notebook/");
-    let publishsubStr = props.location.pathname.substr(publishHrefIndex)
+    let publishsubStr = props.location.pathname.substr(hrefIndex)
     let popoutHref = `/~publish/popout${publishsubStr}`;
 
     let hiddenOnPopout = (props.popout)
-      ? ""
+      ? "" : "dib-m dib-l dib-xl";
-      : "dib-m dib-l dib-xl"
 
     return (
       <div className="f9 h-100 relative">

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

@@ -1,16 +0,0 @@
-import React, { Component } from 'react'
-
-//TODO render props from notebook.js as a div of individual notes in the 
-//notebook
-
-export class NoteItem extends Component {
-  render() {
-    return (
-      <div>
-        
-      </div>
-    )
-  }
-}
-
-export default NoteItem

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

@@ -1,15 +0,0 @@
-import React, { Component } from 'react';
-import { NoteItem } from './note-item';
-
-//TODO map a list of NoteItems
-export class NoteList extends Component {
-  render() {
-    return (
-      <div>
-        
-      </div>
-    )
-  }
-}
-
-export default NoteList

pkg/interface/publish/src/js/components/lib/notebook-posts.js

@@ -55,7 +55,8 @@ export class NotebookPosts extends Component {
         comment = `${note["num-comments"]} Comments`;
       }
       let date = moment(note["date-created"]).fromNow();
-      let url = `/~publish/note/${props.host}/${props.notebookName}/${noteId}`
+      let popout = (props.popout) ? "popout/" : "";
+      let url = `/~publish/${popout}note/${props.host}/${props.notebookName}/${noteId}`
 
       notes.push(
         <Link key={i} to={url}>

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

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { Link, Switch, Route } from 'react-router-dom';
-import { NoteList } from './note-list';
+import { SidebarSwitcher } from './icons/icon-sidebar-switch';
 import { NotebookPosts } from './notebook-posts';
-import { About } from './about';
 import { Subscribers } from './subscribers';
 import { Settings } from './settings';
+import Sidebar from './sidebar';
 
 //TODO subcomponent logic for subscribers, settings
 
@@ -71,6 +71,13 @@ export class Notebook extends Component {
   render() {
     const { props } = this;
 
+    // popout logic
+    let hrefIndex = props.location.pathname.indexOf("/notebook/");
+    let publishsubStr = props.location.pathname.substr(hrefIndex);
+    let popoutHref = `/~publish/popout${publishsubStr}`;
+
+    let hiddenOnPopout = props.popout ? "" : "dib-m dib-l dib-xl";
+
     let notebook = props.notebooks[props.ship][props.book];
 
     let tabStyles = {
@@ -87,6 +94,7 @@ export class Notebook extends Component {
         let notesList = notebook["notes-by-date"] || [];
         let notes = notebook.notes || null;
         inner = <NotebookPosts notes={notes}
+                  popout={props.popout}
                   list={notesList}
                   host={props.ship}
                   notebookName={props.book}
@@ -106,6 +114,7 @@ export class Notebook extends Component {
         break;
     }
 
+    // displaying nicknames, sigil colors for contacts
     let contact = !!(props.ship.substr(1) in props.contacts)
       ? props.contacts[props.ship.substr(1)] : false;
     let name = props.ship;
@@ -114,7 +123,8 @@ export class Notebook extends Component {
         ? contact.nickname : props.ship;
     }
 
-    let base = `/~publish/notebook/${props.ship}/${props.book}`;
+    let popout = (props.popout) ? "popout/" : "";
+    let base = `/~publish/${popout}notebook/${props.ship}/${props.book}`;
     let about = base + '/about';
     let subs = base + '/subscribers';
     let settings = base + '/settings';
@@ -142,6 +152,20 @@ export class Notebook extends Component {
       <div
         className="center mw6 f9 h-100"
         style={{ paddingLeft: 16, paddingRight: 16 }}>
+        <SidebarSwitcher
+          popout={props.popout}
+          sidebarShown={props.sidebarShown}
+        />
+        <Link
+        className={"dn absolute right-1 top-1 " + hiddenOnPopout}
+        to={popoutHref}
+        target="_blank"
+        >
+          <img src="/~publish/popout.png"
+            height={16}
+            width={16}
+          />
+        </Link>
         <div
           className="h-100 overflow-container no-scrollbar"
           onScroll={this.onScroll}
@@ -155,7 +179,7 @@ export class Notebook extends Component {
               <div className="mb1">{notebook.title}</div>
               <span>
                 <span className="gray3 mr1">by</span>
-                <span className={(props.ship === name) ? "mono" : ""}>
+                <span className={props.ship === name ? "mono" : ""}>
                   {name}
                 </span>
               </span>

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

@@ -126,7 +126,7 @@ export class Root extends Component {
           else {
             return (
               <Skeleton
-                popout={false}
+                popout={popout}
                 active={"rightPanel"}
                 rightPanelHide={false}
                 sidebarShown={state.sidebarShown}

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

@@ -33,7 +33,7 @@ export class Skeleton extends Component {
             path={props.path}
             invites={props.invites}
             />
-          <div className={"h-100 w-100 " + rightPanelHide} style={{
+          <div className={"h-100 w-100 relative " + rightPanelHide} style={{
             flexGrow: 1,
           }}>
             {props.children}