53 lines
2.7 KiB
HTML
53 lines
2.7 KiB
HTML
<!--! Magic Searchbar -->
|
|
<div class="magic-search">
|
|
<div class="search-bar">
|
|
<span class="fi-filter fa fa-search go"></span>
|
|
<span class="search-main-area">
|
|
<span class="radius secondary item"
|
|
ng-repeat="facet in ctrl.currentSearch" ng-cloak="cloak" ng-class="{'server-side-item': facet.isServer}">
|
|
<span data-toggle="tooltip" title="{$ ::strings.serverFacet $}"
|
|
ng-class="{'fa fa-server': facet.isServer}"></span>
|
|
<span data-toggle="tooltip" title="{$ ::strings.clientFacet $}"
|
|
ng-class="{'fa fa-desktop': !facet.isServer}"></span>
|
|
<span class="magic-search-result-title">{$ ::facet.label[0] $}:</span>
|
|
<span class="magic-search-result-string">{$ ::facet.label[1] $}</span>
|
|
<a class="remove" ng-click="ctrl.removeFacet($index, $event)" title="{$ ::strings.remove $}">
|
|
<span class="fi-x fa fa-times"></span>
|
|
</a>
|
|
</span>
|
|
<span class="search-selected" ng-cloak="" ng-show="ctrl.facetSelected">
|
|
{$ ctrl.facetSelected.label[0] $}:
|
|
</span>
|
|
<!-- For bootstrap, the dropdown attribute is moved from input up to div. -->
|
|
<span class="search-entry" dropdown is-open="ctrl.isMenuOpen">
|
|
<input class="search-input" type="text" dropdown-toggle
|
|
placeholder="{$ strings.prompt $}" autocomplete="off" />
|
|
<ul class="facet-drop f-dropdown dropdown-menu" data-dropdown-content=""
|
|
ng-if="ctrl.filteredObj.length > 0">
|
|
<li ng-repeat="facet in ctrl.filteredObj" ng-show="!ctrl.facetSelected">
|
|
<a ng-click="ctrl.facetClicked($index, $event, facet.name)"
|
|
ng-show="!ctrl.isMatchLabel(facet.label)">{$ ::facet.label $}</a>
|
|
<a ng-click="ctrl.facetClicked($index, $event, facet.name)"
|
|
ng-show="ctrl.isMatchLabel(facet.label)">
|
|
{$ ::facet.label[0] $}<span class="match">{$ ::facet.label[1] $}</span>{$ ::facet.label[2] $}
|
|
</a>
|
|
</li>
|
|
<li ng-repeat="option in ctrl.filteredOptions" ng-show="ctrl.facetSelected">
|
|
<a ng-click="ctrl.optionClicked($index, $event, option.key)"
|
|
ng-show="!ctrl.isMatchLabel(option.label)">
|
|
{$ option.label $}
|
|
</a>
|
|
<a ng-click="ctrl.optionClicked($index, $event, option.key)"
|
|
ng-show="ctrl.isMatchLabel(option.label)">
|
|
{$ ::option.label[0] $}<span class="match">{$ ::option.label[1] $}</span>{$ ::option.label[2] $}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
</span>
|
|
<a class="magic-search-clear" ng-click="ctrl.clearSearch()" title="{$ ::strings.cancel $}">
|
|
<span class="fi-x fa fa-times cancel"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|