Merge pull request #675 from witheve/feature/save-load-gist

Feature/save load gist

Author: joshuafcole

assets/css/ide.css

@@ -35,14 +35,22 @@ body { justify-content: stretch; }
 /****************************************************************************\
  * Navigator
 \****************************************************************************/
-.navigator-header { display: flex; flex-direction: column; padding:10px 5px; user-select: none; -webkit-user-select: none; margin-bottom:10px; font-size:18px; color: #555; transition:color 0.2s ease-in-out; }
-.navigator-pane:hover .navigator-header { color: #aaa;  }
+.navigator-header { display: flex; flex-direction: column; padding:10px 5px; user-select: none; -webkit-user-select: none; margin-bottom:10px; font-size:18px; color: #aaa; transition:color 0.2s ease-in-out; }
 .navigator-header > .controls { display:flex; flex-direction:row; flex:1; }
-.navigator-header > .controls > * { height: 20px; text-align: center; transition: transform 0.3s; cursor: pointer; }
-.navigator-header > .controls > div:hover { color: #eee; }
+.navigator-header > .controls > * {height: 20px; text-align: center; padding: 0 5px; transition: transform 0.3s; cursor: pointer; }
+.navigator-header > .controls > *:last-child { margin-right: -5px; }
+.navigator-header > .controls > div:not(.disabled):hover { color: #eee; }
 .navigator-pane.collapsed:hover .navigator-header > .controls > div { color: #eee; }
-.navigator-header:hover > .controls > *:not(.disabled) {  }
 .navigator-header .collapse-btn { transform: rotate(180deg); color: #999; }
+.navigator-header .up-btn.disabled > .up-icon { opacity: 0; }
+
+.navigator-pane .load-dialog { padding: 10 25; color: #555; margin-top: -10px; margin-bottom: 10px; }
+.navigator-pane .load-dialog input { padding: 5px; outline: none; border-top-left-radius: 2px; border: 1px solid #CCC; border-bottom-left-radius: 2px; }
+.navigator-pane .load-dialog .load-btn { padding: 5px; background: white; border: 1px solid #CCC; border-left-color: transparent; border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
+.navigator-pane .load-dialog .load-btn:before { position: relative; top: 3px; }
+.navigator-pane .load-dialog .load-btn:hover { background: #EEE; }
+.navigator-pane .load-dialog .load-btn:active { background: #DDD; }
+
 .navigator-header .up-btn .label { display: flex; font-size:16px; margin-left: 10px; }
 .navigator-header .label { white-space: pre; display:none; }
 
@@ -81,16 +89,35 @@ body { justify-content: stretch; }
 /****************************************************************************\
  * Notices
 \****************************************************************************/
-.main-pane { display: flex; flex-direction: column; justify-content: stretch; overflow-y: hidden; }
-.main-pane .notices { display: flex; flex: 0 0 auto; flex-direction: column; }
+.main-pane { display: flex; flex-direction: column; justify-content: stretch; overflow-y: hidden; position: relative; }
+.main-pane .notices { display: flex; flex: 0 0 auto; flex-direction: column; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
 
-.main-pane .notices > .notice { padding: 5px 60px; background: #e0e0e0; flex: 0 0 auto; }
-.main-pane .notices > .notice + .notice { border-bottom: 1px solid #d0d0d0; }
+.main-pane .notices > .notice { padding: 5px 60px; background: #f5f5f5; flex: 0 0 auto; }
+.main-pane .notices > .notice + .notice { border-top: 1px solid #ddd; }
 .main-pane .notices > .notice > .time { margin-right: 10px;  }
 
+.main-pane .notices > .notice > .dismiss-btn { margin-left: 10px; vertical-align: bottom; align-self: center; opacity: 0; transition: opacity 0.2s; }
+.main-pane .notices:hover > .notice > .dismiss-btn { opacity: 1; }
+.main-pane .notices > .notice > .dismiss-btn:hover { background: #eee; }
+
 .main-pane .notices > .notice.error { background: rgb(255, 216, 222); }
 .main-pane .notices > .notice.warning { background: rgb(255, 247, 217); }
 
+/****************************************************************************\
+ * Modals
+\****************************************************************************/
+.main-pane > .modal-overlay {display: flex;justify-content: center;align-items: center;position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 5;background: rgba(0, 0, 0, 0.1);}
+.main-pane > .modal-overlay .modal-window { display: flex; flex-direction: column; width: 320; padding: 20; background: #FFF; border-radius: 4px; z-index: 10; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25); }
+.main-pane > .modal-overlay .modal-window h3 { align-self: center; margin-top: 0; }
+.main-pane > .modal-overlay .modal-window .controls { flex: 0 0 auto; }
+.main-pane > .modal-overlay .modal-window .btn { flex: 1; text-align: center; padding: 5 10; border: 1px solid #DDD; border-radius: 4px; -webkit-user-select: none; -moz-webkit-user-select: none; }
+.main-pane > .modal-overlay .modal-window .btn + .btn { margin-left: 10; }
+.main-pane > .modal-overlay .modal-window .btn:hover { background: #EEE; }
+.main-pane > .modal-overlay .modal-window .btn:active {background: #DDD; }
+.main-pane > .modal-overlay .modal-window .btn.danger { background: #EE5555; color: white; border: #CC3333; }
+.main-pane > .modal-overlay .modal-window .btn.danger:hover { background: #DD4444; }
+.main-pane > .modal-overlay .modal-window .btn.danger:active { background: #CC3333; }
+
 /****************************************************************************\
  * Editor
 \****************************************************************************/

examples/todomvc.eve

@@ -52,11 +52,11 @@ bind @browser
             [#strong text: todo-count]
         [#span text: " items left"]]
         [#ul #filters, class: "filters", children:
-        [#li children: [#a href: "#/examples/todomvc.eve/#/all" text: "all"
+        [#li children: [#a href: "#/all" text: "all"
                                              class: [selected: is(filter = "all")]]]
-        [#li children: [#a href: "#/examples/todomvc.eve/#/active" text: "active"
+        [#li children: [#a href: "#/active" text: "active"
                                              class: [selected: is(filter = "active")]]]
-        [#li children: [#a href: "#/examples/todomvc.eve/#/completed" text: "completed"
+        [#li children: [#a href: "#/completed" text: "completed"
                                              class: [selected: is(filter = "completed")]]]]
             [#span #clear-completed text: "Clear completed"
                                                         class: [clear-completed: true,

src/client.ts

@@ -287,6 +287,7 @@ export class EveClient {
       // Ensure the URL bar is in sync with the server.
       // @FIXME: This back and forth of control over where we are
       // is an Escherian nightmare.
+
       if(!data.path) {
         history.pushState({}, "", window.location.pathname);
       }
@@ -469,11 +470,13 @@ function changeDocument() {
   let ide = client.ide;
   // @FIXME: This is not right in the non-internal case.
   let docId = "/examples/quickstart.eve";
-  let path = location.hash && location.hash.split('?')[0].split("#/")[1];
+  let path = location.hash && location.hash.split('?')[0].split("#")[1];
+  if(path[path.length - 1] === "/") path = path.slice(0, -1);
   if(path && path.length > 2) {
     if(path[path.length - 1] === "/") path = path.slice(0, -1);
-    docId = "/" + path;
+    docId = path;
   }
+
   if(!docId) return;
   if(docId === ide.documentId) return;
   try {