Implement Select Items dialog redesign (#4406)

chrome/content/zotero/selectItemsDialog.js

@@ -30,6 +30,7 @@ var itemsView;
 var collectionsView;
 var loaded;
 var io;
+const isSelectItemsDialog = !!document.querySelector('#zotero-select-items-dialog');
 const isEditBibliographyDialog = !!document.querySelector('#zotero-edit-bibliography-dialog');
 const isAddEditItemsDialog = !!document.querySelector('#zotero-add-citation-dialog');
 
@@ -38,6 +39,21 @@ const isAddEditItemsDialog = !!document.querySelector('#zotero-add-citation-dial
  * io - used for input/output (dataOut is list of item IDs)
  */
 var doLoad = async function () {
+	// Move the dialog button box into the items pane
+	let itemsContainer = document.getElementById('zotero-items-tree-container');
+	// TEMP: Only if we're in the redesigned Select Items dialog, not the
+	// classic Add Citation dialog, or the Edit Bibliography dialog
+	// (until we redesign that too)
+	if (isSelectItemsDialog) {
+		let buttonBox = document.querySelector('dialog')
+			.shadowRoot
+			.querySelector('.dialog-button-box');
+		itemsContainer.append(buttonBox);
+	}
+	
+	let searchBar = document.getElementById('zotero-tb-search');
+	searchBar.searchTextbox.select();
+
 	// Set font size from pref
 	var sbc = document.getElementById('zotero-select-items-container');
 	Zotero.UIProperties.registerRoot(sbc);

chrome/content/zotero/selectItemsDialog.xhtml

@@ -40,6 +40,7 @@
 	onunload="doUnload();"
 	persist="screenX screenY width height"
 	class="zotero-dialog"
+	chromemargin="0,0,0,0"
 >
 <dialog
 	id="select-items-dialog"
@@ -55,16 +56,18 @@
 </script>
 
 <vbox id="zotero-select-items-container" flex="1">
+	<hbox id="collections-items-container">
+		<vbox id="zotero-collections-tree-container" class="virtualized-table-container">
+			<html:div id="zotero-collections-tree"/>
+		</vbox>
+		<vbox id="zotero-items-tree-container" flex="1">
 			<hbox id="search-toolbar">
 				<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
 			</hbox>
-	<hbox id="collections-items-container">
+			<hbox id="zotero-items-pane-content" class="virtualized-table-container">
-		<vbox id="zotero-collections-tree-container" class="virtualized-table-container">
+				<html:div id="zotero-items-tree"/>
-			<html:div id="zotero-collections-tree"></html:div>
-		</vbox>
-		<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1">
-			<html:div id="zotero-items-tree"></html:div>
 			</hbox>
+		</vbox>
 	</hbox>
 </vbox>
 </dialog>

scss/components/_selectItemsDialog.scss

@@ -1,40 +1,77 @@
 #zotero-select-items-dialog {
     display: flex;
-    min-width: 600px;
+    min-width: 800px;
     min-height: 450px;
 }
 
 #select-items-dialog {
-    padding: 2em;
+    padding: 0;
+    appearance: none;
+    background: var(--material-background);
+
+    #collections-items-container {
+        flex: 1 1 auto;
+    }
 
     #zotero-select-items-container {
         display: flex;
         flex-direction: column;
-        gap: 8px;
     }
 
     #zotero-collections-tree-container {
         min-width: 200px;
 		min-height: 100%;
+        padding: 16px 0;
+        background: var(--material-sidepane);
+        border-inline-end: var(--material-panedivider);
+    }
+
+    #zotero-collections-tree {
+        background: var(--material-sidepane);
     }
 
 	#zotero-items-pane-content {
-		min-height: 100%;
+        // Please do not become infinitely tall
+		min-height: 0;
+        flex: 1;
+        flex-basis: 0;
+	}
+
+    #search-toolbar, .dialog-button-box {
+        padding: 16px;
     }
 
     #search-toolbar {
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
-    }
-
-    #search-toolbar {
         flex: 0 0 auto;
     }
     
-    #collections-items-container {
+    .dialog-button-box {
-        flex: 1 1 auto;
+        gap: 8px;
-        margin-bottom: 8px;
+        
+        button {
+            margin: 0;
+        }
+    }
+
+    #zotero-items-pane-content, .dialog-button-box {
+        border-top: var(--material-border-quarternary);
+    }
+    
+    // Draggable areas:
+    #zotero-collections-tree-container,
+    #search-toolbar,
+    .dialog-button-box {
+        -moz-window-dragging: drag;
+    }
+
+    // Non-draggable sub-areas:
+    #zotero-collections-tree-container .windowed-list,
+    #search-toolbar quick-search-textbox,
+    .dialog-button-box button {
+        -moz-window-dragging: no-drag;
     }
 }