patternfly/angular-patternfly

<div class="canvas-editor-container">

    <div class="canvas-editor-toolbar">
        <button id="toggleToolbox" class="btn btn-primary" ng-class="{'disabled': $ctrl.chartViewModel.inConnectingMode || $ctrl.readOnly}" type="button"
                ng-click="$ctrl.toggleToolbox()"
                tooltip-placement="bottom-left" uib-tooltip="{{'Add Item To Canvas'}}">Add Item
          <span class="fa" ng-class="{'fa-angle-double-up': $ctrl.toolboxVisible, 'fa-angle-double-down': !$ctrl.toolboxVisible}"></span>
        </button>

        <!-- user defined more actions -->
        <span ng-transclude></span>

        <span class="right-aligned-controls">
          <input ng-class="{'disabled': $ctrl.chartViewModel.inConnectingMode}"
                 ng-model="$ctrl.hideConnectors"
                 ng-change="$ctrl.toggleshowHideConnectors()"
                 type="checkbox"
                 ng-checked="$ctrl.hideConnectors"/>
          <span class="show-hide-connectors-label">Hide Connectors</span>
          <a id="zoomOut" ng-click="$ctrl.zoomOut()" ng-class="{'disabled': $ctrl.minZoom()}">
            <span class="pficon fa fa-minus"
                  tooltip-append-to-body="true" tooltip-placement="bottom"
                  uib-tooltip="{{'Zoom Out'}}">
            </span>
          </a>
          <a id="zoomIn" ng-click="$ctrl.zoomIn()" ng-class="{'disabled': $ctrl.maxZoom()}">
            <span class="pficon fa fa-plus"
                  tooltip-append-to-body="true" tooltip-placement="bottom-right"
                  uib-tooltip="{{'Zoom In'}}">
            </span>
          </a>
        </span>
    </div>

    <div class="canvas-editor-toolbox-container">

        <div class="canvas-editor-toolbox" id="toolbox" ng-if="$ctrl.toolboxVisible">

          <a ng-click="$ctrl.toolboxVisible = false" class="close-toolbox"><span class="pficon pficon-close"></span></a>

          <div class="toolbox-filter">
            <input ng-model="$ctrl.searchText" id="filterFld" class="search-text"
                   placeholder="{{'Filter by name'}}"/>
            <a ng-click="$ctrl.searchText = ''"><span class="pficon pficon-close clear-search-text"></span></a>
          </div>

          <uib-tabset>
            <uib-tab ng-repeat="tab in $ctrl.toolboxTabs" heading="" active="tab.active">
              <uib-tab-heading ng-click="$ctrl.tabClicked()">
                <div class="tab-pre-title">{{tab.preTitle}}</div>
                <div class="tab-title" ng-class="{'tab-single-line':tab.preTitle == null}">{{tab.title}}</div>
              </uib-tab-heading>

              <uib-tabset class="subtabs" ng-if="tab.subtabs">
                <uib-tab ng-repeat="subtab in tab.subtabs" heading="{{subtab.title}}" active="subtab.active" ng-click="$ctrl.tabClicked()">

                  <uib-tabset class="subtabs" ng-if="subtab.subtabs">
                    <uib-tab ng-repeat="subsubtab in subtab.subtabs" heading="{{subsubtab.title}}" active="subsubtab.active" ng-click="$ctrl.tabClicked()">
                      <toolbox-items items="subsubtab.items"
                                     start-drag-callback="$ctrl.startCallback"
                                     click-callback="$ctrl.addNodeByClick"
                                     search-text="$ctrl.searchText"/>
                    </uib-tab>
                  </uib-tabset>

                  <!-- SubTabs without Sub-Sub Tabs -->
                  <toolbox-items ng-if="!subtab.subtabs"
                                 items="subtab.items"
                                 start-drag-callback="$ctrl.startCallback"
                                 click-callback="$ctrl.addNodeByClick"
                                 search-text="$ctrl.searchText"/>
                </uib-tab>
              </uib-tabset>

              <!-- Primary Tabs without SubTabs -->
              <toolbox-items ng-if="!tab.subtabs" items="tab.items"
                             start-drag-callback="$ctrl.startCallback"
                             click-callback="$ctrl.addNodeByClick"
                             search-text="$ctrl.searchText"/>
            </uib-tab>
          </uib-tabset>
        </div>

        <div class="canvas-container" data-drop="true" data-jqyoui-options jqyoui-droppable="{onDrop:'$ctrl.dropCallback'}">
          <pf-canvas chart-data-model="$ctrl.chartDataModel"
                     chart-view-model="$ctrl.chartViewModel"
                     read-only="$ctrl.readOnly"
                     hide-connectors="$ctrl.hideConnectors">
          </pf-canvas>
        </div>
    </div>
</div>