diff --git a/src/core/css/tour.css b/src/core/css/tour.css
index 3bb471369b698981f49858b8127652e957a11f8d..31f4cb7bee574cd03642897ed443aebfd90381ba 100644
--- a/src/core/css/tour.css
+++ b/src/core/css/tour.css
@@ -62,7 +62,6 @@
}
.caosdb-f-tour-menu-entry {
background-color: #ff593c;
- color: white !important;
}
.caosdb-f-tour-menu-entry:hover {
background-color: transparent;
@@ -88,9 +87,11 @@
/*}*/
.caosdb-f-tour-overview-entry.caosdb-v-tour-overview-entry-pageset {
}
+/*
.caosdb-f-tour-overview-entry.caosdb-v-tour-overview-entry-page {
display: none;
}
+*/
li.list-group-item > ul.list-group {
margin-bottom: 0px;
}
@@ -155,3 +156,16 @@ li.list-group-item > .btn {
color: LightSeaGreen;
}
+.caosdb-v-tour-overview {
+ padding: 0px;
+}
+.caosdb-v-tour-toc-panel {
+ position: sticky;
+ top: 57px;
+ padding: 0px;
+ margin-top: 5px;
+ margin-left: 5px;
+ width: unset;
+ height: 500px;
+ overflow-y: auto;
+}
diff --git a/src/core/js/tour.js b/src/core/js/tour.js
index 211ba5552399339d33385f29b5a33f1e34ff3c2d..39275276d8723e61ea81c92cbed7655b2e0609ff 100644
--- a/src/core/js/tour.js
+++ b/src/core/js/tour.js
@@ -173,13 +173,13 @@ var tour = new function() {
if (this.elements) {
// create sub menu
console.log("sub menu:"+this.name);
- var menuid = '#tour-submenu-'+this.name
- var page_set_entry = $("<li class='mb-1 caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-pageset'/><button class='btn btn-link btn-toggle align-items-center rounded collapsed' data-bs-toggle='collapse' data-bs-target='"+menuid+"' aria-expanded='false'>" + this.name + "</button><div id='"+menuid+"'class='collapse show'><ul class='btn-toggle-nav list-unstyled fw-normal pb-1 small'></ul></div></li>");
+ var menuid = 'tour-submenu-'+this.name
+ var page_set_entry = $("<li class='mb-1 list-group-item caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-pageset'/><button class='btn btn-link btn-toggle align-items-center rounded collapsed' data-toggle='collapse' data-target='#"+menuid+"' aria-expanded='false'>" + this.name + "</button><div id='"+menuid+"'class='collapse show'><ul class='btn-toggle-nav list-unstyled fw-normal pb-1 small'></ul></div></li>");
console.log(page_set_entry);
var elements_list = page_set_entry.find("ul")[0];
var collapse_div = page_set_entry.find("div")[0];
this.menu_entry = collapse_div ;
- collapse_div.addEventListener("click", () => {this.activate();});
+ //collapse_div.addEventListener("click", () => {this.activate();});
for (const element of this.elements) {
const next = element.create_menu_entry();
@@ -340,6 +340,7 @@ var tour = new function() {
this.parent_set._activate_by_id(id);
}
+ // TODO duplicate name
create_menu_entry() {
var entry = $("<li class='list-group-item caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-page' />");
var link = $("<a class='btn btn-link'>" + this.name + "</a>")[0];
@@ -782,10 +783,9 @@ var tour = new function() {
this.full_name = "Tour";
this.config = config;
this.elements = new Array();
- this.leave_tour_button = $('<a class="btn btn-link">Leave Tour</a>');
- this.leave_tour_button.hide();
- this.reset_tour_button = $('<a class="btn btn-link">Reset Tour</a>');
- this.reset_tour_button.hide();
+ this.start_tour_button = $('<a class="btn btn-link" id="caosdb-tour-start-btn">Start Tour</a>');
+ this.leave_tour_button = $('<a class="btn btn-link disabled" id="caosdb-tour-leave-btn">Leave Tour</a>');
+ this.reset_tour_button = $('<a class="btn btn-link disabled" id="caosdb-tour-reset-btn">Reset Tour</a>');
this.active = false;
for (const element of this.config.elements) {
const next = tour.add_tour_element(element, this);
@@ -803,9 +803,18 @@ var tour = new function() {
if (typeof this.config.deactivate_other === "undefined") {
this.config.deactivate_other = true;
}
+ var menuitem = $(' <li class="dropdown" id="caosdb-navbar-tour"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Tour <span class="caret"></span></a><ul class="dropdown-menu"></ul></li>')
+ menuitem.find("ul").append($(' <li> </li>').append(this.start_tour_button));
+ menuitem.find("ul").append($(' <li> </li>').append(this.reset_tour_button));
+ menuitem.find("ul").append($(' <li> </li>').append(this.leave_tour_button));
+ this.start_tour_button.on("click", () => {this.activate();});
+ this.leave_tour_button.on("click", () => {this.deactivate();});
+ this.reset_tour_button.on("click", () => {this.reset_tour();});
+
+ $(".caosdb-navbar").append(menuitem);
this.update();
- this.panel = this.create_tour_overview_panel();
+ this.create_tour_overview_panel();
this.init_activation(this.config.persistent_state);
this._elements_by_id = {};
@@ -893,8 +902,13 @@ var tour = new function() {
tour.debug("Tour._deactivate tour");
this.old_state_active = false;
this.active = false;
- this.leave_tour_button.hide();
- this.reset_tour_button.hide();
+ console.log("deactivate");
+ $("#tour-toc").toggleClass("hidden");
+ console.log($("#caosdb-tour-start-btn")[0].classList)
+ $("#caosdb-tour-start-btn").removeClass("disabled");
+ console.log($("#caosdb-tour-start-btn")[0].classList)
+ $("#caosdb-tour-reset-btn").addClass("disabled");
+ $("#caosdb-tour-leave-btn").addClass("disabled");
this.update();
}
}
@@ -906,8 +920,13 @@ var tour = new function() {
tour.debug("Tour._activate tour");
this.old_state_active = true;
this.active = true;
- this.leave_tour_button.show();
- this.reset_tour_button.show();
+ $("#tour-toc").toggleClass("hidden");
+ console.log("activate");
+ console.log($("#caosdb-tour-start-btn")[0].classList)
+ $("#caosdb-tour-start-btn").addClass("disabled");
+ console.log($("#caosdb-tour-start-btn")[0].classList)
+ $("#caosdb-tour-reset-btn").removeClass("disabled");
+ $("#caosdb-tour-leave-btn").removeClass("disabled");
this.update();
}
}
@@ -941,21 +960,12 @@ var tour = new function() {
create_tour_overview_panel() {
- var panel = $('<div class="collapse" id="caosdb-f-tour-overview-panel" /></div>');
- var tour_overview = $('<ul class="caosdb-v-tour-overview"/>');
+ var tour_overview = $('<ul class="list-unstlyed caosdb-v-tour-overview"/>');
for (const element of this.elements) {
const next = element.create_menu_entry();
tour_overview.append(next);
}
-
- panel.append(tour_overview);
-
- this.leave_tour_button.on("click", () => {this.deactivate();});
- this.reset_tour_button.on("click", () => {this.reset_tour();});
- panel.append(this.leave_tour_button);
- panel.append(this.reset_tour_button);
- return panel[0];
-
+ $("#tour-toc").append(tour_overview);
}
update() {
@@ -973,14 +983,6 @@ var tour = new function() {
$("#caosdb-navbar-tour").remove();
$(".caosdb-f-tour-button-wrapper").remove();
- // new stuff following
- var tour_button = $(`
-<li id="caosdb-navbar-tour">
- <button class="navbar-btn btn btn-link caosdb-f-tour-button" data-toggle="collapse" data-target="#caosdb-f-tour-overview-panel">
- Start A Tour
- </button>
-</li>`);
- $('.caosdb-navbar').append(tour_button[0]);
tour._instance = new tour.Tour(config);
if (config.reload) {
@@ -992,7 +994,6 @@ var tour = new function() {
if(tour._instance.active) {
tour._instance.set_tour_button_text("Tour");
}
- $('#caosdb-query-panel').before(tour._instance.panel);
// hide, when the mouse leaves the navbar
$('nav.navbar').hover(undefined, ()=>{$(tour._instance.panel).collapse('hide');});
diff --git a/src/core/xsl/main.xsl b/src/core/xsl/main.xsl
index d1c4def54178ea4991a8d0850730f11b297d92ba..1b40acf6b18f920b9ca7c9645b37acc30e51b673 100644
--- a/src/core/xsl/main.xsl
+++ b/src/core/xsl/main.xsl
@@ -283,9 +283,14 @@
<!--JS_EXTENSIONS-->
</xsl:template>
<xsl:template name="caosdb-data-container">
- <div class="container caosdb-f-main">
+ <div class="container-fluid caosdb-f-main">
+ <div class="col-2 panel panel-warning caosdb-v-tour-toc-panel hidden" id="tour-toc">
+ <div class="panel-heading">
+ <h3 class="panel-title">Tour Menu</h3>
+ </div>
+ </div>
<div class="row caosdb-v-main-col">
- <div class="panel-group caosdb-f-main-entities">
+ <div class="col panel-group caosdb-f-main-entities">
<xsl:call-template name="paging-panel"/>
<xsl:apply-templates select="/Response/UserInfo"/>
<xsl:apply-templates mode="top-level-data" select="/Response/*"/>
@@ -299,7 +304,7 @@
<xsl:call-template name="paging-panel"/>
</div>
</div>
- <div class="panel panel-warning caosdb-f-edit caosdb-v-edit-panel caosdb-v-edit-panel hidden">
+ <div class="col-2 panel panel-warning caosdb-f-edit caosdb-v-edit-panel hidden">
<div class="panel-heading">
<h3 class="panel-title">Edit Mode Toolbox</h3>
</div>