From 28be24d87df5047770d1ff117201109f748b5bf5 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Tue, 22 Dec 2020 05:59:37 +0200 Subject: [PATCH] Replies beside button Some css fixes --- src/components/chat/bubbles.ts | 2 +- src/components/chat/messageRender.ts | 84 +++++++++--------- src/scss/partials/_chatBubble.scss | 128 ++++++++++++++++----------- 3 files changed, 118 insertions(+), 96 deletions(-) diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index e2af99e0..c89d1867 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -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); diff --git a/src/components/chat/messageRender.ts b/src/components/chat/messageRender.ts index 3e090448..9d63e1ab 100644 --- a/src/components/chat/messageRender.ts +++ b/src/components/chat/messageRender.ts @@ -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 { 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 += '
' - /** - * 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(``); - }); - leftHTML += l.reverse().join('') + '
'; - } else { - leftHTML = ''; - } + if(this.type === 'footer') { + let leftHTML = '', lastStyle = ''; + if(replies.recent_repliers) { + leftHTML += '
' + let l: string[] = []; + replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => { + lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`; + l.push(``); + }); + leftHTML += l.reverse().join('') + '
'; + } else { + leftHTML = ''; + } + + 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}${text}`; - let text: string; - if(replies.replies) { - text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment'); + const rippleContainer = document.createElement('div'); + this.append(rippleContainer); + ripple(rippleContainer); } 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.classList.add('bubble-beside-button'); + this.innerHTML = `${formatNumber(replies.replies, 0) || ''}`; } if(!this.updated) { @@ -142,13 +144,7 @@ class RepliesFooterElement extends HTMLElement { appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated'); this.updated = true; } - - this.innerHTML = `${leftHTML}${text}`; - - const rippleContainer = document.createElement('div'); - this.append(rippleContainer); - ripple(rippleContainer); } } -customElements.define('replies-footer-element', RepliesFooterElement); \ No newline at end of file +customElements.define('replies-element', RepliesElement); \ No newline at end of file diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 48b590e0..da4c2ec0 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -334,8 +334,8 @@ $bubble-margin: .25rem; .forward { svg { - width: 20px; - height: 20px; + width: 22px; + height: 22px; } } @@ -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; } } } + + &.sticker .message { + bottom: 0; + } } .time { @@ -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; 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%; + } } } }