#issue-761 Mark clicked column image with active class

Author: Sergiy Zhovnir

app/code/Magento/Ui/view/base/web/js/grid/columns/image.js

@@ -80,6 +80,15 @@ define([
             return record.css || {};
         },
 
+        /**
+         * Get is active record
+         *
+         * @param {Object} record - Data to be preprocessed.
+         */
+        getIsActive: function (record) {
+            return this.previewComponent().visibleRecord() === record._rowIndex || false;
+        },
+
         /**
          * Expand image preview
          */

app/code/Magento/Ui/view/base/web/templates/grid/columns/image.html

@@ -4,6 +4,6 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="masonry-image-block" ko-style="$col.getStyles($row())" attr="'data-id': $col.getId($row())">
+<div class="masonry-image-block" ko-style="$col.getStyles($row())" css="{'active': $col.getIsActive($row())}" attr="'data-id': $col.getId($row())">
     <img attr="src: $col.getUrl($row())" css="$col.getClasses($row())" click="function(){ expandPreview($row()) }" data-role="thumbnail"/>
 </div>