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) Switching the order that colors are applied to a cell

Browse Source 
Summary:
Switching an order that colors are applied to a cell.
Previously a default cell style was applied after style
that came from a row style. Now the row style is
applied after (so it overrides default cell style).

Also, background color that comes from a field options
(either from default style or rule) is applied to a whole field,
so it also includes icons for formula/reference field.

Test Plan: Updated

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3651
This commit is contained in:
Jarosław Sadziński
2022-10-13 13:55:41 +02:00
parent 8734363274
commit 1c8a29ef9b
3 changed files with 61 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1199,8 +1199,8 @@ GridView.prototype.buildDom = function() {
kd.toggleClass('font-underline', fontUnderline),
kd.toggleClass('font-italic', fontItalic),
kd.toggleClass('font-strikethrough', fontStrikethrough),
kd.style('--grist-row-background-color', fillColor),
kd.style('--grist-row-background-color-zebra', zebraColor),
kd.style('--grist-row-rule-background-color', fillColor),
kd.style('--grist-row-rule-background-color-zebra', zebraColor),
kd.style('--grist-row-color', textColor),
//These are grabbed from v.optionsObj at start of GridView buildDom
kd.toggleClass('record-hlines', vHorizontalGridlines),

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

@@ -13,13 +13,14 @@
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 by default.
/* 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 - this still remains white.
TODO: consider making this color the single source
selected fields.
*/
background: var(--grist-row-background-color, var(--grist-theme-cell-bg, white));
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));
}
@@ -28,11 +29,14 @@
}
.record.record-zebra.record-even {
background-color: var(--grist-row-background-color-zebra, var(--grist-theme-cell-zebra-bg, #f8f8f8));
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 zebra stripes */
background-color: var(--grist-theme-table-add-new-bg, #f6f6ff) !important; /* important to win over every thing */
}
.field {
@@ -44,6 +48,34 @@
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).
*/
background-color: var(--grist-diff-background-color,
var(--grist-column-rule-background-color,
var(--grist-row-rule-background-color,
var(--grist-cell-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 {
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, unset)))));
}
.record.record-add .field {
background-color: unset !important; /* important to win over zebra stripes */
}
.record-vlines > .field {
@@ -55,8 +87,6 @@
outline: 2px dashed var(--grist-theme-cursor, var(--grist-color-cursor));
}
.field.draft {
padding-right: 18px;
}
@@ -70,8 +100,12 @@
text-overflow: ellipsis;
width: 100%;
height: 100%;
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)));
/* 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);
}