Browse Source

Fix broken replies layout

Fix displaying unneeded quick reaction
master
Eduard Kuzmenko 3 years ago
parent
commit
03a21adbdc
  1. 1
      src/components/chat/bubbles.ts
  2. 65
      src/components/chat/replies.ts
  3. 16
      src/scss/partials/_chatBubble.scss

1
src/components/chat/bubbles.ts

@ -961,6 +961,7 @@ export default class ChatBubbles { @@ -961,6 +961,7 @@ export default class ChatBubbles {
]).then(([availableReactions]) => {
const availableReaction = availableReactions[0];
if(!availableReaction) {
hoverReaction.remove();
return;
}

65
src/components/chat/replies.ts

@ -11,15 +11,13 @@ import appMessagesManager from "../../lib/appManagers/appMessagesManager"; @@ -11,15 +11,13 @@ import appMessagesManager from "../../lib/appManagers/appMessagesManager";
import appPeersManager from "../../lib/appManagers/appPeersManager";
import rootScope from "../../lib/rootScope";
import { ripple } from "../ripple";
import AvatarElement from "../avatar";
import { i18n } from "../../lib/langPack";
import I18n from "../../lib/langPack";
import replaceContent from "../../helpers/dom/replaceContent";
import appChatsManager from "../../lib/appManagers/appChatsManager";
import StackedAvatars from "../stackedAvatars";
const TAG_NAME = 'replies-element';
rootScope.addEventListener('replies_updated', (e) => {
const message = e;
rootScope.addEventListener('replies_updated', (message) => {
(Array.from(document.querySelectorAll(TAG_NAME + `[data-post-key="${message.peerId}_${message.mid}"]`)) as RepliesElement[]).forEach(element => {
element.message = message;
element.render();
@ -31,6 +29,8 @@ export default class RepliesElement extends HTMLElement { @@ -31,6 +29,8 @@ export default class RepliesElement extends HTMLElement {
public type: 'footer' | 'beside';
public loadPromises: Promise<any>[];
public lazyLoadQueue: LazyLoadQueueIntersector;
public stackedAvatars: StackedAvatars;
public text: I18n.IntlElement;
private updated = false;
@ -63,33 +63,18 @@ export default class RepliesElement extends HTMLElement { @@ -63,33 +63,18 @@ export default class RepliesElement extends HTMLElement {
leftPart = null;
}
if(!leftPart) {
leftPart = document.createElement('div');
leftPart.classList.add('replies-footer-avatars');
}
replies.recent_repliers.slice().reverse().forEach((peer, idx) => {
let avatarElem = leftPart.children[idx] as AvatarElement;
if(!avatarElem) {
avatarElem = new AvatarElement();
avatarElem.setAttribute('dialog', '0');
avatarElem.classList.add('avatar-30');
avatarElem.lazyLoadQueue = this.lazyLoadQueue;
if(this.loadPromises) {
avatarElem.loadPromises = this.loadPromises;
}
}
if(!this.stackedAvatars) {
this.stackedAvatars = new StackedAvatars({
lazyLoadQueue: this.lazyLoadQueue,
avatarSize: 30
});
avatarElem.setAttribute('peer', '' + appPeersManager.getPeerId(peer));
this.stackedAvatars.container.classList.add('replies-footer-avatars');
}
if(!avatarElem.parentNode) {
leftPart.append(avatarElem);
}
});
leftPart = this.stackedAvatars.container;
// if were 3 and became 2
(Array.from(leftPart.children) as HTMLElement[]).slice(replies.recent_repliers.length).forEach(el => el.remove());
this.stackedAvatars.render(replies.recent_repliers.map(peer => appPeersManager.getPeerId(peer)), this.loadPromises);
} else {
if(leftPart && !leftPart.classList.contains('tgico-comments')) {
leftPart.remove();
@ -103,29 +88,33 @@ export default class RepliesElement extends HTMLElement { @@ -103,29 +88,33 @@ export default class RepliesElement extends HTMLElement {
}
if(!leftPart.parentElement) {
this.append(leftPart);
this.prepend(leftPart);
}
if(!this.text) {
this.text = new I18n.IntlElement();
}
let text: HTMLElement;
const text = this.text;
if(replies) {
if(replies.replies) {
text = i18n('Comments', [replies.replies]);
text.compareAndUpdate({key: 'Comments', args: [replies.replies]});
} else {
text = i18n('LeaveAComment');
text.compareAndUpdate({key: 'LeaveAComment'});
}
} else {
text = i18n('ViewInChat');
text.compareAndUpdate({key: 'ViewInChat'});
}
if(replies) {
const historyStorage = appMessagesManager.getHistoryStorage(replies.channel_id.toPeerId(true));
// const historyStorage = appMessagesManager.getHistoryStorage(replies.channel_id.toPeerId(true));
let isUnread = false;
if(replies.replies) {
if(replies.read_max_id !== undefined && replies.max_id !== undefined) {
isUnread = replies.read_max_id < replies.max_id;
} else {
}/* else {
isUnread = !historyStorage.readMaxId || historyStorage.readMaxId < (replies.max_id || 0);
}
} */
}
this.classList.toggle('is-unread', isUnread);
}
@ -144,7 +133,7 @@ export default class RepliesElement extends HTMLElement { @@ -144,7 +133,7 @@ export default class RepliesElement extends HTMLElement {
this.append(textSpan, iconSpan, rippleContainer);
}
replaceContent(textSpan, text);
replaceContent(textSpan, text.element);
} else {
this.classList.add('bubble-beside-button');
this.innerHTML = `<span class="tgico-commentssticker"></span><span class="replies-beside-text">${replies?.replies ? formatNumber(replies.replies, 0) : ''}</span>`;

16
src/scss/partials/_chatBubble.scss

@ -2014,20 +2014,8 @@ $bubble-beside-button-width: 38px; @@ -2014,20 +2014,8 @@ $bubble-beside-button-width: 38px;
}
&-avatars {
display: flex;
flex-direction: row-reverse;
avatar-element {
width: 34px;
height: 34px;
border: 2px solid var(--surface-color);
cursor: pointer;
z-index: 0; // * fix border blinking
&:not(:first-child) {
margin-right: -14px;
}
}
--margin-right: -.875rem;
--border-size: 2px;
}
.tgico-next {

Loading…
Cancel
Save