Summary: Adds a new Record Card view section to each non-summary table, which can be from opened from various parts of the Grist UI to view and edit records in a popup card view. Work is still ongoing, so the feature is locked away behind a flag; follow-up work is planned to finish up the implementation and add end-to-end tests. Test Plan: Python and server tests. Browser tests will be included in a follow-up. Reviewers: jarek, paulfitz Reviewed By: jarek Subscribers: paulfitz Differential Revision: https://phab.getgrist.com/D4114pull/758/head
George Gevoian
6 months ago
parent
2eec48b685
commit
caf830db08
@ -0,0 +1,69 @@
|
||||
import {buildViewSectionDom} from 'app/client/components/buildViewSectionDom';
|
||||
import * as commands from 'app/client/components/commands';
|
||||
import {GristDoc} from 'app/client/components/GristDoc';
|
||||
import {cssCloseButton, cssOverlay} from 'app/client/components/RawDataPage';
|
||||
import {ViewSectionRec} from 'app/client/models/DocModel';
|
||||
import {ViewSectionHelper} from 'app/client/components/ViewLayout';
|
||||
import {theme} from 'app/client/ui2018/cssVars';
|
||||
import {Disposable, dom, makeTestId, styled} from 'grainjs';
|
||||
|
||||
const testId = makeTestId('test-record-card-popup-');
|
||||
|
||||
interface RecordCardPopupOptions {
|
||||
gristDoc: GristDoc;
|
||||
viewSection: ViewSectionRec;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
export class RecordCardPopup extends Disposable {
|
||||
private _gristDoc = this._options.gristDoc;
|
||||
private _viewSection = this._options.viewSection;
|
||||
private _handleClose = this._options.onClose;
|
||||
|
||||
constructor(private _options: RecordCardPopupOptions) {
|
||||
super();
|
||||
const commandGroup = {
|
||||
cancel: () => { this._handleClose(); },
|
||||
};
|
||||
this.autoDispose(commands.createGroup(commandGroup, this, true));
|
||||
}
|
||||
|
||||
public buildDom() {
|
||||
ViewSectionHelper.create(this, this._gristDoc, this._viewSection);
|
||||
return cssOverlay(
|
||||
testId('overlay'),
|
||||
cssSectionWrapper(
|
||||
buildViewSectionDom({
|
||||
gristDoc: this._gristDoc,
|
||||
sectionRowId: this._viewSection.getRowId(),
|
||||
draggable: false,
|
||||
focusable: false,
|
||||
renamable: false,
|
||||
hideTitleControls: true,
|
||||
}),
|
||||
),
|
||||
cssCloseButton('CrossBig',
|
||||
dom.on('click', () => this._handleClose()),
|
||||
testId('close'),
|
||||
),
|
||||
dom.on('click', (ev, elem) => void (ev.target === elem ? this._handleClose() : null)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const cssSectionWrapper = styled('div', `
|
||||
background: ${theme.mainPanelBg};
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 5px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
& .viewsection_content {
|
||||
margin: 0px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
& .viewsection_title {
|
||||
padding: 0px 12px;
|
||||
}
|
||||
`);
|
||||
@ -0,0 +1,49 @@
|
||||
import { allCommands } from 'app/client/components/commands';
|
||||
import { makeT } from 'app/client/lib/localization';
|
||||
import { menuDivider, menuItemCmd } from 'app/client/ui2018/menus';
|
||||
import { dom } from 'grainjs';
|
||||
|
||||
const t = makeT('CardContextMenu');
|
||||
|
||||
export interface ICardContextMenu {
|
||||
disableInsert: boolean;
|
||||
disableDelete: boolean;
|
||||
isViewSorted: boolean;
|
||||
numRows: number;
|
||||
}
|
||||
|
||||
export function CardContextMenu({
|
||||
disableInsert,
|
||||
disableDelete,
|
||||
isViewSorted,
|
||||
numRows
|
||||
}: ICardContextMenu) {
|
||||
const result: Element[] = [];
|
||||
if (isViewSorted) {
|
||||
result.push(
|
||||
menuItemCmd(allCommands.insertRecordAfter, t("Insert card"),
|
||||
dom.cls('disabled', disableInsert)),
|
||||
);
|
||||
} else {
|
||||
result.push(
|
||||
menuItemCmd(allCommands.insertRecordBefore, t("Insert card above"),
|
||||
dom.cls('disabled', disableInsert)),
|
||||
menuItemCmd(allCommands.insertRecordAfter, t("Insert card below"),
|
||||
dom.cls('disabled', disableInsert)),
|
||||
);
|
||||
}
|
||||
result.push(
|
||||
menuItemCmd(allCommands.duplicateRows, t("Duplicate card"),
|
||||
dom.cls('disabled', disableInsert || numRows === 0)),
|
||||
);
|
||||
result.push(
|
||||
menuDivider(),
|
||||
menuItemCmd(allCommands.deleteRecords, t("Delete card"),
|
||||
dom.cls('disabled', disableDelete)),
|
||||
);
|
||||
result.push(
|
||||
menuDivider(),
|
||||
menuItemCmd(allCommands.copyLink, t("Copy anchor link"))
|
||||
);
|
||||
return result;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue