Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Improve highlighting of previewed formula

Browse Source 
Summary:
Also improves highlighting of columns when the "Click to insert"
tooltip is shown, and improves highlighting of transforming columns.

Test Plan: Manual.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3962
This commit is contained in:
George Gevoian
2023-07-20 14:18:32 -04:00
parent 5a703a1972
commit beffd02c41
12 changed files with 74 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/client/components/GridView.css
View File

@@ -346,23 +346,23 @@
}
}
/* Column hover effect */
/* Highlight the entire column when the "Click to insert" tooltip is shown. */
.column_name.hover-column > .selection,
.column_name.hover-column.selected > .selection,
.gridview_row .field.hover-column > .selection {
background-color: var(--grist-theme-selection, var(--grist-color-selection));
inset: 0;
position: absolute;
}
.gridview_row .field.hover-column, /* normal field in a row */
.gridview_row .field.hover-column .field_clip,
.column_name.hover-column, /* column name */
.column_name.hover-column.selected, /* selected column name */
.gridview_row .field.frozen.hover-column /* frozen field in a row */ {
/* for frozen fields can't use alpha channel */
background-color: var(--grist-theme-selection-opaque-bg, var(--grist-color-selection-opaque));
color: var(--grist-theme-selection-opaque-fg, unset);
/* Use a darker highlight if the column is being transformed. */
.gridview_row .field.transform_field.hover-column > .selection {
background-color: var(--grist-theme-selection-darkest, rgba(22,179,120,0.35));
inset: 0;
position: absolute;
}
/* For zebra stripes, make the selection little darker */
.record-zebra.record-even .field.hover-column {
background-color: var(--grist-theme-selection-opaque-dark-bg, var(--grist-color-selection-darker-opaque));
color: var(--grist-theme-selection-opaque-fg, unset);
}
/* When column has a hover, remove menu button. */
/* And hide the column menu button. */
.column_name.hover-column .menu_toggle {
visibility: hidden;
}

5
app/client/components/GridView.js
View File

@@ -1139,7 +1139,8 @@ GridView.prototype.buildDom = function() {
},
menu(ctl => this.columnContextMenu(ctl, this.getSelection(), field, filterTriggerCtl)),
testId('column-menu-trigger'),
)
),
dom('div.selection'),
);
}),
this.isPreview ? null : kd.maybe(() => !this.gristDoc.isReadonlyKo(), () => (
@@ -1346,7 +1347,7 @@ GridView.prototype.buildDom = function() {
kd.toggleClass('selected', isSelected),
fieldBuilder.buildDomWithCursor(row, isCellActive, isCellSelected),
dom('div.field_selection')
dom('div.selection'),
);
})
)

13
app/client/components/viewCommon.css
View File

@@ -110,13 +110,20 @@
color: var(--grist-actual-cell-color, unset);
}
.field.selected > .field_selection {
.gridview_row .field.selected > .selection {
background-color: var(--grist-theme-selection, var(--grist-color-selection));
position: absolute;
inset: 0;
pointer-events: none;
}
.field.transform_field > .selection {
background-color: var(--grist-theme-selection-darker, rgba(22,179,120,0.25));
position: absolute;
inset: 0;
pointer-events: none;
}
.field_clip.invalid, .field_clip.field-error-from-style {
background-color: #ffb6c1;
color: black;
@@ -126,6 +133,10 @@
background-color: unset;
}
.field.transform_field > .field_clip.invalid + .selection {
background-color: unset;
}
.field_clip.field-error-P {
color: #B0B0B0;
background-color: unset;