diff --git a/public/js/pimcore/element/helpers/gridCellEditor.js b/public/js/pimcore/element/helpers/gridCellEditor.js index 51ef1cfd4..8c9e510f9 100644 --- a/public/js/pimcore/element/helpers/gridCellEditor.js +++ b/public/js/pimcore/element/helpers/gridCellEditor.js @@ -90,12 +90,16 @@ Ext.define('pimcore.element.helpers.gridCellEditor', { items: [tag.getLayoutEdit()], bodyStyle: "padding: 10px;" }); + let width = 700; + if (tagType === 'manyToManyObjectRelation' && fieldInfo.layout.width && fieldInfo.layout.width !== '100%') { + width = sumWidths(fieldInfo.layout.width, 25); + } this.editWin = new Ext.Window({ modal: false, title: t("edit") + " " + fieldInfo.layout.title, items: [formPanel], bodyStyle: "background: #fff;", - width: 700, + width: width, maxHeight: 600, autoScroll: true, preventRefocus: true, // nasty hack because this is an internal property diff --git a/public/js/pimcore/element/helpers/gridColumnConfig.js b/public/js/pimcore/element/helpers/gridColumnConfig.js index 40fc56e19..d8e95c949 100644 --- a/public/js/pimcore/element/helpers/gridColumnConfig.js +++ b/public/js/pimcore/element/helpers/gridColumnConfig.js @@ -386,9 +386,9 @@ pimcore.element.helpers.gridColumnConfig = { }, filterPrepare: function (column) { - var dataIndexName = column.dataIndex - var gridColumns = this.grid.getColumns(); - var columnIndex = -1; + const dataIndexName = column.dataIndex + const gridColumns = this.grid.getColumns(); + let columnIndex = -1; for (let i = 0; i < gridColumns.length; i++) { let dataIndex = gridColumns[i].dataIndex; if (dataIndex == dataIndexName) { @@ -404,63 +404,66 @@ pimcore.element.helpers.gridColumnConfig = { return; } - var fieldInfo = this.grid.getColumns()[columnIndex].config; + const fieldInfo = this.grid.getColumns()[columnIndex].config; - if((this.objecttype === "object") || (this.objecttype === "variant")) { + if (this.objecttype === "object" || this.objecttype === "variant") { if (!fieldInfo.layout || !fieldInfo.layout.layout) { return; } - var tagType = fieldInfo.layout.type; - var editor = new pimcore.object.tags[tagType](null, fieldInfo.layout.layout); + const tagType = fieldInfo.layout.type; + const editor = new pimcore.object.tags[tagType](null, fieldInfo.layout.layout); editor.setObject(this.object); - } - - editor.updateContext({ - containerType: "filterByRelationWindow" - }); + editor.updateContext({ + containerType: "filterByRelationWindow" + }); - var formPanel = Ext.create('Ext.form.Panel', { - xtype: "form", - border: false, - items: [editor.getLayoutEdit()], - bodyStyle: "padding: 10px;", - buttons: [ - { - text: t("clear_relation_filter"), - iconCls: "pimcore_icon_filter_condition pimcore_icon_overlay_delete", - handler: function () { - this.filterByRelationWindow.close(); - this.grid.store.filters.removeByKey("x-gridfilter-"+fieldInfo.dataIndex); - }.bind(this) - }, - { - text: t("apply_filter"), - iconCls: "pimcore_icon_filter pimcore_icon_overlay_add", - handler: function () { - if (formPanel.isValid() && typeof fieldInfo.getRelationFilter === "function") { - this.grid.filters.getStore().addFilter( - fieldInfo.getRelationFilter(fieldInfo.dataIndex, editor) - ); + const formPanel = Ext.create('Ext.form.Panel', { + xtype: "form", + border: false, + items: [editor.getLayoutEdit()], + bodyStyle: "padding: 10px;", + buttons: [ + { + text: t("clear_relation_filter"), + iconCls: "pimcore_icon_filter_condition pimcore_icon_overlay_delete", + handler: function () { this.filterByRelationWindow.close(); - } - }.bind(this) - } - ] - }); + this.grid.store.filters.removeByKey("x-gridfilter-"+fieldInfo.dataIndex); + }.bind(this) + }, + { + text: t("apply_filter"), + iconCls: "pimcore_icon_filter pimcore_icon_overlay_add", + handler: function () { + if (formPanel.isValid() && typeof fieldInfo.getRelationFilter === "function") { + this.grid.filters.getStore().addFilter( + fieldInfo.getRelationFilter(fieldInfo.dataIndex, editor) + ); + this.filterByRelationWindow.close(); + } + }.bind(this) + } + ] + }); - var title = t("filter_by_relation_field") + " " + fieldInfo.text; - this.filterByRelationWindow = new Ext.Window({ - autoScroll: true, - modal: false, - title: title, - items: [formPanel], - bodyStyle: "background: #fff;", - width: formPanel.items.items[0].width + 25, - maxHeight: 650 - }); - this.filterByRelationWindow.show(); - this.filterByRelationWindow.updateLayout(); + const title = t("filter_by_relation_field") + " " + fieldInfo.text; + let width = 700; + if (tagType === 'manyToManyObjectRelation' && fieldInfo.layout.layout.width && fieldInfo.layout.layout.width !== '100%') { + width = sumWidths(fieldInfo.layout.layout.width, 25); + } + this.filterByRelationWindow = new Ext.Window({ + autoScroll: true, + modal: false, + title: title, + items: [formPanel], + bodyStyle: "background: #fff;", + width: width, + maxHeight: 650 + }); + this.filterByRelationWindow.show(); + this.filterByRelationWindow.updateLayout(); + } }, batchPrepare: function (column, onlySelected, append, remove) { diff --git a/public/js/pimcore/functions.js b/public/js/pimcore/functions.js index c501472fe..df8c2e8d7 100644 --- a/public/js/pimcore/functions.js +++ b/public/js/pimcore/functions.js @@ -1809,3 +1809,17 @@ function dateToServerTimezone(date) { return new Date(date.getTime() - diff); } + +function sumWidths(width1, width2) { + if (/^\d+$/.test(width1) && /^\d+$/.test(width2)) { + return parseInt(width1) + parseInt(width2); + } + if (/^\d+$/.test(width1)) { + width1 += 'px'; + } + if (/^\d+$/.test(width2)) { + width2 += 'px'; + } + + return 'calc(' + width1 + ' + ' + width2 + ')'; +} diff --git a/public/js/pimcore/object/tags/abstract.js b/public/js/pimcore/object/tags/abstract.js index 9992b9757..eb7024692 100644 --- a/public/js/pimcore/object/tags/abstract.js +++ b/public/js/pimcore/object/tags/abstract.js @@ -271,17 +271,7 @@ pimcore.object.tags.abstract = Class.create({ }, sumWidths: function (width1, width2) { - if (/^\d+$/.test(width1) && /^\d+$/.test(width2)) { - return parseInt(width1) + parseInt(width2); - } - if (/^\d+$/.test(width1)) { - width1 += 'px'; - } - if (/^\d+$/.test(width2)) { - width2 += 'px'; - } - - return 'calc(' + width1 + ' + ' + width2 + ')'; + return sumWidths(width1, width2); }, /** diff --git a/public/js/pimcore/object/tags/encryptedField.js b/public/js/pimcore/object/tags/encryptedField.js index 23f9be6e3..a5d2a8b8f 100644 --- a/public/js/pimcore/object/tags/encryptedField.js +++ b/public/js/pimcore/object/tags/encryptedField.js @@ -23,6 +23,8 @@ pimcore.object.tags.encryptedField = Class.create(pimcore.object.tags.abstract, if (typeof pimcore.object.tags[fieldConfig.delegateDatatype] !== "undefined") { var delegateFieldConfig = fieldConfig.delegate || {}; + delegateFieldConfig.labelWidth = fieldConfig.labelWidth; + delegateFieldConfig.labelAlign = fieldConfig.labelAlign; this.delegate = new pimcore.object.tags[fieldConfig.delegateDatatype](data, delegateFieldConfig); } this.fieldConfig = fieldConfig; diff --git a/public/js/pimcore/object/tags/externalImage.js b/public/js/pimcore/object/tags/externalImage.js index 657636241..748aa0a2a 100644 --- a/public/js/pimcore/object/tags/externalImage.js +++ b/public/js/pimcore/object/tags/externalImage.js @@ -163,6 +163,7 @@ pimcore.object.tags.externalImage = Class.create(pimcore.object.tags.abstract, { backgroundSize: "contain", backgroundImage: "url(" + path + ")", backgroundPosition: "center center", + backgroundColor: "white", backgroundRepeat: "no-repeat" }); body.repaint(); diff --git a/src/Security/ContentSecurityPolicyHandler.php b/src/Security/ContentSecurityPolicyHandler.php index 225bc4bef..748c3450a 100644 --- a/src/Security/ContentSecurityPolicyHandler.php +++ b/src/Security/ContentSecurityPolicyHandler.php @@ -59,6 +59,7 @@ class ContentSecurityPolicyHandler implements LoggerAwareInterface ], self::SCRIPT_OPT => [ 'https://buttons.github.io/buttons.js', // GitHub star button on login page + 'https://code.jquery.com/', // jQuery for the icon library ], self::FRAME_OPT => [ 'https://www.youtube-nocookie.com/', // Video preview thumbnail for YouTube