From 9fc9fb4729b09afce784b60372b7075266ec15ed Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Sun, 27 Oct 2024 11:55:49 -0700
Subject: [PATCH] Rework new/import wallet/account form show/hide. Minor fixes.

---
 app/pages/nemo-wallet.html | 104 ++++++++++++++++++++++---------------
 1 file changed, 62 insertions(+), 42 deletions(-)

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index 1072802..fccdb39 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -73,6 +73,8 @@
 		}
 
 		function switchPage (event) {
+			const pages = document.getElementsByClassName('page')
+			Array.from(pages).map(p => p.classList.remove('show'))
 			const oldHash = new URL(event.oldURL)?.hash
 			const newHash = new URL(event.newURL)?.hash
 			if (oldHash) {
@@ -91,7 +93,7 @@
 			_show: (msg, color) => {
 				const container = document.querySelector('#notifications')
 				const notification = document.createElement('dialog')
-				notification.innerText = msg
+				notification.innerText = `${msg} ${String.fromCodePoint(0x00D7)}`
 				notification.style.color = color ?? notification.style.color
 				notification.addEventListener('click', (event) => {
 					notification.close()
@@ -162,6 +164,7 @@
 				}
 				case '_new': {
 					try {
+						document.querySelector(location.hash).classList.remove('show')
 						document.getElementById('wallet-new').classList.add('show')
 					} catch (err) {
 						walletSelect.value = ''
@@ -173,6 +176,7 @@
 				}
 				case '_import': {
 					try {
+						document.querySelector(location.hash).classList.remove('show')
 						document.getElementById('wallet-import').classList.add('show')
 					} catch (err) {
 						walletSelect.value = ''
@@ -301,6 +305,7 @@
 			switch (accountSelect.value) {
 				case '_new': {
 					try {
+						document.querySelector(location.hash).classList.remove('show')
 						document.getElementById('account-new').classList.add('show')
 					} catch (err) {
 						accountSelect.value = ''
@@ -342,7 +347,7 @@
 				if (!select) {
 					throw new TypeError(`Select ${id} not found`)
 				}
-				([...select.children])
+				Array.from(select.children)
 					.filter(o => o.tagName.toLowerCase() === 'option')
 					.filter(o => typeof o.value === 'string')
 					.filter(o => o.value.length > 0)
@@ -410,12 +415,13 @@
 		}
 
 		async function cancelForm (id) {
-			await resetDialogInputs()
-			await document.getElementById(id).classList.remove('show')
+			await resetFormInputs()
+			document.getElementById(id).classList.remove('show')
+			document.querySelector(location.hash).classList.add('show')
 		}
 
-		async function resetDialogInputs () {
-			const fields = document.querySelectorAll('dialog input, dialog select')
+		async function resetFormInputs () {
+			const fields = document.querySelectorAll('main form input, main form select')
 			for (const field of fields) {
 				field.value = ''
 			}
@@ -447,6 +453,12 @@
 		}
 	</script>
 	<style>
+		* {
+			border: 0;
+			box-sizing: border-box;
+			font: normal normal normal calc(16px + 0.1dvh) 'sans-serif';
+			margin: 0;
+		}
 		html {
 			--color-blue: #209CE9;
 			--color-dark: #20204C;
@@ -454,13 +466,8 @@
 			--color-gray: #676686;
 			--color-black: #070707;
 			--color-white: #FFFFFF;
-			--text-body: 'serif';
-			--text-heading: 'sans-serif';
-		}
-		* {
-			border: 0;
-			box-sizing: border-box;
-			margin: 0;
+			--text-body: normal normal normal calc(16px + 0.1dvh) 'sans-serif';
+			--text-heading: normal normal bold calc(32px + 0.1dvh) 'sans-serif';
 		}
 		body {
 			align-items: flex-start;
@@ -469,8 +476,7 @@
 			display: flex;
 			fill: var(--color-blue);
 			flex-direction: column;
-			font-family: var(--text-body);
-			font-size: calc(16px + 0.1dvh);  /* prevents input focus zoom on mobile */
+			font: var(--text-body);
 			height: 100dvh !important;
 			justify-content: stretch;
 			min-height: 100dvh !important;
@@ -486,6 +492,7 @@
 		}
 		main {
 			flex: 1 0 auto;
+			padding: 1rem;
 			width: 100%;
 		}
 		nav {
@@ -495,8 +502,14 @@
 			justify-content: space-evenly;
 			width: 100%;
 		}
+		main iframe {
+			height:100%;
+			object-fit: fill;
+			width:100%;
+		}
 		h1, h2, h3, h4, h5, h6 {
-			font-family: var(--text-heading);
+			font: var(--text-heading);
+			margin-bottom: 1em;
 		}
 		.flex {
 			display: flex;
@@ -648,7 +661,7 @@
 			margin: 0 auto;
 			pointer-events: none;
 			position: fixed;
-			top: 1rem;
+			top: 0.5rem;
 			width: 100%;
 		}
 		#notifications > dialog[open] {
@@ -656,6 +669,7 @@
 			border: 1px solid var(--color-black);
 			border-radius: 0.5rem;
 			color: var(--color-light);
+			cursor: pointer;
 			display: flex;
 			justify-content: center;
 			margin: 0.5rem 0;
@@ -726,33 +740,36 @@
 <body onhashchange="switchPage(event)" style="visibility:hidden;">
 	<div id="notifications"></div>
 	<header>
+		<form>
 
-		<!-- Wallet Select -->
-
-		<div id="wallets" class="grid-x">
-			<label for="wallet" class="grid x-3">Wallet</label>
-			<select id="wallet" class="grid x-9" onchange="selectWallet()">
-				<option disabled selected value>Choose...</option>
-				<hr />
-				<option value="_new">New</option>
-				<option value="_import">Import</option>
-				<hr />
-				<option disabled value="_ledger">Ledger</option>
-				<hr />
-			</select>
-		</div>
+			<!-- Wallet Select -->
+
+			<div id="wallets" class="grid-x">
+				<label for="wallet" class="grid x-3">Wallet</label>
+				<select id="wallet" class="grid x-9" onchange="selectWallet()">
+					<option disabled selected value>Choose...</option>
+					<hr />
+					<option value="_new">New</option>
+					<option value="_import">Import</option>
+					<hr />
+					<option disabled value="_ledger">Ledger</option>
+					<hr />
+				</select>
+			</div>
 
-		<!-- Account Select -->
+			<!-- Account Select -->
 
-		<div id="accounts" class="grid-x">
-			<label for="account" class="grid x-3">Account</label>
-			<select id="account" class="grid x-9" disabled onchange="selectAccount()">
-				<option disabled selected value>Choose...</option>
-				<hr />
-				<option value="_new">New</option>
-				<hr />
-			</select>
-		</div>
+			<div id="accounts" class="grid-x">
+				<label for="account" class="grid x-3">Account</label>
+				<select id="account" class="grid x-9" disabled onchange="selectAccount()">
+					<option disabled selected value>Choose...</option>
+					<hr />
+					<option value="_new">New</option>
+					<hr />
+				</select>
+			</div>
+
+		</form>
 	</header>
 
 	<!-- Main Content Pages -->
@@ -762,6 +779,7 @@
 		<!-- New Wallet Form -->
 
 		<div id="wallet-new" class="page">
+			<h1>New Wallet</h1>
 			<form>
 				<div class="flex y-stretch">
 					<div id="wallet-new-name" class="flex x-left x-mid">
@@ -802,6 +820,7 @@
 		<!-- Import Wallet Form -->
 
 		<div id="wallet-import" class="page">
+			<h1>Import Wallet</h1>
 			<form>
 				<div class="flex y-stretch">
 					<div id="wallet-import-name" class="flex x-left x-mid">
@@ -856,6 +875,7 @@
 		<!-- New Account Form -->
 
 		<div id="account-new" class="page">
+			<h1>New Account</h1>
 			<form>
 				<div class="flex y-stretch">
 					<div id="account-new-name" class="flex x-left x-mid">
@@ -893,7 +913,7 @@
 
 		<div id="history" class="page">
 			<h1>History</h1>
-			<iframe src="" loading="lazy" style="height:100%;object-fit:fill;width:100%;"></iframe>
+			<iframe id="history-iframe" src="" loading=" lazy"></iframe>
 			<!--
 			<details name="transaction">
 				<summary>Sent 1 to nano_12345...67890</summary>
-- 
2.34.1