Igniteui-angular: 馃拵 Grid - Sorting - styling on header cells

Created on 13 Jul 2018  路  5Comments  路  Source: IgniteUI/igniteui-angular

Description

To better fit Material Design guidelines and to improve user experience, several changes are proposed:

  • [ ] Change font color of a header cell on hover to grays 900
  • [x] Make the sorting arrow appear on hover on applicable header cells at 54% black.
  • [x] Make the active sorting arrow at primary 500
  • [ ] Rotate (animate) the active sorting arrow when changing its state
  • [ ] Change font color of a header cell when sorted to grays 900

grid-sorting-hover

enhancement general sorting low resolved styling 7.1.x

Most helpful comment

I recommend the following behavior for a sortable cell:

  • on hover (mouseover) everywhere on the whole header cell appears arrow icon which indicates that the column is sortable
  • sorting would be triggered only after clicking on the very icon in the right end of the cell

All 5 comments

Preview of hovering when the column header is longer and needs ellipsis. This behavior allows us to show more of the header text in a rest state, making the grid easier to read.

sorting-ellipsis

@StefanIvanov @simeonoff Are we going to implement this? I am asking so I can start work on it.

@desig9stein let's discuss.

I recommend the following behavior for a sortable cell:

  • on hover (mouseover) everywhere on the whole header cell appears arrow icon which indicates that the column is sortable
  • sorting would be triggered only after clicking on the very icon in the right end of the cell

@DaniMarinov can you outline a brief Sorting Spec based on the issue

Was this page helpful?
0 / 5 - 0 ratings