Add full screen mode

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/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;
 }