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

Test Plan: nbrowser test added

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D4009

app/client/components/DetailView.css

@@ -121,7 +121,13 @@
   .detailview_record_detail.active {
     /* highlight active record in Card List by overlaying the active-section highlight */
     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));
   }
 }
 

app/client/components/DetailView.js

@@ -430,6 +430,7 @@ DetailView.prototype.makeRecord = function(record) {
       return rowType && `diff-${rowType}` || '';
     }) : null,
     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,
     // since a change to parentKey would cause a separate call to makeRecord.
     kd.cssClass('detailview_record_' + this.viewSection.parentKey.peek())

test/nbrowser/DetailView.ntest.js

@@ -1,4 +1,4 @@
-import { assert } from 'mocha-webdriver';
+import { By, assert, driver } from 'mocha-webdriver';
 import { $, gu, test } from 'test/nbrowser/gristUtil-nbrowser';
 
 describe("DetailView.ntest", function () {
@@ -23,6 +23,34 @@ describe("DetailView.ntest", function () {
     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() {
     await gu.actions.viewSection('Performances detail').selectSection();