[atable] added background gradient to rows with changed content in atable

[crabinak]

@agritheory I added the light blue gradient effects to rows that have changed cell content.

One note is that on pinned columns, there isn't a way to have a row's background override a cell's background with its own gradient (pinned cells need a background color to hide non-pinned content scrolling below it), so for that situation, I have the pinned cells use a solid light blue background color while the rest of the row continues the gradient as normal.

@Alchez I had to modify how the classes are applied to the cell in Acell since it now conditionally checks for pinned and cellModified, so I moved that logic into a computed property. Let me know if that causes any issues.

[github-actions]

Coverage Report for ./atable

Status	Category	Percentage	Covered / Total
🟢	Lines	71% (🎯 70%)	169 / 238
🟢	Statements	71.6% (🎯 70%)	179 / 250
🟢	Functions	81.25% (🎯 70%)	39 / 48
🔴	Branches	49.43% (🎯 70%)	87 / 176

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
atable/src/components/ACell.vue	90.9%	60.71%	100%	90.74%	107, 130-133, 163, 171-173
atable/src/components/AExpansionRow.vue	0%	0%	0%	0%	33-3
atable/src/components/ARow.vue	58.33%	56.25%	50%	58.33%	50-64, 17
Unchanged Files
atable/src/utils.ts	100%	100%	100%	100%
atable/src/components/ATable.vue	59.25%	37.5%	90.9%	58.49%	112-116, 126-154
atable/src/components/ATableHeader.vue	100%	57.14%	100%	100%
atable/src/components/ATableModal.vue	90%	75%	50%	90%	49
atable/src/stores/table.ts	75%	51.47%	84.21%	74.72%	39-40, 53, 84-85, 105-109, 132, 136-147, 174, 182-183, 189

Generated in workflow #524 for commit 74f2707 by the Vitest Coverage Report Action

[agritheory]

@crabinak I think it's a little bit too much on the left and not enough on the right. I tried experimenting with this briefly enough to know I'm out of my depth, but found a potential solution on SO

[crabinak]

@agritheory I added some control in the style to adjust the lightness of the start and end colors for the gradient. I think the start value for the cell-changed blue is now 80% and the end is 40% (the values in the CSS are percentages of white added).

[crabinak]

@agritheory Latest update here, the changed cells now have a black border, bold and italic text (might be too much), and the background of the cell is a slightly darker version of the cell-changed color.

[agritheory]

@crabinak The border on the changed cell is too much I think. And I think that you were right before about the italics + bold and no background color on cell as the best way to communicate the data has changed. I would like to preserve the cell color change API, it might be a better UX in some cases. CC @Alchez

[crabinak]

@agritheory Should the background gradient be removed or kept?

[agritheory]

@crabinak I like it, but I don't think it makes sense in all cases. When you're in a scenario where there a lot of columns / horizontal scrolling I think it's a good choice; we have a good use case for this and will implement it there.

[crabinak]

@agritheory I updated so now modified cells just become italic and bolded. I included separate classes for cell highlighting (cell-modified-highlight) and row highlighting (changed-row-gradient) that can be applied for the cell and row highlighting where needed.