aaron/move-toolbox-to-top

src/botPage/view/View.js

@@ -60,7 +60,9 @@ api.send({ time: '1' }).then(response => {
 });
 
 api.events.on('balance', response => {
-    const { balance: { balance: b, currency } } = response;
+    const {
+        balance: { balance: b, currency },
+    } = response;
 
     const balance = (+roundBalance({ currency, balance: b })).toLocaleString(getLanguage().replace('_', '-'));
     $('.topMenuBalance').text(`${balance} ${currency}`);
@@ -215,15 +217,11 @@ const updateTokenList = () => {
 };
 
 const applyToolboxPermissions = () => {
-    if (getTokenList().length) {
-        $('#runButton').show();
-        $('#showSummary').show();
-        $('#logButton').show();
-    } else {
-        $('#runButton').hide();
-        $('#showSummary').hide();
-        $('#logButton').hide();
-    }
+    const fn = getTokenList().length ? 'show' : 'hide';
+    $('#runButton, #showSummary, #logButton')
+        [fn]()
+        .prevAll('.toolbox-separator:first')
+        [fn]();
 };
 
 const showPopup = selector =>

src/botPage/view/tour/index.js

@@ -32,6 +32,18 @@ class Tour extends PureComponent {
     }
     render() {
         const callback = data => {
+            // Scroll to highlighted element (req for Safari)
+            if (data.step && data.step.selector) {
+                let element;
+                if (data.step.selector.charAt(0) === '.') {
+                    element = document.getElementsByClassName(data.step.selector.substring(1))[0];
+                } else {
+                    element = document.getElementById(data.step.selector.substring(1));
+                }
+                if (element) {
+                    element.scrollIntoView();
+                }
+            }
             if (data.index === 0 && data.type === 'step:after') {
                 setDoneCheck();
             }

src/botPage/view/tour/welcome.js

@@ -62,7 +62,7 @@ const steps = [
         text : `<p>
       ${translate('Control your blocks. Hold the cursor on each button for more info.')}
     </p>`,
-        selector: '#toolbox',
+        selector: '#zoomIn',
         position: 'left',
     },
     {

static/css/_blockly-toolbox.scss

@@ -83,7 +83,6 @@
 }
 
 .blocklyToolboxDiv {
-    position: fixed !important;
     z-index: 99 !important;
     left: -100%;
     overflow-x: hidden !important;
@@ -92,3 +91,7 @@
 .blocklySvg {
     position: absolute;
 }
+
+.blocklyMainBackground {
+    stroke: none;
+}

static/css/_toolbox.scss

@@ -12,29 +12,25 @@
 }
 
 @mixin toolbox-runButton-disabled {
-    background-color: #f2f2f2;
-    color: #dedede;
+    background-color: $brand-gray;
+    color: $brand-dark-gray;
 }
 
 @mixin toolbox-runButton-hover {
     background-color: $toolbox-btn-active;
 }
 
 #toolbox {
-    position: absolute;
-    z-index: 99;
-    right: 0;
-    width: 4em;
-    text-align: center;
-    padding: 2px 10px;
+    background-color: $brand-gray;
+    border-bottom: 1px solid $brand-dark-gray;
+    padding: 2px 3px;
+    z-index: 0;
 
     #runButton[disabled], #runButton[disabled]:hover {
         @include toolbox-runButton-disabled;
     }
 
     .toolbox-button {
-        float: right;
-        margin-bottom: 0.313em;
         @include toolbox-button-base;
     }
 
@@ -49,4 +45,13 @@
     .box.is-dragover {
         background-color: grey;
     }
+
+    .toolbox-separator {
+        background-color: $brand-dark-gray;
+        display: inline-block;
+        height: 15px;
+        margin: 0 5px;
+        user-select: none;
+        width: 2px;        
+    }
 }

static/css/_tour.scss

@@ -11,6 +11,7 @@ $joyride-tooltip-width: (15em, 20em, 20em);
     display: inline;
     bottom: 1em;
     right: 1em;
+    z-index: 999 !important;
 }
 
 .tour-first-pop-up {

static/css/bot.scss

@@ -18,8 +18,7 @@ body {
     margin: 0em;
     max-width: 100%;
     max-height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
+    overflow: auto;
     font-size: 1em;
 }
 
@@ -97,6 +96,7 @@ body {
     border-bottom: 4px solid $brand-orange;
     font-size: 18px;
     padding: 0 20px;
+    z-index: 0;
 }
 
 #topbar {

templates/bot.mustache

@@ -116,28 +116,36 @@
         </div>
       </div>
     </div>
-    <div id="blocklyArea"><div>
-    <div id="blocklyDiv" style="position: absolute;"></div>
-
-    <form id="fileUploadForm" style="display: none;">
-      <input title="Open an already saved XML file and retrieve its blocks" type="file" id="files" accept=".xml" multiple/>
-    </form>
-    <div id="toolbox" class="actions_menu show-on-load" style="position:absolute; top: 105px;">
+    <div id="toolbox" class="actions_menu show-on-load">
+      <button title="Reset the blocks to their initial state" id="resetButton" class="toolbox-button icon-reset"></button>
       <button title="Load new blocks (xml file)" id="loadXml" class="toolbox-button icon-browse"></button>
       <button title="Save the existing blocks (xml file)" id="save-xml" class="toolbox-button icon-save"></button>
+
+      <span class="toolbox-separator"></span>
       <button title="Undo the changes (Ctrl+Z)" id="undo" class="toolbox-button icon-undo"></button>
       <button title="Redo the changes (Ctrl+Shift+Z)" id="redo" class="toolbox-button icon-redo"></button>
+
+      <span class="toolbox-separator"></span>
       <button title="Zoom In (Ctrl + +)" id="zoomIn" class="toolbox-button icon-zoom-in"></button>
       <button title="Zoom Out (Ctrl + -)" id="zoomOut" class="toolbox-button icon-zoom-out"></button>
       <button title="Rearrange Vertically" id="rearrange" class="toolbox-button icon-sort"></button>
+
+      <span class="toolbox-separator"></span>
       <button title="Show/hide the summary pop-up" id="showSummary" class="toolbox-button icon-summary"></button>
       <button title="Run the bot" id="runButton" class="toolbox-button icon-run"></button>
       <button title="Stop the bot" id="stopButton" class="toolbox-button icon-stop"></button>
       <button title="Show log" id="logButton" class="toolbox-button icon-info"></button>
+
+      <span class="toolbox-separator"></span>
       <button title="Show chart" id="chartButton" class="toolbox-button icon-chart-line"></button>
       <button title="Show Trading View" id="tradingViewButton" class="toolbox-button icon-trading-view"></button>
-      <button title="Reset the blocks to their initial state" id="resetButton" class="toolbox-button icon-reset"></button>
     </div>
+    <div id="blocklyArea"></div>
+    <div id="blocklyDiv" style="position: absolute;"></div>
+
+    <form id="fileUploadForm" style="display: none;">
+      <input title="Open an already saved XML file and retrieve its blocks" type="file" id="files" accept=".xml" multiple/>
+    </form>
     <div id="footer"></div>
     <audio id="announcement" src="sound/announcement.ogg" autostart="false" ></audio>
     <audio id="earned-money" src="sound/coins.ogg" autostart="false" ></audio>