Citation dialog: Hide the citation preview until the citation has items

Show the preview area and its toggle button only once there is
something to preview, instead of showing a "Preview" placeholder in an
empty dialog.
This commit is contained in:
Dan Stillman 2026-07-28 11:59:30 -04:00
parent b66519cb4c
commit caeffa9f41
5 changed files with 26 additions and 10 deletions

View file

@ -2079,19 +2079,19 @@ const CitationPreview = {
let prefShown = Zotero.Prefs.get("integration.citationPreviewShown");
let isCitingItems = DIALOG_STATE.isCitingItems();
let hasPreview = !!io.preview;
let shouldShow = isCitingItems && prefShown && hasPreview;
_id("citation-preview").hidden = !shouldShow;
let isEmpty = !CitationDataManager.items.length;
_id("citation-preview-empty").hidden = !isEmpty;
_id("citation-preview-content").hidden = isEmpty;
// The preview pane appears when citing at least one item and the caller has
// provided a preview function
let isRelevant = isCitingItems && hasPreview && !isEmpty;
_id("citation-preview").hidden = !(isRelevant && prefShown);
if (isEmpty) {
_id("citation-preview-content").innerHTML = "";
_id("citation-preview-error").hidden = true;
}
// The toggle button only makes sense while citing items with a backing
// preview function. It reflects the pref directly.
// The toggle button is hidden when there's no preview and is restored to its last
// state when the preview pane appears
let toggleBtn = _id("display-preview-button");
toggleBtn.hidden = !(isCitingItems && hasPreview);
toggleBtn.hidden = !isRelevant;
toggleBtn.setAttribute("aria-pressed", prefShown ? "true" : "false");
if (!isEmpty) {
CitationPreview._renderDebounced();

View file

@ -111,7 +111,6 @@
<div id="citation-preview" class="vbox" data-dialog-type="citation">
<div id="citation-preview-wrapper" class="vbox">
<div id="citation-preview-content"></div>
<div id="citation-preview-empty" data-l10n-id="integration-citationDialog-preview-empty"></div>
<div id="citation-preview-error" data-l10n-id="integration-citationDialog-preview-error" hidden="true"></div>
</div>
<div class="divider subtle"></div>

View file

@ -50,7 +50,6 @@ integration-citationDialog-lib-message-annotations = { $search ->
*[other] No selected or open items with annotations
}
integration-citationDialog-settings-keepSorted = Keep sources sorted
integration-citationDialog-preview-empty = Preview
integration-citationDialog-preview-error = Preview unavailable
integration-citationDialog-btn-displayPreview =
.title = Display citation preview

View file

@ -587,7 +587,7 @@
font-size: 1.1rem;
}
#citation-preview-empty, #citation-preview-error {
#citation-preview-error {
padding-top: 2px;
color: var(--fill-secondary);
font-family: $font-family-base;

View file

@ -448,6 +448,24 @@ describe("Citation Dialog", function () {
assert.isTrue(dialog.document.getElementById("list-layout").hidden);
});
it("should show the citation preview only when the citation has items", async function () {
let prefWas = Zotero.Prefs.get("integration.citationPreviewShown");
Zotero.Prefs.set("integration.citationPreviewShown", true);
try {
IOManager.updateBubbleInput();
assert.isTrue(dialog.document.getElementById("citation-preview").hidden);
assert.isTrue(dialog.document.getElementById("display-preview-button").hidden);
let item = await createDataObject('item');
await IOManager.addItemsToCitation([item]);
assert.isFalse(dialog.document.getElementById("citation-preview").hidden);
assert.isFalse(dialog.document.getElementById("display-preview-button").hidden);
}
finally {
Zotero.Prefs.set("integration.citationPreviewShown", prefWas);
}
});
it("should highlight bubbles whose items are selected", async function () {
let itemOne = await createDataObject('item');
let itemTwo = await createDataObject('item');