From e98f99a58347da8c21053ebea5d5c2fc7f22b218 Mon Sep 17 00:00:00 2001 From: kellybinary Date: Wed, 28 Dec 2016 16:58:47 +0800 Subject: [PATCH 1/4] update 'Select a Tour' dropdown --- src/botPage/view/index.js | 43 +++++++++++++++++++++++++++++---------- static/css/bot.css | 35 +++++++++++++++++++++++++++++-- templates/bot.mustache | 23 ++++++++++++++++----- 3 files changed, 83 insertions(+), 18 deletions(-) diff --git a/src/botPage/view/index.js b/src/botPage/view/index.js index 3af24bcca7..1e3707bb74 100644 --- a/src/botPage/view/index.js +++ b/src/botPage/view/index.js @@ -145,17 +145,18 @@ export default class View { } startTour() { const viewScope = this - $('#tours').on('change', function onChange() { - const value = $(this).val() - if (value === '') return - if (viewScope.activeTour) { - viewScope.activeTour.stop() - } - viewScope.activeTour = viewScope.tours[value] - viewScope.activeTour.start(() => { - viewScope.activeTour = null - }) - }) + $('#select-tour li:first') + .nextAll().click((e) => { + const value = $(e.target).attr('class') + if (value === '') return + if (viewScope.activeTour) { + viewScope.activeTour.stop() + } + viewScope.activeTour = viewScope.tours[value] + viewScope.activeTour.start(() => { + viewScope.activeTour = null + }) + }) } setFileBrowser() { const readFile = (f, dropEvent = {}) => { @@ -263,6 +264,26 @@ export default class View { $('.panel .content') .mousedown(e => e.stopPropagation()) // prevent content to trigger draggable + $('.tours') + .click(function onClick() { + if ($('#select-tour').css('display') === 'none') { + $('#select-tour') + .fadeIn(100) + } + else { + $('#select-tour') + .fadeOut(100) + } + }) + + $('#header, #blocklyDiv') + .click(function onClick() { + if ($('#select-tour').css('display') === 'block') { + $('#select-tour') + .fadeOut(100) + } + }) + ReactDOM.render( this.blockly.save(filename, collection)} diff --git a/static/css/bot.css b/static/css/bot.css index 3876e85d5a..1d401c7af7 100644 --- a/static/css/bot.css +++ b/static/css/bot.css @@ -353,7 +353,38 @@ select.tour-highlight { display: none; } + .languages { - display: inline; - z-index: 999; + z-index: 999; +} + +.tours { + position: relative; + cursor: pointer; + margin-right: 240px; + font-size: 13px; +} +#display-tour, #select-tour { + position: absolute; + width: 116px; + padding: 0; + margin: 0; + text-align: center; +} +#select-tour { + background-color: #F2F2F2; + border: 1px solid #DEDEDE; + color: black; + display: none; +} +#select_language, #select-tour { + top: -3px; } +#display-tour li, #display_language li { + line-height: 0; +} +#select-tour li:first-child { + margin: 0; + padding-top: 3px; +} + diff --git a/templates/bot.mustache b/templates/bot.mustache index 7af444e7a7..93d8d7256a 100644 --- a/templates/bot.mustache +++ b/templates/bot.mustache @@ -42,11 +42,24 @@ {{> loading }}
- +
+
    +
  • + Select a Tour +
    +
    • +
+
    +
  • + Select a Tour +
    +
    • + +
    +
  • Welcome
    • +
  • Introduction
    • +
+
{{> language }}
From cb5fcd95e9b80e6f959ddf2e9a339584ec000f69 Mon Sep 17 00:00:00 2001 From: kellybinary Date: Wed, 28 Dec 2016 23:40:21 +0800 Subject: [PATCH 2/4] stop event propagation on dropdown --- src/botPage/view/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/botPage/view/index.js b/src/botPage/view/index.js index 1e3707bb74..0cbc63d93f 100644 --- a/src/botPage/view/index.js +++ b/src/botPage/view/index.js @@ -265,19 +265,19 @@ export default class View { .mousedown(e => e.stopPropagation()) // prevent content to trigger draggable $('.tours') - .click(function onClick() { + .click(e => { + e.stopPropagation() if ($('#select-tour').css('display') === 'none') { $('#select-tour') .fadeIn(100) - } - else { + } else { $('#select-tour') .fadeOut(100) } }) - $('#header, #blocklyDiv') - .click(function onClick() { + $('body') + .click(e => { if ($('#select-tour').css('display') === 'block') { $('#select-tour') .fadeOut(100) From c4116f9321d825ba10764f1ee902629113b4345c Mon Sep 17 00:00:00 2001 From: kellybinary Date: Thu, 29 Dec 2016 09:55:58 +0800 Subject: [PATCH 3/4] change tour margin to padding --- static/css/bot.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/static/css/bot.css b/static/css/bot.css index 1d401c7af7..6129ea9a29 100644 --- a/static/css/bot.css +++ b/static/css/bot.css @@ -360,7 +360,6 @@ select.tour-highlight { .tours { position: relative; - cursor: pointer; margin-right: 240px; font-size: 13px; } @@ -380,11 +379,12 @@ select.tour-highlight { #select_language, #select-tour { top: -3px; } +#select-tour li { + cursor: pointer; + padding: 3px; + margin: 0; +} #display-tour li, #display_language li { + cursor: pointer; line-height: 0; } -#select-tour li:first-child { - margin: 0; - padding-top: 3px; -} - From c1e31db36976ee721c5abd96d0a18804ff074329 Mon Sep 17 00:00:00 2001 From: kellybinary Date: Thu, 29 Dec 2016 10:01:32 +0800 Subject: [PATCH 4/4] remove unused vars, trailing spaces, added z-index to tour --- src/botPage/view/index.js | 4 ++-- static/css/bot.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/botPage/view/index.js b/src/botPage/view/index.js index 0cbc63d93f..4818f662c0 100644 --- a/src/botPage/view/index.js +++ b/src/botPage/view/index.js @@ -277,11 +277,11 @@ export default class View { }) $('body') - .click(e => { + .click(() => { if ($('#select-tour').css('display') === 'block') { $('#select-tour') .fadeOut(100) - } + } }) ReactDOM.render( diff --git a/static/css/bot.css b/static/css/bot.css index 6129ea9a29..7d1a1a0e83 100644 --- a/static/css/bot.css +++ b/static/css/bot.css @@ -353,12 +353,12 @@ select.tour-highlight { display: none; } - .languages { z-index: 999; } .tours { + z-index: 999; position: relative; margin-right: 240px; font-size: 13px;