ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-13 14:13:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Search] Search menu & display tweaks

Browse Source 
Clicking on names of options in the search
menu will now toggle the checkboxes. The
filter options display now says when no
filters are selected. Slightly moved the
search menu to the left.
This commit is contained in:
slhale 2015-08-14 11:06:40 -07:00
parent 94662cb904
commit bcea3832ed
4 changed files with 56 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/general/res/css/tree.css
View File

@ -355,7 +355,7 @@ ul.tree {
.search-holder .search .search-bar .search-menu-holder {
float: right;
margin-top: 17px;
left: -25px; }
left: -50px; }
/* line 151, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-menu-holder .search-menu {
border-top: 0; }
@ -391,7 +391,7 @@ ul.tree {
.search-holder .search .search-bar .search-menu-holder:after {
position: absolute;
top: -6px;
left: 10px;
left: 35px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #5e5e5e;

4
platform/commonUI/general/res/sass/search/_search.scss
View File

@ -146,7 +146,7 @@
.search-menu-holder {
float: right;
margin-top: $textInputHeight - 2px;
left: -25px;
left: -50px;
.search-menu {
border-top: 0;
@ -202,7 +202,7 @@
.search-menu-holder:after {
position: absolute;
top: -6px;
left: 10px;
left: 35px;
display: inline-block;
border-right: 6px solid transparent;
//border-bottom: 6px solid white;

10
platform/search/res/templates/search.html
View File

@ -62,13 +62,14 @@
<ul>
<!-- First element is special - it's a reset option -->
<li class="search-menu-item special"
title="Select all filters.">
title="Select all filters."
ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
<label class="checkbox custom search-menu-checkbox">
<input type="checkbox"
class="checkbox"
ng-model="ngModel.checkAll"
ng-change="controller.checkAll(); controller.updateOptions()" />
ng-change="controller.checkAll()" />
<em></em>
</label>
@ -80,7 +81,8 @@
<!-- The filter options, by type -->
<li class="search-menu-item"
ng-repeat="type in types">
ng-repeat="type in types"
ng-click="ngModel.checked[type.key] = !ngModel.checked[type.key]; controller.updateOptions()">
<label class="checkbox custom search-menu-checkbox">
<input type="checkbox"
@ -110,7 +112,7 @@
ng-if="filtersString !== '' && ngModel.search">
<a class="ui-symbol clear-filters-icon"
ng-click="ngModel.checkAll = true; controller.checkAll(); controller.updateOptions()">
ng-click="ngModel.checkAll = true; controller.checkAll()">
x
</a>

83
platform/search/src/controllers/SearchController.js
View File

@ -94,6 +94,49 @@ define(function () {
});
}
function updateOptions() {
var type,
i;
// Update all-checked status
$scope.ngModel.checkAll = true;
for (type in $scope.ngModel.checked) {
if (!$scope.ngModel.checked[type]) {
$scope.ngModel.checkAll = false;
} else {
if ($scope.filtersString === '') {
$scope.filtersString += type;
} else {
$scope.filtersString += ', ' + type;
}
}
}
// Update the current filters string
$scope.filtersString = '';
if ($scope.ngModel.checkAll !== true) {
for (i = 0; i < types.length; i += 1) {
// If the type key corresponds to a checked option...
if ($scope.ngModel.checked[types[i].key]) {
// ... add it to the string list of current filter options
if ($scope.filtersString === '') {
$scope.filtersString += types[i].name;
} else {
$scope.filtersString += ', ' + types[i].name;
}
}
}
// If there's still nothing in the filters string, there are no
// filters selected
if ($scope.filtersString === '') {
$scope.filtersString = 'NONE';
}
}
// Re-filter results
$scope.results = filter(fullResults.hits);
}
// On initialization, fill the scope's types with type keys
types.forEach(function (type) {
// We only want some types, the ones that are probably human readable
@ -183,43 +226,7 @@ define(function () {
/**
* Re-filters the search restuls. Called when ngModel.checked changes.
*/
updateOptions: function () {
var type,
i;
// Update all-checked status
$scope.ngModel.checkAll = true;
for (type in $scope.ngModel.checked) {
if (!$scope.ngModel.checked[type]) {
$scope.ngModel.checkAll = false;
} else {
if ($scope.filtersString === '') {
$scope.filtersString += type;
} else {
$scope.filtersString += ', ' + type;
}
}
}
// Update the current filters string
$scope.filtersString = '';
if ($scope.ngModel.checkAll !== true) {
for (i = 0; i < types.length; i += 1) {
// If the type key corresponds to a checked option...
if ($scope.ngModel.checked[types[i].key]) {
// ... add it to the string list of current filter options
if ($scope.filtersString === '') {
$scope.filtersString += types[i].name;
} else {
$scope.filtersString += ', ' + types[i].name;
}
}
}
}
// Re-filter results
$scope.results = filter(fullResults.hits);
},
updateOptions: updateOptions,
/**
* Resets options.
@ -229,6 +236,8 @@ define(function () {
for (type in $scope.ngModel.checked) {
$scope.ngModel.checked[type] = $scope.ngModel.checkAll;
}
updateOptions();
}
};
}