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

UI improvements

Browse Source
This commit is contained in:
sairaj mote 2023-09-20 14:22:01 +05:30
parent 2eceeff7bd
commit 0bb3a1063f
5 changed files with 66 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/main.css
View File

@ -1969,6 +1969,7 @@ sm-chip .badge {
border-radius: 2rem;
justify-self: center;
padding: 0.3rem;
view-transition-name: chat-header-details;
}
#receiver_name {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
css/main.scss
View File

@ -2020,6 +2020,7 @@ sm-chip {
border-radius: 2rem;
justify-self: center;
padding: 0.3rem;
view-transition-name: chat-header-details;
}
#receiver_name {
font-weight: 500;

116
index.html
View File

@ -4553,62 +4553,68 @@
function updateChatHeaderName(name) {
if (!floGlobals.isMobileView) {
const animOptions = {
duration: 200,
easing: 'ease',
fill: 'forwards'
};
let originalName = getRef('receiver_name').textContent
getRef('chat_details_button').style.overflow = 'initial'
const originalWidth = getRef('chat_details_button').getBoundingClientRect().width;
getRef('receiver_name').textContent = name
const changedWidth = getRef('chat_details_button').getBoundingClientRect().width;
const widthDelta = changedWidth - originalWidth
const leftMove = -widthDelta / 2;
const rightMove = widthDelta / 2;
const scale = (changedWidth / (originalWidth || 1)).toFixed(2) || 1;
getRef('receiver_name').textContent = originalName
getRef('pseudo_background').animate([
{
width: `${originalWidth}px`
}, {
width: `${changedWidth}px`
}
], animOptions).onfinish = (e) => {
getRef('chat_details_button').style.overflow = 'hidden'
e.target.cancel()
}
getRef('chat_details_button').querySelector('#receiver_initial').animate([
{
transform: `none`
},
{
transform: `translateX(${leftMove}px)`
},
], animOptions).onfinish = e => {
e.target.cancel()
}
getRef('chat_details_button').children[2].animate([
{
transform: `none`
},
{
transform: `translateX(${rightMove}px)`
},
], animOptions).onfinish = e => {
e.target.cancel()
}
getRef('chat_details_button').querySelector('#receiver_name').animate([
{
transform: `none`,
opacity: 1,
}, {
transform: `scaleX(${scale})`,
opacity: 0,
}
], animOptions).onfinish = e => {
e.target.cancel()
if (document.startViewTransition) {
document.startViewTransition(() => {
getRef('receiver_name').textContent = name
})
} else {
const animOptions = {
duration: 200,
easing: 'ease',
fill: 'forwards'
};
let originalName = getRef('receiver_name').textContent
getRef('chat_details_button').style.overflow = 'initial'
const originalWidth = getRef('chat_details_button').getBoundingClientRect().width;
getRef('receiver_name').textContent = name
const changedWidth = getRef('chat_details_button').getBoundingClientRect().width;
const widthDelta = changedWidth - originalWidth
const leftMove = -widthDelta / 2;
const rightMove = widthDelta / 2;
const scale = (changedWidth / (originalWidth || 1)).toFixed(2) || 1;
getRef('receiver_name').textContent = originalName
getRef('pseudo_background').animate([
{
width: `${originalWidth}px`
}, {
width: `${changedWidth}px`
}
], animOptions).onfinish = (e) => {
getRef('chat_details_button').style.overflow = 'hidden'
e.target.cancel()
}
getRef('chat_details_button').querySelector('#receiver_initial').animate([
{
transform: `none`
},
{
transform: `translateX(${leftMove}px)`
},
], animOptions).onfinish = e => {
e.target.cancel()
}
getRef('chat_details_button').children[2].animate([
{
transform: `none`
},
{
transform: `translateX(${rightMove}px)`
},
], animOptions).onfinish = e => {
e.target.cancel()
}
getRef('chat_details_button').querySelector('#receiver_name').animate([
{
transform: `none`,
opacity: 1,
}, {
transform: `scaleX(${scale})`,
opacity: 0,
}
], animOptions).onfinish = e => {
e.target.cancel()
getRef('receiver_name').textContent = name
}
}
} else {
getRef('receiver_name').textContent = name

3
scripts/components.js
View File

@ -348,7 +348,7 @@ IDBsupport.innerHTML = `
fill: #ffc107;
}
</style>
<article id="idb_support">
<article id="idb_support" style="display: none">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>
<h1>Your browser doesn't support IndexedDB</h1>
<p>
@ -374,6 +374,7 @@ window.customElements.define('idb-support', class extends HTMLElement {
request.onerror = function (event) {
// IndexedDB is not allowed or an error occurred
console.log('IndexedDB is not allowed or encountered an error.');
thisComponent.shadowRoot.querySelector('#idb_support').style.display = 'flex';
};
request.onsuccess = function (event) {
// IndexedDB is allowed and successfully opened the database