ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 13:17:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1106 from nasa/search1093-b

Browse Source 
Minor Search enhancements
This commit is contained in:
Victor Woeltjen 2016-08-22 15:27:12 -07:00 committed by GitHub
commit 44f8c2f49f
2 changed files with 61 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -126,16 +126,15 @@
$p: $interiorMargin; $p: $interiorMargin;
box-sizing: border-box; box-sizing: border-box;
line-height: 130%; line-height: 130%;
//padding-left: $s * 2.25; padding-left: $s * 2;
font-size: $s; font-size: $s;
.clear-filters { .clear-filters {
color: $colorInputIcon;
opacity: 1; opacity: 1;
font-size: 0.9em; font-size: 0.9em;
margin-right: $interiorMarginSm; margin-right: $interiorMarginSm;
//position: absolute; position: absolute;
//left: 1px; left: 1px;
cursor: pointer; cursor: pointer;
} }
} }

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

@ -19,10 +19,12 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchController as controller"> <div class="angular-w" ng-controller="SearchController as controller">
<div class="search-bar flex-elem" <div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchMenuController as menuController">
<div class="search-bar flex-elem l-flex-row"
ng-controller="ToggleController as toggle" ng-controller="ToggleController as toggle"
ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }"> ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
<div class="holder flex-elem grows">
<input class="search-input" <input class="search-input"
type="text" type="text"
ng-model="ngModel.input" ng-model="ngModel.input"
@ -30,6 +32,7 @@
<a class="clear-icon clear-input icon-x-in-circle" <a class="clear-icon clear-input icon-x-in-circle"
ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}" ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()"></a> ng-click="ngModel.input = ''; controller.search()"></a>
<!-- To prevent double triggering of clicks on click away, render <!-- To prevent double triggering of clicks on click away, render
non-clickable version of the button when menu active--> non-clickable version of the button when menu active-->
<a ng-if="!toggle.isActive()" class="menu-icon context-available" <a ng-if="!toggle.isActive()" class="menu-icon context-available"
@ -43,12 +46,26 @@
parameters="{menuVisible: toggle.setState}"> parameters="{menuVisible: toggle.setState}">
</mct-include> </mct-include>
</div> </div>
<a class="holder s-button flex-elem btn-cancel"
ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
Cancel</a>
</div>
<div class="active-filter-display flex-elem holder" <div class="active-filter-display flex-elem holder"
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}" ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
ng-controller="SearchMenuController as menuController"> <a class="clear-filters icon-x-in-circle s-icon-button"
<a class="clear-icon clear-filters icon-x-in-circle"
ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }} ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
</div> </div>
<div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
{{
!results.length > 0? 'No results found':
results.length + ' result' + (results.length > 1? 's':'') + ' found'
}}
</div>
<div class="search-results flex-elem holder grows vscroll" <div class="search-results flex-elem holder grows vscroll"
ng-class="{ off: !(loading || results.length > 0), loading: loading }"> ng-class="{ off: !(loading || results.length > 0), loading: loading }">
<mct-representation key="'search-item'" <mct-representation key="'search-item'"
@ -59,5 +76,5 @@
</mct-representation> </mct-representation>
<a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a> <a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
</div> </div>
</div>
</div> </div>