Skip to content

Misc ItemTable visual improvements #146

Closed
campb303 opened this issue Dec 4, 2020 · 3 comments · Fixed by #155
Closed

Misc ItemTable visual improvements #146

campb303 opened this issue Dec 4, 2020 · 3 comments · Fixed by #155
Assignees
Labels
enhancement Request for a change to existing functionality high-priority Needs immediate extra focus
Projects

Comments

@campb303
Copy link
Collaborator

campb303 commented Dec 4, 2020

Some small visual improvements should be made to the ItemTable:

  • Render the table with its default component instead of a Paper to remove extraneous shadows.
  • Render the table rows with their "small" variant. See MUI Table API props
  • Increase visual weight of sorting indicators to make sorting easier to see
  • Decrease spacing between related filter fields to make associations easier to see
@campb303 campb303 added enhancement Request for a change to existing functionality frontend labels Dec 4, 2020
@campb303 campb303 added this to the v1 milestone Dec 4, 2020
@campb303
Copy link
Collaborator Author

campb303 commented Dec 4, 2020

React Table's useFlexLayout hook and the columns object's width attribute should be used to weight column widths by flex basis.

@wrigh393
Copy link
Collaborator

Of the above items, there were some that were easy fixes.

  • Rendering the table with its default component was fixed by removing the component={Paper} prop from the TableContainer component

  • Rendering the table rows "small" variant was fixed by adding the size="small" prop to the Table component

  • To increase the visual weight of the sort indicators the inactive color was changed to a darker grey color and the active color to be the secondary color from the theme

Orginal sort indicator(No active sort)
Screenshot 2020-12-15 105434

Orginal sort indicator(Active sort)
Screenshot 2020-12-15 105321

Updated sort indicator(No active sort)
Screenshot 2020-12-15 105459

Updated sort indicator(Active sort)
Screenshot 2020-12-15 105228

  • Decreasing the spacing between the sort indicators and filters the edge="start" prop to the IconButton component.

Without edge="start" prop
Screenshot 2020-12-15 110709

With edge="start" prop
Screenshot 2020-12-15 110740

@campb303
Copy link
Collaborator Author

campb303 commented Jan 5, 2021

Waiting for #155 to be merged.

@campb303 campb303 linked a pull request Jan 5, 2021 that will close this issue
@campb303 campb303 added the high-priority Needs immediate extra focus label Jan 5, 2021
@campb303 campb303 added this to In progress in v1.0 Mar 8, 2021
v1.0 automation moved this from In progress to Done Mar 13, 2021
Sign in to join this conversation on GitHub.
Labels
enhancement Request for a change to existing functionality high-priority Needs immediate extra focus
Projects
No open projects
v1.0
  
Done
Development

Successfully merging a pull request may close this issue.

2 participants