(core) Selection for styled columns

Summary:
Grid UI improvements.
- Selecting a column with a custom background, didn't produce a visual difference.
- Hiding num-row right border when it is not needed (it should be used only for frozen columns)

Test Plan: manual tests

Reviewers: cyprien

Reviewed By: cyprien

Differential Revision: https://phab.getgrist.com/D3425
This commit is contained in:
Jarosław Sadziński 2022-05-12 18:22:09 +02:00
parent 524dbf34e1
commit f93b4fd3bc
3 changed files with 11 additions and 2 deletions

View File

@ -235,7 +235,6 @@
width: 0px; /* Matches rowid width (+border) */
height: 100%;
z-index: 3;
left: calc(4rem);
border-right: 1px solid var(--grist-color-dark-grey) !important;
user-select: none;
pointer-events: none

View File

@ -924,7 +924,13 @@ GridView.prototype.buildDom = function() {
dom('div.frozen_line', kd.show(this.frozenLine)),
dom('div.gridview_header_backdrop_left'), //these hide behind the actual headers to keep them from flashing
dom('div.gridview_header_backdrop_top'),
dom('div.gridview_left_border'), //these hide behind the actual headers to keep them from flashing
// When there are frozen columns, right border for number row will not be visible (as actually there is no border,
// it comes from the first cell in the grid) making a gap between row-number and actual column. So when we scroll
// the content of the scrolled columns will be visible to the user (as there is blank space there).
// This line fills the gap. NOTE that we are using number here instead of a boolean.
dom('div.gridview_left_border', kd.show(this.numFrozen),
kd.style("left", ROW_NUMBER_WIDTH + 'px')
),
// left shadow that will be visible on top of frozen columns
dom('div.scroll_shadow_frozen', kd.show(this.frozenShadow)),
// When cursor leaves the GridView, remove hover immediately (without debounce).

View File

@ -75,6 +75,10 @@
color: var(--grist-actual-cell-color, black);
}
.field.selected .field_clip {
mix-blend-mode: darken;
}
.field_clip.invalid, .field_clip.field-error-from-style {
background-color: #ffb6c1;
color: black;