Merge pull request #5027 from magento-engcom/adobe-stock-integration-fix-1

Oleksii Korshenko · web-flow · commit 9a178debb17f · 2019-11-15T04:41:30.000+07:00
[Magento Community Engineering] Adobe Stock Integration Bug Fixes
diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/image-preview.js b/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
          *
diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/image.js b/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'
             },
diff --git a/app/code/Magento/Ui/view/base/web/js/grid/columns/overlay.js b/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
          *
diff --git a/app/code/Magento/Ui/view/base/web/js/grid/masonry.js b/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'
diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less b/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';
diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/_masonry-grid.less b/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;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/lib/web/mage/adminhtml/browser.js b/lib/web/mage/adminhtml/browser.js
@@ -11,11 +11,12 @@ define([
     'Magento_Ui/js/modal/prompt',
     'Magento_Ui/js/modal/confirm',
     'Magento_Ui/js/modal/alert',
+    'underscore',
     'Magento_Ui/js/modal/modal',
     'jquery/ui',
     'jquery/jstree/jquery.jstree',
     'mage/mage'
-], function ($, wysiwyg, prompt, confirm, alert) {
+], function ($, wysiwyg, prompt, confirm, alert, _) {
     window.MediabrowserUtility = {
         windowId: 'modal_dialog_message',
         modalLoaded: false,
@@ -52,16 +53,21 @@ define([
                 content = '<div class="popup-window" id="' + windowId + '"></div>',
                 self = this;
 
-            if (this.modalLoaded === true &&
-                options &&
+            if (options &&
                 self.targetElementId &&
-                self.targetElementId === options.targetElementId
-            ) {
+                self.targetElementId === options.targetElementId) {
                 if (typeof options.closed !== 'undefined') {
                     this.modal.modal('option', 'closed', options.closed);
                 }
                 this.modal.modal('openModal');
 
+                return;
+            } else if (_.isUndefined(options) &&
+                    self.modalLoaded === true &&
+                    self.targetElementId === url
+            ) {
+                this.modal.modal('openModal');
+
                 return;
             }
 
@@ -89,8 +95,11 @@ define([
             }).done(function (data) {
                 self.modal.html(data).trigger('contentUpdated');
                 self.modalLoaded = true;
-                self.targetElementId = options.targetElementId;
+                self.targetElementId = options ?
+                           options.targetElementId
+                           : url;
             });
+
         },
 
         /**
@@ -487,7 +496,7 @@ define([
                 var nodeData = $(element).data('node');
 
                 if (index > 0) {
-                    breadcrumbs.append($('<li>\/</li>'));
+                    breadcrumbs.append($('<li>\/</li>')); //eslint-disable-line
                 }
                 breadcrumbs.append($('<li />')
                     .data('node', nodeData).attr('data-row', 'breadcrumb').text(nodeData.text));
diff --git a/lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter.js b/lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter.js
@@ -375,7 +375,7 @@ define([
          */
         openFileBrowser: function (o) {
             var typeTitle = this.translate('Select Images'),
-                storeId = this.config['store_id'] !== null ? this.config['store_id'] : 0,
+                storeId = this.config['store_id'] ? this.config['store_id'] : 0,
                 frameDialog = jQuery('div.mce-container[role="dialog"]'),
                 self = this,
                 wUrl = this.config['files_browser_window_url'] +

Original file line number	Diff line number	Diff line change
`@@ -4,3 +4,4 @@`
`4`	`4`	`// */`
`5`	`5`
`6`	`6`	`@import 'module/_data-grid.less';`
	`7`	`+@import 'module/_masonry-grid.less';`