Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

kelly/tourdropdown #111

Merged
merged 4 commits into from
Dec 29, 2016
Merged

kelly/tourdropdown #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e98f99a
update 'Select a Tour' dropdown
klyanyi Dec 28, 2016
cb5fcd9
stop event propagation on dropdown
klyanyi Dec 28, 2016
c4116f9
change tour margin to padding
klyanyi Dec 29, 2016
c1e31db
remove unused vars, trailing spaces, added z-index to tour
klyanyi Dec 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions src/botPage/view/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {}) => {
Expand Down Expand Up @@ -263,6 +264,26 @@ export default class View {
$('.panel .content')
.mousedown(e => e.stopPropagation()) // prevent content to trigger draggable

$('.tours')
.click(e => {
e.stopPropagation()
if ($('#select-tour').css('display') === 'none') {
$('#select-tour')
.fadeIn(100)
} else {
$('#select-tour')
.fadeOut(100)
}
})

$('body')
.click(() => {
if ($('#select-tour').css('display') === 'block') {
$('#select-tour')
.fadeOut(100)
}
})

ReactDOM.render(
<SaveXml
onSave={(filename, collection) => this.blockly.save(filename, collection)}
Expand Down
35 changes: 33 additions & 2 deletions static/css/bot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,37 @@ select.tour-highlight {
}

.languages {
display: inline;
z-index: 999;
z-index: 999;
}

.tours {
z-index: 999;
position: relative;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needs: z-index: 999;

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;
}
#select-tour li {
cursor: pointer;
padding: 3px;
margin: 0;
}
#display-tour li, #display_language li {
cursor: pointer;
line-height: 0;
}
23 changes: 18 additions & 5 deletions templates/bot.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,24 @@
{{> loading }}
<div id="topbar">
<div class="right-header">
<select id="tours">
<option value="" data-i18n-text="Select a Tour"></option>
<option value="welcome" data-i18n-text="Welcome!"></option>
<option value="introduction" data-i18n-text="Introduction"></option>
</select>
<div class="tours">
<ul id="display-tour">
<li>
<span class="tour">Select a Tour</span>
<div class="nav-caret"></div>
</li>
</ul>
<ul id="select-tour">
<li>
<span class="tour">Select a Tour</span>
<div class="nav-caret"></div>
</li>

<div class="separator-line-thin-gray"></div>
<li class="welcome">Welcome</li>
<li class="introduction">Introduction</li>
</ul>
</div>
{{> language }}
</div>
</div>
Expand Down