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. 84
      src/components/chat/messageRender.ts
  3. 128
      src/scss/partials/_chatBubble.scss

2
src/components/chat/bubbles.ts

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

84
src/components/chat/messageRender.ts

@ -69,25 +69,22 @@ export namespace MessageRender { @@ -69,25 +69,22 @@ export namespace MessageRender {
messageDiv: HTMLElement
}) => {
const isFooter = !bubble.classList.contains('sticker') && !bubble.classList.contains('emoji-big');
const repliesFooter = new RepliesFooterElement();
if(isFooter) {
repliesFooter.message = message;
repliesFooter.type = 'footer';
bubbleContainer.prepend(repliesFooter);
}
const repliesFooter = new RepliesElement();
repliesFooter.message = message;
repliesFooter.type = isFooter ? 'footer' : 'beside';
bubbleContainer.prepend(repliesFooter);
};
}
rootScope.on('replies_updated', (e) => {
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.render();
});
});
class RepliesFooterElement extends HTMLElement {
class RepliesElement extends HTMLElement {
public message: Message.message;
public type: 'footer' | 'beside';
@ -95,46 +92,51 @@ class RepliesFooterElement extends HTMLElement { @@ -95,46 +92,51 @@ class RepliesFooterElement extends HTMLElement {
constructor() {
super();
this.classList.add('replies-footer');
}
connectedCallback() {
this.render();
this.dataset.postKey = this.message.peerId + '_' + this.message.mid;
this.classList.add('replies', 'replies-' + this.type);
}
public render() {
const replies = this.message.replies;
let leftHTML = '', lastStyle = '';
if(replies.recent_repliers) {
leftHTML += '<div class="replies-footer-avatars">'
/**
* MACOS, ANDROID - без реверса
* WINDOWS DESKTOP - реверс
* все приложения накладывают аватарку первую на вторую, а в макете зато вторая на первую, ЛОЛ!
*/
let l: string[] = [];
replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => {
lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`;
l.push(`<avatar-element class="avatar-32" dialog="0" peer="${appPeersManager.getPeerId(peer)}" ${lastStyle}></avatar-element>`);
});
leftHTML += l.reverse().join('') + '</div>';
} else {
leftHTML = '<span class="tgico-comments"></span>';
}
if(this.type === 'footer') {
let leftHTML = '', lastStyle = '';
if(replies.recent_repliers) {
leftHTML += '<div class="replies-footer-avatars">'
let l: string[] = [];
replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => {
lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`;
l.push(`<avatar-element class="avatar-32" dialog="0" peer="${appPeersManager.getPeerId(peer)}" ${lastStyle}></avatar-element>`);
});
leftHTML += l.reverse().join('') + '</div>';
} else {
leftHTML = '<span class="tgico-comments"></span>';
}
let text: string;
if(replies.replies) {
text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment');
} else {
text = 'Leave a Comment';
}
let text: string;
if(replies.replies) {
text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment');
} else {
text = 'Leave a Comment';
}
const historyStorage = appMessagesManager.getHistoryStorage(-replies.channel_id);
if(replies.read_max_id < replies.max_id && (!historyStorage.readMaxId || historyStorage.readMaxId < replies.max_id)) {
this.classList.add('is-unread');
}
this.innerHTML = `${leftHTML}<span class="replies-footer-text" ${lastStyle}>${text}</span><span class="tgico-next"></span>`;
const historyStorage = appMessagesManager.getHistoryStorage(-replies.channel_id);
if(replies.read_max_id < replies.max_id && (!historyStorage.readMaxId || historyStorage.readMaxId < replies.max_id)) {
this.classList.add('is-unread');
const rippleContainer = document.createElement('div');
this.append(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) {
@ -142,13 +144,7 @@ class RepliesFooterElement extends HTMLElement { @@ -142,13 +144,7 @@ class RepliesFooterElement extends HTMLElement {
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>`;
const rippleContainer = document.createElement('div');
this.append(rippleContainer);
ripple(rippleContainer);
}
}
customElements.define('replies-footer-element', RepliesFooterElement);
customElements.define('replies-element', RepliesElement);

128
src/scss/partials/_chatBubble.scss

@ -334,8 +334,8 @@ $bubble-margin: .25rem; @@ -334,8 +334,8 @@ $bubble-margin: .25rem;
.forward {
svg {
width: 20px;
height: 20px;
width: 22px;
height: 22px;
}
}
@ -1221,7 +1221,7 @@ $bubble-margin: .25rem; @@ -1221,7 +1221,7 @@ $bubble-margin: .25rem;
display: flex;
align-items: center;
padding: 0 2.5px;
line-height: 20px;
line-height: 18px;
pointer-events: all; // show title
white-space: nowrap;
@ -1230,6 +1230,10 @@ $bubble-margin: .25rem; @@ -1230,6 +1230,10 @@ $bubble-margin: .25rem;
}
}
}
&.sticker .message {
bottom: 0;
}
}
.time {
@ -1416,45 +1420,7 @@ $bubble-margin: .25rem; @@ -1416,45 +1420,7 @@ $bubble-margin: .25rem;
white-space: normal; // * fix due to .message white-space prewrap
}
.replies-footer {
height: 50px;
border-top: 1px solid #dadce0;
position: relative;
display: flex;
align-items: center;
padding: 0 .5rem;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: $color-blue;
min-width: 15rem;
user-select: none;
.tgico-comments, .tgico-next {
font-size: 1.4375rem;
}
&-text {
font-weight: 500;
margin-left: 13px;
display: flex;
align-items: center;
}
&-avatars {
display: flex;
flex-direction: row-reverse;
avatar-element {
border: 2px solid #fff;
cursor: pointer;
}
}
.tgico-next {
position: absolute;
right: .5rem;
}
.replies {
.rp {
width: 100%;
height: 100%;
@ -1466,15 +1432,75 @@ $bubble-margin: .25rem; @@ -1466,15 +1432,75 @@ $bubble-margin: .25rem;
cursor: pointer;
}
&.is-unread {
.replies-footer-text {
&:after {
content: " ";
background-color: $color-blue;
width: .5rem;
height: .5rem;
margin-left: .75rem;
border-radius: 50%;
&-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;
border-top: 1px solid #dadce0;
position: relative;
display: flex;
align-items: center;
padding: 0 .5rem;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: $color-blue;
min-width: 15rem;
user-select: none;
.tgico-comments, .tgico-next {
font-size: 1.4375rem;
}
&-text {
font-weight: 500;
margin-left: 13px;
display: flex;
align-items: center;
}
&-avatars {
display: flex;
flex-direction: row-reverse;
avatar-element {
border: 2px solid #fff;
cursor: pointer;
}
}
.tgico-next {
position: absolute;
right: .5rem;
}
&.is-unread {
.replies-text {
&:after {
content: " ";
background-color: $color-blue;
width: .5rem;
height: .5rem;
margin-left: .75rem;
border-radius: 50%;
}
}
}
}

Loading…
Cancel
Save