diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index 72c79927..1ce4b750 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -74,6 +74,8 @@ import debounce from '../../helpers/schedulers/debounce'; import noop from '../../helpers/noop'; import { putPreloader } from '../misc'; import SetTransition from '../singleTransition'; +import replaceContent from '../../helpers/dom/replaceContent'; +import PeerTitle from '../peerTitle'; const RECORD_MIN_TIME = 500; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; @@ -108,11 +110,9 @@ export default class ChatInput { private sendMenu: SendMenu; private replyElements: { - container?: HTMLElement, - cancelBtn?: HTMLButtonElement, - titleEl?: HTMLElement, - subtitleEl?: HTMLElement - } = {}; + container: HTMLElement, + cancelBtn: HTMLButtonElement + } = {} as any; private willSendWebPage: any = null; private forwardingMids: number[] = []; @@ -292,12 +292,7 @@ export default class ChatInput { this.replyElements.cancelBtn = ButtonIcon('close reply-cancel'); - const dac = new DivAndCaption('reply'); - - this.replyElements.titleEl = dac.title; - this.replyElements.subtitleEl = dac.subtitle; - - this.replyElements.container.append(this.replyElements.cancelBtn, dac.container); + this.replyElements.container.append(this.replyElements.cancelBtn); this.newMessageWrapper = document.createElement('div'); this.newMessageWrapper.classList.add('new-message-wrapper'); @@ -1691,9 +1686,8 @@ export default class ChatInput { // ! костыль const replyFragment = this.appMessagesManager.wrapMessageForReply(message, undefined, [message.mid]); this.setTopInfo('edit', f, 'Editing', undefined, input, message); - const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle'); - subtitleEl.textContent = ''; - subtitleEl.append(replyFragment); + const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle') as HTMLElement; + replaceContent(subtitleEl, replyFragment); this.editMsgId = mid; input = undefined; @@ -1736,9 +1730,8 @@ export default class ChatInput { this.setTopInfo('forward', f, title); // ! костыль - const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle'); - subtitleEl.textContent = ''; - subtitleEl.append(replyFragment); + const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle') as HTMLElement; + replaceContent(subtitleEl, replyFragment); } else { this.setTopInfo('forward', f, title, mids.length + ' ' + (mids.length > 1 ? 'forwarded messages' : 'forwarded message')); } @@ -1753,7 +1746,11 @@ export default class ChatInput { public initMessageReply(mid: number) { const message = this.chat.getMessage(mid); const f = () => { - this.setTopInfo('reply', f, this.appPeersManager.getPeerTitle(message.fromId, true), message.message, undefined, message); + const peerTitleEl = new PeerTitle({ + peerId: message.fromId, + dialog: false + }).element; + this.setTopInfo('reply', f, peerTitleEl, message.message, undefined, message); this.replyToMsgId = mid; }; f(); @@ -1795,18 +1792,25 @@ export default class ChatInput { }); } - public setTopInfo(type: ChatInputHelperType, callerFunc: () => void, title = '', subtitle = '', input?: string, message?: any) { + public setTopInfo(type: ChatInputHelperType, + callerFunc: () => void, + title: HTMLElement | string = '', + subtitle: HTMLElement | string = '', + input?: string, + message?: any) { if(type !== 'webpage') { this.clearHelper(type); this.helperType = type; this.helperFunc = callerFunc; } - if(this.replyElements.container.lastElementChild.tagName === 'DIV') { - this.replyElements.container.lastElementChild.remove(); - this.replyElements.container.append(wrapReply(title, subtitle, message)); + const replyParent = this.replyElements.container; + if(replyParent.lastElementChild.tagName === 'DIV') { + replyParent.lastElementChild.remove(); } + replyParent.append(wrapReply(title, subtitle, message)); + this.chat.container.classList.add('is-helper-active'); /* const scroll = appImManager.scrollable; if(scroll.isScrolledDown && !scroll.scrollLocked && !appImManager.messagesQueuePromise && !appImManager.setPeerPromise) { diff --git a/src/components/chat/replyContainer.ts b/src/components/chat/replyContainer.ts index c3df1f0d..f9a14577 100644 --- a/src/components/chat/replyContainer.ts +++ b/src/components/chat/replyContainer.ts @@ -41,7 +41,7 @@ export function wrapReplyDivAndCaption(options: { let media = message && message.media; let setMedia = false, isRound = false; - const mediaChildren = mediaEl ? Array.from(mediaEl.children) : []; + const mediaChildren = mediaEl ? Array.from(mediaEl.children).slice() : []; let middleware: () => boolean; if(media && mediaEl) { subtitleEl.textContent = ''; diff --git a/src/lib/richtextprocessor.ts b/src/lib/richtextprocessor.ts index 5dfaa7c0..e0a86982 100644 --- a/src/lib/richtextprocessor.ts +++ b/src/lib/richtextprocessor.ts @@ -542,9 +542,10 @@ namespace RichTextProcessor { // } else { insertPart(entity, ``, ``); // } - }/* else if(options.mustWrapEmoji) { + //} else if(options.mustWrapEmoji) { + } else if(!options.wrappingDraft) { insertPart(entity, '', ''); - } */ + } /* if(!emojiSupported) { insertPart(entity, ``, ``); } */ diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index d638505b..fcc9a232 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -925,9 +925,14 @@ $chat-helper-size: 36px; &-title { margin-top: -1px; margin-bottom: 1px; + } } + .peer-title { + font-weight: 500; + } + /* span.emoji { font-size: .8rem; } */ diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index 4812f757..eaf079a1 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -329,12 +329,12 @@ ul.chatlist { margin-top: -3px; } - span.emoji { + /* span.emoji { font-size: 1.2rem; margin: 0 .125rem; overflow: visible; //margin-top: -1.5px; - } + } */ } .user-title, .user-last-message {