[Frontend] Markup / Angular mods to Search

Fixes #1093
WIP: markup changes. Needs CSS mods effected in
#1047 as well.
This commit is contained in:
Charles Hacskaylo 2016-07-19 15:23:22 -07:00
parent 14f1a1f740
commit 9fa6184b0a

View File

@ -19,41 +19,56 @@
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">
ng-controller="ClickAwayController as toggle" <div class="search-bar flex-elem l-flex-row"
ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }"> ng-controller="ClickAwayController as toggle"
<input class="search-input" ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
type="text"
ng-model="ngModel.input"
ng-keyup="controller.search()"/>
<a class="clear-icon"
ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()"></a>
<a class="menu-icon"
ng-click="toggle.toggle()"></a>
<mct-include key="'search-menu'"
class="menu-element search-menu-holder"
ng-class="{off: !toggle.isActive()}"
ng-model="ngModel"
ng-click="toggle.setState(true)">
</mct-include>
</div>
<div class="active-filter-display flex-elem holder"
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
ng-controller="SearchMenuController as menuController">
<a class="clear-icon clear-filters-icon"
ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
</div>
<div class="search-results flex-elem holder grows vscroll"
ng-class="{ off: !(loading || results.length > 0), loading: loading }">
<mct-representation key="'search-item'"
ng-repeat="result in results"
mct-object="result.object"
ng-model="ngModel"
class="l-flex-row flex-elem grows">
</mct-representation>
<a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
</div>
<div class="holder flex-elem grows">
<input class="search-input"
type="text"
ng-model="ngModel.input"
ng-keyup="controller.search()"/>
<a class="clear-icon clear-input icon-x-in-circle"
ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()"></a>
<a class="menu-icon context-available"
ng-click="toggle.toggle()"></a>
<mct-include key="'search-menu'"
class="menu-element search-menu-holder"
ng-class="{off: !toggle.isActive()}"
ng-model="ngModel"
ng-click="toggle.setState(true)">
</mct-include>
</div>
<a class="holder s-btn 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"
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
<a class="clear-filters icon-x-in-circle"
ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
</div>
<div class="holder results-msg" ng-model="ngModel"
ng-show="!loading && !results.length > 0 && ngModel.search">
No results found</div>
<div class="search-results flex-elem holder grows vscroll"
ng-class="{ off: !(loading || results.length > 0), loading: loading }">
<mct-representation key="'search-item'"
ng-repeat="result in results"
mct-object="result.object"
ng-model="ngModel"
class="l-flex-row flex-elem grows">
</mct-representation>
<a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
</div>
</div>
</div> </div>