Merge #249

249: Fixes header to top of page, and stops sidebar from influencing page height r=tcr a=tcr



Co-authored-by: Tim Ryan <id@timryan.org>

Author: bors[bot]

edit-frontend/src/app/app.tsx

@@ -398,7 +398,7 @@ export class EditorFrame extends React.Component {
                 });
                 e.preventDefault();
               }}
-            >{CONFIG.title}</a>
+            ><span className="hamburger"></span> {CONFIG.title}</a>
             <NativeButtons
               editor={this}
               buttons={this.state.buttons}
@@ -417,16 +417,17 @@ export class EditorFrame extends React.Component {
             <div id="edit-sidebar" className={this.state.sidebarExpanded ? 'expanded' : ''}>
               <div id="edit-sidebar-inner">
                 <div id="edit-sidebar-inner-inner">
-                  <div id="recently-viewed">
-                    <p><span id="edit-sidebar-new"><button onClick={_ => {
-                      window.location.href = '/?from='; // TODO this is a hack
-                    }}>New</button></span>Recently Viewed</p>
-                    <div id="recently-viewed-list">{
-                      recentlyViewed().map((doc) => (
-                        <div><a href={doc.path} title={'/' + doc.path}>{doc.path}</a></div>
-                      ))
-                    }</div>
-                    <div id="edit-sidebar-inner-inner"></div>
+                  <div id="edit-sidebar-scrollable">
+                    <div id="recently-viewed">
+                      <p><span id="edit-sidebar-new"><button onClick={_ => {
+                        window.location.href = '/?from=%23 New page'; // TODO this is a hack
+                      }}>New</button></span>Recently Viewed</p>
+                      <div id="recently-viewed-list">{
+                        recentlyViewed().map((doc) => (
+                          <div key={doc.path}><a href={doc.path} title={'/' + doc.path}>{doc.path}</a></div>
+                        ))
+                      }</div>
+                    </div>
                   </div>
                   <div id="edit-sidebar-footer">
                     Read more at <a href="http://docs.edit.io">docs.edit.io</a>.<br />Or contribute to <a href="http://github.com/tcr/edit-text">edit-text on Github</a>.
@@ -750,7 +751,7 @@ class EditText extends React.Component {
       .connect()
       .then(() => {
         console.log('Loading static editor.');
-        this.props.client.clientBindings.command(JSON.stringify({
+        this.props.client.clientBindings!.command(JSON.stringify({
           ClientCommand: {
             Init: ["$local", convertMarkdownToDoc(this.props.markdown), 100],
           } 

edit-frontend/src/editor/wasm.ts

@@ -59,7 +59,7 @@ export class WasmController implements ControllerImpl {
   onError: (err: any) => void | null;
 
   // TODO refactor wasmClient, remove Module
-  clientBindings: WasmClientModule;
+  clientBindings: WasmClientModule | null;
 
   sendCommand(command: ControllerCommand) {
     if (CONFIG.console_command_log) {
@@ -69,9 +69,13 @@ export class WasmController implements ControllerImpl {
     }
 
     try {
-      this.clientBindings.command(JSON.stringify({
-        ControllerCommand: command,
-      }));
+      if (!this.clientBindings) {
+        console.error('Tried to send message to controller before WebAssembly initialized.');
+      } else {
+        this.clientBindings.command(JSON.stringify({
+          ControllerCommand: command,
+        }));
+      }
     } catch (e) {
       this.onError ? this.onError(e) : null;
       throw e;

edit-frontend/styles/edit-text.scss

@@ -253,10 +253,3 @@ span.Link:hover::before {
     padding: 2px 5px;
     color: white;
 }
-
-// Debugging
-
-// Spans should never be successive.
-span + span {
-    outline: thin solid #32a1ce;
-}

edit-frontend/styles/edit.scss

@@ -3,6 +3,7 @@
 @import 'modal';
 @import 'debug';
 @import 'layout';
+@import 'sidebar';
 @import 'multi';
 .edit-text { @import "edit-text"; }
 

edit-frontend/styles/layout.scss

@@ -21,21 +21,26 @@ body {
     height: 100%;
 
     #edit-layout {
-        flex: 1;
         display: flex;
         flex-direction: row;
+        overflow: auto;
+        flex-grow: 1;
 
         #edit-sidebar {
             width: 0;
             display: flex;
             overflow: visible;
             flex-direction: column;
+            align-self: stretch;
 
             // When expanded, expand #edit-sidebar-inner.
-            &.expanded {
-                #edit-sidebar-inner {
-                    width: 300px;
-                }
+            #edit-sidebar-inner {
+                width: 0;
+                border-right: none;
+            }
+            &.expanded #edit-sidebar-inner {
+                width: 300px;
+                border-right: 1px #999 solid;
             }
 
             #edit-sidebar-inner {
@@ -44,92 +49,21 @@ body {
                 overflow: hidden;
                 background: #eee;
                 z-index: 1000;
-                border-right: 1px #999 solid;
+
                 display: flex;
-                flex: 1;
                 flex-direction: column;
+                height: 100%;
 
-                width: 0;
-
+                // To fix all contents at 300px even when animating the drawer
+                // opening, this inner item re-fixes the width at 300px.
                 #edit-sidebar-inner-inner {
-                    box-sizing: border-box;
                     width: 300px;
                     display: flex;
                     flex: 1;
                     flex-direction: column;
+                    overflow: auto;
 
-                    #recently-viewed {
-                        padding: 1px 20px;
-                        flex: 1;
-                        overflow: auto;
-                    }
-
-                    #edit-sidebar-footer {
-                        flex: 0;
-                        margin: 0 15px;
-                    }
-                }
-            }
-
-            #edit-sidebar-footer {
-                border-top: 1px solid #ccc;
-                padding: 9px 10px 17px;
-                text-align: center;
-                font-size: 0.9em;
-                opacity: 0.6;
-            }
-
-            #recently-viewed {
-                p {
-                    font-size: 1.2em;
-                    margin: 1.3em 0 0.5em;
-                    font-weight: 500;
-                    color: #444;
-                }
-
-                #edit-sidebar-new {
-                    float: right;
-                    margin-top: -4px;
-                    
-                    button {
-                        border: 1px solid #aaa;
-                        background: #fff;
-                        font-size: 12px;
-                        padding: 5px 10px;
-                        text-transform: uppercase;
-                        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-                        cursor: pointer;
-                    }
-                }
-
-                #recently-viewed-list:empty::after {
-                    content: 'No documents to display.';
-                }
-
-                #recently-viewed-list > * {
-                    a { text-decoration: none; }
-                    &:hover a { text-decoration: underline; }
-
-                    a {
-                        display: block;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        overflow: hidden;
-
-                        padding: 0.5em 0 0.25em 0.4em;
-
-                        font-size: 18px;
-                        &:not(:hover) {
-                            color: #000000;
-                        }
-                    }
-
-                    a::before {
-                        content: '\01F4CB';
-                        margin-right: 13px;
-                        filter: grayscale(60%) contrast(130%);
-                        opacity: 0.8;
-                    }
+                    // Scrollable contents inside here.
                 }
             }
         }

edit-frontend/styles/sidebar.scss

@@ -0,0 +1,77 @@
+// Sidebar styling. Also see layout.scss
+
+#edit-sidebar {
+    #edit-sidebar-footer {
+        flex: 0;
+        margin: 0 15px;
+        border-top: 1px solid #ccc;
+        padding: 9px 10px 17px;
+        text-align: center;
+        font-size: 0.9em;
+        opacity: 0.6;
+    }
+
+    #edit-sidebar-scrollable {
+        overflow: auto;
+        flex-grow: 1;
+
+        #recently-viewed {
+            padding: 1px 20px;
+            margin-bottom: 20px;
+
+            p {
+                font-size: 1.2em;
+                margin: 1.3em 0 0.5em;
+                font-weight: 500;
+                color: #444;
+            }
+
+            #edit-sidebar-new {
+                float: right;
+                margin-top: -4px;
+                
+                button {
+                    border: 1px solid #aaa;
+                    background: #fff;
+                    font-size: 12px;
+                    color: #333;
+                    font-weight: bold;
+                    padding: 5px 10px;
+                    text-transform: uppercase;
+                    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+                    cursor: pointer;
+                }
+            }
+
+            #recently-viewed-list:empty::after {
+                content: 'No documents to display.';
+            }
+
+            #recently-viewed-list > * {
+                a { text-decoration: none; }
+                &:hover a { text-decoration: underline; }
+
+                a {
+                    display: block;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
+
+                    padding: 0.5em 0 0.25em 0.4em;
+
+                    font-size: 17px;
+                    &:not(:hover) {
+                        color: #000000;
+                    }
+                }
+
+                a::before {
+                    content: '\01F4CB';
+                    margin-right: 13px;
+                    filter: grayscale(60%) contrast(130%);
+                    opacity: 0.8;
+                }
+            }
+        }
+    }
+}

