gristlabs_grist-core/app/client/widgets/NTextBox.ts
Cyprien P 1995a96178 (core) Add new color select to the app
Summary:
 - Fix transparency support on color select
 - Fix z-index conflicts with color select and right panel
 - Makes widget's default text color visible to color select

Test Plan: - Updates nbrowser/CellColor and browser/Widget.test to support new interface. Should not cause regression.

Reviewers: paulfitz, dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D2735
2021-03-02 16:41:37 +01:00

55 lines
1.8 KiB
TypeScript

import {fromKoSave} from 'app/client/lib/fromKoSave';
import {DataRowModel} from 'app/client/models/DataRowModel';
import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
import {cssRow} from 'app/client/ui/RightPanel';
import {alignmentSelect, makeButtonSelect} from 'app/client/ui2018/buttonSelect';
import {testId} from 'app/client/ui2018/cssVars';
import {NewAbstractWidget, Options} from 'app/client/widgets/NewAbstractWidget';
import {dom, DomContents, fromKo, Observable} from 'grainjs';
/**
* TextBox - The most basic widget for displaying text information.
*/
export class NTextBox extends NewAbstractWidget {
protected alignment: Observable<string>;
protected wrapping: Observable<boolean>;
constructor(field: ViewFieldRec, options: Options = {}) {
super(field, options);
this.alignment = fromKoSave<string>(this.options.prop('alignment'));
this.wrapping = fromKo(this.field.wrapping);
this.autoDispose(this.wrapping.addListener(() => {
this.field.viewSection().events.trigger('rowHeightChange');
}));
}
public buildConfigDom(): DomContents {
return [
cssRow(
alignmentSelect(this.alignment),
dom('div', {style: 'margin-left: 8px;'},
makeButtonSelect(this.wrapping, [{value: true, icon: 'Wrap'}], this._toggleWrap.bind(this), {}),
testId('tb-wrap-text')
)
)
];
}
public buildDom(row: DataRowModel) {
const value = row.cells[this.field.colId.peek()];
return dom('div.field_clip',
dom.style('text-align', this.alignment),
dom.cls('text_wrapping', this.wrapping),
dom.text((use) => use(row._isAddRow) ? '' : use(this.valueFormatter).format(use(value))),
);
}
private _toggleWrap(value: boolean) {
const newValue = !this.wrapping.get();
this.options.update({wrap: newValue});
(this.options as any).save();
}
}