From 87731224df8bfa3fd532f0e449de2c6076bc3dd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?= Date: Thu, 8 Sep 2022 12:01:39 +0200 Subject: [PATCH] (core) Adding selection layer on top of field element Summary: Adding a new layer in front of the field_clip element that fixes selected cells' color. Test Plan: Existing tests Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D3620 --- app/client/components/GridView.js | 1 + app/client/components/viewCommon.css | 13 +++++++------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/client/components/GridView.js b/app/client/components/GridView.js index 6253f920..6a1afbb2 100644 --- a/app/client/components/GridView.js +++ b/app/client/components/GridView.js @@ -1266,6 +1266,7 @@ GridView.prototype.buildDom = function() { kd.toggleClass('selected', isSelected), fieldBuilder.buildDomWithCursor(row, isCellActive, isCellSelected), + dom('div.field_selection') ); }) ) diff --git a/app/client/components/viewCommon.css b/app/client/components/viewCommon.css index 2a87ccba..c201294b 100644 --- a/app/client/components/viewCommon.css +++ b/app/client/components/viewCommon.css @@ -55,9 +55,7 @@ outline: 2px dashed var(--grist-theme-cursor, var(--grist-color-cursor)); } -.field.selected { - background-color: var(--grist-theme-selection, var(--grist-color-selection)); -} + .field.draft { padding-right: 18px; @@ -72,13 +70,16 @@ text-overflow: ellipsis; width: 100%; height: 100%; - background-color: var(--grist-diff-background-color, var(--grist-cell-background-color, unset)); + background-color: var(--grist-diff-background-color, var(--grist-cell-background-color, var(--grist-row-background-color, unset))); --grist-actual-cell-color: var(--grist-diff-color, var(--grist-cell-color, var(--grist-row-color))); color: var(--grist-actual-cell-color, unset); } -.field.selected .field_clip { - mix-blend-mode: luminosity; +.field.selected > .field_selection { + background-color: var(--grist-theme-selection, var(--grist-color-selection)); + position: absolute; + inset: 0; + pointer-events: none; } .field_clip.invalid, .field_clip.field-error-from-style {