Switched to tab navigation and other fixes
* Added a clear button to results
* Small visual changes for improved look and feel
* Fixed some scroll issues.
Change-Id: I5ce996e42bd26d9d2699bb5201ae8e4bf0e2797e
diff --git a/client/catalog-dev/css/style.css b/client/catalog-dev/css/style.css
index 17ba979..354a31d 100644
--- a/client/catalog-dev/css/style.css
+++ b/client/catalog-dev/css/style.css
@@ -51,9 +51,7 @@
#filters .label {
/* display: none; */
font-size: inherit;
- transition: background-color 1s,
-
- border-color 2s;
+ transition: background-color 1s, border-color 2s;
cursor: pointer;
}
@@ -101,6 +99,7 @@
left: 0;
transition: max-height 1s;
z-index: 1;
+ top: 40px !important; /* Ignore the library style */
}
*:focus ~ .autoComplete { /* If the parent detects focus on any subelement or itself */
@@ -144,6 +143,7 @@
.treeExplorer .treeExplorerNode .nodeContent {
display: inline-block;
+ min-height: 24px;
}
.treeExplorer .treeExplorerNode > .nodeChildren {
@@ -221,3 +221,15 @@
bottom: 0;
right: 0;
}
+
+.fade {
+ display: none;
+}
+
+.fade.in {
+ display: block;
+}
+
+.navbar-brand {
+ text-shadow: 1px 1px 1px black;
+}
diff --git a/client/catalog-dev/index.html b/client/catalog-dev/index.html
index 6f43aa0..4280fce 100644
--- a/client/catalog-dev/index.html
+++ b/client/catalog-dev/index.html
@@ -37,6 +37,11 @@
<div class="navbar-header">
<div class="navbar-brand">NDN Query and Retrieval Tool</div>
</div>
+ <ul class="navbar-nav nav">
+ <li class="active"><a data-toggle="tab" href="#filterSearch">Filter Search</a></li>
+ <li><a data-toggle="tab" href="#pathSearch">Path Search</a></li>
+ <li><a data-toggle="tab" href="#treeSearchPane">Tree Search</a></li>
+ </ul>
</div>
</header>
@@ -44,30 +49,31 @@
<div class="row">
- <div class="col-sm-3 col-md-2 sidebar">
- <div class="panel panel-primary">
- <div class="panel-heading">
- <span>Filter Categories</span>
- </div>
- <div class="panel-body">
- <ul id="side-menu" class="nav nav-pills nav-stacked"></ul>
- </div>
- </div>
- </div>
-
- <div class="col-sm-9 col-md-10">
+ <div class="col-sm-12 col-md-12">
<div id="alerts"></div>
- <div class="panel panel-info">
+ <div class="panel panel-info tab-pane fade in active" id="filterSearch">
<div class="panel-heading">Filter Based Search</div>
<div class="panel-body">
- <div id="filters"></div>
- <button id="searchButton" class="btn btn-primary right-fix">Search</button>
+ <div class="col-sm-3 col-md-2 sidebar">
+ <div class="panel panel-primary">
+ <div class="panel-heading">
+ <span>Filter Categories</span>
+ </div>
+ <div class="panel-body">
+ <ul id="side-menu" class="nav nav-pills nav-stacked"></ul>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-9 col-md-10">
+ <div id="filters"></div>
+ <button id="searchButton" class="btn btn-primary right-fix">Search</button>
+ </div>
</div>
</div>
- <div class="panel panel-info">
+ <div class="panel panel-info tab-pane fade" id="pathSearch">
<div class="panel-heading">Path Based Search</div>
<div class="panel-body">
<form class="form-inline" id="searchBar">
@@ -85,9 +91,9 @@
</div>
</div>
- <div class="panel panel-info">
- <div class="panel-heading">Tree Based Search<a data-toggle="collapse" class="collapsed" data-target="#treeSearch" href="#treeSearch"></a></div>
- <div class="panel-body collapse" id="treeSearch">
+ <div class="panel panel-info tab-pane fade" id="treeSearchPane">
+ <div class="panel-heading">Tree Based Search</div>
+ <div class="panel-body" id="treeSearch">
<div></div>
</div>
</div>
@@ -109,6 +115,7 @@
</ul>
</li>
<li><a href="#" class="requestSelectedButton">Request Selected</a></li>
+ <li><a href="#" class="clearResults">Clear</a></li>
</ul>
<div class="navbar-text">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div>
<ul class="nav navbar-nav navbar-right">
@@ -144,6 +151,7 @@
</ul>
</li>
<li><a href="#" class="requestSelectedButton">Request Selected</a></li>
+ <li><a href="#" class="clearResults">Clear</a></li>
</ul>
<div class="navbar-text">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div>
<ul class="nav navbar-nav navbar-right">
diff --git a/client/catalog-dev/js/catalog.js b/client/catalog-dev/js/catalog.js
index bdc9f54..29cd6f3 100644
--- a/client/catalog-dev/js/catalog.js
+++ b/client/catalog-dev/js/catalog.js
@@ -139,6 +139,13 @@
scope.getResults(scope.page - 1);
}
});
+ this.resultMenu.find('.clearResults').click(function(){
+ ga('send', 'event', 'button', 'click', 'resultClear');
+ scope.clearResults();
+ $('#results').fadeOut(function(){
+ $(this).addClass('hidden');
+ });
+ });
//Change the number of results per page handler
var rpps = $('.resultsPerPageSelector').click(function(){
@@ -336,7 +343,7 @@
$('#results').removeClass('hidden').slideDown();
}
- $.scrollTo("#results", 700);
+ $.scrollTo("#results", 500, {interrupt: true});
if ((this.results.length === this.resultCount) || (this.resultsPerPage * (index + 1) < this.results.length)){
//console.log("We already have index", index);
diff --git a/client/catalog-dev/js/treeExplorer.js b/client/catalog-dev/js/treeExplorer.js
index 6b67804..c4bee42 100644
--- a/client/catalog-dev/js/treeExplorer.js
+++ b/client/catalog-dev/js/treeExplorer.js
@@ -3,7 +3,18 @@
"use strict";
jQuery.fn.extend({
- treeExplorer: function(getChildren){
+ treeExplorer: function(getChildren, settings){
+
+ this.settings = {
+ autoScroll : false
+ }
+
+ for (var value in settings) {
+ if (this.settings[value] !== undefined){
+ this.settings[value] = settings[value];
+ }
+ }
+
var cache = {}; //Cache previously requested paths.
var tree = $('<div class="treeExplorer"></div>');
@@ -37,7 +48,13 @@
});
}
- tree.on('click', '.treeExplorerNode > .nodeContent > a', function(){
+ var scope = this;
+
+ tree.on('click', '.treeExplorerNode > .nodeContent > a', function(e){
+ if (!scope.settings.autoScroll){
+ e.preventDefault();
+ }
+
var node = $(this).parent().parent();
if (node.hasClass('open')){ //Are we open already?