Moved filter to top of toolbox, added 'X' close.

Author: dtaylor113

src/canvas-view/canvas-editor/canvas-editor.html

@@ -36,6 +36,14 @@
 
         <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()">
@@ -71,13 +79,6 @@
                              search-text="$ctrl.searchText"/>
             </uib-tab>
           </uib-tabset>
-
-          <div class="toolbox-footer">
-            <!-- 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>
         </div>
 
         <div class="canvas-container" data-drop="true" data-jqyoui-options jqyoui-droppable="{onDrop:'$ctrl.dropCallback'}">

src/canvas-view/canvas-editor/canvas-editor.less

@@ -134,10 +134,8 @@
         cursor: auto;
         opacity: 0.4;
       }
-      .toolbox-footer {
-        margin-bottom: 10px;
+      .toolbox-filter {
         margin-top: 10px;
-        width: 100%;
         .search-text {
           border: 1px solid @color-pf-black-400;
           float: right;
@@ -161,8 +159,17 @@
         }
       }
       .close-toolbox {
-        padding-top: 36px;
-        text-align: center;
+        font-size: 16px;
+        float: right;
+        position: relative;
+        cursor: pointer;
+        top: -17px;
+        right: -12px;
+        color: @color-pf-black-600;
+        cursor: pointer;
+        :hover {
+          color: @color-pf-black-800;
+        }
       }
     }
     .canvas-container {