From 46a822a6d026f6cb8f11784f68838ca3a68f0ecd Mon Sep 17 00:00:00 2001
From: yhallowiegeht <y_paul02@uni-muenster.de>
Date: Sun, 13 Jan 2019 14:59:23 +0100
Subject: [PATCH 1/2] toggle code/blockly view button

---
 src/assets/blockly.html        | 167 ++++++++++++++++++---------------
 src/pages/Blockly/blockly.html |   2 +-
 2 files changed, 91 insertions(+), 78 deletions(-)

diff --git a/src/assets/blockly.html b/src/assets/blockly.html
index 556f127..749471c 100644
--- a/src/assets/blockly.html
+++ b/src/assets/blockly.html
@@ -13,14 +13,14 @@
   <link rel="stylesheet" href="blockly/ardublockly/ardublockly.css" media="screen,projection">
   <style>
     body {
-      padding: 0px;
+      padding: 2px;
     }
     .hidden {
       display: none;
     }
 
     .blocks_panel_large, .blocks_panel_small, #content_blocks, .content_xml_large, .content_xml_small {
-      height: 98vh;          /* Standard */
+      height: 94vh;          /* Standard */
     }
   </style>
 
@@ -127,90 +127,103 @@
   </ul>
 
   <!-- Content -->
+    <div>
+      <label class="btn btn-secondary active">
+        <input type="radio" name="options" id="option1" autocomplete="off" onclick="toggleView()" checked>switch Blockly View/CodeView
+      </label>
+    </div>
+    <div id="blocklyview">
     <!-- Toolbox visibility button -->
-    <a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off hidden" style="display: none"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
-    <!-- Arduino IDE action buttons -->
-    <div id="ide_buttons_wrapper" class="hidden">
-      <div id="buttons_offline">
-        <a id="button_ide_left" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_yellow"><i id="button_ide_left_icon" class="mdi-action-open-in-browser"></i></a>
-        <a id="button_ide_middle" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_teal"><i id="button_ide_middle_icon" class="mdi-navigation-check"></i></a>
-        <a id="button_ide_large" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange"><i id="button_ide_large_icon" class="mdi-av-play-arrow"></i></a>
-      </div>
+      <a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off" style="top: 50px"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
+      <!-- Arduino IDE action buttons -->
+      <div id="ide_buttons_wrapper" class="hidden">
+        <div id="buttons_offline">
+          <a id="button_ide_left" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_yellow"><i id="button_ide_left_icon" class="mdi-action-open-in-browser"></i></a>
+          <a id="button_ide_middle" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_teal"><i id="button_ide_middle_icon" class="mdi-navigation-check"></i></a>
+          <a id="button_ide_large" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange"><i id="button_ide_large_icon" class="mdi-av-play-arrow"></i></a>
+        </div>
 
-      <div id="buttons_online" class="hidden">
-        <a id="button_copy_clipboard" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_blue" data-clipboard-action="copy" data-clipboard-target="#content_arduino" data-position="left" data-delay="750" data-tooltip="In Zwischenablage kopieren"><i id="button_copy_clipboard_icon" class="mdi-action-assignment"></i></a>
-        <a id="button_compile_sketch" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange" data-position="left" data-delay="750" data-tooltip="Sketch kompilieren"><i id="button_compile_sketch_icon" class="mdi-action-assignment-turned-in"></i></a>
-      </div>
+        <div id="buttons_online" class="hidden">
+          <a id="button_copy_clipboard" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_blue" data-clipboard-action="copy" data-clipboard-target="#content_arduino" data-position="left" data-delay="750" data-tooltip="In Zwischenablage kopieren"><i id="button_copy_clipboard_icon" class="mdi-action-assignment"></i></a>
+          <a id="button_compile_sketch" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange" data-position="left" data-delay="750" data-tooltip="Sketch kompilieren"><i id="button_compile_sketch_icon" class="mdi-action-assignment-turned-in"></i></a>
+        </div>
 
-      <div id="button_ide_large_spinner" class="preloader-wrapper active ide_loader" style="display:none">
-        <div class="spinner-layer spinner-orange">
-          <div class="circle-clipper left">
-            <div class="circle"></div>
-          </div><div class="gap-patch">
-            <div class="circle"></div>
-          </div><div class="circle-clipper right">
-            <div class="circle"></div>
+        <div id="button_ide_large_spinner" class="preloader-wrapper active ide_loader hidden">
+          <div class="spinner-layer spinner-orange">
+            <div class="circle-clipper left">
+              <div class="circle"></div>
+            </div><div class="gap-patch">
+              <div class="circle"></div>
+            </div><div class="circle-clipper right">
+              <div class="circle"></div>
+            </div>
           </div>
