Browse Source

Replies beside button

Some css fixes
master
Eduard Kuzmenko 4 years ago
parent
commit
28be24d87d
  1. 2
      src/components/chat/bubbles.ts
  2. 38
      src/components/chat/messageRender.ts
  3. 58
      src/scss/partials/_chatBubble.scss

2
src/components/chat/bubbles.ts

@ -522,7 +522,7 @@ export default class ChatBubbles {
return; return;
} }
const commentsDiv: HTMLElement = findUpClassName(target, 'replies-footer'); const commentsDiv: HTMLElement = findUpClassName(target, 'replies');
if(commentsDiv) { if(commentsDiv) {
const mid = +bubble.dataset.mid; const mid = +bubble.dataset.mid;
const message = this.chat.getMessage(mid); const message = this.chat.getMessage(mid);

38
src/components/chat/messageRender.ts

@ -69,25 +69,22 @@ export namespace MessageRender {
messageDiv: HTMLElement messageDiv: HTMLElement
}) => { }) => {
const isFooter = !bubble.classList.contains('sticker') && !bubble.classList.contains('emoji-big'); const isFooter = !bubble.classList.contains('sticker') && !bubble.classList.contains('emoji-big');
const repliesFooter = new RepliesFooterElement(); const repliesFooter = new RepliesElement();
if(isFooter) {
repliesFooter.message = message; repliesFooter.message = message;
repliesFooter.type = 'footer'; repliesFooter.type = isFooter ? 'footer' : 'beside';
bubbleContainer.prepend(repliesFooter); bubbleContainer.prepend(repliesFooter);
}
}; };
} }
rootScope.on('replies_updated', (e) => { rootScope.on('replies_updated', (e) => {
const message = e.detail; const message = e.detail;
(Array.from(document.querySelectorAll(`replies-footer-element[data-post-key="${message.peerId}_${message.mid}"]`)) as RepliesFooterElement[]).forEach(element => { (Array.from(document.querySelectorAll(`replies-footer-element[data-post-key="${message.peerId}_${message.mid}"]`)) as RepliesElement[]).forEach(element => {
element.message = message; element.message = message;
element.render(); element.render();
}); });
}); });
class RepliesFooterElement extends HTMLElement { class RepliesElement extends HTMLElement {
public message: Message.message; public message: Message.message;
public type: 'footer' | 'beside'; public type: 'footer' | 'beside';
@ -95,26 +92,21 @@ class RepliesFooterElement extends HTMLElement {
constructor() { constructor() {
super(); super();
this.classList.add('replies-footer');
} }
connectedCallback() { connectedCallback() {
this.render(); this.render();
this.dataset.postKey = this.message.peerId + '_' + this.message.mid; this.dataset.postKey = this.message.peerId + '_' + this.message.mid;
this.classList.add('replies', 'replies-' + this.type);
} }
public render() { public render() {
const replies = this.message.replies; const replies = this.message.replies;
if(this.type === 'footer') {
let leftHTML = '', lastStyle = ''; let leftHTML = '', lastStyle = '';
if(replies.recent_repliers) { if(replies.recent_repliers) {
leftHTML += '<div class="replies-footer-avatars">' leftHTML += '<div class="replies-footer-avatars">'
/**
* MACOS, ANDROID - без реверса
* WINDOWS DESKTOP - реверс
* все приложения накладывают аватарку первую на вторую, а в макете зато вторая на первую, ЛОЛ!
*/
let l: string[] = []; let l: string[] = [];
replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => { replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => {
lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`; lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`;
@ -137,18 +129,22 @@ class RepliesFooterElement extends HTMLElement {
this.classList.add('is-unread'); this.classList.add('is-unread');
} }
if(!this.updated) {
appMessagesManager.subscribeRepliesThread(this.message.peerId, this.message.mid);
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated');
this.updated = true;
}
this.innerHTML = `${leftHTML}<span class="replies-footer-text" ${lastStyle}>${text}</span><span class="tgico-next"></span>`; this.innerHTML = `${leftHTML}<span class="replies-footer-text" ${lastStyle}>${text}</span><span class="tgico-next"></span>`;
const rippleContainer = document.createElement('div'); const rippleContainer = document.createElement('div');
this.append(rippleContainer); this.append(rippleContainer);
ripple(rippleContainer); ripple(rippleContainer);
} else {
this.classList.add('bubble-beside-button');
this.innerHTML = `<span class="tgico-commentssticker"></span><span class="replies-beside-text">${formatNumber(replies.replies, 0) || ''}</span>`;
}
if(!this.updated) {
appMessagesManager.subscribeRepliesThread(this.message.peerId, this.message.mid);
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated');
this.updated = true;
}
} }
} }
customElements.define('replies-footer-element', RepliesFooterElement); customElements.define('replies-element', RepliesElement);

58
src/scss/partials/_chatBubble.scss

@ -334,8 +334,8 @@ $bubble-margin: .25rem;
.forward { .forward {
svg { svg {
width: 20px; width: 22px;
height: 20px; height: 22px;
} }
} }
@ -1221,7 +1221,7 @@ $bubble-margin: .25rem;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 2.5px; padding: 0 2.5px;
line-height: 20px; line-height: 18px;
pointer-events: all; // show title pointer-events: all; // show title
white-space: nowrap; white-space: nowrap;
@ -1230,6 +1230,10 @@ $bubble-margin: .25rem;
} }
} }
} }
&.sticker .message {
bottom: 0;
}
} }
.time { .time {
@ -1416,7 +1420,39 @@ $bubble-margin: .25rem;
white-space: normal; // * fix due to .message white-space prewrap white-space: normal; // * fix due to .message white-space prewrap
} }
.replies-footer { .replies {
.rp {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
border-radius: inherit;
cursor: pointer;
}
&-beside {
flex-direction: column;
width: 36px;
min-height: 36px;
height: auto;
max-height: 52px;
bottom: 47px; // * forward button + 9px margin
border-radius: 2rem;
right: -44px; // * because not 38px, as forward button
padding: 5.5px 0;
.tgico-commentssticker {
font-size: 23px;
}
&-text {
font-size: .75rem;
}
}
&-footer {
height: 50px; height: 50px;
border-top: 1px solid #dadce0; border-top: 1px solid #dadce0;
position: relative; position: relative;
@ -1455,19 +1491,8 @@ $bubble-margin: .25rem;
right: .5rem; right: .5rem;
} }
.rp {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
border-radius: inherit;
cursor: pointer;
}
&.is-unread { &.is-unread {
.replies-footer-text { .replies-text {
&:after { &:after {
content: " "; content: " ";
background-color: $color-blue; background-color: $color-blue;
@ -1480,6 +1505,7 @@ $bubble-margin: .25rem;
} }
} }
} }
}
// * fix scroll with only 1 bubble // * fix scroll with only 1 bubble
.bubbles-date-group:last-of-type { .bubbles-date-group:last-of-type {

Loading…
Cancel
Save