From: Chris Duncan Date: Thu, 17 Oct 2024 21:59:28 +0000 (-0700) Subject: Replace xel notifications with custom ones from xel cards instead. X-Git-Url: https://zoso.dev/?a=commitdiff_plain;h=b35be5fefb18a15ba8aa9b93f2ddc4b29e1d96a9;p=nemo-wallet.git Replace xel notifications with custom ones from xel cards instead. --- diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html index 04817b2..4b83da0 100644 --- 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') } @@ -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 @@ -
- - - - - - New Wallet +
+ + + + + + + + New Wallet + + Name + + Type + BIP-44 + BLAKE2b + + Password + + + + + + Import Wallet - Name - - Type - BIP-44 - BLAKE2b - - Password - - - - - Import Wallet - - - -
- - - - - - New - -
- - - + +
+ + + + + + + + + New Account + + + Derive + + + +
+ + + +
+
Exchange