Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-09-29 02:00:46 +00:00
Code Issues Projects Releases Wiki Activity
35237a5835
gristlabs_grist-core/app/client/components/viewCommon.css
Dmitry S 3fa5125cf7 (core) Highlight rows used as a selector in linking, but do not show 'inactive' cursors. 
Summary:
1. Introduces another highlight for link-selector rows, with the same color as
   regular selection, and allowing to overlap with regular selection.
2. Don't show "secondary" cursors (those in inactive sections), to keep a single
   cursor on the screen, since having multiple (which different in color) could
   cause confusion.
3. An unrelated improvement (prompted by a new fixture doc) is to default the
   active section to the top-left one (rather than the one with smallest rowId).
4. Another unrelated improvement (prompted by a test affected by the previous unrelated improvement) is to skip chart widgets when searching (previously search would step through those with an invisible "cursor").

Includes also tweaks for better testing on Arm-based Macs:
- Add support for TEST_CHROME_BINARY_PATH environment variable (helpful for a Mac arm64 architecture workaround)
- Remove unsetting of SELENIUM_REMOTE_URL when running headless (unlikely to affect anyone, and can be done outside the script, but interferes with the Mac workaround)

Test Plan: Added a new test case that cursor and linking-selector CSS classes are present or absent appropriately. Fixed test affected by the fix to default active section.

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3891
2023-06-21 12:21:19 -04:00

266 lines
7.9 KiB
CSS
Raw Blame History

