modules/yangman-resources/src/main/resources/yangman/views/leftpanel/modules-tab.tpl.html

   1 <section ng-cloak ng-controller="ModulesListCtrl as modulesList" class="h100">
   2     <!-- searching -->
   3     <section class="yangmanModule__left-panel__search">
   4         <md-input-container layout="row" md-no-float class="modules-list-search">
   5             <md-icon class="material-icons">search</md-icon>
   6             <input class="ng-pristine ng-valid ng-touched"
   7                    type="text"
   8                    flex
   9                    placeholder="{{'YANGMAN_SEARCH' | translate}}"
  10                    ng-model="modulesList.search"
  11                    aria-invalid="false" />
  12
  13             <!-- search clear button -->
  14             <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}" flex="none"
  15                        ng-click="modulesList.clearFilter()"
  16                        ng-if="modulesList.search">
  17                 <md-icon class="material-icons clickable">
  18                     close
  19                 </md-icon>
  20                 <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
  21             </md-button>
  22         </md-input-container>
  23
  24     </section>
  25
  26     <!-- divider -->
  27     <md-divider ng-hide="modulesList.showLoadingBox"></md-divider>
  28
  29     <!-- modules list -->
  30     <md-list ng-cloak class="yangmanModule__modules-list scrollableY">
  31
  32         <!-- Loading bar -->
  33         <md-progress-linear md-mode="indeterminate" ng-show="modulesList.showLoadingBox"></md-progress-linear>
  34
  35         <!-- Mount point title -->
  36         <section ng-show="modulesList.moduleListTitle.length">
  37             <h4>{{ modulesList.moduleListTitle }}</h4>
  38             <!-- Line -->
  39             <md-divider></md-divider>
  40         </section>
  41
  42         <!-- Modules list -->
  43         <md-list-item ng-repeat="module in modulesList.treeApis | filter: modulesList.customSearch | orderBy: 'label'"
  44                       class="yangmanModule__modules-list__item"
  45                       ng-class="{'expanded' : module.expanded, 'selected' : modulesList.checkSelectedModule(module)}"
  46                       ng-hide="modulesList.showLoadingBox"
  47                       ng-click="modulesList.setModule(module, $event)">
  48             <!-- Item content -->
  49             <div layout="column" flex>
  50                 <!-- Module title -->
  51                 <div layout="row" layout-align="center center"  class="pointer title">
  52                     <md-icon md-font-set="material-icons" class="top-icon top-element">
  53                         {{module.expanded ? 'keyboard_arrow_down':'keyboard_arrow_right'}}
  54                     </md-icon>
  55                     <p flex class="top-element" md-highlight-text="modulesList.search" md-highlight-flags="i"> {{module.label}} </p>
  56                 </div>
  57
  58                 <!-- Datastore && rpc -->
  59                 <md-list flex class="yangmanModule__datastore-list" ng-show="module.expanded">
  60                     <md-list-item ng-repeat="item in module.children">
  61                         <div flex
  62                              layout="row"
  63                              layout-align="center center"
  64                              class="pointer"
  65                              ng-click="modulesList.setDataStore(item, module)">
  66                             <md-icon md-font-set="material-icons">keyboard_arrow_right</md-icon>
  67                             <p flex> {{item.label}} </p>
  68                         </div>
  69                     </md-list-item>
  70                 </md-list>
  71             </div>
  72             <!-- Line -->
  73             <md-divider></md-divider>
  74         </md-list-item>
  75     </md-list>
  76 </section>