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; border-radius: 2rem;
justify-self: center; justify-self: center;
padding: 0.3rem; padding: 0.3rem;
view-transition-name: chat-header-details;
} }
#receiver_name { #receiver_name {
display: grid;
font-weight: 500; font-weight: 500;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
transition: opacity 0.15s; place-content: center;
place-items: center;
}
#receiver_name > * {
grid-area: 1/1/2/2;
} }
#scroll_to_bottom { #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; border-radius: 2rem;
justify-self: center; justify-self: center;
padding: 0.3rem; 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 { #scroll_to_bottom {
position: absolute; position: absolute;
display: flex; display: flex;

116
index.html
View File

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