/*
record class is used for grid view header and rows
*/
.record {
display: -webkit-flex;
display: flex;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-width: 0px;
border-style: none;
border-color: var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
border-left-style: solid; /* left border, against rownumbers div, always on */
border-bottom-width: 1px; /* style: none, set by record-hlines*/
/* Record background is white (or theme default) by default.
It gets overridden by the add row, zebra stripes.
It also gets overridden by selecting rows - but in that case background comes from
selected fields.
*/
background-color: var(--grist-diff-background-color, /* diffing view */
var(--grist-row-rule-background-color, /* conditional row style */
var(--grist-theme-cell-bg, white))); /* default, not transparent */
color: var(--grist-row-color, var(--grist-theme-cell-fg, black));
}
.record.record-hlines { /* Overwrites style, width set on element */
border-bottom-style: solid;
}
.record.record-zebra.record-even {
background-color: var(--grist-diff-background-color,
var(--grist-row-rule-background-color-zebra,
var(--grist-row-rule-background-color,
var(--grist-theme-cell-zebra-bg, #f8f8f8))));
}
.record.record-add {
background-color: var(--grist-theme-table-add-new-bg, #f6f6ff) !important; /* important to win over every thing */
}
.field {
position: relative;
height: 100%;
-webkit-flex: none;
flex: none;
min-height: 22px;
white-space: pre;
/* make border exist always so content doesn't shift on v-gridline toggle */
border: 0px solid transparent; /* width set by js, border exists but is transparent */
/**
* Order of precedence for field is as follows: diff color, column rule, row rule, static (default) style, transparent.
* We can't use background inheritance, because row background color is more important then static (aka default)
* column color defined on a field (so lower in the dom).
*/
--field-background-color: var(--grist-diff-background-color,
var(--grist-column-rule-background-color,
var(--grist-row-rule-background-color,
var(--grist-cell-background-color))));
background-color: var(--field-background-color, unset);
}
/** Similar order is for detail view, but there is no row rules */
.g_record_detail_value {
background-color: var(--grist-diff-background-color,
var(--grist-column-rule-background-color,
var(--grist-cell-background-color, unset)));
}
.record.record-zebra.record-even .field {
--field-background-color: var(--grist-diff-background-color,
var(--grist-column-rule-background-color,
var(--grist-row-rule-background-color-zebra,
var(--grist-row-rule-background-color,
var(--grist-cell-background-color)))));
}
.record.record-add .field {
background-color: unset !important; /* important to win over zebra stripes */
}
.record-vlines > .field {
/* set border visibility */
border-right-color: var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
}
.field.scissors {
outline: 2px dashed var(--grist-theme-cursor, var(--grist-color-cursor));
}
.field.draft {
padding-right: 18px;
}
.field_clip {
padding: 3px 3px 0px 3px;
font-family: var(--grist-font-family-data);
line-height: 18px;
min-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 100%;
/* We need to repeat background color here, as it might also be applied on a widget level (through DiffBox.ts)*/
background-color: var(--grist-diff-background-color, inherit);
--grist-actual-cell-color: var(--grist-diff-color,
var(--grist-rule-color,
var(--grist-row-color,
var(--grist-cell-color))));
color: var(--grist-actual-cell-color, unset);
}
.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 {
background-color: #ffb6c1;
color: black;
}
.field_clip.invalid:empty {
background-color: unset;
}
.field_clip.field-error-P {
color: #B0B0B0;
background-color: unset;
}
.field_clip.invalid.field-error-C {
background-color: unset;
color: var(--grist-color-dark-grey);
padding-left: 18px;
}
.field_clip.invalid.field-error-C::before {
/* based on standard icon styles */
content: "";
position: absolute;
top: 4px;
left: 2px;
width: 14px;
height: 14px;
background-color: var(--grist-color-dark-grey);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-image: var(--icon-Lock);
}
.field_clip.field-error-U {
color: #6363a2;
background-color: unset;
}
.field_clip.field-error-S {
color: #aaa;
background-color: unset;
}
/* Insert a zero-width space into each cell, to size cells to at least one line of text. */
.field_clip:empty::before { content: '\200B'; }
@media not print {
.selected_cursor {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
pointer-events: none;
}
.active_cursor {
/* one pixel outline around the cell, and one inside the cell */
outline: 1px solid var(--grist-theme-cursor, var(--grist-color-cursor));
box-shadow: inset 0 0 0 1px var(--grist-theme-cursor, var(--grist-color-cursor));
z-index: 1;
}
}
.column_name {
color: var(--grist-theme-table-header-fg, unset);
background-color: var(--grist-theme-table-header-bg, var(--grist-color-light-grey));
text-align: center;
cursor: pointer;
/* Column headers always show vertical gridlines, to make it clear how to resize them */
border-right-color: var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
}
.column_names.record {
border-left-color: var(--grist-theme-table-header-border, var(--grist-color-dark-grey));
}
.column_name.selected {
color: var(--grist-theme-table-header-selected-fg, unset);
background-color: var(--grist-theme-table-header-selected-bg, var(--grist-color-medium-grey-opaque));
}
.gridview_data_row_num.selected {
color: var(--grist-theme-table-header-selected-fg, unset);
background-color: var(--grist-theme-table-header-selected-bg, var(--grist-color-medium-grey-opaque));
}
.link_selector_row > .gridview_data_row_num {
color: var(--grist-theme-left-panel-active-page-fg, white);
background-color: var(--grist-theme-left-panel-active-page-bg, var(--grist-color-dark-bg));
}
.link_selector_row > .record::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-color: var(--grist-theme-selection, var(--grist-color-selection));
/* z-index should be higher than '.record .field.frozen' (10) to show for frozen columns,
* but lower than '.gridview_stick-top' (20) to stay under column headers. */
z-index: 15;
}
.gridview_data_row_info.linked_dst::before {
position: absolute;
content: '\25B8';
text-align: left;
left: 7px;
}
.text_wrapping {
word-break: break-word;
white-space: pre-wrap;
}
.diff-local, .diff-local-add {
background-color: #dfdfff;
--grist-diff-background-color: #dfdfff;
--grist-diff-color: black;
}
.diff-parent, .diff-remote-remove {
background-color: #ffdfdf;
--grist-diff-background-color: #ffdfdf;
--grist-diff-color: black;
text-decoration: line-through;
}
.diff-local-remove {
background-color: #dfdfdf;
--grist-diff-background-color: #dfdfdf;
--grist-diff-color: black;
text-decoration: line-through;
}
.diff-remote, .diff-remote-add {
background-color: #afffaf;
--grist-diff-background-color: #afffaf;
--grist-diff-color: black;
}
.diff-common {
color: #555;
}
Reference in New Issue View Git Blame Copy Permalink