From 7f8ae6c84f8c5258becaea285a2ded46fae09670 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Thu, 26 Nov 2020 11:45:45 +0200 Subject: [PATCH] Fix reading service messages Fix pinned message overflow --- src/components/chat/pinnedMessage.ts | 49 +++++++++++++++------------- src/helpers/dom.ts | 2 +- src/lib/appManagers/appImManager.ts | 23 +++++++------ src/scss/partials/_chatPinned.scss | 6 ++++ 4 files changed, 46 insertions(+), 34 deletions(-) diff --git a/src/components/chat/pinnedMessage.ts b/src/components/chat/pinnedMessage.ts index 342b3675..9653272e 100644 --- a/src/components/chat/pinnedMessage.ts +++ b/src/components/chat/pinnedMessage.ts @@ -47,24 +47,31 @@ class AnimatedSuper { }, AnimatedSuper.DURATION); } - public /* async */ animate(index: number, previousIndex: number, fromTop = index > previousIndex, ignorePrevious = false) { - if(index == previousIndex) { - this.clearRows(index); - return; + public setNewRow(index: number, reflow = false) { + const row = this.rows[index]; + if(row.new) { + if(reflow) { + row.element.classList.remove('hide'); + void row.element.offsetLeft; // reflow + } else { + row.element.classList.remove('is-hiding', 'hide'); + } + + delete row.new; } - //const fromTop = index > previousIndex; + this.clearRows(index); + } + + public animate(index: number, previousIndex: number, fromTop = index > previousIndex, ignorePrevious = false) { + if(index === previousIndex) { // * handle if set index 0 and previousIndex 0 + return this.setNewRow(index); + } const row = this.rows[index]; const previousRow = this.rows[previousIndex]; - //const height = this.container.getBoundingClientRect().height; - if(!previousRow && !ignorePrevious) { - if(row.new) { - row.element.classList.remove('hide'); - } - - return; + return this.setNewRow(index); } const sides = ['from-top', 'from-bottom']; @@ -78,17 +85,11 @@ class AnimatedSuper { } if(row.new) { - //await new Promise((resolve) => window.requestAnimationFrame(resolve)); - row.element.classList.remove('hide'); - void row.element.offsetLeft; // reflow - delete row.new; - //await new Promise((resolve) => window.requestAnimationFrame(resolve)); + this.setNewRow(index, true); } row.element.classList.toggle('is-hiding', false); previousRow && previousRow.element.classList.toggle('is-hiding', true); - //SetTransition(row.element, 'is-hiding', false, AnimatedSuper.DURATION); - //previousRow && SetTransition(previousRow.element, 'is-hiding', true, AnimatedSuper.DURATION); this.clearRows(index); } @@ -242,7 +243,7 @@ export default class PinnedMessage { } public setCorrectIndex(lastScrollDirection?: number) { - if(this.locked) { + if(this.locked || this.appImManager.setPeerPromise) { return; }/* else if(this.waitForScrollBottom) { if(lastScrollDirection === 1) { @@ -258,7 +259,9 @@ export default class PinnedMessage { const y = Math.floor(rect.top + rect.height - 1); let el: HTMLElement = document.elementFromPoint(x, y) as any; //this.appImManager.log('[PM]: setCorrectIndex: get last element perf:', performance.now() - perf, el, x, y); + if(!el) return; el = findUpClassName(el, 'bubble'); + if(!el) return; if(el && el.dataset.mid !== undefined) { const mid = +el.dataset.mid; @@ -268,7 +271,7 @@ export default class PinnedMessage { currentIndex = mids.length ? mids.length - 1 : 0; } - this.appImManager.log('pinned currentIndex', currentIndex); + //this.appImManager.log('pinned currentIndex', currentIndex); const changed = this.pinnedIndex != currentIndex; if(changed) { @@ -367,14 +370,14 @@ export default class PinnedMessage { this.pinnedMessageContainer.divAndCaption.container.classList.toggle('is-media', isMediaSet); - if(this.wasPinnedIndex != this.pinnedIndex) { + //if(this.wasPinnedIndex != this.pinnedIndex) { this.animatedSubtitle.animate(pinnedIndex, this.wasPinnedIndex); if(isMediaSet) { this.animatedMedia.animate(pinnedIndex, this.wasPinnedIndex); } else { this.animatedMedia.clearRows(); } - } + //} this.pinnedMessageBorder.render(mids.length, mids.length - pinnedIndex - 1); this.wasPinnedIndex = pinnedIndex; diff --git a/src/helpers/dom.ts b/src/helpers/dom.ts index 7f876b3e..28b2a91b 100644 --- a/src/helpers/dom.ts +++ b/src/helpers/dom.ts @@ -442,7 +442,7 @@ export function blurActiveElement() { } export const CLICK_EVENT_NAME = isTouchSupported ? 'touchend' : 'click'; -export const attachClickEvent = (elem: HTMLElement, callback: (e: TouchEvent | MouseEvent) => void, options?: AddEventListenerOptions) => { +export const attachClickEvent = (elem: HTMLElement, callback: (e: TouchEvent | MouseEvent) => void, options: AddEventListenerOptions = {}) => { if(CLICK_EVENT_NAME == 'touchend') { const o = {...options, once: true}; diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 3a234062..45efbc23 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -1430,9 +1430,10 @@ export class AppImManager { this.menuButtons.mute.style.display = this.myID == this.peerID ? 'none' : ''; - this.pinnedMessage.setPinnedMessage(); - window.requestAnimationFrame(() => { + this.pinnedMessage.pinnedIndex/* = this.pinnedMessage.wasPinnedIndex */ = 0; + //this.pinnedMessage.setCorrectIndex(); + this.pinnedMessage.setPinnedMessage(); /* noTransition.forEach(el => { el.classList.remove('no-transition-all'); }); */ @@ -1777,6 +1778,16 @@ export class AppImManager { this.renderMessagesQueue(message, bubble, reverse); } + if(!our) { + //this.log('not our message', message, message.pFlags.unread); + if(message.pFlags.unread) { + this.unreadedObserver.observe(bubble); + if(!this.unreaded.indexOf(message.mid)) { + this.unreaded.push(message.mid); + } + } + } + return bubble; } @@ -1916,14 +1927,6 @@ export class AppImManager { if(message.mid < 0) status = 'is-sending'; else status = message.pFlags.unread ? 'is-sent' : 'is-read'; bubble.classList.add(status); - } else { - //this.log('not our message', message, message.pFlags.unread); - if(message.pFlags.unread) { - this.unreadedObserver.observe(bubble); - if(!this.unreaded.indexOf(message.mid)) { - this.unreaded.push(message.mid); - } - } } const isOut = our && (!message.fwd_from || this.peerID != this.myID); diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index dbd06f64..d4eea544 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -247,6 +247,10 @@ display: none; width: auto; + &-content { + overflow: visible !important; // * fix blinking in Safari iOS, transform overflow + } + &-media-container { width: 2rem; height: 2rem; @@ -272,6 +276,8 @@ &.is-media { .pinned-message-title, .pinned-message-subtitle { transform: translateX(2.5rem); + width: calc(100% - 2.5rem); + //overflow: hidden !important; } }