Added masonry grid and columns components

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

@@ -0,0 +1,179 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'jquery',
+    'Magento_Ui/js/grid/columns/column'
+], function ($, Column) {
+    'use strict';
+
+    return Column.extend({
+        defaults: {
+            previewImageSelector: '[data-image-preview]',
+            visibleRecord: null,
+            height: 0,
+            displayedRecord: {},
+            lastOpenedImage: null,
+            modules: {
+                masonry: '${ $.parentName }',
+                thumbnailComponent: '${ $.parentName }.thumbnail_url'
+            },
+            statefull: {
+                sorting: true,
+                lastOpenedImage: true
+            },
+            listens: {
+                '${ $.provider }:params.filters': 'hide',
+                '${ $.provider }:params.search': 'hide'
+            },
+            exports: {
+                height: '${ $.parentName }.thumbnail_url:previewHeight'
+            }
+        },
+
+        /**
+         * Init observable variables
+         * @return {Object}
+         */
+        initObservable: function () {
+            this._super()
+                .observe([
+                    'visibleRecord',
+                    'height',
+                    'displayedRecord',
+                    'lastOpenedImage'
+                ]);
+
+            return this;
+        },
+
+        /**
+         * Next image preview
+         *
+         * @param {Object} record
+         */
+        next: function (record) {
+            var recordToShow = this.getRecord(record._rowIndex + 1);
+
+            recordToShow.rowNumber = record.lastInRow ? record.rowNumber + 1 : record.rowNumber;
+            this.show(recordToShow);
+        },
+
+        /**
+         * Previous image preview
+         *
+         * @param {Object} record
+         */
+        prev: function (record) {
+            var recordToShow = this.getRecord(record._rowIndex - 1);
+
+            recordToShow.rowNumber = record.firstInRow ? record.rowNumber - 1 : record.rowNumber;
+            this.show(recordToShow);
+        },
+
+        /**
+         * Get record
+         *
+         * @param {Integer} recordIndex
+         *
+         * @return {Object}
+         */
+        getRecord: function (recordIndex) {
+            return this.masonry().rows()[recordIndex];
+        },
+
+        /**
+         * Set selected row id
+         *
+         * @param {Number} rowId
+         * @private
+         */
+        _selectRow: function (rowId) {
+            this.thumbnailComponent().previewRowId(rowId);
+        },
+
+        /**
+         * Show image preview
+         *
+         * @param {Object} record
+         */
+        show: function (record) {
+            var img;
+
+            this.hide();
+            this.displayedRecord(record);
+            this._selectRow(record.rowNumber || null);
+            this.visibleRecord(record._rowIndex);
+
+            img = $(this.previewImageSelector + ' img');
+
+            if (img.get(0).complete) {
+                this.updateHeight();
+                this.scrollToPreview();
+            } else {
+                img.load(function () {
+                    this.updateHeight();
+                    this.scrollToPreview();
+                }.bind(this));
+            }
+
+            this.lastOpenedImage(record._rowIndex);
+        },
+
+        /**
+         * Update image preview section height
+         */
+        updateHeight: function () {
+            this.height($(this.previewImageSelector).height() + 'px');
+        },
+
+        /**
+         * Close image preview
+         */
+        hide: function () {
+            this.lastOpenedImage(null);
+            this.visibleRecord(null);
+            this.height(0);
+            this._selectRow(null);
+        },
+
+        /**
+         * Returns visibility for given record.
+         *
+         * @param {Object} record
+         * @return {*|bool}
+         */
+        isVisible: function (record) {
+            if (this.lastOpenedImage() === record._rowIndex &&
+                this.visibleRecord() === null
+            ) {
+                this.show(record);
+            }
+
+            return this.visibleRecord() === record._rowIndex || false;
+        },
+
+        /**
+         * Get styles for preview
+         *
+         * @returns {Object}
+         */
+        getStyles: function () {
+            return {
+                'margin-top': '-' + this.height()
+            };
+        },
+
+        /**
+         * Scroll to preview window
+         */
+        scrollToPreview: function () {
+            $(this.previewImageSelector).get(0).scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'nearest'
+            });
+        }
+    });
+});

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

@@ -0,0 +1,89 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'Magento_Ui/js/grid/columns/column'
+], function (Column) {
+    'use strict';
+
+    return Column.extend({
+        defaults: {
+            modules: {
+                previewComponent: '${ $.parentName }.preview'
+            },
+            previewRowId: null,
+            previewHeight: 0,
+            fields: {
+                id: 'id',
+                url: 'url'
+            }
+        },
+
+        /**
+         * Init observable variables
+         * @return {Object}
+         */
+        initObservable: function () {
+            this._super()
+                .observe([
+                    'previewRowId',
+                    'previewHeight'
+                ]);
+
+            return this;
+        },
+
+        /**
+         * Returns url to given record.
+         *
+         * @param {Object} record - Data to be preprocessed.
+         * @returns {String}
+         */
+        getUrl: function (record) {
+            return record[this.fields.url];
+        },
+
+        /**
+         * Returns id to given record.
+         *
+         * @param {Object} record - Data to be preprocessed.
+         * @returns {Number}
+         */
+        getId: function (record) {
+            return record[this.fields.id];
+        },
+
+        /**
+         * Returns container styles to given record.
+         *
+         * @param {Object} record - Data to be preprocessed.
+         * @returns {Object}
+         */
+        getStyles: function (record) {
+            var styles = record.styles();
+
+            styles['margin-bottom'] = this.previewRowId() === record.rowNumber ? this.previewHeight : 0;
+            record.styles(styles);
+
+            return record.styles;
+        },
+
+        /**
+         * Returns class list to given record.
+         *
+         * @param {Object} record - Data to be preprocessed.
+         * @returns {Object}
+         */
+        getClasses: function (record) {
+            return record.css || {};
+        },
+
+        /**
+         * Expand image preview
+         */
+        expandPreview: function (record) {
+            this.previewComponent().show(record);
+        }
+    });
+});

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'Magento_Ui/js/grid/columns/column'
+], function (Column) {
+    'use strict';
+
+    return Column.extend({
+        /**
+         * If overlay should be visible
+         *
+         * @param {Object} row
+         * @returns {Boolean}
+         */
+        isVisible: function (row) {
+            return !!row[this.index];
+        },
+
+        /**
+         * Get overlay label
+         *
+         * @param {Object} row
+         * @returns {String}
+         */
+        getLabel: function (row) {
+            return row[this.index];
+        }
+    });
+});