Fix display reverse relation field error in grid view (#684)

* Add reverese object relation changes css * Fix display reverse object relation warning in grid view * rename reverse object relation css classes * Fix display reverse object relation warning in grid view
pimcore · Sep 11, 2024 · 17d155a · 17d155a
1 parent 2eaa2a4
commit 17d155a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 13 deletions.
diff --git a/public/css/admin.css b/public/css/admin.css
@@ -2376,3 +2376,27 @@ ul.leaflet-draw-actions.leaflet-draw-actions-top.leaflet-draw-actions-bottom li:
 .pimcore_cb_middle_two_lines .x-form-cb-default {
     top: -9px
 }
+
+.pimcore_reverse-object-relation-warning {
+    width: inherit;
+    padding: 0 5px 0 20px;
+
+    white-space: initial;
+    background:url("/bundles/pimcoreadmin/img/icon/error.png") no-repeat scroll 0 0 transparent;
+}
+
+.pimcore_reverse-object-relation-panel {
+    overflow: visible !important;
+}
+
+.pimcore_reverse-object-relation-panel > .x-panel-bodyWrap {
+    overflow: visible !important;
+}
+
+.pimcore_reverse-object-relation-bottom-bar {
+    overflow: visible !important;
+}
+
+.pimcore_reverse-object-relation-bottom-bar > div {
+    height: 4.5rem !important;
+}
diff --git a/public/js/pimcore/object/tags/reverseObjectRelation.js b/public/js/pimcore/object/tags/reverseObjectRelation.js
@@ -112,10 +112,11 @@ pimcore.object.tags.reverseObjectRelation = Class.create(pimcore.object.tags.man
 
         let columns = this.getVisibleColumns();
 
-        this.component = new Ext.grid.GridPanel({
+       this.component = new Ext.grid.GridPanel({
             store: this.store,
             border: true,
             style: "margin-bottom: 10px",
+            cls: "pimcore_reverse-object-relation-panel",
             selModel: Ext.create('Ext.selection.RowModel', {}),
             columns: {
                 defaults: {
@@ -160,17 +161,30 @@ pimcore.object.tags.reverseObjectRelation = Class.create(pimcore.object.tags.man
             tbar: {
                 items: this.getEditToolbarItems(),
                 ctCls: "pimcore_force_auto_width",
-                cls: "pimcore_force_auto_width"
+                cls: "pimcore_force_auto_width",
             },
             bbar: {
-                items: [{
-                    xtype: "tbtext",
-                    text: ' <span class="warning">' + t('nonownerobject_warning') + " | " + t('owner_class')
-                                    + ':<b>' + t(className) + "</b> " + t('owner_field') + ': <b>'
-                                    + t(this.fieldConfig.ownerFieldName) + '</b></span>'
-                }],
+                items: [
+                    {
+                        xtype: "tbtext",
+                        text:
+                            ' <div class="warning pimcore_reverse-object-relation-warning">' +
+                            t("nonownerobject_warning") +
+                            "<br>" +
+                            t("owner_class") +
+                            ": <b>" +
+                            t(className) +
+                            "</b> " +
+                            t("owner_field") +
+                            ": <b>" +
+                            t(this.fieldConfig.ownerFieldName) +
+                            "</b></div>",
+                        height: "fit-content",
+                    },
+                ],
                 ctCls: "pimcore_force_auto_width",
-                cls: "pimcore_force_auto_width"
+                cls: "pimcore_force_auto_width pimcore_reverse-object-relation-bottom-bar",
+                height: "4.5rem",
             },
             autoHeight: autoHeight,
             bodyCssClass: "pimcore_object_tag_objects",
@@ -179,12 +193,12 @@ pimcore.object.tags.reverseObjectRelation = Class.create(pimcore.object.tags.man
                 listeners: {
                     afterrender: function (gridview) {
                         this.requestNicePathData(this.store.data);
-                    }.bind(this)
-                }
+                    }.bind(this),
+                },
             },
             listeners: {
-                rowdblclick: this.gridRowDblClickHandler
-            }
+                rowdblclick: this.gridRowDblClickHandler,
+            },
         });
 
         this.component.on("rowcontextmenu", this.onRowContextmenu);