Blockly editor.

Big UI refresher.

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,

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>
-        <div id="log">
-            <div id="status">✔ loaded</div>
+        <div class="vbox">
+          <div id="script-name" class="flex1">
+          </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>
-      <div class="hbox" style="flex: 1">
-          <div id="editor"></div>
-          <div id="errors" class="vbox hidden">
+      <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: -->

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;