mirror of
https://github.com/nasa/openmct.git
synced 2025-01-31 08:25:31 +00:00
[Search] Filter display
Added display below the search bar of what search filters are currently active. Not yet correctly aligned wrt search results list.
This commit is contained in:
slhale
parent
74cf4d73d5
commit
5726dd0e0c
@ -279,9 +279,10 @@ ul.tree {
|
||||
/* line 36, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar {
|
||||
width: 100%;
|
||||
height: 19px;
|
||||
margin-top: 4px;
|
||||
position: relative; }
|
||||
/* line 45, ../sass/search/_search.scss */
|
||||
/* line 46, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-input {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
@ -289,7 +290,7 @@ ul.tree {
|
||||
height: 19px;
|
||||
padding-right: 16px;
|
||||
padding-right: 28px; }
|
||||
/* line 58, ../sass/search/_search.scss */
|
||||
/* line 59, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-icon {
|
||||
color: #737373;
|
||||
font-size: 12px;
|
||||
@ -298,18 +299,18 @@ ul.tree {
|
||||
height: 0;
|
||||
margin-top: -19px;
|
||||
transition: visibility .15s, opacity .15s, color .2s; }
|
||||
/* line 72, ../sass/search/_search.scss */
|
||||
/* line 73, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-icon.content {
|
||||
visibility: hidden;
|
||||
opacity: 0; }
|
||||
/* line 80, ../sass/search/_search.scss */
|
||||
/* line 81, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-input:focus + div.search-icon {
|
||||
visibility: hidden;
|
||||
opacity: 0; }
|
||||
/* line 86, ../sass/search/_search.scss */
|
||||
/* line 87, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-input:hover + div.search-icon {
|
||||
color: #a6a6a6; }
|
||||
/* line 90, ../sass/search/_search.scss */
|
||||
/* line 91, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .clear-icon {
|
||||
position: absolute;
|
||||
display: block;
|
||||
@ -325,11 +326,11 @@ ul.tree {
|
||||
transition: visibility .15s, opacity .15s;
|
||||
right: 16px;
|
||||
padding-right: 2px; }
|
||||
/* line 110, ../sass/search/_search.scss */
|
||||
/* line 111, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .clear-icon.content {
|
||||
visibility: visible;
|
||||
opacity: 1; }
|
||||
/* line 120, ../sass/search/_search.scss */
|
||||
/* line 121, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .menu-icon {
|
||||
position: absolute;
|
||||
display: block;
|
||||
@ -341,41 +342,41 @@ ul.tree {
|
||||
right: 0px;
|
||||
top: -3px;
|
||||
transition: color .2s; }
|
||||
/* line 136, ../sass/search/_search.scss */
|
||||
/* line 137, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .menu-icon:hover {
|
||||
color: #a6a6a6; }
|
||||
/* line 141, ../sass/search/_search.scss */
|
||||
/* line 142, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder {
|
||||
float: right;
|
||||
margin-top: 17px;
|
||||
left: -25px; }
|
||||
/* line 146, ../sass/search/_search.scss */
|
||||
/* line 147, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder .search-menu {
|
||||
border-top: 0; }
|
||||
/* line 149, ../sass/search/_search.scss */
|
||||
/* line 150, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 4px;
|
||||
padding-right: 6px;
|
||||
font-size: 0.8em; }
|
||||
/* line 158, ../sass/search/_search.scss */
|
||||
/* line 159, ../sass/search/_search.scss */
|
||||
.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;
|
||||
padding-right: 3px; }
|
||||
/* line 171, ../sass/search/_search.scss */
|
||||
/* line 172, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph {
|
||||
color: white; }
|
||||
/* line 179, ../sass/search/_search.scss */
|
||||
/* line 176, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special {
|
||||
font-weight: bold;
|
||||
background-color: #737373; }
|
||||
/* line 183, ../sass/search/_search.scss */
|
||||
background-color: gray; }
|
||||
/* line 180, ../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 192, ../sass/search/_search.scss */
|
||||
/* line 189, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .search-menu-holder:after {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
@ -385,18 +386,33 @@ ul.tree {
|
||||
border-bottom: 6px solid #5e5e5e;
|
||||
border-left: 6px solid transparent;
|
||||
content: ''; }
|
||||
/* line 205, ../sass/search/_search.scss */
|
||||
/* line 202, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder {
|
||||
visibility: visible; }
|
||||
/* line 208, ../sass/search/_search.scss */
|
||||
/* line 205, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-bar div.search-menu-holder:hover {
|
||||
visibility: visible; }
|
||||
/* line 213, ../sass/search/_search.scss */
|
||||
/* line 210, ../sass/search/_search.scss */
|
||||
.search-holder .search .active-filter-display {
|
||||
font-size: .6em;
|
||||
height: auto; }
|
||||
/* line 214, ../sass/search/_search.scss */
|
||||
.search-holder .search .active-filter-display .clear-filters-icon {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-right: 9px;
|
||||
padding-left: 4px;
|
||||
cursor: pointer;
|
||||
color: #737373;
|
||||
font-size: 6px; }
|
||||
/* line 230, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll {
|
||||
top: 25px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px; }
|
||||
/* line 221, ../sass/search/_search.scss */
|
||||
/* line 238, ../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;
|
||||
@ -406,10 +422,10 @@ ul.tree {
|
||||
border-radius: 2px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px; }
|
||||
/* line 235, ../sass/search/_search.scss */
|
||||
/* line 252, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item .label {
|
||||
margin-left: 6px; }
|
||||
/* line 239, ../sass/search/_search.scss */
|
||||
/* line 256, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@ -421,47 +437,47 @@ ul.tree {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
/* line 261, ../sass/search/_search.scss */
|
||||
/* line 278, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected {
|
||||
background: #005177;
|
||||
color: #fff; }
|
||||
/* line 265, ../sass/search/_search.scss */
|
||||
/* line 282, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
|
||||
color: #0099cc; }
|
||||
/* line 268, ../sass/search/_search.scss */
|
||||
/* line 285, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
|
||||
color: #fff; }
|
||||
/* line 275, ../sass/search/_search.scss */
|
||||
/* line 292, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
|
||||
background: #404040;
|
||||
color: #cccccc; }
|
||||
/* line 278, ../sass/search/_search.scss */
|
||||
/* line 295, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
|
||||
display: block; }
|
||||
/* line 281, ../sass/search/_search.scss */
|
||||
/* line 298, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
|
||||
color: #33ccff; }
|
||||
/* line 289, ../sass/search/_search.scss */
|
||||
/* line 306, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon {
|
||||
position: relative; }
|
||||
/* line 291, ../sass/search/_search.scss */
|
||||
/* line 308, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon.loading {
|
||||
pointer-events: none;
|
||||
margin-left: 6px; }
|
||||
/* line 295, ../sass/search/_search.scss */
|
||||
/* line 312, ../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 305, ../sass/search/_search.scss */
|
||||
/* line 322, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
|
||||
margin-left: 6px; }
|
||||
/* line 310, ../sass/search/_search.scss */
|
||||
/* line 327, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon:not(.loading) {
|
||||
cursor: pointer; }
|
||||
/* line 315, ../sass/search/_search.scss */
|
||||
/* line 332, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-more-button {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
$textInputHeight: 19px; // This is equal to the default value, 19px
|
||||
|
||||
width: 100%;
|
||||
height: $textInputHeight;
|
||||
margin-top: $heightAdjust;
|
||||
|
||||
position: relative;
|
||||
@ -172,13 +173,9 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// Do nothing
|
||||
}
|
||||
|
||||
&.special {
|
||||
font-weight: bold;
|
||||
background-color: lighten($colorBodyBg, 25%);
|
||||
background-color: lighten($colorBodyBg, 30%);
|
||||
|
||||
.search-menu-label {
|
||||
font-size: 1.1em;
|
||||
@ -210,6 +207,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.active-filter-display {
|
||||
font-size: .6em;
|
||||
height: auto;
|
||||
|
||||
.clear-filters-icon {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-right: $rightPadding + 4px;
|
||||
padding-left: 4px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: $colorItemFg;
|
||||
font-size: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-scroll {
|
||||
// Spacing away from the search input
|
||||
top: 25px;
|
||||
|
||||
@ -61,7 +61,8 @@
|
||||
|
||||
<ul>
|
||||
<!-- First element is special - it's a reset option -->
|
||||
<li class="search-menu-item special">
|
||||
<li class="search-menu-item special"
|
||||
title="Select all filters.">
|
||||
|
||||
<label class="checkbox custom search-menu-checkbox">
|
||||
<input type="checkbox"
|
||||
@ -99,13 +100,21 @@
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Active filter display -->
|
||||
<div class="active-filter-display"
|
||||
ng-if="filtersString !== ''">
|
||||
Filtered by: {{ filtersString }}
|
||||
<a class="ui-symbol clear-filters-icon"
|
||||
ng-click="ngModel.checkAll = true; controller.checkAll(); controller.updateOptions()">
|
||||
x
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- This div exists to determine scroll bar location -->
|
||||
<div class="search-scroll abs">
|
||||
|
||||
|
||||
@ -41,6 +41,7 @@ define(function () {
|
||||
// $scope.ngModel.input, $scope.ngModel.search, $scope.ngModel.checked
|
||||
$scope.types = [];
|
||||
$scope.ngModel.checked = {};
|
||||
$scope.filtersString = "";
|
||||
|
||||
function filter(hits) {
|
||||
var newResults = [],
|
||||
@ -185,13 +186,23 @@ define(function () {
|
||||
updateOptions: function () {
|
||||
var type;
|
||||
|
||||
// Update all-checked status
|
||||
// Update all-checked status and the filters string
|
||||
$scope.ngModel.checkAll = true;
|
||||
$scope.filtersString = '';
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
if ($scope.ngModel.checkAll === true) {
|
||||
$scope.filtersString = '';
|
||||
}
|
||||
|
||||
// Re-filter results
|
||||
$scope.results = filter(fullResults.hits);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user