From 7060387ea8b1e9fab4356d068aa555bd6e271f1b Mon Sep 17 00:00:00 2001 From: Brian Tully Date: Wed, 18 Mar 2015 18:44:17 -0400 Subject: [PATCH] Add placeholder text to transfer table search bar This patch updates the table widget to allow for a placeholder attribute and value to be set on the search input field. If not specified, "Filter" is used as the default placeholder text. There is also a SCSS mixin to style the placeholder text for various browsers, which has been added to a new common _mixins.scss file. Closes-Bug: 1433801 Change-Id: I4fdb57474b06ab17296d228becddf051f033556b --- horizon/static/angular/table/basic-table.js | 16 ++++++++++++---- .../static/angular/table/basic-table.spec.js | 4 ++++ horizon/static/angular/table/table.scss | 7 +++++++ .../static/dashboard/scss/_mixins.scss | 19 +++++++++++++++++++ .../static/dashboard/scss/_variables.scss | 1 + .../static/dashboard/scss/horizon.scss | 3 +++ 6 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 openstack_dashboard/static/dashboard/scss/_mixins.scss diff --git a/horizon/static/angular/table/basic-table.js b/horizon/static/angular/table/basic-table.js index c032d5e800..b3db3134f5 100644 --- a/horizon/static/angular/table/basic-table.js +++ b/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 * ``` - * + * * * ``` */ - .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); } }; }]); diff --git a/horizon/static/angular/table/basic-table.spec.js b/horizon/static/angular/table/basic-table.spec.js index ade8ac9711..0cbab6b35d 100644 --- a/horizon/static/angular/table/basic-table.spec.js +++ b/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'); + }); + }); }); diff --git a/horizon/static/angular/table/table.scss b/horizon/static/angular/table/table.scss index 5abbead637..348c75266f 100644 --- a/horizon/static/angular/table/table.scss +++ b/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 { diff --git a/openstack_dashboard/static/dashboard/scss/_mixins.scss b/openstack_dashboard/static/dashboard/scss/_mixins.scss new file mode 100644 index 0000000000..390122cfa5 --- /dev/null +++ b/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; + } +} diff --git a/openstack_dashboard/static/dashboard/scss/_variables.scss b/openstack_dashboard/static/dashboard/scss/_variables.scss index f336ad7804..bdb4cfb504 100644 --- a/openstack_dashboard/static/dashboard/scss/_variables.scss +++ b/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; diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss index 24bcb975b3..7f817437ce 100644 --- a/openstack_dashboard/static/dashboard/scss/horizon.scss +++ b/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";