Fix floating name and reply layout
Ignore reply mid when forwarding messages
This commit is contained in:
parent
ff5286a58f
commit
e570472fea
|
@ -4521,8 +4521,9 @@ export default class ChatBubbles {
|
||||||
title = new PeerTitle({peerId: fwdFromId || message.fromId, withPremiumIcon: !isForward, middleware}).element;
|
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) {
|
if(message.reply_to_mid && message.reply_to_mid !== this.chat.threadId && isMessage) {
|
||||||
await MessageRender.setReply({
|
replyContainer = await MessageRender.setReply({
|
||||||
chat: this.chat,
|
chat: this.chat,
|
||||||
bubble,
|
bubble,
|
||||||
bubbleContainer,
|
bubbleContainer,
|
||||||
|
@ -4555,7 +4556,9 @@ export default class ChatBubbles {
|
||||||
nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */
|
nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */
|
||||||
const args: FormatterArguments = [title];
|
const args: FormatterArguments = [title];
|
||||||
if(isStandaloneMedia) {
|
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]));
|
nameDiv.append(i18n('ForwardedFrom', [args]));
|
||||||
}
|
}
|
||||||
|
@ -4597,7 +4600,21 @@ export default class ChatBubbles {
|
||||||
|
|
||||||
if(nameDiv) {
|
if(nameDiv) {
|
||||||
nameDiv.classList.add('name');
|
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);
|
nameContainer.append(nameDiv);
|
||||||
|
|
||||||
|
if(isStandaloneMedia && replyContainer) {
|
||||||
|
nameContainer.append(replyContainer);
|
||||||
|
}
|
||||||
|
} else if(isStandaloneMedia && replyContainer) {
|
||||||
|
replyContainer.classList.add('floating-part');
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
bubble.classList.add('hide-name');
|
bubble.classList.add('hide-name');
|
||||||
|
|
|
@ -170,9 +170,7 @@ export namespace MessageRender {
|
||||||
|
|
||||||
const currentReplyDiv = isReplacing ? bubbleContainer.querySelector('.reply') : null;
|
const currentReplyDiv = isReplacing ? bubbleContainer.querySelector('.reply') : null;
|
||||||
if(!message.reply_to_mid) {
|
if(!message.reply_to_mid) {
|
||||||
if(currentReplyDiv) {
|
currentReplyDiv?.remove();
|
||||||
currentReplyDiv.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
bubble.classList.remove('is-reply');
|
bubble.classList.remove('is-reply');
|
||||||
return;
|
return;
|
||||||
|
@ -208,11 +206,16 @@ export namespace MessageRender {
|
||||||
const {container, fillPromise} = wrapReply(originalPeerTitle, undefined, chat.animationGroup, originalMessage, chat.isAnyGroup ? titlePeerId : undefined);
|
const {container, fillPromise} = wrapReply(originalPeerTitle, undefined, chat.animationGroup, originalMessage, chat.isAnyGroup ? titlePeerId : undefined);
|
||||||
await fillPromise;
|
await fillPromise;
|
||||||
if(currentReplyDiv) {
|
if(currentReplyDiv) {
|
||||||
|
if(currentReplyDiv.classList.contains('floating-part')) {
|
||||||
|
container.classList.add('floating-part');
|
||||||
|
}
|
||||||
currentReplyDiv.replaceWith(container);
|
currentReplyDiv.replaceWith(container);
|
||||||
} else {
|
} else {
|
||||||
bubbleContainer.append(container);
|
bubbleContainer.append(container);
|
||||||
}
|
}
|
||||||
// bubbleContainer.insertBefore(, nameContainer);
|
// bubbleContainer.insertBefore(, nameContainer);
|
||||||
bubble.classList.add('is-reply');
|
bubble.classList.add('is-reply');
|
||||||
|
|
||||||
|
return container;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1991,7 +1991,12 @@ export class AppMessagesManager extends AppManager {
|
||||||
dropAuthor: boolean,
|
dropAuthor: boolean,
|
||||||
dropCaptions: boolean,
|
dropCaptions: boolean,
|
||||||
sendAsPeerId: PeerId,
|
sendAsPeerId: PeerId,
|
||||||
|
replyToMsgId?: number, // will be ignored
|
||||||
|
threadId?: number // will be ignored
|
||||||
}> = {}) {
|
}> = {}) {
|
||||||
|
delete options.replyToMsgId;
|
||||||
|
delete options.threadId;
|
||||||
|
|
||||||
peerId = this.appPeersManager.getPeerMigratedTo(peerId) || peerId;
|
peerId = this.appPeersManager.getPeerMigratedTo(peerId) || peerId;
|
||||||
mids = mids.slice().sort((a, b) => a - b);
|
mids = mids.slice().sort((a, b) => a - b);
|
||||||
|
|
||||||
|
|
|
@ -1259,9 +1259,8 @@ $bubble-border-radius-big: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.just-media {
|
&.just-media {
|
||||||
.reply,
|
.floating-part {
|
||||||
.name {
|
padding: .3125rem .625rem;
|
||||||
padding: 10px;
|
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -2289,6 +2288,25 @@ $bubble-border-radius-big: 12px;
|
||||||
border-bottom-right-radius: $bubble-border-radius-medium !important;
|
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 {
|
// @keyframes arrow-shake {
|
||||||
|
@ -2464,8 +2482,7 @@ $bubble-border-radius-big: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.just-media {
|
&.just-media {
|
||||||
.reply,
|
.floating-part {
|
||||||
.name {
|
|
||||||
left: calc(100% + 10px);
|
left: calc(100% + 10px);
|
||||||
|
|
||||||
@include respond-to(handhelds) {
|
@include respond-to(handhelds) {
|
||||||
|
@ -2646,8 +2663,7 @@ $bubble-border-radius-big: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.just-media {
|
&.just-media {
|
||||||
.reply,
|
.floating-part {
|
||||||
.name {
|
|
||||||
right: calc(100% + 10px);
|
right: calc(100% + 10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -203,6 +203,10 @@ ul.chatlist {
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.premium-icon {
|
||||||
|
margin-top: -.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
&.menu-open {
|
&.menu-open {
|
||||||
--background: var(--light-secondary-text-color);
|
--background: var(--light-secondary-text-color);
|
||||||
}
|
}
|
||||||
|
@ -391,7 +395,7 @@ ul.chatlist {
|
||||||
|
|
||||||
img.emoji {
|
img.emoji {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin-top: 4px;
|
margin-top: 1px;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user