From 50ee0e09e0cc549cf60aff4d85d5152b0200a5b0 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 9 Jan 2019 13:54:56 +0800 Subject: [PATCH 01/11] Refactor and add separator logic to applyToolboxPermissions --- src/botPage/view/View.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) 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 => From 5d37d8b48e19010aa9a9288dd8b6a93a99646ac2 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 9 Jan 2019 13:55:49 +0800 Subject: [PATCH 02/11] Remove stroke so lines don't overlap with top toolbar --- static/css/_blockly-toolbox.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/css/_blockly-toolbox.scss b/static/css/_blockly-toolbox.scss index 977227ca3b..b496c212fd 100644 --- a/static/css/_blockly-toolbox.scss +++ b/static/css/_blockly-toolbox.scss @@ -92,3 +92,7 @@ .blocklySvg { position: absolute; } + +.blocklyMainBackground { + stroke: none; +} From ddf50fe53e45cd36046b9beed21c27254bbc425c Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 9 Jan 2019 13:56:14 +0800 Subject: [PATCH 03/11] Add rules for toolbox-separator --- static/css/_toolbox.scss | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/static/css/_toolbox.scss b/static/css/_toolbox.scss index 60cef28fa6..31e79496dc 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,15 @@ } #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; #runButton[disabled], #runButton[disabled]:hover { @include toolbox-runButton-disabled; } .toolbox-button { - float: right; - margin-bottom: 0.313em; @include toolbox-button-base; } @@ -49,4 +44,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; + } } From ee1f96eb001b77a091fa2602c91d57fd4a416b80 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 9 Jan 2019 13:56:56 +0800 Subject: [PATCH 04/11] Move toolbox to top --- templates/bot.mustache | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/templates/bot.mustache b/templates/bot.mustache index 1c3b907e2c..67d199bb24 100644 --- a/templates/bot.mustache +++ b/templates/bot.mustache @@ -116,28 +116,36 @@ -
-
- - -
+
+ + + + + + + + + -
+
+
+ + From 1a38b836a3e4a52b740201b59bf0db4c4e3f84bf Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Wed, 9 Jan 2019 15:12:44 +0800 Subject: [PATCH 05/11] Attach 'Bot controls' tour-step to button for correct positioning --- src/botPage/view/tour/welcome.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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', }, { From 9d89f969c5af546b1a0a30ac97ea16caf3989d79 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Thu, 10 Jan 2019 14:41:00 +0800 Subject: [PATCH 06/11] Add scroll function in callback to fix Safari bug --- src/botPage/view/tour/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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(); } From c039fa177e16b893335d767b359be4e88aa76f31 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Thu, 10 Jan 2019 14:43:27 +0800 Subject: [PATCH 07/11] Remove fixed positioning --- static/css/_blockly-toolbox.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/static/css/_blockly-toolbox.scss b/static/css/_blockly-toolbox.scss index b496c212fd..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; From 0b1b859e303074f5b268e3b5c6af06804a2af42b Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Thu, 10 Jan 2019 14:44:20 +0800 Subject: [PATCH 08/11] Set z-index to 0 for proper rendering --- static/css/_toolbox.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/static/css/_toolbox.scss b/static/css/_toolbox.scss index 31e79496dc..e9b2088f44 100644 --- a/static/css/_toolbox.scss +++ b/static/css/_toolbox.scss @@ -24,6 +24,7 @@ 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; From 3c2af20b8372080f4e47e0282cf13496f214807d Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Thu, 10 Jan 2019 14:46:27 +0800 Subject: [PATCH 09/11] Add z-index for proper rendering --- static/css/_tour.scss | 1 + 1 file changed, 1 insertion(+) 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 { From df5eedd6d08dbc1df2b491c9275511515c9b9334 Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Thu, 10 Jan 2019 14:47:28 +0800 Subject: [PATCH 10/11] Change overflow to auto to support scrolling for tour, add z-index for proper rendering --- static/css/bot.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 { From 6949a82fa0e2f2489107b5c5db9458b6e1c3d34a Mon Sep 17 00:00:00 2001 From: Aaron Imming Date: Thu, 10 Jan 2019 14:49:12 +0800 Subject: [PATCH 11/11] Fix div --- templates/bot.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/bot.mustache b/templates/bot.mustache index 67d199bb24..cb6c1fc4bb 100644 --- a/templates/bot.mustache +++ b/templates/bot.mustache @@ -140,7 +140,7 @@
-
+