fix upload notification style and event listener on inputs

navigator/components/FileUpload.js

@@ -48,20 +48,24 @@ export class FileUpload {
 	}
 
 	make_html_element() {
-		var notification = document.createElement("div");
+		var notification = this.dom_element = document.createElement("div");
 		notification.classList.add("nav-notification");
 
 		var header = document.createElement("div");
 		header.classList.add("nav-notification-header");
 		notification.appendChild(header);
-		header.innerText = "Uploading " + this.filename;
+		header.style.display = "grid";
-		header.style.position = "relative";
+		header.style.gridTemplateColumns = "1fr 20px";
-		header.style.paddingRight = "1em";
+		header.style.gap = "5px";
+
+		var title = document.createElement("p");
+		title.innerText = "Uploading " + this.filename;
+		title.title = this.filename;
 
 		var cancel = document.createElement("i");
 		cancel.classList.add("fa", "fa-times");
-		cancel.style.position = "absolute"
+		cancel.style.justifySelf = "center";
-		cancel.style.right = "0";
+		cancel.style.alignSelf = "center";
 		cancel.style.cursor = "pointer";
 		cancel.onclick = () => {
 			if (this.proc) {
@@ -69,7 +73,8 @@ export class FileUpload {
 				this.done();
 			}
 		}
-		header.appendChild(cancel);
+
+		header.append(title, cancel);
 
 		var info = document.createElement("div");
 		info.classList.add("flex-row", "space-between");
@@ -122,6 +127,7 @@ export class FileUpload {
 	}
 
 	async upload() {
+		this.dom_element.style.display = "flex";
 		this.proc = cockpit.spawn(["/usr/share/cockpit/navigator/scripts/write-chunks.py3", this.path], {err: "out", superuser: "try"});
 		this.proc.fail((e, data) => {
 			this.reader.onload = () => {}
@@ -158,7 +164,7 @@ export class FileUpload {
 			}
 			this.done();
 		}
-		this.update_rates_interval = setInterval(this.display_xfr_rate.bind(this), 1000);
+		this.update_rates_interval = setInterval(this.display_xfr_rate.bind(this), 2000);
 	}
 
 	/**

navigator/components/NavDragDrop.js

@@ -36,7 +36,7 @@ export class NavDragDrop {
 		this.drop_area = drop_area;
 		this.nav_window_ref = nav_window_ref;
 		this.modal_prompt = new ModalPrompt();
-		this.upload_manager = new FileUploadManager(this.nav_window_ref, 10);
+		this.upload_manager = new FileUploadManager(this.nav_window_ref, 6);
 	}
 
 	/**

navigator/components/NavEntry.js

@@ -86,6 +86,7 @@ export class NavEntry {
 			this.dom_element.appendChild(group);
 			this.dom_element.appendChild(size);
 		}
+		this.visible = true;
 	}
 
 	/**
@@ -158,10 +159,12 @@ export class NavEntry {
 	}
 
 	show() {
+		this.visible = true;
 		this.dom_element.style.display = "flex";
 	}
 
 	hide() {
+		this.visible = false;
 		this.dom_element.style.display = "none";
 	}
 

navigator/components/NavWindow.js

@@ -56,6 +56,7 @@ export class NavWindow {
 	 * @param {Event} e 
 	 */
 	handleEvent(e) {
+		console.log(e);
 		switch (e.type) {
 			case "click":
 				if (e.target === this.window) {
@@ -73,6 +74,8 @@ export class NavWindow {
 				} else if (e.keyCode === 65 && e.ctrlKey) {
 					this.select_all();
 					e.preventDefault();
+				} else if (e.keyCode === 27) {
+					this.clear_selected();
 				} else if (e.keyCode === 67 && e.ctrlKey) {
 					this.copy();
 				} else if (e.keyCode === 86 && e.ctrlKey) {
@@ -212,6 +215,7 @@ export class NavWindow {
 				this.selected_entries.clear();
 			to_be_selected = [entry];
 		}
+		to_be_selected = to_be_selected.filter((entry) => entry.visible);
 		for (let i of to_be_selected) {
 			this.selected_entries.add(i);
 		}
@@ -248,7 +252,7 @@ export class NavWindow {
 	}
 	
 	show_selected_properties() {
-		this.selected_entry().show_properties();
+		this.selected_entry()?.show_properties?.();
 	}
 
 	async show_edit_selected() {
@@ -645,6 +649,7 @@ export class NavWindow {
 			default:
 				break;
 		}
+		e.stopPropagation();
 	}
 
 	nav_bar_cd() {

navigator/navigator.css

@@ -651,7 +651,7 @@ input:checked + .slider:before {
 .nav-notifications {
 	position: absolute;
 	bottom: 0;
-	right: 0;
+	right: 10px;
 	padding: 5px;
 	display: flex;
 	flex-flow: column-reverse nowrap;
@@ -663,7 +663,7 @@ input:checked + .slider:before {
 .nav-notification {
 	margin: 5px;
 	position: relative;
-	display: flex;
+	display: none;
 	flex-flow: column nowrap;
 	align-items: stretch;
 	z-index: 10;
@@ -673,15 +673,23 @@ input:checked + .slider:before {
 	border-radius: var(--nav-border-radius);
 	color: var(--font);
 }
-
+/* .nav-notification-header {
-.nav-notification-header {
 	position: relative;
 	z-index: 10;
 	font-weight: bold;
-}
+} */
 
-.nav-notification-header > progress {
+/* .nav-notification-header > progress {
 	position: relative;
 	z-index: 10;
+} */
+
+.nav-notification-header > p {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
+.no-border {
+	border: none;
+}

navigator/navigator.html

@@ -68,7 +68,8 @@
 		</div>
 		<div class="vertical-spacer"></div>
 		<div class="flex-row inner-container">
-			<div class="contents-view contents-view-grid" id="nav-contents-view">
+			<div class="contents-view">
+				<div class="contents-view contents-view-grid no-border" id="nav-contents-view">
 					<div class="contents-view-list-header nav-item">
 						<i class="nav-item-icon"></i>
 						<div class="nav-item-title" id="sort-name-btn">Name<i class="sort-arrow fas fa-chevron-up" id="sort-name-icon"></i></div>
@@ -77,6 +78,7 @@
 						<div id="sort-group-btn">Group<i class="sort-arrow fas" id="sort-group-icon"></i></div>
 						<div id="sort-size-btn">Size<i class="sort-arrow fas" id="sort-size-icon"></i></div>
 					</div>
+				</div>
 				<div class="nav-notifications" id="nav-notifications">
 				</div>
 			</div>

navigator/navigator.js

@@ -130,6 +130,7 @@ function set_up_buttons() {
 	document.getElementById("search-bar").addEventListener("keydown", (e) => {
 		if (e.keyCode === 13)
 			nav_window.search_filter(e);
+		e.stopPropagation();
 	});
 	// fix tab in editor input
 	document.getElementById('nav-edit-contents-textarea').addEventListener('keydown', (e) => {