diff -u b/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css --- b/core/modules/views_ui/css/views_ui.admin.theme.css +++ b/core/modules/views_ui/css/views_ui.admin.theme.css @@ -566,6 +566,9 @@ .views-filterable-options { border-top: 1px solid #ccc; } +.views-filterable-options .filterable-option.odd td { + background-color: #f3f4ee; +} .filterable-option .form-item { margin-bottom: 0; margin-top: 0; diff -u b/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js --- b/core/modules/views_ui/js/views-admin.js +++ b/core/modules/views_ui/js/views-admin.js @@ -450,6 +450,9 @@ this.$searchBox = this.$form.find('[data-drupal-selector="edit-override-controls-options-search"]'); this.$searchBox.on('keyup', $.proxy(this.handleKeyup, this)); + this.$filterType = this.$form.find('[data-drupal-selector="edit-override-controls-group"]'); + this.$filterType.on('change', $.proxy(this.handleSelect, this)); + /** * Get a list of option labels and their corresponding divs and maintain it * in memory, so we have as little overhead as possible at keyup time. @@ -494,7 +497,8 @@ // Maintain a reference to the jQuery object for each row, so we don't // have to create a new object inside the performance-sensitive keyup // handler. - $div: $option + $div: $option, + className: $option.context.className }; } return options; @@ -547,7 +551,55 @@ option.$div.hide(); } } + }, + + /** + * + */ + handleSelect: function (event) { + var found; + var option; + var zebraClass; + var classes; + + // Get selected Group + var group = this.$filterType.val(); + + // Start the counter for restriping rows. + var zebraCounter = 0; + + // Search through the classes of the option for a matching class. + var length = this.options.length; + for (var i = 0; i < length; i++) { + + // Use a local variable for the option being searched, for performance. + option = this.options[i]; + + //split classes in an array + classes = option.className.split(' '); + + found = false; + for (var j = 0; j < classes.length; j++) { + if (classes[j] == group) { + found = true; + } + } + + if (found) { + zebraClass = (zebraCounter % 2) ? 'odd' : 'even'; + // Show the checkbox row, and restripe it. + option.$div.removeClass('even odd'); + option.$div.addClass(zebraClass); + option.$div.show(); + zebraCounter++; + } + else { + // The search string wasn't found; hide this item. + option.$div.hide(); + } + } } + }); /**