]> zoso.dev Git - nemo-wallet.git/commitdiff
projects / nemo-wallet.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 60a2cc2)
Replace xel notifications with custom ones from xel cards instead.
authorChris Duncan <chris@zoso.dev>
Thu, 17 Oct 2024 21:59:28 +0000 (14:59 -0700)
committerChris Duncan <chris@zoso.dev>
Thu, 17 Oct 2024 21:59:28 +0000 (14:59 -0700)
app/pages/nemo-wallet.html patch | blob | history

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index 04817b266a6df5291a660b6095a7656b756be8f2..4b83da03c710efa9726fbb7c3f770a2a3deb906d 100644 (file)
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -30,8 +30,6 @@
       console.log('loaded libnemo')
     }
     async function loadUx () {
-      const notification = document.getElementById('notification')
-      observer.observe(notification, { attributes: true })
       if (location.hash) {
         const page = document.querySelector(location.hash)
         page.classList.add('show')
@@ -121,34 +119,20 @@
       notify.info(`Session storage cleared`)
     }
     const notify = {
-      show: (msg, color) => {
-        const notification = document.getElementById('notification')
-        const text = document.createElement('x-label')
-        text.innerText = msg
-        text.style.color = color ?? text.style.color
-        text.addEventListener('click', () => {
-          if (notification.childElementCount > 1) {
-            text.remove()
-          } else {
-            notification.addEventListener('attributeschanged', () => {
-              if (
-                notification.getAttribute('animating') === null
-                && notification.childElementCount === 1
-                && !notification.opened
-              ) {
-                text.remove()
-              }
-            })
-            notification.opened = false
-          }
-        }, { once: true })
-        notification.appendChild(text)
-        notification.opened = true
+      _show: (msg, color) => {
+        const container = document.getElementById('notifications')
+        const notification = document.createElement('x-card')
+
+        notification.innerText = msg
+        notification.style.color = color ?? notification.style.color
+
+        notification.addEventListener('click', notification.remove)
+        container.appendChild(notification)
       },
-      info: (msg) => notify.show(`ℹ️ ${msg}`),
-      ok: (msg) => notify.show(`☑️ ${msg}`, 'Cyan'),
-      warn: (msg) => notify.show(`⚠️ ${msg}`, 'Gold'),
-      error: (msg) => notify.show(`🚫 ${msg}`, 'Tomato')
+      info: (msg) => notify._show(`ℹ️ ${msg}`),
+      ok: (msg) => notify._show(`☑️ ${msg}`, 'Cyan'),
+      warn: (msg) => notify._show(`⚠️ ${msg}`, 'Gold'),
+      error: (msg) => notify._show(`🚫 ${msg}`, 'Tomato')
     }
   </script>
   <meta name="xel-theme" content="https://unpkg.com/xel@latest/themes/adwaita-dark.css" />
@@ -162,6 +146,22 @@
       color: #209CE9;
       fill: #209CE9;
     }
+    #notifications {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      position: fixed;
+      top: 1rem;
+      width: 100%;
+      z-index: 100;
+    }
+    #notifications > x-card {
+      align-items: center;
+      display: flex;
+      margin: 1px 0px;
+      padding: 0.5rem;
+      width: auto;
+    }
     .page {
       display: none;
     }
@@ -201,43 +201,55 @@
 </head>
 
 <body onload="load()" onhashchange="switchPage(event)" style="visibility:hidden;">
-  <main>
-    <x-notification id="notification"></x-notification>
-    <x-select id="wallets">
-      <x-menu>
-        <x-menuitem value="new">
-          <x-button>
-            <x-label>New Wallet</x-label>
+  <header>
+    <x-box id="notifications"></x-box>
+    <x-box id="wallets">
+      <x-select>
+        <x-icon href="#wallet2"></x-icon>
+        <x-menu>
+          <x-menuitem value="new">
+            <x-button>
+              <x-label>New Wallet</x-label>
+              <dialog>
+                <x-input type="text">Name</x-input>
+                <x-radios>
+                  <x-label>Type</x-label>
+                  <x-radio value="bip44" toggled><x-label>BIP-44</x-label></x-radio>
+                  <x-radio value="blake2b"><x-label>BLAKE2b</x-label></x-radio>
+                </x-radios>
+                <x-input type="password" required="true">Password</x-input>
+                <x-button
+                  onclick="createWallet(this, this.closest('dialog').querySelector('x-radios').value).then(w => { console.log(w);showWallets() })"></x-button>
+              </dialog>
+            </x-button>
+          </x-menuitem>
+          <x-menuitem value="import">
+            <x-label>Import Wallet</x-label>
             <dialog>
-              <x-input type="text">Name</x-input>
-              <x-radios>
-                <x-label>Type</x-label>
-                <x-radio value="bip44" toggled><x-label>BIP-44</x-label></x-radio>
-                <x-radio value="blake2b"><x-label>BLAKE2b</x-label></x-radio>
-              </x-radios>
-              <x-input type="password" required="true">Password</x-input>
-              <x-button
-                onclick="createWallet(this, this.closest('dialog').querySelector('x-radios').value).then(w => { console.log(w);showWallets() })"></x-button>
             </dialog>
-          </x-button>
-        </x-menuitem>
-        <x-menuitem value="import">
-          <x-label>Import Wallet</x-label>
-          <dialog>
-          </dialog>
-        </x-menuitem>
-        <hr>
-      </x-menu>
-    </x-select><!-- end #wallets-->
-    <x-select>
-      <x-menu>
-        <x-menuitem value="new">
-          <x-label>New</x-label>
-        </x-menuitem>
-        <hr>
-      </x-menu>
-    </x-select>
-    </x-box>
+          </x-menuitem>
+          <hr>
+        </x-menu>
+      </x-select>
+    </x-box><!-- end #wallets-->
+    <x-box id="accounts">
+      <x-select>
+        <x-icon href="#cash-stack"></x-icon>
+        <x-menu>
+          <x-menuitem value="new">
+            <x-label>New Account</x-label>
+          </x-menuitem>
+          <x-menuitem value="import">
+            <x-label>Derive</x-label>
+            <dialog>
+            </dialog>
+          </x-menuitem>
+          <hr>
+        </x-menu>
+      </x-select>
+    </x-box><!-- end #accounts -->
+  </header>
+  <main>
     <x-box id="exchange" class="page">
       Exchange
     </x-box><!-- end #exchange -->
Web-based wallet for Nano digital cash.