diff --git a/src/botPage/view/View.js b/src/botPage/view/View.js index 165f5a6645..57cc605d9d 100644 --- a/src/botPage/view/View.js +++ b/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) { diff --git a/src/botPage/view/tour/index.js b/src/botPage/view/tour/index.js index 137bb55a5f..385396bece 100644 --- a/src/botPage/view/tour/index.js +++ b/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 = () => { diff --git a/src/botPage/view/tour/welcome.js b/src/botPage/view/tour/welcome.js index f1e801bfaf..6eeb0c3db7 100644 --- a/src/botPage/view/tour/welcome.js +++ b/src/botPage/view/tour/welcome.js @@ -58,7 +58,7 @@ const steps = [ text : `

${translate('Login before starting your bot. Always test your strategies with the virtual account.')}

`, - selector: '.right-header', + selector: '.intro-login-logout', position: 'left', }, { diff --git a/src/common/binary-ui/dropdown.js b/src/common/binary-ui/dropdown.js index ea018c59a1..1f36e880c0 100644 --- a/src/common/binary-ui/dropdown.js +++ b/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); diff --git a/static/css/_fontello.scss b/static/css/_fontello.scss index 5e9d708905..d8b3e2eea9 100755 --- a/static/css/_fontello.scss +++ b/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'; } /* '' */ \ No newline at end of file +.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; + } +} \ No newline at end of file diff --git a/static/css/_toolbox.scss b/static/css/_toolbox.scss index e9b2088f44..ec1dd85849 100644 --- a/static/css/_toolbox.scss +++ b/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; + } + } +} diff --git a/static/css/bot.scss b/static/css/bot.scss index 026d8aed99..b50babb388 100644 --- a/static/css/bot.scss +++ b/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; } diff --git a/static/image/expand_less.svg b/static/image/expand_less.svg new file mode 100644 index 0000000000..99491c6370 --- /dev/null +++ b/static/image/expand_less.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/image/expand_more.svg b/static/image/expand_more.svg new file mode 100644 index 0000000000..690a0a1d57 --- /dev/null +++ b/static/image/expand_more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/bot.mustache b/templates/bot.mustache index 46e9fb39c2..1e5cf21f9e 100644 --- a/templates/bot.mustache +++ b/templates/bot.mustache @@ -1,15 +1,15 @@ - + {{> ../templates/partials/security }} {{> ../templates/partials/head }} Binary Bot {{> bundle_css }} {{> bot_css }} - + - +
@@ -37,126 +37,159 @@

-
- {{> ../templates/partials/loading }}
-
- {{> ../templates/partials/language }} -
-
- -
+
+ {{> ../templates/partials/language }} +
+
+ +
-