Motion >> Repos - motion-next.git/blob

   1 <div flex layout="row" layout-align="start center" ng-init="vm.onInit()">
   2   <label>
   3     <md-button
   4       class="ms-search-bar-expander md-icon-button"
   5       aria-label="Expand Search Bar"
   6       ng-click="vm.expand()"
   7       ng-if="!vm.resultsLoading || vm.collapsed"
   8     >
   9       <md-icon
  10         id="ms-search-bar-icon"
  11         md-font-icon="icon-magnify"
  12         class="s24"
  13         ng-class="{'{{ vm.iconColor }}': vm.iconColor && vm.collapsed }"
  14       ></md-icon>
  15     </md-button>
  16     <div
  17       class="ms-search-bar-loader"
  18       layout="row"
  19       layout-align="center center"
  20       ng-if="vm.resultsLoading && !vm.collapsed"
  21     >
  22       <md-progress-circular
  23         class="md-accent"
  24         md-diameter="32"
  25         md-mode="indeterminate"
  26       ></md-progress-circular>
  27     </div>
  28   </label>
  29   <input
  30     ng-if="!vm.collapsed"
  31     focus-on="!vm.collapsed"
  32     type="text"
  33     placeholder="Search"
  34     flex
  35     ng-model="vm.query"
  36     ng-model-options="vm.queryOptions"
  37     ng-blur="vm.blurCollapse()"
  38     ng-keydown="vm.handleKeydown($event)"
  39   />
  40   <md-button
  41     class="ms-search-bar-collapser md-icon-button"
  42     ng-click="vm.collapse()"
  43     aria-label="Collapse Search Bar"
  44   >
  45     <md-icon md-font-icon="icon-close" class="icon s24"></md-icon>
  46   </md-button>
  47
  48   <div class="ms-search-bar-results" ng-if="vm.results" ms-scroll>
  49     <div class="no-results" ng-if="vm.results.length === 0">No Results!</div>
  50
  51     <div
  52       class="result"
  53       ng-repeat="result in vm.results"
  54       ng-click="vm.handleResultClick(result)"
  55       ng-mouseenter="vm.handleMouseenter($index)"
  56       ng-mousedown="vm.absorbEvent($event)"
  57       ng-class="{'selected': $index == vm.selectedResultIndex}"
  58       md-ink-ripple
  59     >
  60       <div layout="row" layout-align="start center">
  61         <div class="icon-container" layout="row" layout-align="center center">
  62           <i ng-if="result.icon" class="icon {{ result.icon }}"></i>
  63           <div ng-if="!result.icon" class="square md-accent-bg"></div>
  64         </div>
  65         <div>
  66           <div class="title">{{ result.title }}</div>
  67           <div class="description" ng-if="result.description">
  68             {{ result.description }}
  69           </div>
  70         </div>
  71       </div>
  72     </div>
  73   </div>
  74 </div>