gristlabs_grist-core/app/client/ui/GridOptions.ts
Arnaud Peich 79deeca640
Make a good part of the app localizable and add French translations (#325)
Co-authored-by: Yohan Boniface <yohanboniface@free.fr>
2022-10-28 09:11:08 -07:00

64 lines
1.9 KiB
TypeScript

import { makeT } from 'app/client/lib/localization';
import { ViewSectionRec } from "app/client/models/DocModel";
import { KoSaveableObservable, setSaveValue } from "app/client/models/modelUtil";
import { cssLabel, cssRow } from "app/client/ui/RightPanelStyles";
import { squareCheckbox } from "app/client/ui2018/checkbox";
import { testId } from "app/client/ui2018/cssVars";
import { Computed, Disposable, dom, IDisposableOwner, styled } from "grainjs";
const t = makeT('GridOptions');
/**
* Builds the grid options.
*/
export class GridOptions extends Disposable {
constructor(private _section: ViewSectionRec) {
super();
}
public buildDom() {
const section = this._section;
return [
cssLabel(t('GridOptions')),
dom('div', [
cssRow(
checkbox(setSaveValueFromKo(this, section.optionsObj.prop('verticalGridlines'))),
t('VerticalGridlines'),
testId('v-grid-button')
),
cssRow(
checkbox(setSaveValueFromKo(this, section.optionsObj.prop('horizontalGridlines'))),
t('HorizontalGridlines'),
testId('h-grid-button')
),
cssRow(
checkbox(setSaveValueFromKo(this, section.optionsObj.prop('zebraStripes'))),
t('ZebraStripes'),
testId('zebra-stripe-button')
),
testId('grid-options')
]),
];
}
}
// Returns a grainjs observable that reflects the value of obs a knockout saveable observable. The
// returned observable will set and save obs to the given value when written. If the obs.save() call
// fails, then it gets reset to its previous value.
function setSaveValueFromKo<T>(owner: IDisposableOwner, obs: KoSaveableObservable<T>) {
const ret = Computed.create(null, (use) => use(obs));
ret.onWrite(async (val) => {
await setSaveValue(obs, val);
});
return ret;
}
const checkbox = styled(squareCheckbox, `
margin-right: 8px;
`);