Replies beside button

Some css fixes

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);

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();
+    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) => {
   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(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 {
-      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) {
@@ -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);

src/scss/partials/_chatBubble.scss

@@ -334,8 +334,8 @@ $bubble-margin: .25rem;
 
   .forward {
     svg {
-      width: 20px;
+      width: 22px;
-      height: 20px;
+      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 {
+  .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 {
       width: 100%;
       height: 100%;
@@ -1466,15 +1432,75 @@ $bubble-margin: .25rem;
       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%;
+          }
         }
       }
     }