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,18 +566,13 @@ .views-filterable-options { border-top: 1px solid #ccc; } -.views-filterable-options .filterable-option.odd td { - background-color: #f3f4ee; -} -.views-filterable-options .filterable-option.even td { - background-color: #fff; -} .filterable-option .form-item { margin-bottom: 0; margin-top: 0; } .views-filterable-options .filterable-option .title { font-weight: bold; + cursor: pointer; } .views-filterable-options .form-type-checkbox .description { 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 @@ -291,7 +291,6 @@ */ Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) { var $target = $(event.target); - var label = $.trim($target.next().html()); var label = $.trim($target.closest('td').next().html()); // Add/remove the checked item to the list. if ($target.is(':checked')) { @@ -444,12 +443,17 @@ */ this.$form = $form; - /** - * Add a keyup handler to the search box. - */ + // Click on the title checks the box. + this.$form.on('click', 'td.title', function (event) { + var $target = $(event.currentTarget); + $target.closest('tr').find('input').trigger('click'); + }); + + // Add a keyup handler to the search box. this.$searchBox = this.$form.find('[data-drupal-selector="edit-override-controls-options-search"]'); this.$searchBox.on('keyup', $.proxy(this.handleFilter, this)); + // Handles group filtering. this.$filterType = this.$form.find('[data-drupal-selector="edit-override-controls-group"]'); this.$filterType.on('change', $.proxy(this.handleFilter, this)); @@ -459,8 +463,6 @@ */ this.options = this.getOptions(this.$form.find('.filterable-option')); - // Restripe on initial loading. - this.handleFilter(); // Trap the ENTER key in the search box so that it doesn't submit the form. this.$searchBox.on('keypress', function (event) { if (event.which === 13) { @@ -490,15 +492,14 @@ for (var i = 0; i < length; i++) { $option = $($allOptions[i]); $label = $option.find('label'); - $description = $option.find('td.description'); + $description = $option.find('.description'); options[i] = { // Search on the lowercase version of the label text + description. searchText: $label.text().toLowerCase() + " " + $description.text().toLowerCase(), // 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, - className: $option.context.className + $div: $option }; } return options; @@ -512,61 +513,34 @@ * The keyup event or change event. */ handleFilter: function (event) { - var found; - var option; - var zebraClass; - var classes; - // Determine the user's search query. The search text has been converted // to lowercase. var search = this.$searchBox.val().toLowerCase(); var words = search.split(' '); - var wordsLength = words.length; - // Get selected Group var group = this.$filterType.val(); - // Start the counter for restriping rows. - var zebraCounter = 0; - // Search through the search texts in the form for matching text. - 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]; - classes = option.className.split(' '); + this.options.forEach(function (option) { + function hasWord(word) { + return option.searchText.indexOf(word) !== -1; + } - found = true; + var found = true; // Each word in the search string has to match the item in order for the // item to be shown. if (search) { - for (var j = 0; j < wordsLength; j++) { - if (option.searchText.indexOf(words[j]) === -1) { - found = false; - } - } + found = words.every(hasWord); } - if (found && group != 'all') { - if (classes.indexOf(group) === -1) { - found = false; - } + if (found && group !== 'all') { + found = option.$div.hasClass(group); } - 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(); - } - } + option.$div.toggle(found); + }); + // Adapt dialog to content size. + $(event.target).trigger('dialogContentResize'); } - }); /** diff -u b/core/modules/views_ui/src/Form/Ajax/AddHandler.php b/core/modules/views_ui/src/Form/Ajax/AddHandler.php --- b/core/modules/views_ui/src/Form/Ajax/AddHandler.php +++ b/core/modules/views_ui/src/Form/Ajax/AddHandler.php @@ -153,7 +153,10 @@ 'class' => array('title'), ), 'group' => $option['group'], - 'help' => $option['help'], + 'help' => array( + 'data' => $option['help'], + 'class' => array('description'), + ), ); } }