diff --git a/src/botPage/view/View.js b/src/botPage/view/View.js index b5e098a91f..5b49113b75 100644 --- a/src/botPage/view/View.js +++ b/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 => diff --git a/src/botPage/view/tour/index.js b/src/botPage/view/tour/index.js index 1d5e832432..38aea6582b 100644 --- a/src/botPage/view/tour/index.js +++ b/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(); } diff --git a/src/botPage/view/tour/welcome.js b/src/botPage/view/tour/welcome.js index abcdb48053..e78c9fc093 100644 --- a/src/botPage/view/tour/welcome.js +++ b/src/botPage/view/tour/welcome.js @@ -62,7 +62,7 @@ const steps = [ text : `
${translate('Control your blocks. Hold the cursor on each button for more info.')}
`, - selector: '#toolbox', + selector: '#zoomIn', position: 'left', }, { diff --git a/static/css/_blockly-toolbox.scss b/static/css/_blockly-toolbox.scss index 977227ca3b..a3f8870445 100644 --- a/static/css/_blockly-toolbox.scss +++ b/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; +} diff --git a/static/css/_toolbox.scss b/static/css/_toolbox.scss index 60cef28fa6..e9b2088f44 100644 --- a/static/css/_toolbox.scss +++ b/static/css/_toolbox.scss @@ -12,8 +12,8 @@ } @mixin toolbox-runButton-disabled { - background-color: #f2f2f2; - color: #dedede; + background-color: $brand-gray; + color: $brand-dark-gray; } @mixin toolbox-runButton-hover { @@ -21,20 +21,16 @@ } #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; + } } diff --git a/static/css/_tour.scss b/static/css/_tour.scss index 6a012ffa84..857c7bd40f 100644 --- a/static/css/_tour.scss +++ b/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 { diff --git a/static/css/bot.scss b/static/css/bot.scss index 982fbd06b1..a19c441605 100644 --- a/static/css/bot.scss +++ b/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 { diff --git a/templates/bot.mustache b/templates/bot.mustache index 1c3b907e2c..cb6c1fc4bb 100644 --- a/templates/bot.mustache +++ b/templates/bot.mustache @@ -116,28 +116,36 @@ -