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