mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
59cf654190
Summary: A feature that allows minimizing widgets on the ViewLayout. - Code in ViewLayout and Layout hasn't been changed. Only some methods or variables were made public, and some events are now triggered when a section is dragged. - Widgets can be collapsed or expanded (added back to the main area) - Collapsed widgets can be expanded and shown as a popup - Collapsed widgets support drugging, reordering, and transferring between the main and collapsed areas. Test Plan: New test Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D3779
70 lines
3.1 KiB
TypeScript
70 lines
3.1 KiB
TypeScript
import {BoxSpec} from 'app/client/components/Layout';
|
|
import {KoArray} from 'app/client/lib/koArray';
|
|
import * as koUtil from 'app/client/lib/koUtil';
|
|
import {DocModel, IRowModel, recordSet, refRecord} from 'app/client/models/DocModel';
|
|
import {TabBarRec, ViewSectionRec} from 'app/client/models/DocModel';
|
|
import * as modelUtil from 'app/client/models/modelUtil';
|
|
import * as ko from 'knockout';
|
|
|
|
// Represents a view (now also referred to as a "page") containing one or more view sections.
|
|
export interface ViewRec extends IRowModel<"_grist_Views"> {
|
|
viewSections: ko.Computed<KoArray<ViewSectionRec>>;
|
|
tabBarItem: ko.Computed<KoArray<TabBarRec>>;
|
|
|
|
layoutSpecObj: modelUtil.SaveableObjObservable<BoxSpec>;
|
|
|
|
// An observable for the ref of the section last selected by the user.
|
|
activeSectionId: ko.Computed<number>;
|
|
|
|
// This is active collapsed section id. Set when the widget is clicked.
|
|
activeCollapsedSectionId: ko.Observable<number>;
|
|
|
|
// Saved collapsed sections.
|
|
collapsedSections: ko.Computed<number[]>;
|
|
|
|
// Active collapsed sections, changed by the user, can be different from the
|
|
// saved collapsed sections, for a brief moment (editor is buffering changes).
|
|
activeCollapsedSections: ko.Observable<number[]>;
|
|
|
|
activeSection: ko.Computed<ViewSectionRec>;
|
|
|
|
// If the active section is removed, set the next active section to be the default.
|
|
_isActiveSectionGone: ko.Computed<boolean>;
|
|
}
|
|
|
|
export function createViewRec(this: ViewRec, docModel: DocModel): void {
|
|
this.viewSections = recordSet(this, docModel.viewSections, 'parentId');
|
|
this.tabBarItem = recordSet(this, docModel.tabBar, 'viewRef');
|
|
|
|
this.layoutSpecObj = modelUtil.jsonObservable(this.layoutSpec);
|
|
|
|
// An observable for the ref of the section last selected by the user.
|
|
this.activeSectionId = koUtil.observableWithDefault(ko.observable(), () => {
|
|
// The default function which is used when the conditional case is true.
|
|
// Read may occur for recently disposed sections, must check condition first.
|
|
return !this.isDisposed() &&
|
|
// `!this.getRowId()` implies that this is an empty (non-existent) view record
|
|
// which happens when viewing the raw data tables, in which case the default is no active view section.
|
|
this.getRowId() && this.viewSections().all().length > 0 ? this.viewSections().at(0)!.getRowId() : 0;
|
|
});
|
|
|
|
this.activeSection = refRecord(docModel.viewSections, this.activeSectionId);
|
|
|
|
this.activeCollapsedSectionId = ko.observable(0);
|
|
|
|
this.collapsedSections = this.autoDispose(ko.pureComputed(() => {
|
|
const allSections = new Set(this.viewSections().all().map(x => x.id()));
|
|
const collapsed: number[] = (this.layoutSpecObj().collapsed || []).map(x => x.leaf as number);
|
|
return collapsed.filter(x => allSections.has(x));
|
|
}));
|
|
this.activeCollapsedSections = ko.observable(this.collapsedSections.peek());
|
|
|
|
// If the active section is removed, set the next active section to be the default.
|
|
this._isActiveSectionGone = this.autoDispose(ko.computed(() => this.activeSection()._isDeleted()));
|
|
this.autoDispose(this._isActiveSectionGone.subscribe(gone => {
|
|
if (gone) {
|
|
this.activeSectionId(0);
|
|
}
|
|
}));
|
|
}
|