Merge "Add placeholder text to transfer table search bar"

horizon/static/angular/table/basic-table.js

@@ -3,6 +3,7 @@
 
   angular.module('hz.widget.table')
 
+    .constant('FILTER_PLACEHOLDER_TEXT', gettext('Filter'))
     /**
      * @ngdoc directive
      * @name hz.widget.table.directive:searchBar
@@ -10,6 +11,7 @@
      * @param {string} {array} groupClasses Input group classes (optional)
      * @param {string} {array} iconClasses Icon classes (optional)
      * @param {string} {array} inputClasses Search field classes (optional)
+     * @param {string} placeholder input field placeholder text (optional)
      * @description
      * The `searchBar` directive generates a search field that will
      * trigger filtering of the associated Smart-Table.
@@ -17,17 +19,19 @@
      * groupClasses - classes that should be applied to input group element
      * iconClasses - classes that should be applied to search icon
      * inputClasses - classes that should be applied to search input field
+     * placeholder - text that will be used for a placeholder attribute
      *
      * @restrict E
      *
      * @example
      * ```
-     * <search-bar group-classes="'input-group-sm'"
+     * <search-bar group-classes="input-group-sm"
-     *   icon-classes="'fa-search'" input-classes="...">
+     *   icon-classes="fa-search" input-classes="..." placeholder="Filter">
      * </search-bar>
      * ```
      */
-    .directive('searchBar', [ 'basePath', function(path) {
+    .directive('searchBar', [ 'FILTER_PLACEHOLDER_TEXT', 'basePath',
+      function(FILTER_PLACEHOLDER_TEXT, path) {
       return {
         restrict: 'E',
         templateUrl: path + 'table/search-bar.html',
@@ -38,9 +42,13 @@
           if (angular.isDefined(attrs.iconClasses)) {
             element.find('.fa').addClass(attrs.iconClasses);
           }
+          var searchInput = element.find('[st-search]');
+
           if (angular.isDefined(attrs.inputClasses)) {
-            element.find('[st-search]').addClass(attrs.inputClasses);
+            searchInput.addClass(attrs.inputClasses);
           }
+          var placeholderText = attrs.placeholder || FILTER_PLACEHOLDER_TEXT;
+          searchInput.attr('placeholder', placeholderText);
         }
       };
     }]);

horizon/static/angular/table/basic-table.spec.js

@@ -50,6 +50,10 @@
         expect($element.find('.input-group.input-group-sm').length).toBe(1);
       });
 
+      it('should have default placeholder text set to "Filter"', function() {
+        expect($element.find('input[st-search]').attr('placeholder')).toEqual('Filter');
+      });
+
     });
 
   });

horizon/static/angular/table/table.scss

@@ -57,6 +57,13 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
         border-top-right-radius: 3px;
         border-bottom-right-radius: 3px;
       }
+
+      input[type="text"] {
+       @include search-placeholder {
+         font-weight: normal;
+         color: $placeholder-text-color;
+       }
+      }
     }
 
     .search-help {

openstack_dashboard/static/dashboard/scss/_mixins.scss

@@ -0,0 +1,19 @@
+/* This file contains any custom SCSS mixins that can be shared */
+/* For more information on the benefits of Sass mixins and the @mixin syntax,
+ * check out http://www.sass-lang.com/guide#topic-6
+ */
+
+@mixin search-placeholder {
+  &::-webkit-input-placeholder {
+    @content;
+  }
+  &:-moz-placeholder { /* Firefox 18- */
+    @content;
+  }
+  &::-moz-placeholder {  /* Firefox 19+ */
+    @content;
+  }
+  &:-ms-input-placeholder {
+    @content;
+  }
+}

openstack_dashboard/static/dashboard/scss/_variables.scss

@@ -169,6 +169,7 @@ $transfer-btn-border-color: #666666 !default;
 $transfer-disabled-btn-color: #cccccc !default;
 $transfer-disabled-btn-border-color: #cecece !default;
 $transfer-header-bottom-border: 1px solid #eeeeee !default;
+$placeholder-text-color: #b8b8b8 !default;
 
 /* Pie Chart */
 $chart-title-font-size: 1.1em !default;

openstack_dashboard/static/dashboard/scss/horizon.scss

@@ -5,6 +5,9 @@
 // Horizon Variables
 @import "variables";
 
+// Horizon Mixins
+@import "mixins";
+
 // Vendor Components
 @import "/bootstrap/scss/bootstrap";
 @import "/horizon/lib/font-awesome/scss/font-awesome.scss";