Blockly editor.

Big UI refresher.
2015-05-21 10:22:29 -07:00 · 2015-05-21 10:22:29 -07:00 · 783fc13b3a
--- a/www/blockly/blockly-main.ts
+++ b/www/blockly/blockly-main.ts
@ -157,7 +157,7 @@ module TDev {
      inMerge = false;
      currentVersion = merge.theirs.baseSnapshot;
      clearMerge();
-      doSave();
+      doSave(true);
    });
    clearMerge();
    inMerge = true;
@ -213,23 +213,67 @@ module TDev {
  }

  function setDescription(x: string) {
-    (<HTMLInputElement> $("#script-description")).value = (x || "");
+    $("#script-description").textContent = x;
+    (<HTMLInputElement> $("#input-script-description")).value = (x || "");
  }

  function setName(x: string) {
-    (<HTMLInputElement> $("#script-name")).value = x;
+    $("#script-name").textContent = x;
+    (<HTMLInputElement> $("#input-script-name")).value = x;
  }

  function getDescription() {
-    return (<HTMLInputElement> $("#script-description")).value;
+    return (<HTMLInputElement> $("#input-script-description")).value;
  }

  function getName() {
-    return (<HTMLInputElement> $("#script-name")).value;
+    return (<HTMLInputElement> $("#input-script-name")).value;
  }

  var dirty = false;

+  /* Some popup routines... */
+  function clearPopups() {
+    var popups = document.querySelectorAll(".popup");
+    Array.prototype.forEach.call(popups, (popup: HTMLElement) => {
+      popup.classList.add("hidden");
+    });
+  }
+  function setupPopups() {
+    /* Hide all popups when user clicks elsewhere. */
+    document.addEventListener("click", () => {
+      clearPopups();
+    }, false);
+    /* Catch clicks on popups themselves to disable above handler. */
+    var popups = document.querySelectorAll(".popup");
+    Array.prototype.forEach.call(popups, (popup: HTMLElement) => {
+      popup.addEventListener("click", (e: Event) => {
+        e.stopPropagation();
+      });
+    }, false);
+  }
+
+  function setupPopup(link: HTMLElement, popup: HTMLElement) {
+    link.addEventListener("click", (e: Event) => {
+      if (popup.classList.contains("hidden"))
+        showPopup(link, popup);
+      else
+        popup.classList.add("hidden");
+      e.stopPropagation();
+    }, false);
+  }
+
+  function showPopup(link: HTMLElement, popup: HTMLElement) {
+    clearPopups();
+    popup.classList.remove("hidden");
+    var x = link.offsetLeft;
+    var w = link.clientWidth;
+    var y = link.offsetTop;
+    var h = link.clientHeight;
+    popup.style.left = Math.round(x - 500 + w/2 + 5 + 15)+"px";
+    popup.style.top = Math.round(y + h + 10 + 5)+"px";
+  }
+
  // Called once at startup
  function setupEditor(message: External.Message_Init) {
    var state = <MyEditorState> message.script.editorState;
@ -249,11 +293,13 @@ module TDev {
        dirty = true;
      });
    }, 1);
