publish: add popout/sidebar switch to new-post.js

pkg/interface/publish/src/js/components/lib/icons/icon-sidebar-switch.js

@@ -9,7 +9,7 @@ export class SidebarSwitcher extends Component {
       : "dib-m dib-l dib-xl";
 
     return (
-      <div className="pt2">
+      <div className={"absolute left-1 top-1 " + popoutSwitcher}>
         <a
           className="pointer flex-shrink-0"
           onClick={() => {

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

@@ -1,4 +1,6 @@
 import React, { Component } from 'react'
+import { SidebarSwitcher } from './icons/icon-sidebar-switch';
+import { Route, Link } from 'react-router-dom';
 import { Controlled as CodeMirror } from 'react-codemirror2'
 import { dateToDa, stringToSymbol } from '/lib/util';
 
@@ -59,9 +61,11 @@ export class NewPost extends Component {
     let submit = !(value === '' || this.state.title === '');
     this.setState({body: value, submit: submit});
   }
- 
+
   render() {
-    let notebook = this.props.notebooks[this.props.ship][this.props.book];
+    const { props, state } = this;
+
+    let notebook = props.notebooks[props.ship][props.book];
 
     const options = {
       mode: 'markdown',
@@ -74,39 +78,67 @@ export class NewPost extends Component {
 
     let date = dateToDa(new Date()).slice(1, -10);
 
-    let submitStyle = (this.state.submit)
+    let submitStyle = (state.submit)
       ? { color: '#2AA779', cursor: "pointer" }
       : { color: '#B1B2B3', cursor: "auto" };
 
+    let publishHrefIndex = props.location.pathname.indexOf("/notebook/");
+    let publishsubStr = props.location.pathname.substr(publishHrefIndex)
+    let popoutHref = `/~publish/popout${publishsubStr}`;
+
+    let hiddenOnPopout = (props.popout)
+      ? ""
+      : "dib-m dib-l dib-xl"
+
     return (
-      <div className="center mw7 f9 h-100">
+      <div className="f9 h-100 relative">
-        <div style={{padding: 16}} className="flex-col">
+        <div className="w-100 tl pv4 flex justify-center">
-          <div className="w-100 tl">
+          <SidebarSwitcher
-            <button disabled={!this.state.submit} style={submitStyle}
+            sidebarShown={props.sidebarShown}
-                onClick={this.postSubmit}>
+            popout={props.popout}
-              Publish To {notebook.title}
+          />
-            </button>
+          <button
+            className="v-mid w-100 mw7 tl pl4 h1"
+            disabled={!state.submit}
+            style={submitStyle}
+            onClick={this.postSubmit}>
+            Publish To {notebook.title}
+          </button>
+          <Link
+          className={"dn absolute right-1 top-1 " + hiddenOnPopout}
+          to={popoutHref}
+          target="_blank">
+            <img src="/~publish/popout.png"
+              height={16}
+              width={16}
+            />
+          </Link>
+        </div>
+        <div className="overflow-container mw7 center">
+          <div style={{ padding: 16 }}>
+            <input
+              autoFocus
+              type="text"
+              style={{ paddingBottom: 8 }}
+              className="w-100"
+              onChange={this.titleChange}
+              placeholder="New Post"
+            />
+
+            <div style={{ color: "#7F7F7F" }}>{date}</div>
           </div>
 
-          <input autoFocus type="text"
+          <div className="NewPost">
-            style={{paddingBottom: 8, paddingTop: 24}}
+            <CodeMirror
-            className="w-100"
+              value={state.body}
-            onChange={this.titleChange}
+              options={options}
-            placeholder="New Post" />
+              onBeforeChange={(e, d, v) => this.bodyChange(e, d, v)}
-
+              onChange={(editor, data, value) => {}}
-          <div style={{color:'#7F7F7F'}}>{date}</div>
+            />
-        </div>
+          </div>
-
-        <div className="NewPost">
-          <CodeMirror
-            value={this.state.body}
-            options={options}
-            onBeforeChange={(e, d, v) => this.bodyChange(e, d, v)}
-            onChange={(editor, data, value) => {}}
-          />
         </div>
       </div>
-    )
+    );
   }
 }
 

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

@@ -104,7 +104,7 @@ export class Root extends Component {
           if (view === "new") {
             return (
               <Skeleton
-                popout={false}
+                popout={popout}
                 active={"rightPanel"}
                 rightPanelHide={false}
                 sidebarShown={state.sidebarShown}
@@ -165,7 +165,7 @@ export class Root extends Component {
 
           return (
             <Skeleton
-              popout={false}
+              popout={popout}
               active={"rightPanel"}
               rightPanelHide={false}
               sidebarShown={state.sidebarShown}