Browse Source

Fix reading service messages

Fix pinned message overflow
master
Eduard Kuzmenko 4 years ago
parent
commit
7f8ae6c84f
  1. 49
      src/components/chat/pinnedMessage.ts
  2. 2
      src/helpers/dom.ts
  3. 23
      src/lib/appManagers/appImManager.ts
  4. 6
      src/scss/partials/_chatPinned.scss

49
src/components/chat/pinnedMessage.ts

@ -47,24 +47,31 @@ class AnimatedSuper { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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;

2
src/helpers/dom.ts

@ -442,7 +442,7 @@ export function blurActiveElement() { @@ -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};

23
src/lib/appManagers/appImManager.ts

@ -1430,9 +1430,10 @@ export class AppImManager { @@ -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 { @@ -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 { @@ -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);

6
src/scss/partials/_chatPinned.scss

@ -247,6 +247,10 @@ @@ -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 @@ @@ -272,6 +276,8 @@
&.is-media {
.pinned-message-title, .pinned-message-subtitle {
transform: translateX(2.5rem);
width: calc(100% - 2.5rem);
//overflow: hidden !important;
}
}

Loading…
Cancel
Save