mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Redesign RTF Scan wizard

Browse source
This commit is contained in:
Tom Najdek 2024-01-10 16:29:22 +01:00 • committed by Dan Stillman
parent b30e975379
commit 701c76aa3f
10 changed files with 99 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

3
chrome/content/zotero/components/icons.jsx
View file

@ -114,9 +114,6 @@ i('Tick', "chrome://zotero/skin/tick.png");
i('ArrowRefresh', "chrome://zotero/skin/arrow_refresh.png");
//i('Link', "chrome://zotero/skin/link.png");
i('RTFScanAccept', "chrome://zotero/skin/rtfscan-accept.png", false);
i('RTFScanLink', "chrome://zotero/skin/rtfscan-link.png", false);
i('Attach', "chrome://zotero/skin/attach.png");
i('BulletBlue', "chrome://zotero/skin/bullet_blue.png");
i('BulletBlueEmpty', "chrome://zotero/skin/bullet_blue_empty.png");

4
chrome/content/zotero/elements/styleConfigurator.js
View file

@ -96,7 +96,7 @@
}
get style() {
return this.style;
return this._style;
}
set style(style) {
@ -159,7 +159,7 @@
<xul:style-selector id="style-selector" value="${this.getAttribute('style') || Zotero.Prefs.get('export.lastStyle') || ''}" />
</div>
<div class="locale-selector-wrapper">
<label for="locale-selector" class="file-input-label" data-l10n-id="bibliography-locale-label" />
<label for="locale-selector" class="locale-selector-label" data-l10n-id="bibliography-locale-label" />
<xul:locale-selector
id="locale-selector"
value="${this.getAttribute('locale') || Zotero.Prefs.get('export.lastLocale') || ''}"

13
chrome/content/zotero/rtfScan.js
View file

@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
import FilePicker from 'zotero/modules/filePicker';
import VirtualizedTable from 'components/virtualized-table';
import { getDOMElement } from 'components/icons';
import { getCSSIcon } from 'components/icons';
var { Services } = ChromeUtils.import('resource://gre/modules/Services.jsm');
Services.scriptloader.loadSubScript('chrome://zotero/content/elements/styleConfigurator.js', this);
@ -703,7 +703,7 @@ const Zotero_RTFScan = { // eslint-disable-line no-unused-vars, camelcase
if (column.primary) {
let twisty;
if (row.children || (this.rows[index + 1] && this.rows[index + 1].parent == row)) {
twisty = getDOMElement("IconTwisty");
twisty = getCSSIcon("twisty");
twisty.classList.add('twisty');
if (!row.collapsed) {
twisty.classList.add('open');
@ -733,12 +733,9 @@ const Zotero_RTFScan = { // eslint-disable-line no-unused-vars, camelcase
let span = document.createElement('span');
span.className = `cell action ${column.className}`;
if (row.parent) {
if (row.action) {
span.appendChild(getDOMElement('IconRTFScanAccept'));
}
else {
span.appendChild(getDOMElement('IconRTFScanLink'));
}
let icon = getCSSIcon(row.action ? 'document-accept' : 'document-missing');
icon.classList.add('icon-16');
span.appendChild(icon);
span.addEventListener('mouseup', e => this.onActionMouseUp(e, index), { passive: true });
span.style.pointerEvents = 'auto';
}

5
chrome/skin/default/zotero/16/dark/document-accept.svg Normal file
View file

@ -0,0 +1,5 @@
<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>
Side by side

After

Width:  |  Height:  |  Size: 734 B

5
chrome/skin/default/zotero/16/dark/document-missing.svg Normal file
View file

@ -0,0 +1,5 @@
<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>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

8
chrome/skin/default/zotero/16/light/document-accept.svg Normal file
View file

@ -0,0 +1,8 @@
<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>
Side by side

After

Width:  |  Height:  |  Size: 723 B

8
chrome/skin/default/zotero/16/light/document-missing.svg Normal file
View file

@ -0,0 +1,8 @@
<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>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

9
scss/components/_rtfScan.scss
View file

@ -79,4 +79,13 @@
}
}
}
$-icons: (document-accept, document-missing);
@each $icon in $-icons {
.icon-css.icon-#{$icon} {
@include focus-states using ($color) {
@include svgicon($icon, $color, "16");
}
}
}
}

46
scss/elements/_styleConfigurator.scss
View file

@ -1,18 +1,33 @@
style-configurator {
display: block;
width: 100%;
.style-configurator {
display: flex;
flex-direction: column;
gap: var(--style-configurator-gap, 24px);
}
.locale-selector-label {
margin: var(--style-configurator-locale-selector-label-margin, 0 8px 0 0);
}
style-selector {
display: block;
}
richlistbox {
padding: var(--style-configurator-richlistbox-padding, 2px);
padding: var(--style-configurator-richlistbox-padding, 4px 8px);
max-height: var(--style-configurator-richlistitem-max-height, 260px);
overflow: var(--style-configurator-richlistitem-overflow, auto scroll);
overflow: var(--style-configurator-richlistitem-overflow, hidden auto);
margin: var(--style-configurator-richlistbox-margin, 0);
richlistitem {
line-height: var(--style-configurator-richlistitem-line-height, 1.5em);
line-height: var(--style-configurator-richlistitem-line-height, 1.66666666em);
overflow: hidden;
text-overflow: ellipsis;
padding: var(--style-configurator-richlistitem-padding, 0px 8px 0px 4px);
border-radius: var(--style-configurator-richlistitem-border-radius, 5px);
}
@media (-moz-platform: macos) {
@ -22,16 +37,8 @@ style-configurator {
}
}
.locale-selector-wrapper,
.style-selector-wrapper,
.display-as-wrapper {
margin: var(--style-configurator-field-margin, .5em 0 0 0);
padding: var(--style-configurator-field-padding, $space-xs);
}
label[for="style-selector"] {
margin: var(--style-configurator-label-margin, .5em 0 0 0);
font-size: var(--style-configurator-label-font-size, 13px);
margin: var(--style-configurator-label-margin, 0 $space-min 0 0);
}
.style-selector-wrapper {
@ -45,9 +52,24 @@ style-configurator {
.display-as-wrapper {
radiogroup {
margin: 0;
display: flex;
flex-direction: row;
}
radio {
margin: 0;
}
radio + radio {
margin-left: var(--style-configurator-radio-margin-left, 16px);
}
}
}
locale-selector {
menulist {
min-width: 200px;
}
}

24
scss/wizard.scss
View file

@ -1 +1,23 @@
// Override/enhance native wizard styles
// Override/enhance wizard styles
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
:host(:not(.specificity)) {
padding: 24px;
font-size: 12px;
}
:not(.specificity) {
.wizard-header-box-text {
padding: 0;
}
.wizard-header-label {
margin-inline-start: 0;
}
}
html|*.wizard-page-box:not(.specificity) {
padding: 16px 0;
}