From 6bd1da903687b7e9fec7125ad031e59d23f17c6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adomas=20Ven=C4=8Dkauskas?= Date: Thu, 14 Aug 2025 17:03:16 +0300 Subject: [PATCH] Citation Explorer: Update per new design Switch the layout to use grid instead of flexbox --- .../zotero/integration/citationExplorer.js | 34 ++++--- .../zotero/integration/citationExplorer.xhtml | 92 ++++++++++--------- scss/abstracts/_layout.scss | 4 + scss/components/_citationExplorer.scss | 69 +++++++++++--- scss/components/_icons.scss | 1 + scss/mac/_citationExplorer.scss | 14 --- scss/win/_citationExplorer.scss | 13 --- scss/zotero-mac.scss | 1 - scss/zotero-win.scss | 1 - 9 files changed, 133 insertions(+), 96 deletions(-) delete mode 100644 scss/mac/_citationExplorer.scss delete mode 100644 scss/win/_citationExplorer.scss diff --git a/chrome/content/zotero/integration/citationExplorer.js b/chrome/content/zotero/integration/citationExplorer.js index ca915d143e..83c2007987 100644 --- a/chrome/content/zotero/integration/citationExplorer.js +++ b/chrome/content/zotero/integration/citationExplorer.js @@ -27,11 +27,11 @@ const React = require('react'); const ReactDOM = require('react-dom'); const diff = require('diff'); const VirtualizedTable = require('components/virtualized-table'); -const { getCSSIcon, IconAttachSmall } = require('components/icons'); // TODO: Create a custom row provider for citationExplorer to use with base ItemTree. // Currently uses changeCollectionTreeRow which only exists on CollectionViewItemTree, // so this is broken until we either switch to CollectionViewItemTree or create a // simple row provider that can display arbitrary items. +const { getCSSIcon, CSSIcon } = require('components/icons'); const ItemTree = require('zotero/itemTree'); const { getColumnDefinitionsByDataKey } = require('zotero/itemTreeColumns'); const { makeRowRenderer } = VirtualizedTable; @@ -45,10 +45,15 @@ let disableCitationActivate; let selectedTab = 0; const citationColumns = [ + { + dataKey: 'title', + label: "Citation", + type: 'html' + }, { dataKey: 'isLinked', label: 'Is Linked', - iconLabel: , + iconLabel: , width: 26, staticWidth: true, fixedWidth: true, @@ -62,18 +67,13 @@ const citationColumns = [ return icon; } }, - { - dataKey: 'title', - label: "Citation", - type: 'html' - }, ]; let itemColumns = getColumnDefinitionsByDataKey(['title', 'firstCreator', 'date']); itemColumns.push({ dataKey: 'isLinked', label: 'Is Linked', - iconLabel: , + iconLabel: , width: 26, staticWidth: true, fixedWidth: true, @@ -149,7 +149,8 @@ window.ZoteroDocumentCitations = { // init VirtualizedTable if (!citationList) { await new Promise((resolve) => { - ReactDOM.createRoot(document.querySelector('#citation-list')).render( { citationList = ref; @@ -165,6 +166,11 @@ window.ZoteroDocumentCitations = { onSelectionChange={this.onCitationSelectionChange.bind(this)} getRowString={index => this._renderedCitationRows[index].title} />); + domElem.addEventListener("focusout", (event) => { + if (event.relatedTarget && !event.relatedTarget.closest("#citation-list-container")) { + citationList?.selection.clearSelection() + } + }); }); } citationList.invalidate(); @@ -178,7 +184,7 @@ window.ZoteroDocumentCitations = { let filteredItems = rows.filter(item => !this._filteredItems.has(item.id)); if (!itemList) { - let domElem = document.querySelector('#item-list'); + let domElem = document.querySelector('#item-list-container'); itemList = await ItemTree.init(domElem, { id: "document-collections", regularOnly: true, @@ -186,9 +192,15 @@ window.ZoteroDocumentCitations = { shouldListenForNotifications: false, onSelectionChange: this.onItemSelectionChange.bind(this), onActivate: this.onItemActivate.bind(this), - emptyMessage: Zotero.getString('pane.items.loading') + emptyMessage: Zotero.getString('pane.items.loading'), + firstColumnExtraWidth: 28-16, }); await itemList.waitForLoad(); + domElem.addEventListener("focusout", (event) => { + if (event.relatedTarget && !event.relatedTarget.closest("#item-list-container")) { + itemList?.selection.clearSelection() + } + }); } await itemList.changeCollectionTreeRow({ getItems: async () => filteredItems, diff --git a/chrome/content/zotero/integration/citationExplorer.xhtml b/chrome/content/zotero/integration/citationExplorer.xhtml index e7e03fd568..bc011b4ede 100644 --- a/chrome/content/zotero/integration/citationExplorer.xhtml +++ b/chrome/content/zotero/integration/citationExplorer.xhtml @@ -34,9 +34,10 @@ -
-
-
-
Citations
-
- -
-
-
-
- - -
-
-
-
-
- - - - - - - - -
- -
-
-
-
- - -
-
-
+
+ +
Citations
+ +
+ + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/scss/abstracts/_layout.scss b/scss/abstracts/_layout.scss index 6b660fa239..8ac12fb9de 100644 --- a/scss/abstracts/_layout.scss +++ b/scss/abstracts/_layout.scss @@ -16,3 +16,7 @@ .flex { flex: 1 } + +.spacer { + flex: 1; +} \ No newline at end of file diff --git a/scss/components/_citationExplorer.scss b/scss/components/_citationExplorer.scss index 7615565799..5427e6d450 100644 --- a/scss/components/_citationExplorer.scss +++ b/scss/components/_citationExplorer.scss @@ -1,29 +1,72 @@ #zotero-citation-explorer-dialog { min-height: 500px; - + dialog { max-height: 100vh; + padding: 0 0 .3em; + background: var(--material-sidepane); + } + + search-textbox, input, button { + margin: 0; } - .virtualized-table-container { + .citation-explorer-grid { + display: grid; + grid-template-columns: 4fr 6fr; + grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; - flex: 1; - } - - .xul-border-div { - -moz-box-flex: 1; + + .citation-explorer-grid-left { + border-right: solid 1px ThreeDShadow; + } + + .grid-padded-section { + padding: 8px 16px; + } } #citations-label { - margin: 5px 0 4px; + align-content: center; } - .panel { - border: solid 1px ThreeDShadow; - padding: 5px; + .tabbox-container { + display: flex; } - .search-box { - margin: 2px -1px; + .searchbox-container { + border-bottom: 1px solid ThreeDShadow; + } + + .virtualized-table-container { + height: 100%; + } + + .virtualized-table:focus-within .row.highlighted:not(.selected) { + background: initial !important; + } + + .button-container { + border-block: 1px solid ThreeDShadow; + display: flex; + } + + @media (-moz-platform: macos) { + tab[visuallyselected="true"]:not(:-moz-window-inactive) { + color: initial !important; + } + #citations-label { + font-size: 1.2em; + } + } + + @media (-moz-platform: windows) { + tab:focus-visible > .tab-middle { + outline: none; + } + + input[type="button"], button { + margin-top: 7px; + } } } diff --git a/scss/components/_icons.scss b/scss/components/_icons.scss index 69e7369af2..9da7a0d4c4 100644 --- a/scss/components/_icons.scss +++ b/scss/components/_icons.scss @@ -41,6 +41,7 @@ $-icons: ( chevron-6: 8, filter: 16, note: 16, + link: 16, x-8: 16, play: 16, pause: 16, diff --git a/scss/mac/_citationExplorer.scss b/scss/mac/_citationExplorer.scss deleted file mode 100644 index 5b499344ce..0000000000 --- a/scss/mac/_citationExplorer.scss +++ /dev/null @@ -1,14 +0,0 @@ -#zotero-citation-explorer-dialog { - tab[visuallyselected="true"]:not(:-moz-window-inactive) { - color: initial !important; - } - - #items-panel { - margin-top: 1.5em; - } - - #citations-label { - margin: 0.5em 0 0.38em; - font-size: 1.2em; - } -} \ No newline at end of file diff --git a/scss/win/_citationExplorer.scss b/scss/win/_citationExplorer.scss deleted file mode 100644 index d3ed61a654..0000000000 --- a/scss/win/_citationExplorer.scss +++ /dev/null @@ -1,13 +0,0 @@ -#zotero-citation-explorer-dialog { - #citations-label { - margin: 3px 0 2px; - } - - tab:focus-visible > .tab-middle { - outline: none; - } - - input[type="button"], button { - margin-top: 7px; - } -} \ No newline at end of file diff --git a/scss/zotero-mac.scss b/scss/zotero-mac.scss index 48f9235271..5b5e3b4719 100644 --- a/scss/zotero-mac.scss +++ b/scss/zotero-mac.scss @@ -13,6 +13,5 @@ @import "mac/components/input"; @import "mac/components/menupopup"; @import "mac/components/menulist"; -@import "mac/citationExplorer"; // Elements diff --git a/scss/zotero-win.scss b/scss/zotero-win.scss index 17448c86bf..43b62ff20e 100644 --- a/scss/zotero-win.scss +++ b/scss/zotero-win.scss @@ -9,7 +9,6 @@ @import "win/createParent"; @import "win/tabBar"; @import "win/titleBar"; -@import "win/citationExplorer"; // Elements