You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.9 KiB
64 lines
1.9 KiB
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;
|
|
`);
|