gristlabs_grist-core/app/client/widgets/NewAbstractWidget.ts
Cyprien P 890a8709f3 (core) Making cells colors effective also in Card and Card List views
Summary:
 . Makes cell color work well in comparison mode
 . Do not apply cell color to the add new row
 . Allow to change color for all widget (including changing color for the checkbox and the switch widget)
 . Fix an issue that was setting color to black when opening the picker
 . Do not apply color to invalid cell

Test Plan: . Added nbrowser/CellColor

Reviewers: paulfitz, dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D2720
2021-02-09 15:08:44 +01:00

112 lines
3.6 KiB
TypeScript

/**
* NewAbstractWidget is equivalent to AbstractWidget for outside code, but is in typescript, and
* so is friendlier and clearer to derive TypeScript classes from.
*/
import {DocComm} from 'app/client/components/DocComm';
import {DocData} from 'app/client/models/DocData';
import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
import {SaveableObjObservable} from 'app/client/models/modelUtil';
import {cssLabel, cssRow} from 'app/client/ui/RightPanel';
import {colorSelect} from 'app/client/ui2018/buttonSelect';
import {colors, testId} from 'app/client/ui2018/cssVars';
import {BaseFormatter, createFormatter} from 'app/common/ValueFormatter';
import {Disposable, DomContents, fromKo, Observable, styled} from 'grainjs';
import * as ko from 'knockout';
/**
* NewAbstractWidget - The base of the inheritance tree for widgets.
* @param {Function} field - The RowModel for this view field.
*/
export abstract class NewAbstractWidget extends Disposable {
/**
* Override the create() method to match the parameters of create() expected by FieldBuilder.
*/
public static create(field: ViewFieldRec) {
return Disposable.create.call(this as any, null, field);
}
protected options: SaveableObjObservable<any>;
protected valueFormatter: Observable<BaseFormatter>;
protected textColor: Observable<string>;
protected fillColor: Observable<string>;
constructor(protected field: ViewFieldRec) {
super();
this.options = field.widgetOptionsJson;
this.textColor = fromKo(this.field.textColor);
this.fillColor = fromKo(this.field.fillColor);
// Note that its easier to create a knockout computed from the several knockout observables,
// but then we turn it into a grainjs observable.
const formatter = this.autoDispose(ko.computed(() =>
createFormatter(field.displayColModel().type(), this.options())));
this.valueFormatter = fromKo(formatter);
}
/**
* Builds the DOM showing configuration buttons and fields in the sidebar.
*/
public buildConfigDom(): DomContents { return null; }
/**
* Builds the transform prompt config DOM in the few cases where it is necessary.
* Child classes need not override this function if they do not require transform config options.
*/
public buildTransformConfigDom(): DomContents { return null; }
public buildColorConfigDom(): Element[] {
return [
cssLabel('CELL COLOR'),
cssRow(
cssHalfWidth(
colorSelect(
this.textColor,
(val) => this.field.textColor.saveOnly(val),
testId('text-color')
),
cssInlineLabel('Text'),
),
cssHalfWidth(
colorSelect(
this.fillColor,
(val) => this.field.fillColor.saveOnly(val),
testId('fill-color')
),
cssInlineLabel('Fill')
)
)
];
}
/**
* Builds the data cell DOM.
* @param {DataRowModel} row - The rowModel object.
*/
public abstract buildDom(row: any): Element;
/**
* Returns the DocData object to which this field belongs.
*/
protected _getDocData(): DocData {
// TODO: There should be a better way to access docData and docComm, or better yet GristDoc.
return this.field._table.tableData.docData;
}
/**
* Returns the docComm object for communicating with the server.
*/
protected _getDocComm(): DocComm { return this._getDocData().docComm; }
}
export const cssHalfWidth = styled('div', `
display: flex;
flex: 1 1 50%;
align-items: center;
`);
export const cssInlineLabel = styled('span', `
margin: 0 8px;
color: ${colors.dark};
`);