ENGCOM-6279: Fixed masonry grid rendering and styles #25553

 - Merge Pull Request #25553 from sivaschenko/magento2:masonry-styles
 - Merged commits:
   1. 5fea47b
   2. cdf8e4e
   3. 4ce646d

Author: magento-engcom-team

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

@@ -10,11 +10,16 @@ define([
 
     return Column.extend({
         defaults: {
+            bodyTmpl: 'ui/grid/columns/image-preview',
             previewImageSelector: '[data-image-preview]',
             visibleRecord: null,
             height: 0,
             displayedRecord: {},
             lastOpenedImage: null,
+            fields: {
+                previewUrl: 'preview_url',
+                title: 'title'
+            },
             modules: {
                 masonry: '${ $.parentName }',
                 thumbnailComponent: '${ $.parentName }.thumbnail_url'
@@ -154,6 +159,26 @@ define([
             return this.visibleRecord() === record._rowIndex || false;
         },
 
+        /**
+         * Returns preview image url for a given record.
+         *
+         * @param {Object} record
+         * @return {String}
+         */
+        getUrl: function (record) {
+            return record[this.fields.previewUrl];
+        },
+
+        /**
+         * Returns image title for a given record.
+         *
+         * @param {Object} record
+         * @return {String}
+         */
+        getTitle: function (record) {
+            return record[this.fields.title];
+        },
+
         /**
          * Get styles for preview
          *

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

@@ -9,6 +9,7 @@ define([
 
     return Column.extend({
         defaults: {
+            bodyTmpl: 'ui/grid/columns/image',
             modules: {
                 previewComponent: '${ $.parentName }.preview'
             },

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

@@ -8,6 +8,10 @@ define([
     'use strict';
 
     return Column.extend({
+        defaults: {
+            bodyTmpl: 'ui/grid/columns/overlay'
+        },
+
         /**
          * If overlay should be visible
          *

app/code/Magento/Ui/view/base/web/js/grid/masonry.js

@@ -13,7 +13,7 @@ define([
 
     return Listing.extend({
         defaults: {
-            template: 'Magento_Ui/grid/masonry',
+            template: 'ui/grid/masonry',
             imports: {
                 rows: '${ $.provider }:data.items',
                 errorMessage: '${ $.provider }:data.errorMessage'

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less

@@ -4,3 +4,4 @@
 //  */
 
 @import 'module/_data-grid.less';
+@import 'module/_masonry-grid.less';

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

@@ -0,0 +1,108 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+@admin__masonry_grid_image__space: 20px;
+@admin__masonry_grid_background_color: #fff;
+@admin__masonry_overlay_background_color: #507dc8;
+
+& when (@media-common = true) {
+    .masonry-image {
+        &-grid {
+            margin: @admin__masonry_grid_image__space/2 -(@admin__masonry_grid_image__space/2);
+            overflow: hidden;
+            position: relative;
+
+            .no-data-message-container,
+            .error-message-container {
+                font-size: @data-grid__no-records__font-size;
+                padding: @data-grid__no-records__padding;
+                text-align: center;
+            }
+        }
+
+        &-column {
+            background-color: @admin__masonry_grid_background_color;
+            float: left;
+            margin: @admin__masonry_grid_image__space/2;
+            overflow: hidden;
+
+            img {
+                cursor: pointer;
+                height: 100%;
+                width: 100%;
+            }
+        }
+
+        &-overlay {
+            background-color: @admin__masonry_overlay_background_color;
+            color: @admin__masonry_grid_background_color;
+            opacity: 1;
+            padding: .5rem;
+            position: absolute;
+            text-align: center;
+            width: 80px;
+            z-index: 10;
+        }
+
+        &-preview {
+            background-color: @admin__masonry_grid_background_color;
+            display: table;
+            left: 0;
+            position: absolute;
+            right: 0;
+            width: 100%;
+
+            .container {
+                margin: auto;
+                max-width: 880px;
+                padding-top: 10px;
+
+                .action-buttons {
+                    text-align: right;
+
+                    .action {
+                        &-close {
+                            padding: 30px;
+                            position: static;
+                        }
+
+                        &-previous,
+                        &-next {
+                            background: transparent;
+                            border: none;
+                            margin: 0;
+                            white-space: nowrap;
+                        }
+
+                        &-close,
+                        &-previous,
+                        &-next {
+                            font-size: 2rem;
+                        }
+                    }
+                }
+
+                .preview-row-content {
+                    display: flex;
+
+                    &:after {
+                        clear: both;
+                        content: '';
+                        display: table;
+                    }
+
+                    img.preview {
+                        display: block;
+                        flex-basis: 300px;
+                        float: left;
+                        margin-bottom: 20px;
+                        max-height: 500px;
+                        max-width: 60%;
+                        width: auto;
+                    }
+                }
+            }
+        }
+    }
+}