From 5ba5e70b9dec76b00956a02a20007afd934ffbe2 Mon Sep 17 00:00:00 2001 From: Dan Stillman Date: Wed, 13 Nov 2019 05:28:03 -0500 Subject: [PATCH] Fix overflow issues in React tags box - Properly truncate and ellipsize long tags - Show scrollbar if tags go off the bottom of the pane These both improve on the pre-React version, which didn't properly truncate tags (at least in the current version, though I think it used to) and scrolled the Add button off the top of the screen. --- .../zotero/components/itemPane/tagsBox.jsx | 16 +++++++------- chrome/content/zotero/itemPane.js | 3 ++- chrome/content/zotero/zoteroPane.js | 21 +++++++++++++++++++ chrome/content/zotero/zoteroPane.xul | 4 ++-- chrome/skin/default/zotero/overlay.css | 1 + scss/components/_editable.scss | 7 +++++++ scss/components/_tagsBox.scss | 14 ++++++++++--- 7 files changed, 53 insertions(+), 13 deletions(-) diff --git a/chrome/content/zotero/components/itemPane/tagsBox.jsx b/chrome/content/zotero/components/itemPane/tagsBox.jsx index 0d5ae12a47..9dd7d3dbef 100644 --- a/chrome/content/zotero/components/itemPane/tagsBox.jsx +++ b/chrome/content/zotero/components/itemPane/tagsBox.jsx @@ -410,13 +410,15 @@ const TagsBox = React.forwardRef((props, ref) => {
{renderCount()}
- - +
+
    + {displayTags.map(tag => renderTagRow(tag))} +
+ +
); }); diff --git a/chrome/content/zotero/itemPane.js b/chrome/content/zotero/itemPane.js index bd0eb09b3b..d21d4d12e0 100644 --- a/chrome/content/zotero/itemPane.js +++ b/chrome/content/zotero/itemPane.js @@ -190,7 +190,8 @@ var ZoteroItemPane = new function() { ref={_tagsBox} onResetSelection={focusItemsList} />, - document.getElementById('tags-box-container') + document.getElementById('tags-box-container'), + () => ZoteroPane.updateTagsBoxSize() ); } diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js index 0879ca1631..3d213703ae 100644 --- a/chrome/content/zotero/zoteroPane.js +++ b/chrome/content/zotero/zoteroPane.js @@ -105,6 +105,7 @@ var ZoteroPane = new function() window.addEventListener("resize", () => { this.updateWindow(); this.updateToolbarPosition(); + this.updateTagsBoxSize(); }); window.setTimeout(this.updateToolbarPosition.bind(this), 0); @@ -4904,6 +4905,7 @@ var ZoteroPane = new function() } this.updateToolbarPosition(); + this.updateTagsBoxSize(); } @@ -5024,6 +5026,25 @@ var ZoteroPane = new function() this.handleTagSelectorResize(); } + /** + * Set an explicit height on the tags list to show a scroll bar if necessary + * + * This really should be be possible via CSS alone, but I couldn't get it to work, either + * because I was doing something wrong or because the XUL layout engine was messing with me. + * Revisit when we're all HTML. + */ + this.updateTagsBoxSize = function () { + var pane = document.querySelector('#zotero-item-pane'); + var header = document.querySelector('#zotero-item-pane .tags-box-header'); + var list = document.querySelector('#zotero-item-pane .tags-box-list'); + if (pane && header && list) { + let height = pane.getBoundingClientRect().height + - header.getBoundingClientRect().height + - 35; // a little padding + list.style.height = height + 'px'; + } + }; + /** * Opens the about dialog */ diff --git a/chrome/content/zotero/zoteroPane.xul b/chrome/content/zotero/zoteroPane.xul index 3163e38658..141059d2b7 100644 --- a/chrome/content/zotero/zoteroPane.xul +++ b/chrome/content/zotero/zoteroPane.xul @@ -551,8 +551,8 @@ + onmousemove="ZoteroPane.updateToolbarPosition(); ZoteroPane.updateTagsBoxSize()" + oncommand="ZoteroPane.updateToolbarPosition(); ZoteroPane.updateTagsBoxSize()"> diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css index 7f43c63e80..36da660ceb 100644 --- a/chrome/skin/default/zotero/overlay.css +++ b/chrome/skin/default/zotero/overlay.css @@ -288,6 +288,7 @@ { width: 338px; min-width: 338px; + overflow-y: hidden; } #zotero-layout-switcher diff --git a/scss/components/_editable.scss b/scss/components/_editable.scss index 1c3ffaf18f..af75d0bcef 100644 --- a/scss/components/_editable.scss +++ b/scss/components/_editable.scss @@ -7,4 +7,11 @@ input.editable-control { textarea.editable-control { font-family: inherit; font-size: inherit; +} + +.editable-content { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; } \ No newline at end of file diff --git a/scss/components/_tagsBox.scss b/scss/components/_tagsBox.scss index 545bf2d529..a3722ea52c 100644 --- a/scss/components/_tagsBox.scss +++ b/scss/components/_tagsBox.scss @@ -8,7 +8,13 @@ } .tags-box { + $item-pane-width: 330px; + $icon-width: 16px; + $delete-button-width: 20px; + $li-side-margin: 6px; + flex-grow: 1; + width: 330px; .tags-box-header { display: flex; @@ -32,12 +38,13 @@ ul.tags-box-list { list-style: none; margin: 0; - padding: 0; + padding: 2px 0 0; // Leave space for textbox border on top tag + overflow-y: auto; } ul.tags-box-list > li { display: flex; - margin: 3px 6px 3px 6px; + margin: 3px $li-side-margin; align-items: center; height: 1.5em; @@ -45,7 +52,7 @@ border: 0; background: none; padding: 0; - width: 20px; + width: $delete-button-width; height: 18px; } } @@ -53,6 +60,7 @@ .editable-container { flex-grow: 1; margin: 0 2px; + width: $item-pane-width - $icon-width - $delete-button-width - ($li-side-margin * 2); } ul.tags-box-list > li:not(.multiline) .editable-container {