Problem/Motivation

In #1649780: Remove first/last/odd/even classes in favor of CSS3 pseudo selectors the odd/even selectors in the Views dialog were updated to use CSS3 selectors. However, this is incompatible with striping in the Views dialog. Elements are hidden, but CSS makes no distinction between hidden and visible elements in the selector .views-filterable-options .filterable-option:nth-of-type(even) .form-type-checkbox {

Proposed resolution

Fix the restriping on the Views dialog filter

Remaining tasks

  1. Write a patch
  2. Review

User interface changes

Views filtered rows are restriped when filtering

API changes

None

Comments

idebr’s picture

Status: Active » Needs review
StatusFileSize
new1.84 KB

Attached patch reintroduces some of the scripting for Views in Drupal 7 to fix the striping. The striping is currently only applied for javascript users, so I didn't change the original table rendering.

bfr’s picture

Status: Needs review » Reviewed & tested by the community

Seems good to me.

manuel garcia’s picture

This looks good to me, i've been testing it manually, and actualy before we werent even handling this case at all.

+++ b/core/modules/views_ui/js/views-admin.js
@@ -380,9 +383,12 @@
           option.$div.removeClass('even odd');

This was not doing anything before, but with this patch it is necessary.

dawehner’s picture

Given my limited CSS knowledge, I'm curios, whether the filtering itself could add a class for hidden/not hidden rows and then we use that in the CSS to change the style?

lewisnyman’s picture

Status: Reviewed & tested by the community » Needs work

@dawehner Yes, I think we could use a :not(selector) here in theory, but we need to try it in practice, so setting to needs work. It would be a shame to introduce Javascript functionality just for this particular use case, and there an argument whether we need the zebra striping at all, as the Seven style guide remove this in favour of a hover color.

manuel garcia’s picture

The problem here is that we can't use :nth-of-type(even) selector along with :not(selector)... they won't work together unfortunately.

So I don't see any other way around this, unless we indeed drop the zebra striping altogether.

idebr’s picture

Status: Needs work » Needs review

How about we fix the regression first with javascript and continue the discussion on removing the striping in a followup?

nod_’s picture

Status: Needs review » Needs work

Looks ok, can you just move the show() after classes have been messed with? Also since we're messing with things in this function can you reformat the variable declarations to be more in line with the rest:

 // Determine the user's search query. The search text has been converted to
      // lowercase.
      search = this.$searchBox.val().toLowerCase();
      words = search.split(' ');
      wordsLength = words.length;

      // Start the counter for restriping rows.
      zebraCounter = 0;

Transformed to :

 // 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;

      // Start the counter for restriping rows.
      var zebraCounter = 0;

And remove those variable from the declaration in the first line.

idebr’s picture

Status: Needs work » Needs review
StatusFileSize
new1.96 KB
new1.41 KB

@nod_ Thanks for the review, would lottery again :)

I updated the variable declaration and moved .show().

nod_’s picture

Status: Needs review » Reviewed & tested by the community

Thanks :) that works.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

This issue is a normal bug fix, and doesn't include any disruptive changes, so it is allowed per https://www.drupal.org/core/beta-changes. Committed 4a7ab3e and pushed to 8.0.x. Thanks!

  • alexpott committed 4a7ab3e on 8.0.x
    Issue #2442999 by idebr: Views dialog filter does not restripe
    

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.