CHE-3392: add widget for displaying advanced filter

Signed-off-by: Oleksii Orel <oorel@redhat.com>

Author: Oleksii Orel

dashboard/bower.json

@@ -10,7 +10,7 @@
     "angular": "1.4.8",
     "angular-animate": "1.4.8",
     "angular-aria": "1.4.8",
-    "angular-bootstrap": "0.13.0",
+    "angular-bootstrap": "1.1.2",
     "angular-charts": "0.2.6",
     "angular-cookies": "1.4.8",
     "angular-dropdowns": "1.0.0",

dashboard/src/app/administration/docker-registry/docker-registry-list/docker-registry-list.html

@@ -76,7 +76,7 @@
             <div flex-gt-xs="25">
               <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
                   <span class="che-list-actions">
-                      <div ng-click="dockerRegistryListController.showEditRegistryDialog($event, registry)" tooltip="Edit registry">
+                      <div ng-click="dockerRegistryListController.showEditRegistryDialog($event, registry)" uib-tooltip="Edit registry">
                         <span class="material-design icon-ic_mode_edit_24px"></span>
                       </div>
                   </span>

dashboard/src/app/demo-components/demo-components.controller.ts

@@ -10,7 +10,7 @@
  */
 'use strict';
 
-enum Tab {Font, Panel, Selecter, Icons, Buttons, Input, List, Label_container, Stack_selector};
+enum Tab {Font, Panel, Selecter, Icons, Buttons, Input, List, Label_container, Stack_selector, Popover};
 
 /**
  * This class is handling the controller for the demo of components
@@ -36,6 +36,8 @@ export class DemoComponentsController {
   number: number;
   numberIsChanged: number;
 
+  placement: any;
+
   /**
    * Default constructor that is using resource
    * @ngInject for Dependency injection
@@ -49,7 +51,23 @@ export class DemoComponentsController {
     } else {
       this.selectedIndex = Tab.Font;
     }
-
+    this.placement = {
+      options: [
+        'top',
+        'top-left',
+        'top-right',
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'left',
+        'left-top',
+        'left-bottom',
+        'right',
+        'right-top',
+        'right-bottom'
+      ],
+      selected: 'top'
+    };
     this.init();
   }
 

dashboard/src/app/demo-components/demo-components.html

@@ -182,7 +182,8 @@ <h6>This is h6
         </textarea>
 
         <p>Selected value of toggle is : {{demoComponentsController.selectedToggle}}</p>
-        <che-toggle ng-init="demoComponentsController.selectedToggle='Public'" ng-model="demoComponentsController.selectedToggle">
+        <che-toggle ng-init="demoComponentsController.selectedToggle='Public'"
+                    ng-model="demoComponentsController.selectedToggle">
           <che-toggle-button che-font-icon="fa fa-lock" che-title="Public"></che-toggle-button>
           <che-toggle-button che-font-icon="fa fa-unlock" che-title="Private"></che-toggle-button>
         </che-toggle>
@@ -369,12 +370,37 @@ <h6>This is h6
     <md-tab label="Stack Selector"
             md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Stack_selector)">
       <div layout="column">
-        <che-label-container che-label-name="{{createProjectCtrl.workspaces.length ? 'Select Workspace' : 'Select Stack'}}"
-                             che-label-description="{{createProjectCtrl.workspaces.length ? 'Select existing workspace or create it from stack' : 'Select stack'}}, recipe or image used to define your environment runtime. Workspace environments are used to build and run your project.">
+        <che-label-container
+          che-label-name="{{createProjectCtrl.workspaces.length ? 'Select Workspace' : 'Select Stack'}}"
+          che-label-description="{{createProjectCtrl.workspaces.length ? 'Select existing workspace or create it from stack' : 'Select stack'}}, recipe or image used to define your environment runtime. Workspace environments are used to build and run your project.">
           <stack-selector></stack-selector>
         </che-label-container>
       </div>
     </md-tab>
-
+    <md-tab label="Popover"
+            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Popover)">
+      <textarea demo-source-render>
+        <!-- toggle-button-popover -->
+        <toggle-button-popover button-title="PopupTags"
+                               button-value="isOpen"
+                               button-font-icon="fa fa-sliders">
+          <che-stack-library-filter stack-tags="['tag1', 'tag2', 'tag3', 'tag4']"
+                                    selected-tags="selectedTags">
+          </che-stack-library-filter>
+        </toggle-button-popover>
+        <button class="btn btn-default" ng-click="isOpen = !isOpen">Change popover state</button>
+      </textarea>
+      <p>
+        <label><h4>Popover placement</h4></label>
+        <select class="form-control" ng-model="demoComponentsController.placement.selected"
+                ng-options="options as options for options in demoComponentsController.placement.options"></select>
+      </p>
+      <textarea demo-source-render>
+        <!-- html-popover-placement -->
+        <button popover-placement="{{demoComponentsController.placement.selected}}"
+                uib-popover-html="'<b>HTML!!!</b>, <i>inline</i>'"
+                class="btn btn-default">HTML Popover (inline)</button>
+      </textarea>
+    </md-tab>
   </md-tabs>
 </md-content>

dashboard/src/app/demo-components/demo-components.styl

@@ -1,3 +1,10 @@
 .demo-components
   md-tab-content
     padding 20px
+    button[uib-popover-html], toggle-button-popover
+      margin-left 210px
+      margin-bottom 20px
+      outline none !important
+      & + button
+        margin-left 70px
+        outline none !important

dashboard/src/app/factories/list-factories/factory-item/factory-item.html

@@ -39,7 +39,7 @@
            class="che-list-item-name"
            ng-click="factoryItemController.redirectToFactoryDetails();">
         <span class="che-xs-header noselect" hide-gt-xs>Factory</span>
-        <span tooltip="Created: {{factoryItemController.factory.creator.created | amDateFormat:'dddd, MMMM Do, YYYY'}}"
+        <span uib-tooltip="Created: {{factoryItemController.factory.creator.created | amDateFormat:'dddd, MMMM Do, YYYY'}}"
               class="che-hover">{{factoryItemController.factory.name ? factoryItemController.factory.name : factoryItemController.getFactoryLinks()[0]}}</span>
       </div>
       <div flex-gt-xs="60" ng-click="factoryItemController.redirectToFactoryDetails();">
@@ -49,7 +49,7 @@
       <div flex-gt-xs="15">
         <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
         <span class="che-list-actions">
-          <a tooltip="Open in IDE" ng-href="#/load-factory/{{factoryItemController.factory.id}}">
+          <a uib-tooltip="Open in IDE" ng-href="#/load-factory/{{factoryItemController.factory.id}}">
             <span class="fa fa-chevron-circle-right factory-action"></span>
           </a>
         </span>

dashboard/src/app/index.module.ts

@@ -43,7 +43,7 @@
       <div flex-gt-xs="20">
         <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
         <span class="che-list-actions">
-          <a tooltip="Open in IDE" ng-href="#/ide/{{projectItemCtrl.workspace.namespace}}/{{projectItemCtrl.workspace.config.name}}">
+          <a uib-tooltip="Open in IDE" ng-href="#/ide/{{projectItemCtrl.workspace.namespace}}/{{projectItemCtrl.workspace.config.name}}">
             <span class="fa fa-chevron-circle-right"></span>
           </a>
         </span>

dashboard/src/app/projects/list-projects/project-item/project-item.html

@@ -51,11 +51,11 @@
            class="stack-item-actions">
         <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
         <span class="che-list-actions">
-          <a tooltip="Delete Stack" ng-disabled="stackItemController.stack.creator !== stackItemController.userId"
+          <a uib-tooltip="Delete Stack" ng-disabled="stackItemController.stack.creator !== stackItemController.userId"
              ng-click="stackItemController.onDelete(stackItemController.stack);">
             <span class="fa fa-trash-o"></span>
           </a>
-          <a tooltip="Duplicate stack" ng-click="stackItemController.onDuplicate(stackItemController.stack);">
+          <a uib-tooltip="Duplicate stack" ng-click="stackItemController.onDuplicate(stackItemController.stack);">
             <span class="fa fa-copy"></span>
           </a>
         </span>

dashboard/src/app/stacks/list-stacks/stack-item/stack-item.html

@@ -75,7 +75,7 @@
             <div flex="10">
               <div class="che-list-actions"
                    ng-click="listComponentsController.showEditDialog($event,listComponentsController.components.indexOf(component))">
-                <i class="fa fa-pencil" tooltip="Edit"></i>
+                <i class="fa fa-pencil" uib-tooltip="Edit"></i>
               </div>
             </div>
           </div>