-        </div>
-        <div class="spinner-layer spinner-dark-teal">
-          <div class="circle-clipper left">
-            <div class="circle"></div>
-          </div><div class="gap-patch">
-            <div class="circle"></div>
-          </div><div class="circle-clipper right">
-            <div class="circle"></div>
+          <div class="spinner-layer spinner-dark-teal">
+            <div class="circle-clipper left">
+              <div class="circle"></div>
+            </div><div class="gap-patch">
+              <div class="circle"></div>
+            </div><div class="circle-clipper right">
+              <div class="circle"></div>
+            </div>
           </div>
-        </div>
-        <div class="spinner-layer spinner-yellow">
-          <div class="circle-clipper left">
-            <div class="circle"></div>
-          </div><div class="gap-patch">
-            <div class="circle"></div>
-          </div><div class="circle-clipper right">
-            <div class="circle"></div>
+          <div class="spinner-layer spinner-yellow">
+            <div class="circle-clipper left">
+              <div class="circle"></div>
+            </div><div class="gap-patch">
+              <div class="circle"></div>
+            </div><div class="circle-clipper right">
+              <div class="circle"></div>
+            </div>
           </div>
-        </div>
-        <div class="spinner-layer spinner-light-teal">
-          <div class="circle-clipper left">
-            <div class="circle"></div>
-          </div><div class="gap-patch">
-            <div class="circle"></div>
-          </div><div class="circle-clipper right">
-            <div class="circle"></div>
+          <div class="spinner-layer spinner-light-teal">
+            <div class="circle-clipper left">
+              <div class="circle"></div>
+            </div><div class="gap-patch">
+              <div class="circle"></div>
+            </div><div class="circle-clipper right">
+              <div class="circle"></div>
+            </div>
           </div>
         </div>
       </div>
+      <!-- Blockly Panel -->
+      <div class="card-panel white" style="padding: 0">
+        <div id="blocks_panel" class="content blocks_panel_large">
+          <div id="content_blocks" class="content z-depth-1"></div>
+        </div>
+      </div>
+    </div>    
+    <div id="codeview" class="hidden">
+      <ul class="collapsible z-depth-1" data-collapsible="accordion">
+        <li>
+          <div class="collapsible-header active">
+            <span class="collapsible_logo">{ }</span>
+            <span class="translatable_arduinoSourceCode">Arduino Source Code</span>
+          </div>
+          <div class="collapsible-body">
+            <pre id="content_arduino" class="content content_height_transition content_arduino_large"></pre>
+          </div>
+        </li>
+        <li>
+          <div class="collapsible-header" id="xml_collapsible_header">
+            <span class="collapsible_logo">&#60; &#62;</span>
+            <span class="translatable_blocksXml">Blocks XML</span>
+          </div>
+          <div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
+            <a class="btn-floating btn-large waves-effect waves-light arduino_teal z-depth-1-half" id="button_load_xml"><i class="mdi-action-extension"></i></a>
+            <textarea id="content_xml" class="content content_height_transition content_xml_large" wrap="soft"></textarea>
+          </div>
+        </li>
+      </ul>
     </div>
-    <!-- Blockly Panel -->
-    <div class="card-panel white" style="padding: 0">
-      <div id="blocks_panel" class="content blocks_panel_large">
-        <div id="content_blocks" class="content z-depth-1"></div>
-      </div>
-    </div>
-      
-      <div class="hidden">
-        <ul class="collapsible z-depth-1" data-collapsible="accordion">
-          <li>
-            <div class="collapsible-header active">
-              <span class="collapsible_logo">{ }</span>
-              <span class="translatable_arduinoSourceCode">Arduino Source Code</span>
-            </div>
-            <div class="collapsible-body">
-              <pre id="content_arduino" class="content content_height_transition content_arduino_large"></pre>
-            </div>
-          </li>
-          <li>
-            <div class="collapsible-header" id="xml_collapsible_header">
-              <span class="collapsible_logo">&#60; &#62;</span>
-              <span class="translatable_blocksXml">Blocks XML</span>
-            </div>
-            <div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
-              <a class="btn-floating btn-large waves-effect waves-light arduino_teal z-depth-1-half" id="button_load_xml"><i class="mdi-action-extension"></i></a>
-              <textarea id="content_xml" class="content content_height_transition content_xml_large" wrap="soft"></textarea>
-            </div>
-          </li>
-        </ul>
-      </div>
+    <script>
+      function toggleView() {
+        document.getElementById('button_toggle_toolbox_icon').click();
+        document.getElementById('blocklyview').classList.toggle('hidden');
+        document.getElementById('codeview').classList.toggle('hidden');
+        }
+    </script>
 
   <!-- IDE Output content -->
   <div class="ide_output_wrapper hidden">
@@ -229,7 +242,7 @@
 
   <!-- Settings: Displayed as a Materialize Modal -->
   <div id="settings_dialog" class="modal modal-fixed-footer hidden">
-    <div class="modal-content hidden">
+    <div class="modal-content">
       <h4><span class="translatable_settings">Settings</span></h4>
       <div class="modal_section online">
         <label><span class="translatable_compilerLocation">Compiler Location</span>:</label>
