4001 - Datatable use Datagrid - Editable borders corrections #4230
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
minotogna
reviewed
Jan 20, 2025
| @@ -79,6 +79,10 @@ $highlight-top-bottom: inset 0 1px $ui-accent, inset 0 -1px $ui-accent; | |||
| border-left: $border-editable; | |||
| border-top: $border-editable; | |||
|
|
|||
| &.bottomEditable { | |||
There was a problem hiding this comment.
let's call those classes lastEditableRow, lastEditableCol (and add them next to lastCol ,...)
minotogna
approved these changes
Jan 21, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixing cell border rendering when adjacent cells are non-editable:
approach.2.mp4
The first approach which is consistent with how the borders are currently done (top,left for each cell) doesn't quite work. Since some cells span multiple columns, setting the border top for those can show and editable border section where it shouldn't be:
approach.1.mp4
Also, because some cells have a non-transparent background color, the outline of the focused editable cell is hidden. Fixing that with z-index wasn't possible because the sticky headers should always have a higher z-index.
Due to that, the best approach was to have some double borders, which doesn't create those issues and helps distinguish more clearly editable vs readonly cells.