From d7b1a5324804283a582a1e02d6f640dd877fec3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adomas=20Ven=C4=8Dkauskas?= Date: Mon, 28 Mar 2022 13:32:12 +0300 Subject: [PATCH] HTML Tree: Improve item tree column header alignment. Addresses #2153 --- .../zotero/components/virtualized-table.jsx | 15 +++++++++++++++ chrome/content/zotero/zoteroPane.js | 8 +++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/chrome/content/zotero/components/virtualized-table.jsx b/chrome/content/zotero/components/virtualized-table.jsx index f1098692f9..f4a5374e23 100644 --- a/chrome/content/zotero/components/virtualized-table.jsx +++ b/chrome/content/zotero/components/virtualized-table.jsx @@ -760,6 +760,21 @@ class VirtualizedTable extends React.Component { } // ------------------------ Column Methods ------------------------- // + + /** + * A public function to update the column CSS flex widths. To be used + * upon window resize and similar. Especially important on macOS where + * column borders are used and get out of sync with column headers. + */ + updateColumnWidths = Zotero.Utilities.debounce(() => { + let resizeData = {}; + const columns = this._getVisibleColumns(); + for (const column of columns) { + const elem = document.querySelector(`#${this.props.id} .virtualized-table-header .cell.${column.dataKey}`) + resizeData[column.dataKey] = elem.getBoundingClientRect().width; + } + this._columns.onResize(resizeData, true); + }, 200) _handleResizerDragStart = (index, event) => { if (event.button !== 0) return false; diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js index 1c148a076e..0299e609f1 100644 --- a/chrome/content/zotero/zoteroPane.js +++ b/chrome/content/zotero/zoteroPane.js @@ -106,6 +106,7 @@ var ZoteroPane = new function() this.updateWindow(); this.updateToolbarPosition(); this.updateTagsBoxSize(); + this.updateItemTreeColumnWidths(); }); window.setTimeout(this.updateToolbarPosition.bind(this), 0); @@ -5457,7 +5458,12 @@ var ZoteroPane = new function() list.style.height = height + 'px'; } }; - + + this.updateItemTreeColumnWidths = function() { + if (!ZoteroPane.itemsView) return; + ZoteroPane.itemsView.tree.updateColumnWidths(); + }; + /** * Opens the about dialog */