The tablesort indicator in views tables have incorrect class and wrap to the next line. It seems not themed properly and get's incorrect classes added to all images where it should not and therefore cause visual malfunctions.

Broken:

After bootstrap img-responsive class is removed, it will positioned where it should be, but does not inherit the color of the label. Something that could work if we use _bootstrap_icon().

Original (non-bootstrap):

Fixed version:

CommentFileSizeAuthor
#18 2840304-18-7.x-3.x.patch3.43 KBmarkhalliwell
#17 2840304-17-8.x-3.x.patch4.34 KBmarkhalliwell
#10 Issue-2840304-by-hass-Tablesort-indicator-implementa-D7.patch1.13 KBhass
#6 2017-01-13_202155.png616 byteshass
#5 Issue-2840304-by-hass-Tablesort-indicator-implementa-D7.patch1.13 KBhass
#4 Issue-2840304-by-hass-Tablesort-indicator-has-incorr-D7.patch1.31 KBhass
#3 before.png1.34 KBdevshi.addweb
#3 after.png1.36 KBdevshi.addweb
2017-01-01_232825.png595 byteshass
2017-01-01_232446.png1.03 KBhass
2017-01-01_232413.png1.21 KBhass

Comments

hass created an issue. See original summary.

hass’s picture

hass commented

I have added theme_tablesort_indicator() to the theme. But for unknown reasons the html code returned is only shown in default sort order after a drupal cache clear.

There seems to be another bug and I have not found the source yet why the sort indicator disapears after resorting. Very strange behaviour.

It works without the theme override.

devshi.addweb’s picture

devshi.addweb commented
StatusFileSize
new after.png1.36 KB
new before.png1.34 KB

Please put below code in your custom css file.

  table th img {
    display: inline-block !important;
    margin: 0 2px;
  }

PFA screenshots for your help.

hass’s picture

hass commented
Status: Active » Needs review
StatusFileSize
new Issue-2840304-by-hass-Tablesort-indicator-has-incorr-D7.patch1.31 KB

This is one workaround.

But I think we should override the sort icon. Not sure what icon we should use or if we use the dropdown/dropup from the navbar. Not sure what the maintainer prefers. Additionally the root cause of the disapearing icon need to be found.

hass’s picture

hass commented
StatusFileSize
new Issue-2840304-by-hass-Tablesort-indicator-implementa-D7.patch1.13 KB

That is the better one, but it does work only once after a cache clear and is no longer shown if you re-sort.

hass’s picture

hass commented
StatusFileSize
new 2017-01-13_202155.png616 bytes

Missed to add a screenshot of the fixed version

hass’s picture

hass commented

I don't know why, but I cannot repro the disapearing caret again. Last patch #5 works well.

hass’s picture

hass commented
Issue summary: View changes
hass’s picture

hass commented
hass’s picture

hass commented
StatusFileSize
new Issue-2840304-by-hass-Tablesort-indicator-implementa-D7.patch1.13 KB

Strings should be ucfirst.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Version: 7.x-3.x-dev » 8.x-3.x-dev
Category: Bug report » Feature request
Status: Needs review » Needs work
Issue tags: +needs backport to 7.x-3.x
  1. Fix HEAD first.
  2. Use an appropriate glyphicon instead of abusing dropup/dropdown just to get the caret to "appear" correctly.
hass’s picture

hass commented

I have not found any useful glyphicon. Please suggest one that works for names, numbers, money, dates, etc.

markhalliwell’s picture

markhalliwell
Primary language English
commented

Bootstrap::glyphicon('chevron-up')

and

Bootstrap::glyphicon('chevron-down')

hass’s picture

hass commented

There are several issues with _bootstrap_icon():

  1. The icon has an incorrect size compared to the text.
  2. The vertical alignment of icon is not correct (same in the new calendar navigation).
  3. _bootstrap_icon() does not allow us to set a title as we cannot inject anything to $attributes.
  4. No space between the word and the icon. We cannot add icon-after to the header link (a.icon-after .glyphicon) easily. tablesort_header() is not a theme function.

How should this solved?

markhalliwell’s picture

markhalliwell
Primary language English
commented

There are several issues with _bootstrap_icon():

  1. No it doesn't.
  2. Yes it is.
  3. For now, just wrap the icon (like you previously did) and add it there)... then open an issue asking to add an optional $attributes parameter to Bootstrap::glyphicon as a follow up... instead of just complaining about it.
  4. With custom CSS, like the existing .icon-after, but targeting table header cells and any icons inside them.
markhalliwell’s picture

markhalliwell
Primary language English
commented
Title: Tablesort indicator has incorrect classes / wraps line » Add tablesort_indicator template to utilize glyphicons
markhalliwell’s picture

markhalliwell
Primary language English
commented
Version: 8.x-3.x-dev » 7.x-3.x-dev
Status: Needs work » Patch (to be ported)
Issue tags: -needs backport to 7.x-3.x
StatusFileSize
new 2840304-17-8.x-3.x.patch4.34 KB

.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Patch (to be ported) » Fixed
StatusFileSize
new 2840304-18-7.x-3.x.patch3.43 KB

.

  • markcarver committed 3239640 on 8.x-3.x 
    Automated commit: grunt compile (CSS)

Issue #2840304 by markcarver,...
  • markcarver committed 56a8a3f on 8.x-3.x
    Issue #2840304 by markcarver, hass: Add tablesort_indicator

Signed-off-...

  • markcarver committed 0e3cc66 on 7.x-3.x 
    Issue #2840304 by markcarver, hass: Add tablesort_indicator

Signed-off-...
  • markcarver committed a64c82b on 7.x-3.x
    Automated commit: grunt compile (CSS)

Issue #2840304 by markcarver,...

Status: Fixed » Closed (fixed)

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