diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 67ac46736..246a0b051 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -4521,8 +4521,9 @@ export default class ChatBubbles { title = new PeerTitle({peerId: fwdFromId || message.fromId, withPremiumIcon: !isForward, middleware}).element; } + let replyContainer: HTMLElement; if(message.reply_to_mid && message.reply_to_mid !== this.chat.threadId && isMessage) { - await MessageRender.setReply({ + replyContainer = await MessageRender.setReply({ chat: this.chat, bubble, bubbleContainer, @@ -4555,7 +4556,9 @@ export default class ChatBubbles { nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */ const args: FormatterArguments = [title]; if(isStandaloneMedia) { - args.unshift(document.createElement('br')); + const br = document.createElement('br'); + br.classList.add('hide-ol'); + args.unshift(br); } nameDiv.append(i18n('ForwardedFrom', [args])); } @@ -4597,7 +4600,21 @@ export default class ChatBubbles { if(nameDiv) { nameDiv.classList.add('name'); + + if(isStandaloneMedia) { + nameContainer.append(nameContainer = document.createElement('div')); + nameContainer.classList.add('name-with-reply', 'floating-part'); + } else { + nameDiv.classList.add('floating-part'); + } + nameContainer.append(nameDiv); + + if(isStandaloneMedia && replyContainer) { + nameContainer.append(replyContainer); + } + } else if(isStandaloneMedia && replyContainer) { + replyContainer.classList.add('floating-part'); } } else { bubble.classList.add('hide-name'); diff --git a/src/components/chat/messageRender.ts b/src/components/chat/messageRender.ts index 4e8a7ee15..5ba53460f 100644 --- a/src/components/chat/messageRender.ts +++ b/src/components/chat/messageRender.ts @@ -170,9 +170,7 @@ export namespace MessageRender { const currentReplyDiv = isReplacing ? bubbleContainer.querySelector('.reply') : null; if(!message.reply_to_mid) { - if(currentReplyDiv) { - currentReplyDiv.remove(); - } + currentReplyDiv?.remove(); bubble.classList.remove('is-reply'); return; @@ -208,11 +206,16 @@ export namespace MessageRender { const {container, fillPromise} = wrapReply(originalPeerTitle, undefined, chat.animationGroup, originalMessage, chat.isAnyGroup ? titlePeerId : undefined); await fillPromise; if(currentReplyDiv) { + if(currentReplyDiv.classList.contains('floating-part')) { + container.classList.add('floating-part'); + } currentReplyDiv.replaceWith(container); } else { bubbleContainer.append(container); } // bubbleContainer.insertBefore(, nameContainer); bubble.classList.add('is-reply'); + + return container; }; } diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index 5fd1911c2..4da51778c 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/src/lib/appManagers/appMessagesManager.ts @@ -1991,7 +1991,12 @@ export class AppMessagesManager extends AppManager { dropAuthor: boolean, dropCaptions: boolean, sendAsPeerId: PeerId, + replyToMsgId?: number, // will be ignored + threadId?: number // will be ignored }> = {}) { + delete options.replyToMsgId; + delete options.threadId; + peerId = this.appPeersManager.getPeerMigratedTo(peerId) || peerId; mids = mids.slice().sort((a, b) => a - b); diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index b1edf8a77..37634f42b 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -1259,9 +1259,8 @@ $bubble-border-radius-big: 12px; } &.just-media { - .reply, - .name { - padding: 10px; + .floating-part { + padding: .3125rem .625rem; border-radius: 12px; position: absolute; top: 0; @@ -2289,6 +2288,25 @@ $bubble-border-radius-big: 12px; border-bottom-right-radius: $bubble-border-radius-medium !important; } } + + .name-with-reply { + .name { + padding: 0 !important; + + &:not(:last-child) { + .hide-ol { + display: none; + } + } + } + + .reply { + margin: .25rem 0 0; + padding: 0; + height: auto; + max-height: none; + } + } } // @keyframes arrow-shake { @@ -2464,8 +2482,7 @@ $bubble-border-radius-big: 12px; } &.just-media { - .reply, - .name { + .floating-part { left: calc(100% + 10px); @include respond-to(handhelds) { @@ -2646,8 +2663,7 @@ $bubble-border-radius-big: 12px; } &.just-media { - .reply, - .name { + .floating-part { right: calc(100% + 10px); } diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index d78a289f7..e39a125f0 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -203,6 +203,10 @@ ul.chatlist { color: var(--primary-text-color); } + .premium-icon { + margin-top: -.125rem; + } + &.menu-open { --background: var(--light-secondary-text-color); } @@ -391,7 +395,7 @@ ul.chatlist { img.emoji { vertical-align: top; - margin-top: 4px; + margin-top: 1px; width: 18px; height: 18px; }