diff --git a/app/client/components/GridView.js b/app/client/components/GridView.js index f16e81d0..689875b9 100644 --- a/app/client/components/GridView.js +++ b/app/client/components/GridView.js @@ -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), diff --git a/app/client/components/viewCommon.css b/app/client/components/viewCommon.css index c201294b..0f46725f 100644 --- a/app/client/components/viewCommon.css +++ b/app/client/components/viewCommon.css @@ -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); } diff --git a/app/client/widgets/FieldBuilder.ts b/app/client/widgets/FieldBuilder.ts index 94324bb6..6d11bf8a 100644 --- a/app/client/widgets/FieldBuilder.ts +++ b/app/client/widgets/FieldBuilder.ts @@ -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)); }) ); };