dev to beta

src/botPage/view/View.js

@@ -175,11 +175,12 @@ const getActiveToken = (tokenList, activeToken) => {
 
 const updateTokenList = () => {
     const tokenList = getTokenList();
-    const loginButton = $('#login');
-    const accountList = $('#account-list');
+    const loginButton = $('#login, #toolbox-login');
+    const accountList = $('#account-list, #toolbox-account-list');
     if (tokenList.length === 0) {
         loginButton.show();
         accountList.hide();
+
         $('.account-id')
             .removeAttr('value')
             .text('');
@@ -190,7 +191,6 @@ const updateTokenList = () => {
     } else {
         loginButton.hide();
         accountList.show();
-
         const activeToken = getActiveToken(tokenList, getStorage(AppConstants.STORAGE_ACTIVE_TOKEN));
         updateLogo(activeToken.token);
         addBalanceForToken(activeToken.token);
@@ -200,7 +200,6 @@ const updateTokenList = () => {
         }
         tokenList.forEach(tokenInfo => {
             const prefix = isVirtual(tokenInfo) ? 'Virtual Account' : `${tokenInfo.loginInfo.currency} Account`;
-
             if (tokenInfo === activeToken) {
                 $('.account-id')
                     .attr('value', `${tokenInfo.token}`)
@@ -277,6 +276,7 @@ export default class View {
                         applyToolboxPermissions();
                         renderReactComponents();
                         if (!getTokenList().length) updateLogo();
+                        this.showHeader(getStorage('showHeader') !== 'false');
                         resolve();
                     });
                 });
@@ -468,11 +468,13 @@ export default class View {
 
         $('#showSummary').click(showSummary);
 
+        $('#toggleHeaderButton').click(() => this.showHeader($('#header').is(':hidden')));
+
         $('#loadXml').click(() => {
             $('#files').click();
         });
 
-        $('#logout').click(() => {
+        $('#logout, #toolbox-logout').click(() => {
             setBeforeUnload(true);
             logout();
             hideRealityCheck();
@@ -573,7 +575,7 @@ export default class View {
                 .catch(() => {});
         });
 
-        $('#login')
+        $('#login, #toolbox-login')
             .bind('click.login', () => {
                 setBeforeUnload(true);
                 document.location = getOAuthURL();
@@ -636,6 +638,22 @@ export default class View {
             }
         });
     }
+    showHeader = show => {
+        const $header = $('#header');
+        const $topbarAccount = $('#toolbox-account');
+        const $toggleHeaderButton = $('.icon-hide-header');
+        if (show) {
+            $header.show(0);
+            $topbarAccount.hide(0);
+            $toggleHeaderButton.removeClass('enabled');
+        } else {
+            $header.hide(0);
+            $topbarAccount.show(0);
+            $toggleHeaderButton.addClass('enabled');
+        }
+        setStorage('showHeader', show);
+        window.dispatchEvent(new Event('resize'));
+    };
 }
 
 function initRealityCheck(stopCallback) {

src/botPage/view/blockly/blocks/trade/index.js

@@ -30,8 +30,7 @@ const decorateTrade = ev => {
     }
     if ([Blockly.Events.CHANGE, Blockly.Events.MOVE, Blockly.Events.CREATE].includes(ev.type)) {
         const symbol = trade.getFieldValue('SYMBOL_LIST');
-
-        if (symbol && (ev.group === 'reset' || ev.type !== Blockly.Events.CREATE)) {
+        if (symbol) {
             globalObserver.emit('bot.init', symbol);
         }
 

src/botPage/view/blockly/blocks/trade/tradeOptions.js

@@ -38,9 +38,13 @@ export default () => {
                     const tradeType = getTradeType(this);
 
                     const prevSelectedDuration = durationTypeList.getValue();
+
+                    Blockly.Events.recordUndo = false;
                     this.setFieldValue(translate('Loading...'), 'DURATIONTYPE_LIST');
+                    Blockly.Events.recordUndo = true;
 
                     getAvailableDurations(symbol, tradeType).then(durations => {
+                        Blockly.Events.recordUndo = false;
                         // Prevent UI flickering by only updating field if options have changed
                         // eslint-disable-next-line no-underscore-dangle
                         if (JSON.stringify(durationTypeList.menuGenerator_) !== JSON.stringify(durations)) {
@@ -56,6 +60,7 @@ export default () => {
                         } else {
                             this.setFieldValue(translate('Not available'), 'DURATIONTYPE_LIST');
                         }
+                        Blockly.Events.recordUndo = true;
                     });
                 }
             }

src/botPage/view/blockly/index.js

@@ -243,11 +243,11 @@ export default class _Blockly {
                         this.blocksXmlStr = Blockly.Xml.domToPrettyText(main);
                         Blockly.Xml.domToWorkspace(main.getElementsByTagName('xml')[0], workspace);
                         this.zoomOnPlusMinus();
-                        Blockly.mainWorkspace.clearUndo();
                         disposeBlocksWithLoaders();
                         setTimeout(() => {
                             setBeforeUnload(true);
                             Blockly.mainWorkspace.cleanUp();
+                            Blockly.mainWorkspace.clearUndo();
                         }, 0);
                         resolve();
                     });
@@ -417,3 +417,43 @@ while(true) {
     }
     /* eslint-enable */
 }
+
+// Hooks to override default Blockly behaviour
+/* eslint-disable no-unused-expressions */
+const originalContextMenuFn = Blockly.ContextMenu.show;
+Blockly.ContextMenu.show = (e, menuOptions, rtl) => {
+    // Rename 'Clean up blocks'
+    menuOptions.some(option => {
+        if (option.text === Blockly.Msg.CLEAN_UP) {
+            option.text = translate('Rearrange vertically'); // eslint-disable-line no-param-reassign
+            return true;
+        }
+        return false;
+    }) &&
+        /* Remove delete all blocks, but only when 'Clean up blocks' is available (i.e. workspace)
+         * This allows users to still delete root blocks containing blocks
+         */
+        menuOptions.some((option, i) => {
+            if (
+                option.text === Blockly.Msg.DELETE_BLOCK ||
+                option.text.replace(/[0-9]+/, '%1') === Blockly.Msg.DELETE_X_BLOCKS
+            ) {
+                menuOptions.splice(i, 1);
+                return true;
+            }
+            return false;
+        });
+    // Open the Elev.io widget when clicking 'Help'
+    // eslint-disable-next-line no-underscore-dangle
+    if (window._elev) {
+        menuOptions.some(option => {
+            if (option.text === Blockly.Msg.HELP) {
+                option.callback = () => window._elev.open(); // eslint-disable-line no-param-reassign, no-underscore-dangle
+                return true;
+            }
+            return false;
+        });
+    }
+    originalContextMenuFn(e, menuOptions, rtl);
+};
+/* eslint-enable */

src/botPage/view/tour/index.js

@@ -8,7 +8,9 @@ const setDoneCheck = () => {
     const doNotAskCheck = document.getElementById('do-not-ask-me-again');
     if (doNotAskCheck && doNotAskCheck.checked) {
         setDone('welcomeFinished');
+        return true;
     }
+    return false;
 };
 
 class Tour extends PureComponent {
@@ -26,6 +28,9 @@ class Tour extends PureComponent {
                     setDoneCheck();
                     setStorage('closedTourPopup', Date.now());
                     this.joyride.stop();
+                    if ($('#toggleHeaderButton').is(':hidden')) {
+                        $('#toggleHeaderButton').show();
+                    }
                 },
             };
         }
@@ -45,8 +50,23 @@ class Tour extends PureComponent {
                     element.scrollIntoView();
                 }
             }
-            if (data.index === 0 && data.type === 'step:after') {
-                setDoneCheck();
+            const $toggleHeaderButton = $('#toggleHeaderButton');
+            if (data.type === 'step:after') {
+                // Reveal header if user hid it so tour is working properly
+                const hasSupressedTour = data.index === 0 && setDoneCheck();
+                if (!hasSupressedTour) {
+                    if ($('#header').is(':hidden')) {
+                        $toggleHeaderButton.click();
+                    }
+                    if (data.index < welcome.length - 1) {
+                        $toggleHeaderButton.hide();
+                    } else {
+                        $toggleHeaderButton.show();
+                    }
+                }
+            }
+            if (data.action === 'close' && $toggleHeaderButton.is(':hidden')) {
+                $toggleHeaderButton.show();
             }
         };
         const shouldShowTourPopup = () => {

src/botPage/view/tour/welcome.js

@@ -58,7 +58,7 @@ const steps = [
         text : `<p>
       ${translate('Login before starting your bot. Always test your strategies with the virtual account.')}
     </p>`,
-        selector: '.right-header',
+        selector: '.intro-login-logout',
         position: 'left',
     },
     {

src/common/binary-ui/dropdown.js

@@ -22,7 +22,15 @@ function navMenuListener() {
         event.stopPropagation();
         hide_menu($('.top-nav-menu li ul'));
         hide_menu($('#language_select, #select_language'));
-        var $el = $('#all-accounts, #all-accounts-top');
+        let $el;
+        if ($(this).is('#toolbox-main-account')) {
+            $el = $('#toolbox-all-accounts');
+            hide_menu($('#all-accounts'));
+        } else {
+            $el = $('#all-accounts');
+            hide_menu($('#toolbox-all-accounts'));
+        }
+
         if ($el.css('opacity') == 1) {
             hide_menu($el);
         } else {
@@ -34,7 +42,7 @@ function navMenuListener() {
 function topNavMenuListener() {
     $('.top-nav-menu > li').on('click', function(event) {
         event.stopPropagation();
-        hide_menu($('#all-accounts, #all-accounts-top'));
+        hide_menu($('#all-accounts, #toolbox-all-accounts'));
         hide_menu($('#language_select, #select_language'));
         var childMenu = $(this).find(' > ul'),
             $el = $('.top-nav-menu li ul');
@@ -61,7 +69,7 @@ function topNavMenuListener() {
 
 function documentListener() {
     $(document).on('click', function() {
-        hide_menu($('#all-accounts, #all-accounts-top'));
+        hide_menu($('#all-accounts, #toolbox-all-accounts'));
         hide_menu($('.top-nav-menu li ul'));
         hide_menu($('#language_select, #select_language'));
     });
@@ -71,7 +79,7 @@ function langListener() {
     $('.languages').on('click', function(event) {
         event.stopPropagation();
         hide_menu($('.top-nav-menu li ul'));
-        hide_menu($('#all-accounts, #all-accounts-top'));
+        hide_menu($('#all-accounts, #toolbox-all-accounts'));
         var $el = $('#language_select, #select_language');
         if ($el.css('opacity') == 1) {
             hide_menu($el);

static/css/_fontello.scss

@@ -70,4 +70,13 @@
 .icon-trading-view:before { content: '\e810'; } /* '' */
 .icon-info:before { content: '\f129'; } /* '' */
 .icon-sort:before { content: '\f160'; } /* '' */
-.icon-chart-line:before { content: '\f201'; } /* '' */
+.icon-chart-line:before { content: '\f201'; } /* '' */
+.icon-hide-header {
+    &:before {
+        content: ' ';
+    }
+    background: url("../image/expand_less.svg") no-repeat center;
+    &.enabled {
+        background: url("../image/expand_more.svg") no-repeat center;
+    }
+}

static/css/_toolbox.scss

@@ -25,6 +25,7 @@
     border-bottom: 1px solid $brand-dark-gray;
     padding: 2px 3px;
     z-index: 0;
+    overflow: auto;
 
     #runButton[disabled], #runButton[disabled]:hover {
         @include toolbox-runButton-disabled;
@@ -55,3 +56,57 @@
         width: 2px;        
     }
 }
+
+#toolbox-login {
+    margin-top: 1px;
+    margin-right: 20px;
+}
+
+#toolbox-account {
+    display: table;
+    height: 40px;
+}
+
+#toolbox-account-list {
+    position: relative;
+    user-select: none;
+    display: table-cell;
+    vertical-align: middle;
+    padding-right: 20px;
+    &>a {
+        color: $black;
+        &:hover, &:visited {
+            text-decoration: none;
+        }
+    }
+}
+
+#toolbox-main-account {
+    display: inline;
+    padding-inline-start: 0;
+    &>li {
+        display: inline;
+        margin: 0 2px;
+    }
+    &>li:not(:first-child):not(:last-child):before {
+        content: '\2022';
+        margin-right: 7px;
+    }
+    &>.nav-caret {
+        display: inline-block;
+    }
+}
+
+#toolbox-all-accounts {
+    border: 0;
+    z-index: 100;
+    margin-top: -1px;
+    background: none;
+    right: 20px;
+    & li {
+        height: 100%;
+        & a {
+            margin-top: 0;
+        }
+    }
+}

static/css/bot.scss

@@ -110,6 +110,14 @@ body {
     display: table;
 }
 
+#all-accounts.main-nav, #toolbox-all-accounts.main-nav {
+    >li {
+        >ul {
+            width: 165px;
+        }
+    }
+}
+
 .left-header {
     float: left;
 }