(core) Adding conditional styles to old style widgets

Summary:
Widgets that were using old base Widget class didn't not
create conditional style rules ui.

Additional fixed a little bug - when adding conditional rule
the formula field was marked as having error for a split second.

Test Plan: new test

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3346
This commit is contained in:
Jarosław Sadziński 2022-03-31 15:33:37 +02:00
parent 21b0ac3eff
commit 499e24b744
2 changed files with 7 additions and 22 deletions

View File

@ -1,8 +1,6 @@
var dispose = require('../lib/dispose'); var dispose = require('../lib/dispose');
const {Computed, fromKo} = require('grainjs'); const {CellStyle} = require('app/client/widgets/CellStyle');
const {dom} = require('grainjs');
const {cssLabel, cssRow} = require('app/client/ui/RightPanel');
const {colorSelect} = require('app/client/ui2018/ColorSelect');
/** /**
* AbstractWidget - The base of the inheritance tree for widgets. * AbstractWidget - The base of the inheritance tree for widgets.
@ -14,11 +12,8 @@ function AbstractWidget(field, opts = {}) {
this.field = field; this.field = field;
this.options = field.widgetOptionsJson; this.options = field.widgetOptionsJson;
const {defaultTextColor = '#000000'} = opts; const {defaultTextColor = '#000000'} = opts;
this.defaultTextColor = defaultTextColor;
this.valueFormatter = this.field.visibleColFormatter; this.valueFormatter = this.field.visibleColFormatter;
this.textColor = Computed.create(this, (use) => use(this.field.textColor) || defaultTextColor)
.onWrite((val) => this.field.textColor(val === defaultTextColor ? undefined : val));
} }
dispose.makeDisposable(AbstractWidget); dispose.makeDisposable(AbstractWidget);
@ -45,18 +40,8 @@ AbstractWidget.prototype.buildDom = function(row) {
throw new Error("Not Implemented"); throw new Error("Not Implemented");
}; };
AbstractWidget.prototype.buildColorConfigDom = function() { AbstractWidget.prototype.buildColorConfigDom = function(gristDoc) {
return [ return dom.create(CellStyle, this.field, gristDoc, this.defaultTextColor);
cssLabel('CELL COLOR'),
cssRow(
colorSelect(
this.textColor,
fromKo(this.field.fillColor),
// Calling `field.widgetOptionsJson.save()` saves both fill and text color settings.
() => this.field.widgetOptionsJson.save()
)
)
];
}; };
module.exports = AbstractWidget; module.exports = AbstractWidget;

View File

@ -105,10 +105,10 @@ export class CellStyle extends Disposable {
const currentValue = Computed.create(owner, use => { const currentValue = Computed.create(owner, use => {
const record = use(this.currentRecord); const record = use(this.currentRecord);
if (!record) { if (!record) {
return false; return null;
} }
const value = record[use(column.colId)]; const value = record[use(column.colId)];
return value; return value ?? null;
}); });
const hasError = Computed.create(owner, use => { const hasError = Computed.create(owner, use => {
return !isValidRuleValue(use(currentValue)); return !isValidRuleValue(use(currentValue));