From 701c76aa3fcdf9c5b3d8dccda4db39d3d54a6453 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Wed, 10 Jan 2024 16:29:22 +0100
Subject: [PATCH] Redesign RTF Scan wizard

---
 chrome/content/zotero/components/icons.jsx    |  3 --
 .../zotero/elements/styleConfigurator.js      |  4 +-
 chrome/content/zotero/rtfScan.js              | 13 ++----
 .../zotero/16/dark/document-accept.svg        |  5 ++
 .../zotero/16/dark/document-missing.svg       |  5 ++
 .../zotero/16/light/document-accept.svg       |  8 ++++
 .../zotero/16/light/document-missing.svg      |  8 ++++
 scss/components/_rtfScan.scss                 |  9 ++++
 scss/elements/_styleConfigurator.scss         | 46 ++++++++++++++-----
 scss/wizard.scss                              | 24 +++++++++-
 10 files changed, 99 insertions(+), 26 deletions(-)
 create mode 100644 chrome/skin/default/zotero/16/dark/document-accept.svg
 create mode 100644 chrome/skin/default/zotero/16/dark/document-missing.svg
 create mode 100644 chrome/skin/default/zotero/16/light/document-accept.svg
 create mode 100644 chrome/skin/default/zotero/16/light/document-missing.svg

diff --git a/chrome/content/zotero/components/icons.jsx b/chrome/content/zotero/components/icons.jsx
index 76cb63ecb3..2c5743780f 100644
--- a/chrome/content/zotero/components/icons.jsx
+++ b/chrome/content/zotero/components/icons.jsx
@@ -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");
diff --git a/chrome/content/zotero/elements/styleConfigurator.js b/chrome/content/zotero/elements/styleConfigurator.js
index c9c5e2c266..a41a869b33 100644
--- a/chrome/content/zotero/elements/styleConfigurator.js
+++ b/chrome/content/zotero/elements/styleConfigurator.js
@@ -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') || ''}"
diff --git a/chrome/content/zotero/rtfScan.js b/chrome/content/zotero/rtfScan.js
index f265bb5a8a..bf3174c029 100644
--- a/chrome/content/zotero/rtfScan.js
+++ b/chrome/content/zotero/rtfScan.js
@@ -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';
 				}
diff --git a/chrome/skin/default/zotero/16/dark/document-accept.svg b/chrome/skin/default/zotero/16/dark/document-accept.svg
new file mode 100644
index 0000000000..62639e962f
--- /dev/null
+++ b/chrome/skin/default/zotero/16/dark/document-accept.svg
@@ -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>
diff --git a/chrome/skin/default/zotero/16/dark/document-missing.svg b/chrome/skin/default/zotero/16/dark/document-missing.svg
new file mode 100644
index 0000000000..fd07ccdf5a
--- /dev/null
+++ b/chrome/skin/default/zotero/16/dark/document-missing.svg
@@ -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>
diff --git a/chrome/skin/default/zotero/16/light/document-accept.svg b/chrome/skin/default/zotero/16/light/document-accept.svg
new file mode 100644
index 0000000000..d45d69e2a8
--- /dev/null
+++ b/chrome/skin/default/zotero/16/light/document-accept.svg
@@ -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>
diff --git a/chrome/skin/default/zotero/16/light/document-missing.svg b/chrome/skin/default/zotero/16/light/document-missing.svg
new file mode 100644
index 0000000000..b6f1a33c0c
--- /dev/null
+++ b/chrome/skin/default/zotero/16/light/document-missing.svg
@@ -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>
diff --git a/scss/components/_rtfScan.scss b/scss/components/_rtfScan.scss
index ba66bac520..b238758c7d 100644
--- a/scss/components/_rtfScan.scss
+++ b/scss/components/_rtfScan.scss
@@ -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");
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/scss/elements/_styleConfigurator.scss b/scss/elements/_styleConfigurator.scss
index 1d57e6ce39..b1fae2ade5 100644
--- a/scss/elements/_styleConfigurator.scss
+++ b/scss/elements/_styleConfigurator.scss
@@ -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;
 	}
 }
 
diff --git a/scss/wizard.scss b/scss/wizard.scss
index 543ea65943..f6996bc880 100644
--- a/scss/wizard.scss
+++ b/scss/wizard.scss
@@ -1 +1,23 @@
-// Override/enhance native wizard styles
\ No newline at end of file
+// 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;
+}
\ No newline at end of file