catalog-ui/src/app/directives/graphs-v2/palette/palette.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17
  18 <div class="w-sdc-designer-leftbar">
  19     <div class="w-sdc-designer-leftbar-title">Elements <span class="w-sdc-designer-leftbar-title-count">{{model.numberOfElements}}</span>
  20     </div>
  21
  22     <div class="w-sdc-designer-leftbar-search">
  23         <input type="text" class="w-sdc-designer-leftbar-search-input" placeholder="Search..."
  24                data-ng-model="searchText" data-ng-change="searchComponents(searchText)"
  25                ng-model-options="{ debounce: 500 }" data-tests-id="searchAsset"/>
  26         <span class="w-sdc-search-icon leftbar" data-ng-class="{'cancel':searchText, 'magnification':!searchText}"
  27               data-ng-click="searchText=''; searchComponents('',categories)"></span>
  28     </div>
  29     <div class="i-sdc-designer-leftbar-section"
  30          data-ng-repeat="(entityCategory, objCategory) in displaySortedCategories track by $index"
  31          data-ng-class="{'expanded': expandedSection.indexOf(entityCategory) !== -1}">
  32         <div class="i-sdc-designer-leftbar-section-title pointer" data-ng-click="sectionClick(entityCategory)"
  33              data-tests-id="leftbar-section-title-{{entityCategory}}">
  34             {{entityCategory}}
  35             <div class="i-sdc-designer-leftbar-section-title-icon"></div>
  36         </div>
  37         <div class="i-sdc-designer-leftbar-section-content"
  38              data-ng-repeat="(subCategory, components) in objCategory track by $index">
  39             <div class="i-sdc-designer-leftbar-section-content-subcat i-sdc-designer-leftbar-section-content-item">
  40                 {{subCategory}}
  41             </div>
  42             <div class="i-sdc-designer-leftbar-section-content-item"
  43                  data-ng-class="{'default-pointer': isViewOnly}"
  44                  data-ng-mouseover="!isViewOnly && onMouseOver(component, $event.currentTarget)"
  45                  data-ng-mouseleave="!isViewOnly && onMouseOut(component)"
  46                  data-drag="!isViewOnly && component.isDraggable"
  47                  data-jqyoui-options="{revert: 'invalid', helper:setElementTemplate, appendTo:'body', cursorAt: {left:38, top: 38}, cursor:'move'}"
  48                  jqyoui-draggable="{index:{{$index}},animate:true,onStart:'dragStartCallback(component)',onStop:'dragStopCallback()', onDrag:'onDragCallback()'}"
  49                  data-ng-repeat="component in components | orderBy: 'displayName' track by $index"
  50                  data-tests-id={{component.displayName}}>
  51                 <div class="i-sdc-designer-leftbar-section-content-item-icon-ph">
  52                     <div class="medium small {{component.iconClass}}"
  53                          data-tests-id="leftbar-section-content-item-{{component.displayName}}">
  54                         <div class="{{component.certifiedIconClass}}" uib-tooltip="Not certified"
  55                              tooltip-class="uib-custom-tooltip" tooltip-placement="bottom" tooltip-popup-delay="700">
  56                         </div>
  57                     </div>
  58                 </div>
  59                 <div class="i-sdc-designer-leftbar-section-content-item-info">
  60                     <span class="i-sdc-designer-leftbar-section-content-item-info-title"
  61                           uib-tooltip="{{component.displayName}}" tooltip-class="uib-custom-tooltip"
  62                           tooltip-placement="bottom" tooltip-popup-delay="700">
  63                         {{component.displayName}}</span>
  64                     <div class="i-sdc-designer-leftbar-section-content-item-info-text">
  65                         V.{{component.version}}
  66                     </div>
  67                     <div class="i-sdc-designer-leftbar-section-content-item-info-text"
  68                         uib-tooltip="{{component.type}}" tooltip-class="uib-custom-tooltip"
  69                         tooltip-placement="top" tooltip-popup-delay="700"> Type:
  70                         {{component.componentSubType}}
  71                     </div>
  72                 </div>
  73             </div>
  74         </div>
  75     </div>
  76 </div>