mirror of
https://github.com/nasa/openmct.git
synced 2025-04-19 08:36:24 +00:00
[Search] Update load-more, add check-all
Make the 'Load more' button work with the new filtered results. Added 'ALL' to the top of the search menu which allows the user to toggle all of the filtering options easily.
This commit is contained in:
slhale
parent
b26aa3cab7
commit
2e767c94c4
@ -356,12 +356,19 @@ ul.tree {
|
||||
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox {
|
||||
margin-top: 0.3em;
|
||||
padding-left: 0;
|
||||
margin-right: 0; }
|
||||
/* line 160, ../sass/search/_search.scss */
|
||||
margin-right: 0;
|
||||
padding-right: 3px; }
|
||||
/* line 163, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph {
|
||||
color: white;
|
||||
padding-left: 3px; }
|
||||
/* line 173, ../sass/search/_search.scss */
|
||||
color: white; }
|
||||
/* line 171, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special {
|
||||
font-weight: bold;
|
||||
background-color: gray; }
|
||||
/* line 175, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label {
|
||||
font-size: 1.1em; }
|
||||
/* line 184, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder:after {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
@ -371,18 +378,18 @@ ul.tree {
|
||||
border-bottom: 6px solid #5e5e5e;
|
||||
border-left: 6px solid transparent;
|
||||
content: ''; }
|
||||
/* line 186, ../sass/search/_search.scss */
|
||||
/* line 197, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder {
|
||||
visibility: visible; }
|
||||
/* line 189, ../sass/search/_search.scss */
|
||||
/* line 200, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar div.search-menu-holder:hover {
|
||||
visibility: visible; }
|
||||
/* line 194, ../sass/search/_search.scss */
|
||||
/* line 205, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll {
|
||||
top: 25px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px; }
|
||||
/* line 202, ../sass/search/_search.scss */
|
||||
/* line 213, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item {
|
||||
-moz-transition: background-color 0.25s;
|
||||
-o-transition: background-color 0.25s;
|
||||
@ -392,10 +399,10 @@ ul.tree {
|
||||
border-radius: 2px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px; }
|
||||
/* line 216, ../sass/search/_search.scss */
|
||||
/* line 227, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item .label {
|
||||
margin-left: 6px; }
|
||||
/* line 220, ../sass/search/_search.scss */
|
||||
/* line 231, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@ -407,47 +414,47 @@ ul.tree {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
/* line 242, ../sass/search/_search.scss */
|
||||
/* line 253, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected {
|
||||
background: #005177;
|
||||
color: #fff; }
|
||||
/* line 246, ../sass/search/_search.scss */
|
||||
/* line 257, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
|
||||
color: #0099cc; }
|
||||
/* line 249, ../sass/search/_search.scss */
|
||||
/* line 260, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
|
||||
color: #fff; }
|
||||
/* line 256, ../sass/search/_search.scss */
|
||||
/* line 267, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
|
||||
background: #404040;
|
||||
color: #cccccc; }
|
||||
/* line 259, ../sass/search/_search.scss */
|
||||
/* line 270, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
|
||||
display: block; }
|
||||
/* line 262, ../sass/search/_search.scss */
|
||||
/* line 273, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
|
||||
color: #33ccff; }
|
||||
/* line 270, ../sass/search/_search.scss */
|
||||
/* line 281, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon {
|
||||
position: relative; }
|
||||
/* line 272, ../sass/search/_search.scss */
|
||||
/* line 283, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon.loading {
|
||||
pointer-events: none;
|
||||
margin-left: 6px; }
|
||||
/* line 276, ../sass/search/_search.scss */
|
||||
/* line 287, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon.loading .title-label {
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
opacity: 0.5;
|
||||
margin-left: 26px;
|
||||
line-height: 24px; }
|
||||
/* line 286, ../sass/search/_search.scss */
|
||||
/* line 297, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
|
||||
margin-left: 6px; }
|
||||
/* line 291, ../sass/search/_search.scss */
|
||||
/* line 302, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon:not(.loading) {
|
||||
cursor: pointer; }
|
||||
/* line 296, ../sass/search/_search.scss */
|
||||
/* line 307, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-more-button {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@ -155,16 +155,27 @@
|
||||
// from label.checkbox.custom
|
||||
padding-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
// Spacing with labels
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.search-menu-glyph {
|
||||
color: white;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// Do nothing
|
||||
}
|
||||
|
||||
&.special {
|
||||
font-weight: bold;
|
||||
background-color: lighten($colorBodyBg, 30%);
|
||||
|
||||
.search-menu-label {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,23 +46,42 @@
|
||||
</a>
|
||||
|
||||
<!-- Menu icon/button 'v' -->
|
||||
<!-- Look at context menu for opening and dismissing -->
|
||||
<a class="ui-symbol menu-icon"
|
||||
ng-click="controller.menu()">
|
||||
<a class="ui-symbol menu-icon">
|
||||
v
|
||||
</a>
|
||||
|
||||
<!-- Later make the menu into different files -->
|
||||
<!-- Menu -->
|
||||
<div class="menu-element search-menu-holder">
|
||||
|
||||
<div class="menu dropdown search-menu">
|
||||
|
||||
<ul>
|
||||
<!-- First element is special - it's a reset option -->
|
||||
<li class="search-menu-item special">
|
||||
|
||||
<label class="checkbox custom search-menu-checkbox">
|
||||
<input type="checkbox"
|
||||
class="checkbox"
|
||||
ng-model="ngModel.checkAll"
|
||||
ng-change="controller.checkAll()" />
|
||||
<em></em>
|
||||
</label>
|
||||
|
||||
<span class="search-menu-label">
|
||||
ALL
|
||||
</span>
|
||||
|
||||
</li>
|
||||
|
||||
<!-- The filter options, by type -->
|
||||
<li class="search-menu-item"
|
||||
ng-repeat="type in types">
|
||||
|
||||
<label class="checkbox custom search-menu-checkbox">
|
||||
<input type="checkbox"
|
||||
class="checkbox"
|
||||
ng-model="ngModel.checked[type.key]" />
|
||||
ng-model="ngModel.checked[type.key]"
|
||||
ng-change="controller.updateOptions()" />
|
||||
<em></em>
|
||||
</label>
|
||||
|
||||
@ -70,11 +89,15 @@
|
||||
{{ type.glyph }}
|
||||
</span>
|
||||
|
||||
{{ type.name }}
|
||||
<span class="search-menu-label">
|
||||
{{ type.name }}
|
||||
</span>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -95,13 +95,13 @@ define(function () {
|
||||
|
||||
// On initialization, fill the scope's types with type keys
|
||||
types.forEach(function (type) {
|
||||
// We only want some types: the ones that have keys and
|
||||
// descriptions are probably human user usable types
|
||||
if (type.key && type.description) {
|
||||
// We only want some types, the ones that are probably human readable
|
||||
if (type.key && type.name) {
|
||||
$scope.types.push(type);
|
||||
$scope.ngModel.checked[type.key] = true;
|
||||
}
|
||||
});
|
||||
$scope.ngModel.checkAll = true;
|
||||
|
||||
// Re-filter the results when the checked type options change
|
||||
$scope.$watch("$scope.ngModel.checked", function () {
|
||||
@ -128,9 +128,21 @@ define(function () {
|
||||
},
|
||||
|
||||
/**
|
||||
* Checks to see if there are more search results to display.
|
||||
* Checks to see if there are more search results to display. If the answer
|
||||
* is unclear, this function will err on there being more results.
|
||||
*/
|
||||
areMore: function () {
|
||||
var i;
|
||||
|
||||
// Check to see if any of the not displayed results are of an allowed type
|
||||
for (i = numResults; i < fullResults.hits.length; i += 1) {
|
||||
if ($scope.ngModel.checked[fullResults.hits[i].object.getModel().type.key]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// If none of the ones at hand are correct, there still may be more if we
|
||||
// re-search with a larger maxResults
|
||||
return numResults < fullResults.total;
|
||||
},
|
||||
|
||||
@ -145,7 +157,7 @@ define(function () {
|
||||
// Resend the query if we are out of items to display, but there are more to get
|
||||
search(numResults);
|
||||
} else {
|
||||
$scope.results = fullResults.hits.slice(0, numResults);
|
||||
$scope.results = filter(fullResults.hits);//fullResults.hits.slice(0, numResults);
|
||||
}
|
||||
},
|
||||
|
||||
@ -168,10 +180,31 @@ define(function () {
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens a menu for more search options.
|
||||
* Re-filters the search restuls. Called when ngModel.checked changes.
|
||||
*/
|
||||
menu: function () {
|
||||
console.log('open menu');
|
||||
updateOptions: function () {
|
||||
var type;
|
||||
|
||||
// Update all-checked status
|
||||
$scope.ngModel.checkAll = true;
|
||||
for (type in $scope.ngModel.checked) {
|
||||
if (!$scope.ngModel.checked[type]) {
|
||||
$scope.ngModel.checkAll = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Re-filter results
|
||||
$scope.results = filter(fullResults.hits);
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets options.
|
||||
*/
|
||||
checkAll: function () {
|
||||
var type;
|
||||
for (type in $scope.ngModel.checked) {
|
||||
$scope.ngModel.checked[type] = $scope.ngModel.checkAll;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user