diff --git a/chrome/content/zotero/rtfScan.js b/chrome/content/zotero/rtfScan.js index 0f8623dc33..0d157b03a1 100644 --- a/chrome/content/zotero/rtfScan.js +++ b/chrome/content/zotero/rtfScan.js @@ -81,7 +81,7 @@ function _matchesItemCreator(creator, itemCreator) { const columns = [ { dataKey: 'rtf', label: "zotero.rtfScan.citation.label", primary: true, flex: 4 }, { dataKey: 'item', label: "zotero.rtfScan.itemName.label", flex: 5 }, - { dataKey: 'action', label: "", fixedWidth: true, width: "26px" }, + { dataKey: 'action', label: "", fixedWidth: true, width: "32px" }, ]; const BIBLIOGRAPHY_PLACEHOLDER = "\\{Bibliography\\}"; @@ -315,9 +315,14 @@ const Zotero_RTFScan = { // eslint-disable-line no-unused-vars, camelcase this.tree.invalidate(); }, - onActionMouseUp(event, index) { + onAction(ev, index) { let row = this.rows[index]; - if (!row.parent) return; + const isTriggerEvent = ev.type === 'mouseup' || (ev.type === 'keydown' && (ev.key === 'Enter' || ev.key === ' ')); + + if (!isTriggerEvent || !row.parent) { + return; + } + let level = this.getRowLevel(row); if (level == 2) { // ambiguous citation item let parentIndex = this.rowMap[row.parent.id]; @@ -719,10 +724,12 @@ const Zotero_RTFScan = { // eslint-disable-line no-unused-vars, camelcase twisty.classList.add("spacer-twisty"); } + twisty.style.marginLeft = `${20 * this.getRowLevel(row)}px`; + let textSpan = document.createElement('span'); textSpan.className = "cell-text"; textSpan.innerText = row[column.dataKey] || ""; - textSpan.style.paddingLeft = (5 + 20 * this.getRowLevel(row)) + 'px'; + textSpan.style.paddingLeft = '5px'; let span = document.createElement('span'); span.className = `cell primary ${column.className}`; @@ -734,10 +741,14 @@ const Zotero_RTFScan = { // eslint-disable-line no-unused-vars, camelcase let span = document.createElement('span'); span.className = `cell action ${column.className}`; if (row.parent) { - let icon = getCSSIcon(row.action ? 'document-accept' : 'document-missing'); + let button = document.createElement('button'); + let icon = getCSSIcon(row.action ? 'document-accept' : 'link'); icon.classList.add('icon-16'); - span.appendChild(icon); - span.addEventListener('mouseup', e => this.onActionMouseUp(e, index), { passive: true }); + button.appendChild(icon); + button.addEventListener('mouseup', e => this.onAction(e, index), { passive: true }); + button.addEventListener('keydown', e => this.onAction(e, index), { passive: true }); + button.dataset.l10nId = row.action ? 'rtfScan-action-accept-match' : 'rtfScan-action-find-match'; + span.appendChild(button); span.style.pointerEvents = 'auto'; } diff --git a/chrome/content/zotero/rtfScan.xhtml b/chrome/content/zotero/rtfScan.xhtml index eeefc59e50..70a0834a09 100644 --- a/chrome/content/zotero/rtfScan.xhtml +++ b/chrome/content/zotero/rtfScan.xhtml @@ -34,19 +34,14 @@ {Jones, 2005; Smith, 2009} -
+
-
+
+
+
+
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl index 514e834b62..55ee8cd382 100644 --- a/chrome/locale/en-US/zotero/zotero.ftl +++ b/chrome/locale/en-US/zotero/zotero.ftl @@ -220,11 +220,11 @@ report-error = rtfScan-wizard = .title = RTF Scan -rtfScan-introPage-description = { -app-name } can automatically extract and reformat citations and insert a bibliography into RTF files. To get started, choose an RTF file below. +rtfScan-introPage-description = { -app-name } can automatically extract and reformat citations and insert a bibliography into RTF files. The RTF Scan feature currently supports citations in variations upon the following formats: rtfScan-introPage-description2 = To get started, select an RTF input file and an output file below: -rtfScan-input-file = Input File -rtfScan-output-file = Output File +rtfScan-input-file = Input File: +rtfScan-output-file = Output File: rtfScan-no-file-selected = No file selected rtfScan-choose-input-file = @@ -259,6 +259,11 @@ rtfScan-complete-page = .label = RTF Scan Complete rtfScan-complete-page-description = Your document has now been scanned and processed. Please ensure that it is formatted correctly. +rtfScan-action-find-match = + .title = Select matching item + +rtfScan-action-accept-match = + .title = Accept this match runJS-title = Run JavaScript runJS-editor-label = Code: diff --git a/chrome/skin/default/zotero/16/dark/document-accept.svg b/chrome/skin/default/zotero/16/dark/document-accept.svg deleted file mode 100644 index 62639e962f..0000000000 --- a/chrome/skin/default/zotero/16/dark/document-accept.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/chrome/skin/default/zotero/16/dark/document-missing.svg b/chrome/skin/default/zotero/16/dark/document-missing.svg deleted file mode 100644 index fd07ccdf5a..0000000000 --- a/chrome/skin/default/zotero/16/dark/document-missing.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/chrome/skin/default/zotero/16/light/document-accept.svg b/chrome/skin/default/zotero/16/light/document-accept.svg deleted file mode 100644 index d45d69e2a8..0000000000 --- a/chrome/skin/default/zotero/16/light/document-accept.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/chrome/skin/default/zotero/16/light/document-missing.svg b/chrome/skin/default/zotero/16/light/document-missing.svg deleted file mode 100644 index b6f1a33c0c..0000000000 --- a/chrome/skin/default/zotero/16/light/document-missing.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/chrome/skin/default/zotero/16/universal/document-accept.svg b/chrome/skin/default/zotero/16/universal/document-accept.svg new file mode 100644 index 0000000000..6c56ac8788 --- /dev/null +++ b/chrome/skin/default/zotero/16/universal/document-accept.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/scss/components/_rtfScan.scss b/scss/components/_rtfScan.scss index 211e71542b..86daadb57d 100644 --- a/scss/components/_rtfScan.scss +++ b/scss/components/_rtfScan.scss @@ -1,94 +1,147 @@ .rtfscan-wizard { min-width: 700px; min-height: 550px; - + wizardpage { display: flex; flex-direction: column; - + overflow: visible; // prevents focus ring from being clipped + > div { display: block; } } - + p { display: inline; } + + .file-inputs { + margin-top: 1em; + display: grid; + grid-template-columns: [label] fit-content(20%) [input] auto [button] fit-content(33%); + gap: 10px 5px; + align-items: center; - .example, .page-start-1, .page-start-2, .file-input-label { + + input { + width: 100%; + } + + label, input { + margin: 0; + } + + @media (-moz-platform: macos) { + button { + margin: 0; + } + } + } + + .example, .page-start-1, .page-start-2 { display: block; } - + .example { line-height: 1.5em } - + .page-start-1 { margin-bottom: 1em; } - + .page-start-2 { margin-top: 1em; } - - .file-input-label { - margin: 1em $space-xs $space-min; - } - - .file-input-container { - display: flex; - margin: auto $space-min auto; - padding: .5em; - - > input { - flex: 1 0 auto; - } - - > button { - flex: 0 1 auto; - margin-left: 1em; - } - } - - .citations-page-description { - margin-bottom: 1em; - } - + .citations-page > .wizard-body { display: flex; flex-direction: column; } - + .table-container { display: flex; - height: 0; flex-direction: column; flex: 1 0 auto; margin-top: 1.5em; - >div { + .virtualized-table { + .row { + &.odd:not(.selected) { + background-color: var(--material-stripe); + } + + &.even:not(.selected) { + background-color: var(--material-background); + } + } + } + + #tree { display: flex; flex: 1 0 auto; background: var(--material-background70); overflow: hidden; position: relative; + height: 0; } - + .virtualized-table-body { display: flex; - + .windowed-list { flex: 1 0 auto; } } - } - $-icons: (document-accept, document-missing); - @each $icon in $-icons { - .icon-css.icon-#{$icon} { - @include focus-states using ($color) { - @include svgicon($icon, $color, "16"); + .cell.action > button { + @include focus-ring(true); + appearance: none; + background: transparent; + border: none; + width: 19px; + height: 19px; + padding: 0; + margin: 1px; + + &:hover { + background-color: var(--fill-quinary); } } } -} \ No newline at end of file + + $-icons: (document-accept, link); + @each $icon in $-icons { + .icon-css.icon-#{$icon} { + @include svgicon($icon, "universal", "16"); + @include focus-states using ($color) { + @if $color =="white" { + fill: var(--accent-white); + } + @else { + fill: var(--fill-secondary); + } + } + } + } + + @media (-moz-platform: macos) { + + // override to make it a bit taller + --style-configurator-richlistitem-max-height: 300px; + + input { + @include focus-ring; + background-color: var(--material-background); + border-radius: 5px; + border: var(--material-border-quinary) !important; + color: var(--fill-primary); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20); + padding-left: 7px; + padding-right: 7px; + } + } +} + + \ No newline at end of file diff --git a/scss/xulElementPatches/wizard.scss b/scss/xulElementPatches/wizard.scss index bf6a881ee3..c2be086d1b 100644 --- a/scss/xulElementPatches/wizard.scss +++ b/scss/xulElementPatches/wizard.scss @@ -25,6 +25,11 @@ .wizard-buttons-btm { padding-left: 0; padding-right: 0; + padding-bottom: 0; + + button { + margin-bottom: 0; + } button:nth-child(1 of :not([hidden=true])) { margin-left: 0;