Replies beside button
Some css fixes
This commit is contained in:
Eduard Kuzmenko
parent
18debfb4a6
commit
28be24d87d
@ -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);
|
||||||
|
|||||||
@ -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();
|
||||||
|
repliesFooter.message = message;
|
||||||
if(isFooter) {
|
repliesFooter.type = isFooter ? 'footer' : 'beside';
|
||||||
repliesFooter.message = message;
|
bubbleContainer.prepend(repliesFooter);
|
||||||
repliesFooter.type = 'footer';
|
|
||||||
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,46 +92,51 @@ 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;
|
||||||
|
|
||||||
let leftHTML = '', lastStyle = '';
|
if(this.type === 'footer') {
|
||||||
if(replies.recent_repliers) {
|
let leftHTML = '', lastStyle = '';
|
||||||
leftHTML += '<div class="replies-footer-avatars">'
|
if(replies.recent_repliers) {
|
||||||
/**
|
leftHTML += '<div class="replies-footer-avatars">'
|
||||||
* MACOS, ANDROID - без реверса
|
let l: string[] = [];
|
||||||
* WINDOWS DESKTOP - реверс
|
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>`);
|
||||||
let l: string[] = [];
|
});
|
||||||
replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => {
|
leftHTML += l.reverse().join('') + '</div>';
|
||||||
lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`;
|
} else {
|
||||||
l.push(`<avatar-element class="avatar-32" dialog="0" peer="${appPeersManager.getPeerId(peer)}" ${lastStyle}></avatar-element>`);
|
leftHTML = '<span class="tgico-comments"></span>';
|
||||||
});
|
}
|
||||||
leftHTML += l.reverse().join('') + '</div>';
|
|
||||||
} else {
|
let text: string;
|
||||||
leftHTML = '<span class="tgico-comments"></span>';
|
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>`;
|
||||||
|
|
||||||
let text: string;
|
const rippleContainer = document.createElement('div');
|
||||||
if(replies.replies) {
|
this.append(rippleContainer);
|
||||||
text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment');
|
ripple(rippleContainer);
|
||||||
} else {
|
} else {
|
||||||
text = 'Leave a Comment';
|
this.classList.add('bubble-beside-button');
|
||||||
}
|
this.innerHTML = `<span class="tgico-commentssticker"></span><span class="replies-beside-text">${formatNumber(replies.replies, 0) || ''}</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');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!this.updated) {
|
if(!this.updated) {
|
||||||
@ -142,13 +144,7 @@ class RepliesFooterElement extends HTMLElement {
|
|||||||
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated');
|
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated');
|
||||||
this.updated = true;
|
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);
|
||||||
@ -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,45 +1420,7 @@ $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 {
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rp {
|
.rp {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -1466,15 +1432,75 @@ $bubble-margin: .25rem;
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-unread {
|
&-beside {
|
||||||
.replies-footer-text {
|
flex-direction: column;
|
||||||
&:after {
|
width: 36px;
|
||||||
content: " ";
|
min-height: 36px;
|
||||||
background-color: $color-blue;
|
height: auto;
|
||||||
width: .5rem;
|
max-height: 52px;
|
||||||
height: .5rem;
|
bottom: 47px; // * forward button + 9px margin
|
||||||
margin-left: .75rem;
|
border-radius: 2rem;
|
||||||
border-radius: 50%;
|
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…
x
Reference in New Issue
Block a user