Permalink
Browse files

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

Feature/save load gist
  • Loading branch information...
2 parents a9f659e + 8fcca3e commit a29052d0072beeea3a16bca2448fea5da5e24021 @joshuafcole joshuafcole committed on GitHub Dec 12, 2016
Showing with 374 additions and 47 deletions.
  1. +36 −9 assets/css/ide.css
  2. +3 −3 examples/todomvc.eve
  3. +5 −2 src/client.ts
  4. +226 −22 src/ide.ts
  5. +3 −1 src/microReact.js
  6. +18 −1 src/renderer.ts
  7. +18 −9 src/runtime/server.ts
  8. +65 −0 src/util.ts
View
@@ -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,17 +89,36 @@ 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
\****************************************************************************/
.editor-pane { margin-left: 50px; }
@@ -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,
View
@@ -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 {
Oops, something went wrong.

0 comments on commit a29052d

Please sign in to comment.