Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Scrolling to the active record when editor is activated

Browse Source 
Summary: When an editor is activated by typing, the active view should be scrolled to the active record.

Test Plan: new tests

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3196
This commit is contained in:
Jarosław Sadziński
2022-01-05 21:14:44 +01:00
parent 5cdc7b2ea4
commit 08881d9663
7 changed files with 78 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/client/components/BaseView.js
View File

@@ -246,8 +246,11 @@ _.extend(Base.prototype, BackboneEvents);
* These commands are common to GridView and DetailView.
*/
BaseView.commonCommands = {
input: function(input) { this.activateEditorAtCursor({init: input}); },
editField: function() { this.activateEditorAtCursor(); },
input: function(init) {
this.scrollToCursor(true).catch(reportError);
this.activateEditorAtCursor({init});
},
editField: function() { this.scrollToCursor(true); this.activateEditorAtCursor(); },
insertRecordBefore: function() { this.insertRow(this.cursor.rowIndex()); },
insertRecordAfter: function() { this.insertRow(this.cursor.rowIndex() + 1); },
@@ -695,8 +698,10 @@ BaseView.prototype.isFiltered = function() {
/**
* Makes sure that active record is in the view.
* @param {Boolean} sync If the scroll should be performed synchronously. For typing we should scroll synchronously,
* for other cases asynchronously as there might be some other operations pending (see doScrollChildIntoView in koDom).
*/
BaseView.prototype.revealActiveRecord = function() {
BaseView.prototype.scrollToCursor = function() {
// to override
return Promise.resolve();
};

8
app/client/components/DetailView.js
View File

@@ -68,6 +68,7 @@ function DetailView(gristDoc, viewSectionModel) {
//--------------------------------------------------
// Construct DOM
this.scrollPane = null;
this.viewPane = this.autoDispose(this.buildDom());
//--------------------------------------------------
@@ -286,7 +287,7 @@ DetailView.prototype.buildDom = function() {
}),
kd.maybe(() => !this.recordLayout.isEditingLayout(), () => {
if (!this._isSingle) {
return dom('div.detailview_scroll_pane.flexitem',
return this.scrollPane = dom('div.detailview_scroll_pane.flexitem',
kd.scrollChildIntoView(this.cursor.rowIndex),
dom.onDispose(() => {
// Save the previous scroll values to the section.
@@ -414,4 +415,9 @@ DetailView.prototype._isAddRow = function(index = this.cursor.rowIndex()) {
return this.viewData.getRowId(index) === 'new';
};
DetailView.prototype.scrollToCursor = function(sync = true) {
if (!this.scrollPane) { return Promise.resolve(); }
return kd.doScrollChildIntoView(this.scrollPane, this.cursor.rowIndex(), sync);
}
module.exports = DetailView;

11
app/client/components/GridView.js
View File

@@ -267,7 +267,7 @@ GridView.gridCommands = {
fieldEditSave: function() { this.cursor.rowIndex(this.cursor.rowIndex() + 1); },
// Re-define editField after fieldEditSave to make it take precedence for the Enter key.
editField: function() { this.activateEditorAtCursor(); },
editField: function() { this.scrollToCursor(true); this.activateEditorAtCursor(); },
deleteRecords: function() {
const saved = this.cursor.getCursorPos();
@@ -292,7 +292,10 @@ GridView.gridCommands = {
convertFormulasToData: function() { this._convertFormulasToData(this.getSelection()); },
copy: function() { return this.copy(this.getSelection()); },
cut: function() { return this.cut(this.getSelection()); },
paste: function(pasteObj, cutCallback) { return this.paste(pasteObj, cutCallback); },
paste: async function(pasteObj, cutCallback) {
await this.paste(pasteObj, cutCallback);
await this.scrollToCursor(false);
},
cancel: function() { this.clearSelection(); },
sortAsc: function() {
sortBy(this.viewSection.activeSortSpec, this.currentColumn().getRowId(), Sort.ASC);
@@ -1478,8 +1481,8 @@ GridView.prototype.maybeSelectRow = function(elem, rowId) {
// End Context Menus
GridView.prototype.revealActiveRecord = function() {
return kd.doScrollChildIntoView(this.scrollPane, this.cursor.rowIndex());
GridView.prototype.scrollToCursor = function(sync = true) {
return kd.doScrollChildIntoView(this.scrollPane, this.cursor.rowIndex(), sync);
}
// Helper to show tooltip over column selection in the full edit mode.