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();
-    
-    if(isFooter) {
     repliesFooter.message = message;
-      repliesFooter.type = 'footer';
+    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,26 +92,21 @@ 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;
 
+    if(this.type === 'footer') {
       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);"`;
@@ -137,18 +129,22 @@ class RepliesFooterElement extends HTMLElement {
         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>`;
 
       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) {
+      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);

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,7 +1420,39 @@ $bubble-margin: .25rem;
     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;
       border-top: 1px solid #dadce0;
       position: relative;
@@ -1455,19 +1491,8 @@ $bubble-margin: .25rem;
         right: .5rem;
       }
   
-    .rp {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      overflow: hidden;
-      border-radius: inherit;
-      cursor: pointer;
-    }
-
       &.is-unread {
-      .replies-footer-text {
+        .replies-text {
           &:after {
             content: " ";
             background-color: $color-blue;
@@ -1479,6 +1504,7 @@ $bubble-margin: .25rem;
         }
       }
     }
+  }
 }
 
 // * fix scroll with only 1 bubble