diff --git a/src/pages/Blockly/blockly.html b/src/pages/Blockly/blockly.html
index 81dbc7b..a22c7f1 100644
--- a/src/pages/Blockly/blockly.html
+++ b/src/pages/Blockly/blockly.html
@@ -15,7 +15,7 @@
 
 <ion-content>
   <!-- Real floating action button, fixed. It will not scroll with the content -->
-  <ion-fab top right edge>
+  <ion-fab top right edge style="top:-5px">
     <button ion-fab mini (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
   </ion-fab>
   <iframe #blocklyFrame scrolling="no" src='assets/blockly.html'></iframe>

From 1a9103d34d88b290938b4c7231d03ba163774c28 Mon Sep 17 00:00:00 2001
From: yhallowiegeht <y_paul02@uni-muenster.de>
Date: Tue, 15 Jan 2019 08:37:25 +0100
Subject: [PATCH 2/2] fixed button design and minor display error

---
 src/assets/blockly.html        | 26 +++++++++-----------------
 src/pages/Blockly/blockly.html |  5 ++++-
 src/pages/Blockly/blockly.ts   |  3 +++
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/assets/blockly.html b/src/assets/blockly.html
index 749471c..1522095 100644
--- a/src/assets/blockly.html
+++ b/src/assets/blockly.html
@@ -13,14 +13,14 @@
   <link rel="stylesheet" href="blockly/ardublockly/ardublockly.css" media="screen,projection">
   <style>
     body {
-      padding: 2px;
+      padding: 0px;
     }
     .hidden {
-      display: none;
+      display: none!important;
     }
 
     .blocks_panel_large, .blocks_panel_small, #content_blocks, .content_xml_large, .content_xml_small {
-      height: 94vh;          /* Standard */
+      height: 98.8vh;         /* Standard */
     }
   </style>
 
@@ -127,14 +127,9 @@
   </ul>
 
   <!-- Content -->
-    <div>
-      <label class="btn btn-secondary active">
-        <input type="radio" name="options" id="option1" autocomplete="off" onclick="toggleView()" checked>switch Blockly View/CodeView
-      </label>
-    </div>
     <div id="blocklyview">
     <!-- Toolbox visibility button -->
-      <a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off" style="top: 50px"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
+      <a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
       <!-- Arduino IDE action buttons -->
       <div id="ide_buttons_wrapper" class="hidden">
         <div id="buttons_offline">
@@ -217,13 +212,6 @@
         </li>
       </ul>
     </div>
-    <script>
-      function toggleView() {
-        document.getElementById('button_toggle_toolbox_icon').click();
-        document.getElementById('blocklyview').classList.toggle('hidden');
-        document.getElementById('codeview').classList.toggle('hidden');
-        }
-    </script>
 
   <!-- IDE Output content -->
   <div class="ide_output_wrapper hidden">
@@ -379,11 +367,15 @@
               data: code,
             }, event.origin)
             break;
+          case 'toggleView':
+            document.getElementById('blocklyview').classList.toggle('hidden');
+            document.querySelector('.blocklyToolboxDiv').classList.toggle('hidden');
+            document.getElementById('codeview').classList.toggle('hidden');
+            break;
           default:
             console.warn(`postMessage type ${event.data} not implemented`)
         }
       });
-
     });
   </script>
 </body>
diff --git a/src/pages/Blockly/blockly.html b/src/pages/Blockly/blockly.html
index a22c7f1..23465b8 100644
--- a/src/pages/Blockly/blockly.html
+++ b/src/pages/Blockly/blockly.html
@@ -15,8 +15,11 @@
 
 <ion-content>
   <!-- Real floating action button, fixed. It will not scroll with the content -->
-  <ion-fab top right edge style="top:-5px">
+  <ion-fab top right edge style="right: 2.4vh; top: 0.4vh;">
     <button ion-fab mini (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
   </ion-fab>
+  <ion-fab top right edge style="right: 9.2vh; top: 0.4vh;">
+    <button ion-fab mini (click)="toggleView();" color ="light"><ion-icon name="code"></ion-icon></button>
+  </ion-fab>
   <iframe #blocklyFrame scrolling="no" src='assets/blockly.html'></iframe>
 </ion-content>
diff --git a/src/pages/Blockly/blockly.ts b/src/pages/Blockly/blockly.ts
index 426fe6a..729f4af 100644
--- a/src/pages/Blockly/blockly.ts
+++ b/src/pages/Blockly/blockly.ts
@@ -31,4 +31,7 @@ export class BlocklyPage implements OnInit{
   launchOtaWizard () {
     this.blocklyFrame.nativeElement.contentWindow.postMessage('getSketch', '*')
   }
+  toggleView () {
+    this.blocklyFrame.nativeElement.contentWindow.postMessage('toggleView', '*') 
+  }
 }