Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Inactive card list widget now have idicator that show cursor position of linked widget

Browse Source 
Test Plan: nbrowser test added

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D4009
This commit is contained in:
Jakub Serafin 2023-08-24 13:04:15 +02:00
parent d5a4605d2a
commit 2073e6224e
3 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,7 +121,13 @@
.detailview_record_detail.active { .detailview_record_detail.active {
/* highlight active record in Card List by overlaying the active-section highlight */ /* highlight active record in Card List by overlaying the active-section highlight */
margin-left: -3px; margin-left: -3px;
border-left: 3px solid var(--grist-color-light-green); border-left: 3px solid var(--grist-theme-cursor, var(--grist-color-light-green));
}
.detailview_record_detail.selected {
/* highlight selected record in Card List by overlaying the inactive-cursor highlight */
margin-left: -3px;
border-left: 3px solid var(--grist-theme-cursor-inactive, var(--grist-color-inactive-cursor));
} }
} }

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

@ -430,6 +430,7 @@ DetailView.prototype.makeRecord = function(record) {
return rowType && `diff-${rowType}` || ''; return rowType && `diff-${rowType}` || '';
}) : null, }) : null,
kd.toggleClass('active', () => (this.cursor.rowIndex() === record._index() && this.viewSection.hasFocus())), kd.toggleClass('active', () => (this.cursor.rowIndex() === record._index() && this.viewSection.hasFocus())),
kd.toggleClass('selected', () => (this.cursor.rowIndex() === record._index() && !this.viewSection.hasFocus())),
// 'detailview_record_single' or 'detailview_record_detail' doesn't need to be an observable, // 'detailview_record_single' or 'detailview_record_detail' doesn't need to be an observable,
// since a change to parentKey would cause a separate call to makeRecord. // since a change to parentKey would cause a separate call to makeRecord.
kd.cssClass('detailview_record_' + this.viewSection.parentKey.peek()) kd.cssClass('detailview_record_' + this.viewSection.parentKey.peek())

30
test/nbrowser/DetailView.ntest.js
View File

@ -1,4 +1,4 @@
import { assert } from 'mocha-webdriver'; import { By, assert, driver } from 'mocha-webdriver';
import { $, gu, test } from 'test/nbrowser/gristUtil-nbrowser'; import { $, gu, test } from 'test/nbrowser/gristUtil-nbrowser';
describe("DetailView.ntest", function () { describe("DetailView.ntest", function () {
@ -23,6 +23,34 @@ describe("DetailView.ntest", function () {
return gu.checkForErrors(); return gu.checkForErrors();
}); });
describe("DetailView.selection", function () {
before(async function() {
// Open the 'Performances' view
await gu.actions.viewSection('Performances detail').selectSection();
await $('.test-right-panel button:contains(Change Widget)').click();
await $('.test-wselect-type:contains(Card List)').click();
await $('.test-wselect-addBtn').click();
await gu.waitForServer();
await gu.openSelectByForSection('Performances detail');
await driver.findContent('.test-select-row', /Performances record$/).click();
});
it('should mark detail-view row as selected when its out of focus', async function() {
// Focus on Performances record, second row
await gu.actions.viewSection('Performances record').selectSection();
await gu.getCell({col: 'Film', rowNum: 2}).click();
//Check if only the second card in detail view is having selection class
const elements = await driver.findElements(By.css(".detailview_record_detail"));
const secondElement = await elements[1].getAttribute('class');
assert.isTrue(secondElement.includes('selected'));
const firstElement = await elements[0].getAttribute('class');
assert.isFalse(firstElement.includes('selected'));
});
});
it('should allow switching between card and detail view', async function() { it('should allow switching between card and detail view', async function() {
await gu.actions.viewSection('Performances detail').selectSection(); await gu.actions.viewSection('Performances detail').selectSection();