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

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
Sign in to join this conversation on GitHub.
Labels
enhancement Request for a change to existing functionality high-priority Needs immediate extra focus
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants