From be4ecb31bc1762b96b7fe101ef6da63c196e96af Mon Sep 17 00:00:00 2001 From: abaevbog Date: Wed, 4 Oct 2023 00:01:54 -0400 Subject: [PATCH] separator after colored tags --- .../tagSelector/tagSelectorList.jsx | 19 ++++++++++++++++++- chrome/content/zotero/zoteroPane.js | 6 ++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx b/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx index f2a67d803d..d5cf9e51ff 100644 --- a/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx +++ b/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx @@ -99,11 +99,23 @@ class TagList extends React.PureComponent { var positions = []; var row = 0; let rowX = panePaddingLeft; + + const separatorHeightCoefficient = 0.5; + let separatorHeight = Math.round(rowHeight * separatorHeightCoefficient); + let shouldAddSeparator = false; + let hasColoredTags = !!this.props.tags[0]?.color; + let forceNewLine = false; + for (let i = 0; i < this.props.tags.length; i++) { let tag = this.props.tags[i]; + // Add separator after reaching the first non-colored tag, assuming colored tags exist + if (!shouldAddSeparator && hasColoredTags && !tag.color) { + shouldAddSeparator = true; + forceNewLine = true; + } let tagWidth = tagPaddingLeft + Math.min(tag.width, tagMaxWidth) + tagPaddingRight; // If first row or cell fits, add to current row - if (i == 0 || ((rowX + tagWidth) < (this.props.width - panePaddingLeft - panePaddingRight))) { + if (!forceNewLine && (i == 0 || ((rowX + tagWidth) < (this.props.width - panePaddingLeft - panePaddingRight)))) { positions[i] = [rowX, panePaddingTop + (row * rowHeight)]; } // Otherwise, start new row @@ -112,6 +124,11 @@ class TagList extends React.PureComponent { rowX = panePaddingLeft; positions[i] = [rowX, panePaddingTop + (row * rowHeight)]; } + // Push all Y coordinates down by the height of the separator + if (shouldAddSeparator) { + positions[i][1] += separatorHeight; + forceNewLine = false; + } rowX += tagWidth + tagSpaceBetweenX; } this.positions = positions; diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js index cae6516375..41433f281f 100644 --- a/chrome/content/zotero/zoteroPane.js +++ b/chrome/content/zotero/zoteroPane.js @@ -1525,6 +1525,12 @@ var ZoteroPane = new function() onSelection: this.updateTagFilter.bind(this), } ); + // Occasionally, when the app is first opened, the scrollable tag list doesn't + // occupy the full height of the tag selector. This ensures that it occupies all + // available space. + setTimeout(() => { + this.tagSelector.handleResize(); + }, 100); } } catch (e) {