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

UI fixes

Browse Source
This commit is contained in:
sairaj mote 2023-09-22 00:46:59 +05:30
parent 0bb3a1063f
commit 87a6827c57
4 changed files with 73 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/main.css
View File

@ -1969,15 +1969,18 @@ sm-chip .badge {
border-radius: 2rem;
justify-self: center;
padding: 0.3rem;
view-transition-name: chat-header-details;
}
#receiver_name {
display: grid;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity 0.15s;
place-content: center;
place-items: center;
}
#receiver_name > * {
grid-area: 1/1/2/2;
}
#scroll_to_bottom {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

19
css/main.scss
View File

@ -2020,16 +2020,19 @@ sm-chip {
border-radius: 2rem;
justify-self: center;
padding: 0.3rem;
view-transition-name: chat-header-details;
}
#receiver_name {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity 0.15s;
}
#receiver_name {
display: grid;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
place-content: center;
place-items: center;
> * {
grid-area: 1/1/2/2;
}
}
#scroll_to_bottom {
position: absolute;
display: flex;

116
index.html
View File

@ -4553,68 +4553,62 @@
function updateChatHeaderName(name) {
if (!floGlobals.isMobileView) {
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
const animOptions = {
duration: 200,
easing: 'ease',
fill: 'forwards'
};
let originalName = getRef('receiver_name').textContent
getRef('chat_details_button').style.overflow = 'initial'
const originalPillWidth = getRef('chat_details_button').getBoundingClientRect().width;
const originalNameWidth = getRef('receiver_name').getBoundingClientRect().width;
getRef('receiver_name').textContent = name
const changedWidth = getRef('chat_details_button').getBoundingClientRect().width;
const widthDelta = changedWidth - originalPillWidth
const leftMove = -widthDelta / 2;
const rightMove = widthDelta / 2;
const scale = (changedWidth / (originalPillWidth || 1)).toFixed(2) || 1;
getRef('receiver_name').textContent = originalName
getRef('receiver_name').style.width = `${originalNameWidth}px`
renderElem(getRef('receiver_name'), html`
<span>${name}</span>
<span>${originalName}</span>
`)
getRef('receiver_name').children[0].animate(fadeIn, animOptions)
getRef('receiver_name').children[1].animate(fadeOut, animOptions).onfinish = e => {
e.target.cancel()
getRef('receiver_name').style.width = 'auto'
renderElem(getRef('receiver_name'), html`${name}`)
}
getRef('pseudo_background').animate([
{
width: `${originalPillWidth}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()
}
} else {
getRef('receiver_name').textContent = name