-    $("#script-name").addEventListener("input", () => {
+    $("#input-script-name").addEventListener("input", () => {
+      $("#script-name").textContent = (<HTMLInputElement> $("#input-script-name")).value;
      statusMsg("✎ local changes", External.Status.Ok);
      dirty = true;
    });
-    $("#script-description").addEventListener("input", () => {
+    $("#input-script-description").addEventListener("input", () => {
+      $("#script-description").textContent = (<HTMLInputElement> $("#input-script-description")).value;
      statusMsg("✎ local changes", External.Status.Ok);
      dirty = true;
    });
@ -275,6 +321,10 @@ module TDev {
      doSave();
    }, 5000);

+    setupPopup($("#link-edit"), $("#popup-edit"));
+    setupPopup($("#link-log"), $("#popup-log"));
+    setupPopups();
+
    console.log("[loaded] cloud version " + message.script.baseSnapshot +
      "(dated from: "+state.lastSave+")");
  }
@ -309,7 +359,7 @@ module TDev {
    dirty = false;
  }

-  function compileOrError(wantErrors: boolean) {
+  function compileOrError(msgSel?: string) {
    var ast: TDev.AST.Json.JApp;

    // Clear any previous errors
@ -321,7 +371,9 @@ module TDev {
    };
    clear("blocklySelected");
    clear("blocklyError");
-    $("#errors").classList.add("hidden");
+    clearPopups();
+    $("#errorsGraduate").classList.add("hidden");
+    $("#errorsCompile").classList.add("hidden");

    try {
      ast = compile(Blockly.mainWorkspace, {
@ -333,8 +385,7 @@ module TDev {
    }

    var errors = Errors.get();
-    if (errors.length && wantErrors) {
-      $("#errors").classList.remove("hidden");
+    if (errors.length && msgSel) {
      var text = "";
      errors.forEach((e: Errors.CompilationError) => {
        var block = e.block;
@ -342,16 +393,17 @@ module TDev {
        (<any> block.svgGroup_).classList.add("blocklyError");
        text += e.msg + "\n";
      });
-      $("#errorsText").textContent = text;
-      statusMsg("⚠ compilation errors", External.Status.Error);
+      statusMsg(text, External.Status.Error);
+      $(msgSel).classList.remove("hidden");
+      showPopup($("#link-log"), $("#popup-log"));
      return null;
    }

    return ast;
  }

-  function doGraduate(wantErrors: boolean) {
-    var ast = compileOrError(wantErrors);
+  function doGraduate(msgSel?: string) {
+    var ast = compileOrError(msgSel);
    if (!ast)
      return;
    post(<External.Message_Upgrade> {
@ -361,8 +413,8 @@ module TDev {
    });
  }

-  function doCompile(wantErrors: boolean) {
-    var ast = compileOrError(wantErrors);
+  function doCompile(msgSel?: string) {
+    var ast = compileOrError(msgSel);
    if (!ast)
      return;
    post(<External.Message_Compile> {
@ -378,23 +430,21 @@ module TDev {
      post({ type: External.MessageType.Quit });
    });
    $("#command-force-compile").addEventListener("click", () => {
-      doCompile(false);
+      doCompile();
    });
-    $("#command-compile").addEventListener("click", () => {
-      $("#command-force-graduate").classList.add("hidden");
-      $("#command-force-compile").classList.remove("hidden");
-      doCompile(true);
+    $("#command-compile").addEventListener("click", (e: Event) => {
+      doCompile("#errorsCompile");
+      e.stopPropagation();
    });
    $("#command-force-graduate").addEventListener("click", () => {
-      doGraduate(false);
+      doGraduate();
    });
-    $("#command-graduate").addEventListener("click", () => {
-      $("#command-force-graduate").classList.remove("hidden");
-      $("#command-force-compile").classList.add("hidden");
-      doGraduate(true);
+    $("#command-graduate").addEventListener("click", (e: Event) => {
+      doGraduate("#errorsGraduate");
+      e.stopPropagation();
    });
    $("#command-run").addEventListener("click", () => {
-      var ast = compileOrError(false);
+      var ast = compileOrError();
      post(<External.Message_Run> {
        type: External.MessageType.Run,
        ast: <any> ast,
--- a/www/blockly/editor.html
+++ b/www/blockly/editor.html
@ -33,37 +33,33 @@
            <div class="roundlabel">run</div>
          </a>
          <a href="#" class="roundbutton" id="command-graduate">
-            <div class="roundsymbol">🎓</div>
+            <div class="roundsymbol"><i class="fa fa-graduation-cap"></i></div>
            <div class="roundlabel">graduate</div>
          </a>
        </div>
-        <div id="merge-commands" class="hbox">
+        <div id="merge-commands" class="hbox flex1">
        </div>
-        <div class="vbox" id="metadata">
-            <div><input id="script-name" placeholder="script name" /></div>
-            <div><input id="script-description" placeholder="script description" /></div>
+        <div class="vbox">
+          <div id="script-name" class="flex1">
          </div>
-        <div id="log">
-            <div id="status">✔ loaded</div>
+          <div id="script-description">
+          </div>
+          <div id="script-icons">
+            <i id="link-edit" class="fa fa-pencil-square"></i>
+            <div class="cloud-status">
+              <i class="fa fa-cloud-upload"></i>
+            </div>
+            <i id="link-log" class="fa fa-info-circle"></i>
          </div>
        </div>
-      <div class="hbox" style="flex: 1">
-          <div id="editor"></div>
-          <div id="errors" class="vbox hidden">
+      </div>
+      <div class="hbox flex1">
+          <div id="editor" class="flex3"></div>
+          <div id="errors" class="vbox hidden flex1">
              <div id="errorsHeader">
                  Some blocks could not be compiled.
              </div>
-              <div id="errorsButton">
-                  <a href="#" class="roundbutton" id="command-force-graduate">
-                    <div class="roundsymbol">🎓</div>
-                    <div class="roundlabel">force<br />graduation</div>
-                  </a>
-                  <a href="#" class="roundbutton" id="command-force-compile">
-                    <div class="roundsymbol">⚡</div>
-                    <div class="roundlabel">force<br />compile</div>
-                  </a>
-              </div>
-              <div id="errorsText">
+              <div id="errorsText" class="flex1">
              </div>
          </div>
      </div>
@ -287,5 +283,27 @@
        </block>
      </category>
    </xml>
+    <div class="popup hidden" id="popup-log">
+      <div class="popup-inner">
+        <div id="log">
+          <div id="status">✔ loaded</div>
+        </div>
+        <div id="errorsGraduate" class="hidden">
+          I could not understand some blocks. Fix errors or
+          <a class="command" href="#" id="command-force-graduate">graduate anyway</a>.
+        </div>
+        <div id="errorsCompile" class="hidden">
+          I could not understand some blocks. Fix errors or
+          <a class="command" href="#" id="command-force-compile">compile anyway</a>.
+        </div>
+      </div>
+    </div>
+    <div class="popup hidden" id="popup-edit">
+      <div class="popup-inner">
+        <div><b>Your script name:</b> <input id="input-script-name" /></div>
+        <div><b>Your script description:</b> <input id="input-script-description" /></div>
+      </div>
+    </div>
  </body>
 </html>
+<!-- vim: set ts=2 sw=2 sts=2: -->
--- a/www/blockly/style.css
+++ b/www/blockly/style.css
@ -1,10 +1,4 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-  overflow: hidden;
-}
-
+/* Re-usable, generic rules */
 .hidden {
  display: none !important;
 }
@ -21,6 +15,29 @@ body {
  display: -webkit-flex;
 }

+.flex1 {
+  flex: 1;
+  -webkit-flex: 1;
+}
+
+.flex3 {
+  flex: 3;
+  -webkit-flex: 3;
+}
+
+/* Whole page layout */
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+body, input {
+  font-family: "Segoe UI Light", "Segoe UI", "Segoe WP Light", "Segoe WP",
+    "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
+  font-size: 1rem;
+}
+
 #main {
  margin: 0;
  position: absolute;
@ -34,37 +51,56 @@ body {
 #editor {
  position: relative;
  margin: 0;
-  flex: 3;
 }

-#errors {
-  flex: 1;
-  background-color: white;
-  padding-left: .5em;
+/* Script info box */
+#script-name {
+  font-size: 3rem;
 }

-#errorsHeader {
-  font-size: 150%;
-  border-bottom: 1px solid black;
-  margin-bottom: .5em;
-}
-
-#errorsText {
-  flex: 1;
-  white-space: pre-wrap;
-}
-
-#errorsButton {
-  text-align: center;
-  margin-bottom: 1em;
-}
-
-#errorsButton a {
+#script-icons > * {
  display: inline-block;
+  cursor: pointer;
 }

+#script-icons {
+  text-align: right;
+  font-size: 1.5rem;
+  margin-right: 1rem;
+}
+
+/* Popups */
+.popup {
+  width: 500px;
+  border: 5px solid #666;
+  position: relative;
+  background-color: white;
+}
+
+.popup::after {
+  content: "";
+  display: block;
+  width: 0;
+
+  position: absolute;
+  top: -20px;
+  right: 10px;
+
+  border-style: solid;
+  border-width: 0 20px 20px;
+  border-color: #666 transparent;
+}
+
+.popup-inner {
+  padding: 1rem;
+}
+
+#popup-edit input {
+  border: 0;
+}
+
+/* Toolbox and commands */
 #merge-commands {
-  flex: 1;
  margin-left: 3em;
 }

@ -73,13 +109,6 @@ body {
  margin-right: 1em;
 }

-#metadata {
-  padding-right: 2em;
-}
-
-#metadata > div:first-child {
-  padding-bottom: 1ex;
-}

 #toolbox {
  padding: .5em;
@ -88,8 +117,7 @@ body {
 #log {
  overflow: auto;
  width: 500px;
-  height: 50px;
-  font-size: 60%;
+  max-height: 500px;
 }

 .status {
@ -142,11 +170,22 @@ body {
  text-align: center;
 }

+/* Misc */
+a.command, a.command:visited {
+  color: black;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+a.command:hover {
+  text-decoration: underline;
+}
+
+/* Block styles */
 .blocklyMainBackground {
  fill: white !important;
 }

-/* Block styles */
 .blocklyError > .blocklyPath {
  stroke: #d9301a !important;
  stroke-width: 3px;