Improve RTF Scan UI
* Multiple accessiblity fixes * Increase font size * Nicer layout of the welcome screen * Fix description in the welcome screen * Add stripes to the table in citations matching screen * Change icons for accept and resolve manually buttons
This commit is contained in:
Tom Najdek
Dan Stillman
parent
9cb7e7bb92
commit
260709969e
10 changed files with 136 additions and 90 deletions
|
|
@ -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';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,20 +34,15 @@
|
|||
<span class="example">{Jones, 2005; Smith, 2009}</span>
|
||||
<span class="page-start-2" data-l10n-id="rtfScan-introPage-description2" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="file-inputs">
|
||||
<label control="input-path" class="file-input-label" data-l10n-id="rtfScan-input-file" />
|
||||
<div class="file-input-container">
|
||||
<html:input type="text" id="input-path" readonly="true"/>
|
||||
<div><html:input native="true" type="text" id="input-path" readonly="true"/></div>
|
||||
<button id="choose-input-file" data-l10n-id="rtfScan-choose-input-file" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<label control="output-path" class="file-input-label" data-l10n-id="rtfScan-output-file" />
|
||||
<div class="file-input-container">
|
||||
<html:input type="text" id="output-path" readonly="true"/>
|
||||
<div><html:input native="true" type="text" id="output-path" readonly="true"/></div>
|
||||
<button id="choose-output-file" data-l10n-id="rtfScan-choose-output-file" />
|
||||
</div>
|
||||
</div>
|
||||
</wizardpage>
|
||||
<wizardpage pageid="scan-page" data-l10n-id="rtfScan-scan-page" >
|
||||
<p data-l10n-id="rtfScan-scanPage-description" />
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.24" d="M11 1.70703V4.00006H13.293L11 1.70703Z" fill="white"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M2 0H10.707L15 4.293V8.67133C14.7149 8.31899 14.3776 8.01056 14 7.75777V5H10V1H3V14H7.75777C8.01056 14.3776 8.31899 14.7149 8.67133 15H2V0ZM13.293 4L11 1.707V4H13.293Z" fill="white"/>
|
||||
<path opacity="0.85" fill-rule="evenodd" clip-rule="evenodd" d="M16 11.5C16 13.9853 13.9853 16 11.5 16C9.01472 16 7 13.9853 7 11.5C7 9.01472 9.01472 7 11.5 7C13.9853 7 16 9.01472 16 11.5ZM11 10.2071V14.5H12V10.2071L13.2929 11.5L14 10.7929L11.5 8.29289L9 10.7929L9.70711 11.5L11 10.2071Z" fill="#39BF68"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 734 B |
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.24" d="M11 1.70703V4.00006H13.293L11 1.70703Z" fill="white"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M2 0H10.707L15 4.293V8.67133C14.7149 8.31899 14.3776 8.01056 14 7.75777V5H10V1H3V14H7.75777C8.01056 14.3776 8.31899 14.7149 8.67133 15H2V0ZM13.293 4L11 1.707V4H13.293Z" fill="white"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M16 11.5C16 13.9853 13.9853 16 11.5 16C9.01472 16 7 13.9853 7 11.5C7 9.01472 9.01472 7 11.5 7C13.9853 7 16 9.01472 16 11.5ZM10.8524 11.788C10.8074 11.939 10.7904 12.113 10.8014 12.309H10.8004L10.8084 12.542H11.8954V12.374C11.8954 12.246 11.9154 12.134 11.9564 12.037C11.9974 11.94 12.0684 11.847 12.1694 11.759C12.2704 11.671 12.4104 11.573 12.5904 11.467C12.8794 11.298 13.0974 11.102 13.2444 10.88C13.3914 10.658 13.4654 10.394 13.4654 10.089V10.081C13.4654 9.76702 13.3844 9.49302 13.2224 9.25702C13.0604 9.02102 12.8344 8.83602 12.5444 8.70102C12.2544 8.56602 11.9144 8.49902 11.5244 8.49902C11.1074 8.49902 10.7524 8.57202 10.4614 8.71802C10.1704 8.86402 9.94542 9.06302 9.78942 9.31302C9.63342 9.56302 9.54942 9.84902 9.53842 10.171L9.53442 10.208H10.6464L10.6504 10.175C10.6584 10.036 10.6964 9.91102 10.7644 9.80302C10.8324 9.69502 10.9254 9.60902 11.0424 9.54602C11.1594 9.48302 11.2954 9.45202 11.4514 9.45202C11.6074 9.45202 11.7424 9.48002 11.8584 9.53602C11.9744 9.59202 12.0654 9.67102 12.1304 9.77102C12.1954 9.87102 12.2284 9.98702 12.2284 10.118V10.126C12.2284 10.251 12.2084 10.362 12.1674 10.459C12.1264 10.556 12.0554 10.648 11.9544 10.735C11.8534 10.822 11.7154 10.917 11.5414 11.021C11.3534 11.133 11.2024 11.251 11.0894 11.375C10.9764 11.499 10.8974 11.637 10.8524 11.788ZM10.7034 13.858C10.7034 14.038 10.7684 14.19 10.8974 14.314C11.0264 14.438 11.1844 14.5 11.3694 14.5C11.5574 14.5 11.7164 14.438 11.8454 14.314C11.9744 14.19 12.0394 14.038 12.0394 13.858C12.0394 13.678 11.9744 13.526 11.8454 13.402C11.7164 13.278 11.5574 13.216 11.3694 13.216C11.1844 13.216 11.0264 13.278 10.8974 13.402C10.7684 13.526 10.7034 13.678 10.7034 13.858Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,8 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M10.7071 0H2V15H14L15 14V4.293L10.7071 0Z" fill="white"/>
|
||||
<path d="M10.293 1L14 4.707V14H3V1H10.293Z" fill="white"/>
|
||||
<path opacity="0.2" d="M10.707 0H2V15H14L15 14V4.293L10.707 0ZM11 1.707L13.293 4H11V1.707ZM3 14V1H10V5H14V14H3Z" fill="black"/>
|
||||
<path opacity="0.08" d="M11 1.70703V4.00006H13.293L11 1.70703Z" fill="black"/>
|
||||
<path d="M11.5 16C13.9853 16 16 13.9853 16 11.5C16 9.01472 13.9853 7 11.5 7C9.01472 7 7 9.01472 7 11.5C7 13.9853 9.01472 16 11.5 16Z" fill="#39BF68"/>
|
||||
<path d="M12 14.5H11V10.2071L9.70711 11.5L9 10.7929L11.5 8.29289L14 10.7929L13.2929 11.5L12 10.2071V14.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 723 B |
|
|
@ -1,8 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M10.7071 0H2V15H14L15 14V4.293L10.7071 0Z" fill="white"/>
|
||||
<path d="M10.293 1L14 4.707V14H3V1H10.293Z" fill="white"/>
|
||||
<path opacity="0.2" d="M10.707 0H2V15H14L15 14V4.293L10.707 0ZM11 1.707L13.293 4H11V1.707ZM3 14V1H10V5H14V14H3Z" fill="black"/>
|
||||
<path opacity="0.08" d="M11 1.70703V4.00006H13.293L11 1.70703Z" fill="black"/>
|
||||
<path d="M11.5 16C13.9853 16 16 13.9853 16 11.5C16 9.01472 13.9853 7 11.5 7C9.01472 7 7 9.01472 7 11.5C7 13.9853 9.01472 16 11.5 16Z" fill="#999999"/>
|
||||
<path d="M10.8014 12.309C10.7904 12.113 10.8074 11.939 10.8524 11.788C10.8974 11.637 10.9764 11.499 11.0894 11.375C11.2024 11.251 11.3534 11.133 11.5414 11.021C11.7154 10.917 11.8534 10.822 11.9544 10.735C12.0554 10.648 12.1264 10.556 12.1674 10.459C12.2084 10.362 12.2284 10.251 12.2284 10.126V10.118C12.2284 9.98702 12.1954 9.87102 12.1304 9.77102C12.0654 9.67102 11.9744 9.59202 11.8584 9.53602C11.7424 9.48002 11.6074 9.45202 11.4514 9.45202C11.2954 9.45202 11.1594 9.48302 11.0424 9.54602C10.9254 9.60902 10.8324 9.69502 10.7644 9.80302C10.6964 9.91102 10.6584 10.036 10.6504 10.175L10.6464 10.208H9.53442L9.53842 10.171C9.54942 9.84902 9.63342 9.56302 9.78942 9.31302C9.94542 9.06302 10.1704 8.86402 10.4614 8.71802C10.7524 8.57202 11.1074 8.49902 11.5244 8.49902C11.9144 8.49902 12.2544 8.56602 12.5444 8.70102C12.8344 8.83602 13.0604 9.02102 13.2224 9.25702C13.3844 9.49302 13.4654 9.76702 13.4654 10.081V10.089C13.4654 10.394 13.3914 10.658 13.2444 10.88C13.0974 11.102 12.8794 11.298 12.5904 11.467C12.4104 11.573 12.2704 11.671 12.1694 11.759C12.0684 11.847 11.9974 11.94 11.9564 12.037C11.9154 12.134 11.8954 12.246 11.8954 12.374V12.542H10.8084L10.8004 12.309H10.8014ZM10.8974 14.314C10.7684 14.19 10.7034 14.038 10.7034 13.858C10.7034 13.678 10.7684 13.526 10.8974 13.402C11.0264 13.278 11.1844 13.216 11.3694 13.216C11.5574 13.216 11.7164 13.278 11.8454 13.402C11.9744 13.526 12.0394 13.678 12.0394 13.858C12.0394 14.038 11.9744 14.19 11.8454 14.314C11.7164 14.438 11.5574 14.5 11.3694 14.5C11.1844 14.5 11.0264 14.438 10.8974 14.314Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70711 0H2V15H8.67133C9.4442 15.6254 10.4284 16 11.5 16C13.9853 16 16 13.9853 16 11.5C16 9.93979 15.206 8.56504 14 7.75777V4.29289L9.70711 0ZM7 11.5C7 12.4251 7.27914 13.285 7.75777 14H3V1H9V5H13V7.25606C12.5308 7.09023 12.026 7 11.5 7C9.01472 7 7 9.01472 7 11.5ZM12.2929 4L10 1.70711V4H12.2929ZM11.5 15C13.433 15 15 13.433 15 11.5C15 9.567 13.433 8 11.5 8C9.567 8 8 9.567 8 11.5C8 13.433 9.567 15 11.5 15ZM11 14H12V10.7071L13.2929 12L14 11.2929L11.5 8.79289L9 11.2929L9.70711 12L11 10.7071V14Z" fill="context-fill" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 672 B |
|
|
@ -5,6 +5,7 @@
|
|||
wizardpage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible; // prevents focus ring from being clipped
|
||||
|
||||
> div {
|
||||
display: block;
|
||||
|
|
@ -15,7 +16,30 @@
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.example, .page-start-1, .page-start-2, .file-input-label {
|
||||
.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;
|
||||
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label, input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (-moz-platform: macos) {
|
||||
button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.example, .page-start-1, .page-start-2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -31,29 +55,6 @@
|
|||
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;
|
||||
|
|
@ -61,17 +62,29 @@
|
|||
|
||||
.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 {
|
||||
|
|
@ -81,14 +94,54 @@
|
|||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$-icons: (document-accept, document-missing);
|
||||
$-icons: (document-accept, link);
|
||||
@each $icon in $-icons {
|
||||
.icon-css.icon-#{$icon} {
|
||||
@include svgicon($icon, "universal", "16");
|
||||
@include focus-states using ($color) {
|
||||
@include svgicon($icon, $color, "16");
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue