Implement selectable job table rows to select a workflow - #175
Conversation
| <Box sx={{ display: "grid" }}> | ||
| <Typography | ||
| gridRow={1} | ||
| gridColumn={1} | ||
| fontWeight="bold" | ||
| visibility={data.name === selectedWorkflow ? "visible" : "hidden"} | ||
| > | ||
| {data.name} | ||
| </Typography> | ||
| <Typography | ||
| gridRow={1} | ||
| gridColumn={1} | ||
| fontWeight="normal" | ||
| visibility={data.name === selectedWorkflow ? "hidden" : "visible"} | ||
| > | ||
| {data.name} | ||
| </Typography> | ||
| </Box> |
There was a problem hiding this comment.
Most of the styling is self-explanatory, but this one deserves an explicit explanation.
The problem
In order to achieve the bolding of text when a row was selected, the text naturally changes from normal to bold. When the font weight changes between normal and bold, the table cell "shifts" ever so slightly, due to the text shrinking/expanding when going between normal and bold.
The solution chosen here
From some searching online, there are some CSS hacks which seemed interesting and from which I took some inspiration from.
What is going here is that there's a two "versions" of the workflow name text: one normal, and one bolded. They both occupy the same space via the parent Box having the grid display and them both being put into the same single cell of the grid.
When a workflow is unselected, the normal version is display and the bolded version is hidden, and when a workflow is selected, the normal version is hidden and the bolded version is displayed.
Because both normal and bolded versions exist in the DOM simultaneously, the width of the rendered table cell in the jobs table will always stay the same no matter which one is visible.
Any other suggestions are most welcome, I settled for this due to it not requiring separate CSS files involving pseudo elements or anything like that, which solutions online I found made use of.
|
Yeah, now that you say it, a different colour background probably would have sufficed but I can't say I don't like the new look. My only complaint is that I believe the policy is to use icons from Lucide rather than icons-material. |
Cool, many thanks for the note about UI policy being to prefer Lucide over icons-material, I'll address that now to not add to migration work in the future. |
2 participants
In addition to the change mentioned in the title, this also adds the minimal amount of work to pass the selected workflow to the plot and log components and have them not fail if there is no selected workflow.
The styling used to display which job table row is selected is certainly up for discussion; I went with what I thought was potentially enough to make it obvious when a row is selected:
but this is only a starting point.
If more is thought to be required that's worthwhile knowing, as well as any feedback relating to the selected background colours (which are different alpha values of the "primary" colour in the DLS theme colour pallete) and icon (it's already been suggested on Slack that a checkbox icon would possibly signal the intent more accurately compared to the "visibility" icon that I somewhat arbitrarily chose).