RanchiMall/messenger
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto collapsing transaction details when scrolling

Browse Source
This commit is contained in:
sairaj mote 2023-11-08 23:30:19 +05:30
parent 7793379707
commit 9ccfeafc43
4 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/main.css
View File

@ -1797,6 +1797,18 @@ sm-chip .badge {
-webkit-backdrop-filter: blur(1rem);
backdrop-filter: blur(1rem);
box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.1);
view-transition-name: transaction-details;
padding: 1rem;
border-radius: 0.85rem;
}
#transaction_details[open] {
padding: 1.5rem;
}
::view-transition-new(transaction-details),
::view-transition-old(transaction-details) {
width: 100%;
height: 100%;
}
.message {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

11
css/main.scss
View File

@ -1843,6 +1843,17 @@ sm-chip {
margin: 1.5rem auto;
backdrop-filter: blur(1rem);
box-shadow: 0 1rem 1.5rem rgba(0 0 0 / 0.1);
view-transition-name: transaction-details;
padding: 1rem;
border-radius: 0.85rem;
&[open] {
padding: 1.5rem;
}
}
::view-transition-new(transaction-details),
::view-transition-old(transaction-details) {
width: 100%;
height: 100%;
}
.message {

16
index.html
View File

@ -4154,7 +4154,7 @@
}
}
getRef('messages_container').prepend(html.node`
<details id="transaction_details" class="grid gap-1 card" open>
<details id="transaction_details" class="grid gap-1" open>
<summary>
${pendingSigns === 0 ? html`
<h4>Required signatures are done</h4>
@ -4190,6 +4190,20 @@
${retrySection}
</details>
`)
let scrollStart
const scrollCallback = (e) => {
if (!scrollStart)
scrollStart = e.target.scrollTop
if (Math.abs(scrollStart - e.target.scrollTop) < 100) return
if (document.startViewTransition)
document.startViewTransition(() => {
getRef('transaction_details').open = false;
})
else
getRef('transaction_details').open = false;
getRef('messages_container').removeEventListener('scroll', scrollCallback)
}
getRef('messages_container').addEventListener('scroll', scrollCallback)
} catch (err) {
notify(err, 'error')
}