mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(core) Switching the order that colors are applied to a cell
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:
parent
8734363274
commit
1c8a29ef9b
@ -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),
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -484,18 +484,14 @@ export class FieldBuilder extends Disposable {
|
||||
}
|
||||
}).extend({ deferred: true })).onlyNotifyUnequal();
|
||||
|
||||
const textColor = koUtil.withKoUtils(ko.computed(() => {
|
||||
const ruleText = koUtil.withKoUtils(ko.computed(() => {
|
||||
if (this.isDisposed()) { return null; }
|
||||
const fromRules = computedRule()?.style?.textColor;
|
||||
return fromRules || this.field.textColor() || '';
|
||||
return computedRule()?.style?.textColor || '';
|
||||
})).onlyNotifyUnequal();
|
||||
|
||||
const fillColor = koUtil.withKoUtils(ko.computed(() => {
|
||||
const ruleFill = koUtil.withKoUtils(ko.computed(() => {
|
||||
if (this.isDisposed()) { return null; }
|
||||
const fromRules = computedRule()?.style?.fillColor;
|
||||
let fill = fromRules || this.field.fillColor();
|
||||
fill = fill ? fill.toUpperCase() : fill;
|
||||
return fill || '';
|
||||
return computedRule()?.style?.fillColor || '';
|
||||
})).onlyNotifyUnequal();
|
||||
|
||||
const fontBold = buildFontOptions(this, computedRule, 'fontBold');
|
||||
@ -505,19 +501,27 @@ export class FieldBuilder extends Disposable {
|
||||
|
||||
const errorInStyle = ko.pureComputed(() => Boolean(computedRule()?.error));
|
||||
|
||||
const cellText = ko.pureComputed(() => this.field.textColor() || '');
|
||||
const cllFill = ko.pureComputed(() => this.field.fillColor() || '');
|
||||
|
||||
|
||||
return (elem: Element) => {
|
||||
this._rowMap.set(row, elem);
|
||||
dom(elem,
|
||||
dom.autoDispose(widgetObs),
|
||||
dom.autoDispose(computedFlags),
|
||||
dom.autoDispose(errorInStyle),
|
||||
dom.autoDispose(textColor),
|
||||
dom.autoDispose(ruleText),
|
||||
dom.autoDispose(computedRule),
|
||||
dom.autoDispose(fillColor),
|
||||
dom.autoDispose(ruleFill),
|
||||
dom.autoDispose(fontBold),
|
||||
dom.autoDispose(fontItalic),
|
||||
dom.autoDispose(fontUnderline),
|
||||
dom.autoDispose(fontStrikethrough),
|
||||
kd.style('--grist-cell-color', cellText),
|
||||
kd.style('--grist-cell-background-color', cllFill),
|
||||
kd.style('--grist-rule-color', ruleText),
|
||||
kd.style('--grist-column-rule-background-color', ruleFill),
|
||||
this._options.isPreview ? null : kd.cssClass(this.field.formulaCssClass),
|
||||
kd.toggleClass("readonly", toKo(ko, this._readonly)),
|
||||
kd.maybe(isSelected, () => dom('div.selected_cursor',
|
||||
@ -531,9 +535,7 @@ export class FieldBuilder extends Disposable {
|
||||
kd.toggleClass('font-bold', fontBold),
|
||||
kd.toggleClass('font-underline', fontUnderline),
|
||||
kd.toggleClass('font-italic', fontItalic),
|
||||
kd.toggleClass('font-strikethrough', fontStrikethrough),
|
||||
kd.style('--grist-cell-color', textColor),
|
||||
kd.style('--grist-cell-background-color', fillColor));
|
||||
kd.toggleClass('font-strikethrough', fontStrikethrough));
|
||||
})
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user