Treesearch and interface update.
These are the changes requested in the meeting.
+ Moved some of the pieces of the results navigation
+ Modified tree search behavior
Change-Id: I5adf6a0c23101a1f87d45a5824b7e4d17ba7ad8e
diff --git a/client/catalog-dev/css/style.css b/client/catalog-dev/css/style.css
index 484ba3e..31c86b8 100644
--- a/client/catalog-dev/css/style.css
+++ b/client/catalog-dev/css/style.css
@@ -143,7 +143,6 @@
.treeExplorer .treeExplorerNode .nodeContent {
display: inline-block;
- min-height: 24px;
}
.treeExplorer .treeExplorerNode > .nodeChildren {
@@ -154,32 +153,24 @@
display: block;
}
-.treeExplorer .treeExplorerNode::before {
+.treeExplorer .treeExplorerExpander::before {
font-family: "Glyphicons Halflings";
content: "\e080";
color: gray;
}
-.treeExplorer .treeExplorerNode.open::before {
+.treeExplorer .open > .nodeContent > .treeExplorerExpander::before {
content: "\e114";
}
-.treeExplorer .treeExplorerNode.file {
+.treeExplorer .file > .nodeContent > .treeExplorerExpander {
cursor: default;
}
-.treeExplorer .treeExplorerNode.file::before {
+.treeExplorer .file > .nodeContent > .treeExplorerExpander::before {
content: "\e022"
}
-.treeExplorer .treeSearch{
- display: none;
-}
-
-.treeExplorer .nodeContent:hover > .treeSearch {
- display: inline-block;
-}
-
#popup {
top: 0;
left: 0;
diff --git a/client/catalog-dev/index.html b/client/catalog-dev/index.html
index b618e07..52e7c6e 100644
--- a/client/catalog-dev/index.html
+++ b/client/catalog-dev/index.html
@@ -103,9 +103,10 @@
<div class="panel-body">
<nav class="navbar navbar-inverse col-md-12 resultMenu">
<ul class="nav navbar-nav navbar-left">
- <li class="previous disabled">
- <a href="#">← Previous</a>
- </li>
+ <li><a href="#" class="requestSelectedButton">Request Selected</a></li>
+ <li><a href="#" class="clearResults">Clear</a></li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Results Per Page <span class="caret"></span></a>
<ul class="dropdown-menu">
@@ -115,15 +116,14 @@
<li><a href="#" class="resultsPerPageSelector">200</a></li>
</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">
+ <li class="previous disabled">
+ <a href="#">← Previous</a>
+ </li>
<li class="next disabled">
<a href="#">Next →</a>
</li>
</ul>
+ <div class="navbar-text navbar-right">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div>
</nav>
<table id="resultTable" class="table"></table>
<div class="sk-cube-grid">
@@ -139,10 +139,11 @@
</div>
<nav class="navbar navbar-inverse col-md-12 resultMenu">
<ul class="nav navbar-nav navbar-left">
- <li class="previous disabled">
- <a href="#">← Previous</a>
- </li>
- <li class="dropup">
+ <li><a href="#" class="requestSelectedButton">Request Selected</a></li>
+ <li><a href="#" class="clearResults">Clear</a></li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Results Per Page <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="#" class="resultsPerPageSelector">25</a></li>
@@ -151,15 +152,14 @@
<li><a href="#" class="resultsPerPageSelector">200</a></li>
</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">
+ <li class="previous disabled">
+ <a href="#">← Previous</a>
+ </li>
<li class="next disabled">
<a href="#">Next →</a>
</li>
</ul>
+ <div class="navbar-text navbar-right">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div>
</nav>
</div>
</div>
diff --git a/client/catalog-dev/js/catalog.js b/client/catalog-dev/js/catalog.js
index 5b953d8..1e4866c 100644
--- a/client/catalog-dev/js/catalog.js
+++ b/client/catalog-dev/js/catalog.js
@@ -170,9 +170,25 @@
scope.autoComplete(path, function(data){
var list = data.next;
var last = (data.lastComponent === true);
+
+ if (last) {
+ console.log("Redirecting last element request to a search.");
+ scope.clearResults();
+ scope.query(scope.catalog, {'??': path},
+ function(interest, data){
+ console.log("Search response", interest, data);
+ scope.name = data.getContent().toString().replace(/[\n\0]+/g, '');
+ scope.getResults(0);
+ }, function(interest){
+ console.warn("Failed to retrieve final component.", interest, path);
+ scope.createAlert("Failed to request final component. " + path + " See console for details.");
+ });
+ return; //Don't call the callback
+ }
+
console.log("Autocomplete response", list);
callback(list.map(function(element){
- return (path == "/"?"/":"") + element + (!last?"/":"");
+ return (path == "/"?"/":"") + element + "/";
}));
})
});
@@ -184,7 +200,7 @@
var path = t.parent().parent().attr('id');
- console.log("Stringing tree search:", path);
+ console.log("Tree search:", path);
scope.query(scope.catalog, {'??': path},
function(interest, data){ //Success
diff --git a/client/catalog-dev/js/treeExplorer.js b/client/catalog-dev/js/treeExplorer.js
index c4bee42..58a6a69 100644
--- a/client/catalog-dev/js/treeExplorer.js
+++ b/client/catalog-dev/js/treeExplorer.js
@@ -38,8 +38,8 @@
var el = $('<div class="treeExplorerNode"></div>');
if (current.match(/\/$/)){
el.attr('id', path + current);
- el.append(['<div class="nodeContent"><a href="#', path, current, '">', current,
- '</a> <button class="treeSearch btn btn-success btn-xs">Search from here</button></div>'].join(""));
+ el.append(['<div class="nodeContent"><a class="treeExplorerExpander"></a><a class="treeSearch" href="#', path, current, '">', current,
+ '</a></div>'].join(""));
} else {
el.addClass('file');
el.text(current);
@@ -50,7 +50,7 @@
var scope = this;
- tree.on('click', '.treeExplorerNode > .nodeContent > a', function(e){
+ tree.on('click', '.treeExplorerExpander', function(e){
if (!scope.settings.autoScroll){
e.preventDefault();
}