ENGCOM-6507: Adobe stock integration Issue-761: Highlight the selected image in the grid #25864

Author: VladimirZaets

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

@@ -80,6 +80,17 @@ define([
             return record.css || {};
         },
 
+        /**
+         * Get is active record
+         *
+         * @param {Object} record - Data to be preprocessed.
+         *
+         * @returns {Boolean}
+         */
+        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>

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/_masonry-grid.less

@@ -5,6 +5,7 @@
 @admin__masonry_grid_image__space: 20px;
 @admin__masonry_grid_background_color: #fff;
 @admin__masonry_overlay_background_color: #507dc8;
+@admin__masonry_grid_active_image_border_color: #558dd6;
 
 & when (@media-common = true) {
     .masonry-image {
@@ -27,6 +28,15 @@
             margin: @admin__masonry_grid_image__space/2;
             overflow: hidden;
 
+            .masonry-image-block {
+                &.active {
+                    img {
+                        border: 2px @admin__masonry_grid_active_image_border_color solid;
+                        padding: 1px;
+                    }
+                }
+            }
+
             img {
                 cursor: pointer;
                 height: 100%;