From 0518d57cc59b5188675944de1f37299f7fc08809 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Mon, 25 Oct 2021 20:10:22 +0300 Subject: [PATCH] Fix reseting forward options --- .env | 4 +-- src/components/chat/bubbles.ts | 43 +++++++++++++++++++++++++----- src/components/chat/input.ts | 31 ++++++++++++++++----- src/components/connectionStatus.ts | 2 +- src/scss/partials/_chat.scss | 2 +- 5 files changed, 65 insertions(+), 17 deletions(-) diff --git a/.env b/.env index 275377ca..87dd7e7a 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ API_ID=1025907 API_HASH=452b0359b988148995f22ff0f4229750 VERSION=0.9.0 -VERSION_FULL=0.9.0 (10) -BUILD=10 +VERSION_FULL=0.9.0 (11) +BUILD=11 diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index f433a9c9..6ed73e60 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -173,6 +173,8 @@ export default class ChatBubbles { private viewsMids: Set = new Set(); private sendViewCountersDebounced: () => Promise; + private isTopPaddingSet = false; + constructor( private chat: Chat, private appMessagesManager: AppMessagesManager, @@ -1489,9 +1491,23 @@ export default class ChatBubbles { } } + const middleware = this.getMiddleware(); + let isPaddingNeeded = false; + if(!this.isTopPaddingSet) { + const {scrollHeight} = this.scrollable; + const clientHeight = this.scrollable.container.clientHeight; + isPaddingNeeded = clientHeight === scrollHeight; + if(isPaddingNeeded) { + this.chatInner.style.paddingTop = clientHeight + 'px'; + this.scrollable.scrollTop = scrollHeight; + this.isTopPaddingSet = true; + } + } + const promise = this.performHistoryResult(mids, false, true); if(scrolledDown) { promise.then(() => { + if(!middleware()) return; //this.log('renderNewMessagesByIDs: messagesQueuePromise after', this.scrollable.isScrolledDown); //this.scrollable.scrollTo(this.scrollable.scrollHeight, 'top', true, true, 5000); //const bubble = this.bubbles[Math.max(...mids)]; @@ -1501,7 +1517,15 @@ export default class ChatBubbles { bubble = this.bubbles[Math.max(...mids)]; } - this.scrollToBubbleEnd(bubble); + const promise = this.scrollToBubbleEnd(bubble, true) || Promise.resolve(); + if(isPaddingNeeded) { + promise.then(() => { // it will be called only once even if was set multiple times (that won't happen) + if(middleware() && isPaddingNeeded) { + this.chatInner.style.paddingTop = ''; + this.isTopPaddingSet = false; + } + }); + } //this.scrollable.scrollIntoViewNew(this.chatInner, 'end'); @@ -1523,7 +1547,8 @@ export default class ChatBubbles { element: HTMLElement, position: ScrollLogicalPosition, forceDirection?: FocusDirection, - forceDuration?: number + forceDuration?: number, + isNewMessage?: boolean ) { // * 4 = .25rem const bubble = findUpClassName(element, 'bubble'); @@ -1545,20 +1570,22 @@ export default class ChatBubbles { forceDirection, forceDuration, 'y', - ({rect}) => { + isNewMessage ? ({rect}) => { + // return rect.height; + let height = windowSize.windowH; height -= this.chat.topbar.container.getBoundingClientRect().height; - height -= mediaSizes.isMobile ? 58 : 78; // TODO: change height to mobile when ESG is bottom + height -= mediaSizes.isMobile || windowSize.windowH < 570 ? 58 : 78; return height; /* const rowsWrapperHeight = this.chat.input.rowsWrapper.getBoundingClientRect().height; const diff = rowsWrapperHeight - 54; return rect.height + diff; */ - } + } : undefined ); } - public scrollToBubbleEnd(bubble = this.getLastBubble()) { + public scrollToBubbleEnd(bubble = this.getLastBubble(), isNewMessage?: boolean) { /* if(DEBUG) { this.log('scrollToNewLastBubble: will scroll into view:', bubble); } */ @@ -1566,7 +1593,7 @@ export default class ChatBubbles { if(bubble) { this.scrollingToBubble = bubble; const middleware = this.getMiddleware(); - this.scrollToBubble(bubble, 'end').then(() => { + return this.scrollToBubble(bubble, 'end', undefined, undefined, isNewMessage).then(() => { if(!middleware()) return; this.scrollingToBubble = undefined; }); @@ -1777,6 +1804,8 @@ export default class ChatBubbles { this.scrollingToBubble = undefined; ////console.timeEnd('appImManager cleanup'); + + this.isTopPaddingSet = false; } public setPeer(peerId: PeerId, lastMsgId?: number): {cached?: boolean, promise: Chat['setPeerPromise']} { diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index e8326da8..23a67a91 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -24,7 +24,7 @@ import apiManager from "../../lib/mtproto/mtprotoworker"; //import Recorder from '../opus-recorder/dist/recorder.min'; import opusDecodeController from "../../lib/opusDecodeController"; import RichTextProcessor from "../../lib/richtextprocessor"; -import { ButtonMenuItemOptions } from '../buttonMenu'; +import ButtonMenu, { ButtonMenuItemOptions } from '../buttonMenu'; import emoticonsDropdown from "../emoticonsDropdown"; import PopupCreatePoll from "../popups/createPoll"; import PopupForward from '../popups/forward'; @@ -82,6 +82,7 @@ import PopupPeer from '../popups/peer'; import MEDIA_MIME_TYPES_SUPPORTED from '../../environment/mediaMimeTypesSupport'; import appMediaPlaybackController from '../appMediaPlaybackController'; import { NULL_PEER_ID } from '../../lib/mtproto/mtproto_config'; +import CheckboxField from '../checkboxField'; const RECORD_MIN_TIME = 500; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; @@ -121,6 +122,8 @@ export default class ChatInput { iconBtn: HTMLButtonElement } = {} as any; + private forwardElements: {} = {} as any; + private getWebPagePromise: Promise; private willSendWebPage: WebPage = null; private forwarding: {[fromPeerId: PeerId]: number[]}; @@ -309,6 +312,14 @@ export default class ChatInput { this.replyElements.container.append(this.replyElements.iconBtn, this.replyElements.cancelBtn); + const forwardBtnMenu = ButtonMenu([], this.listenerSetter); + + this.forwardElements = { + container: forwardBtnMenu + } as any; + + this.replyElements.container.append(forwardBtnMenu); + this.newMessageWrapper = document.createElement('div'); this.newMessageWrapper.classList.add('new-message-wrapper'); @@ -1802,6 +1813,10 @@ export default class ChatInput { scheduleDate: scheduleDate }); } + + if(!value) { + this.onMessageSent(); + } }, 0); } @@ -2027,14 +2042,18 @@ export default class ChatInput { this.helperType = type; this.helperFunc = callerFunc; } - + const replyParent = this.replyElements.container; - if(replyParent.lastElementChild.tagName === 'DIV') { - replyParent.lastElementChild.remove(); - } + const oldReply = replyParent.lastElementChild.previousElementSibling; + const haveReply = oldReply.classList.contains('reply'); this.replyElements.iconBtn.replaceWith(this.replyElements.iconBtn = ButtonIcon((type === 'webpage' ? 'link' : type) + ' active reply-icon', {noRipple: true})); - replyParent.append(wrapReply(title, subtitle, message)); + const newReply = wrapReply(title, subtitle, message); + if(haveReply) { + oldReply.replaceWith(newReply); + } else { + replyParent.insertBefore(newReply, replyParent.lastElementChild); + } this.chat.container.classList.add('is-helper-active'); /* const scroll = appImManager.scrollable; diff --git a/src/components/connectionStatus.ts b/src/components/connectionStatus.ts index 46c13f43..59fdda30 100644 --- a/src/components/connectionStatus.ts +++ b/src/components/connectionStatus.ts @@ -43,7 +43,7 @@ export default class ConnectionStatusComponent { this.log = logger('CS'); this.statusContainer = document.createElement('div'); - this.statusContainer.classList.add('connection-status'); + this.statusContainer.classList.add('connection-status'/* , 'hide' */); this.statusEl = Button('btn-primary bg-warning connection-status-button', {noRipple: true}); this.statusPreloader = new ProgressivePreloader({cancelable: false}); diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index a6188885..a55162bf 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -897,7 +897,7 @@ $chat-helper-size: 36px; .reply-wrapper { justify-content: flex-start; - overflow: hidden; + // overflow: hidden; // ! COMMENTED FOR TESTING /* transition: transform var(--layer-transition), border-radius var(--layer-transition); position: absolute; left: 0;