edit-frontend/styles/toolbar.scss

@@ -1,17 +1,33 @@
-
 #toolbar {
+    $left-width: 46px;
+
     display: flex;
     flex-direction: row;
     background: #ddd;
-    border-bottom: 2px solid #aaa;
-    padding: 5px 20px 8px;
+    border-bottom: 1px solid #aaa;
+    padding: 5px 20px 8px $left-width;
     cursor: auto;
     min-height: 44px;
     flex-wrap: wrap;
+    position: relative;
+
+    .hamburger:before {
+        content: "☰";
+        font-size: 30px;
+        line-height: 40px;
+        vertical-align: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: $left-width;
+        text-align: center;
+        opacity: 0.5;
+    }
 
     #logo {
         content: "edit-text";
-        margin: 3px 20px 0 0;
+        margin: 3px 22px 0 0;
         font-family: Helvetica, Arial, sans-serif;
         color: #444;
         font-size: 20px;
@@ -37,18 +53,32 @@
 
         &.debug::after {
             content: "DEBUG" !important;
-            background: repeating-linear-gradient(
-                135deg,
-                #60bc6d,
+            background-image: 
+              repeating-linear-gradient(
+                -45deg, 
+                #60bc6d, 
                 #60bc6d 10px,
                 #469852 10px,
-                #469852 20px
-            );
+                #469852 20px,
+              );
+            background-size: 200% 200%;
+            animation: barberpole 10s linear infinite;
+        }
+
+        @keyframes barberpole {
+            100% {
+                background-position: 100% 100%;
+            }
         }
 
         &:hover {
             color: #888;
             text-shadow: 1px 1px 1px #fff;
+
+            &::after {
+                opacity: 0.7;
+            }
+                
         }
     }
 

edit-frontend/templates/client.hbs

@@ -30,7 +30,7 @@
   <div id="content">
     <div id="root-layout">
       <div id="toolbar">
-        <a href="/" id="logo" class="{{release_mode}}">{{title}}</a>
+        <a href="/" id="logo" class="{{release_mode}}"><span class="hamburger"></span> {{title}}</a>
         <div id="native-buttons"></div>
         <div id="local-buttons"></div>
       </div>
@@ -50,3 +50,8 @@
 this.CONFIG = {};
 </script>
 <script src="/$/edit.js"></script>
+<script>
+if (!window.DEBUG) {
+  console.error('Could not determine if JavaScript bundle ran.');
+}
+</script>