new css & reply fixes & scroll changes

src/components/emoticonsDropdown.ts

@@ -36,7 +36,7 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
   });
   (tabs.children[0] as HTMLLIElement).click(); // set media
 
-  let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: Scrollable) => {
+  let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: Scrollable, menuScroll?: Scrollable) => {
     menu.addEventListener('click', function(e) {
       let target = e.target as HTMLLIElement;
       target = findUpTag(target, 'LI');
@@ -44,8 +44,11 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
       let index = whichChild(target);
       let y = heights[index - 1/* 2 */] || 0; // 10 == padding .scrollable
 
-      console.log('emoticonsMenuOnClick', index, y, scroll.container.scrollHeight, scroll);
+      /* if(menuScroll) {
-
+        menuScroll.container.scrollLeft = target.scrollWidth * index;
+      }
+      console.log('emoticonsMenuOnClick', menu.getBoundingClientRect(), target.getBoundingClientRect());
+ */
       scroll.onAddedBottom = () => { // привет, костыль, давно не виделись!
         scroll.container.scrollTop = y;
         scroll.onAddedBottom = () => {};
@@ -54,7 +57,7 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
     });
   };
 
-  let emoticonsContentOnScroll = (menu: HTMLUListElement, heights: number[], prevCategoryIndex: number, scroll: HTMLDivElement) => {
+  let emoticonsContentOnScroll = (menu: HTMLUListElement, heights: number[], prevCategoryIndex: number, scroll: HTMLDivElement, menuScroll?: Scrollable) => {
     let y = scroll.scrollTop;
 
     //console.log(heights, y);
@@ -66,6 +69,14 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
         prevCategoryIndex = i/*  + 1 */;
         menu.children[prevCategoryIndex].classList.add('active');
 
+        if(menuScroll) {
+          if(i < heights.length - 4) {
+            menuScroll.container.scrollLeft = (i - 3) * 50;
+          } else {
+            menuScroll.container.scrollLeft = i * 50;
+          }
+        }
+
         break;
       }
     }
@@ -350,11 +361,11 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
       lazyLoadQueue.check();
       lottieLoader.checkAnimations();
 
-      prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll.container);
+      prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll.container, menuScroll);
     });
     stickersScroll.setVirtualContainer(stickersDiv);
 
-    emoticonsMenuOnClick(menu, heights, stickersScroll);
+    emoticonsMenuOnClick(menu, heights, stickersScroll, menuScroll);
 
     stickersInit = null;
   };

src/components/scrollable.ts

@@ -1,4 +1,4 @@
-import { isElementInViewport, isScrolledIntoView } from "../lib/utils";
+import { isElementInViewport, isScrolledIntoView, cancelEvent } from "../lib/utils";
 
 export default class Scrollable {
   public container: HTMLDivElement;
@@ -8,6 +8,7 @@ export default class Scrollable {
   public side: string;
   public scrollType: string;
   public scrollSide: string;
+  public clientAxis: string;
 
   public scrollSize = -1;
   public size = 0;
@@ -64,12 +65,14 @@ export default class Scrollable {
       this.side = 'left';
       this.scrollType = 'scrollWidth';
       this.scrollSide = 'scrollLeft';
+      this.clientAxis = 'clientX';
     } else if(y) {
       this.container.classList.add('scrollable-y');
       this.type = 'height';
       this.side = 'top';
       this.scrollType = 'scrollHeight';
       this.scrollSide = 'scrollTop';
+      this.clientAxis = 'clientY';
     } else {
       throw new Error('no side for scroll');
     }
@@ -80,6 +83,28 @@ export default class Scrollable {
     // @ts-ignore
     this.thumb.style[this.type] = '30px';
 
+    let onMouseMove = (e: MouseEvent) => {
+      let rect = this.thumb.getBoundingClientRect();
+
+      let diff: number;
+      // @ts-ignore
+      diff = e[this.clientAxis] - rect[this.side];
+      // @ts-ignore
+      this.container[this.scrollSide] += diff * 0.5;
+
+      console.log('onMouseMove', e, diff);
+
+      cancelEvent(e);
+    };
+
+    this.thumb.addEventListener('mousedown', () => {
+      window.addEventListener('mousemove', onMouseMove);
+
+      window.addEventListener('mouseup', () => {
+        window.removeEventListener('mousemove', onMouseMove);
+      }, {once: true});
+    });
+
     this.container.addEventListener('mouseover', this.resize.bind(this));
     window.addEventListener('resize', this.resize.bind(this));
 

src/lib/appManagers/appImManager.ts

@@ -140,7 +140,13 @@ class ChatInput {
 
     this.messageInput.addEventListener('keydown', (e: KeyboardEvent) => {
       if(e.key == 'Enter') {
-        if(e.shiftKey || e.ctrlKey) {
+        /* if(e.ctrlKey || e.metaKey) {
+          this.messageInput.innerHTML += '<br>';
+          placeCaretAtEnd(this.message)
+          return;
+        } */
+
+        if(e.shiftKey || e.ctrlKey || e.metaKey) {
           return;
         }
   
@@ -646,20 +652,24 @@ export class AppImManager {
           this.pinnedMessageContent.innerHTML = RichTextProcessor.wrapEmojiText(message.message);
         }
 
-        let idx = this.needUpdate.findIndex(v => v.replyMid == mid);
+        let length = this.needUpdate.length;
-        if(idx !== -1) {
+        for(let i = length - 1; i >= 0; --i) {
-          let {mid, replyMid} = this.needUpdate.splice(idx, 1)[0];
+          if(this.needUpdate[i].replyMid == mid) {
-          let bubble = this.bubbles[mid];
+            let {mid, replyMid} = this.needUpdate.splice(i, 1)[0];
-          if(!bubble) return;
 
-          let message = appMessagesManager.getMessage(mid);
+            //this.log('messages_downloaded', mid, replyMid, i, this.needUpdate, this.needUpdate.length, mids, this.bubbles[mid]);
-
+            let bubble = this.bubbles[mid];
-          let repliedMessage = appMessagesManager.getMessage(replyMid);
+            if(!bubble) return;
-          if(repliedMessage.deleted) { // чтобы не пыталось бесконечно загрузить удалённое сообщение
+  
-            delete message.reply_to_mid; // WARNING!
+            let message = appMessagesManager.getMessage(mid);
+  
+            let repliedMessage = appMessagesManager.getMessage(replyMid);
+            if(repliedMessage.deleted) { // чтобы не пыталось бесконечно загрузить удалённое сообщение
+              delete message.reply_to_mid; // WARNING!
+            }
+  
+            this.renderMessage(message, false, false, bubble, false);
           }
-
-          this.renderMessage(message, false, false, bubble, false);
         }
       });
     });
@@ -1517,6 +1527,10 @@ export class AppImManager {
 
     //messageDiv.innerText = message.message;
 
+    if(!multipleRender) {
+      this.scrollPosition.prepareFor(reverse ? 'up' : 'down'); // лагает из-за этого
+    }
+
     // bubble
     if(!bubble) {
       bubble = document.createElement('div');
@@ -1870,10 +1884,9 @@ export class AppImManager {
 
           // need to download separately
           if(originalMessage._ == 'messageEmpty') {
-            this.log('message to render reply empty, need download');
+            this.log('message to render reply empty, need download', message, message.reply_to_mid);
-            if(appMessagesManager.wrapSingleMessage(message.reply_to_mid).loading) {
+            appMessagesManager.wrapSingleMessage(message.reply_to_mid);
-              this.needUpdate.push({replyMid: message.reply_to_mid, mid: message.mid});
+            this.needUpdate.push({replyMid: message.reply_to_mid, mid: message.mid});
-            }
 
             originalPeerTitle = 'Loading...';
           }
@@ -1979,10 +1992,6 @@ export class AppImManager {
       let str = name.outerHTML + ' ' + langPack[action._];
       bubble.innerHTML = `<div class="service-msg">${str}</div>`;
     }
-
-    if(!multipleRender) {
-      this.scrollPosition.prepareFor(reverse ? 'up' : 'down'); // лагает из-за этого
-    }
   
     if(updatePosition) {
       let type = our ? 'out' : 'in';

src/scss/partials/_chat.scss

@@ -419,7 +419,8 @@
 			
 			.box {
 				font-size: .95rem;
-				margin: .25rem;
+				// margin: .25rem;
+				margin: 4px 4px 4px 6px;
 				padding: .25rem;
 				margin-bottom: -5px;
 				border-radius: 4px;
@@ -430,8 +431,8 @@
 				} */
 				
 				&.web {
-					margin-top: -5px;
+					margin-top: -6px;
-					margin-bottom: 5px;
+					// margin-bottom: 5px;
 					max-width: 100%;
 					overflow: hidden;
 					
@@ -441,7 +442,7 @@
 						/* max-height: 100%;
 						max-width: 100%; */
 						border-radius: 4px;
-						margin-bottom: 6px;
+						margin-bottom: 3px;
 						overflow: hidden;
 						user-select: none;
 						cursor: pointer;
@@ -457,11 +458,13 @@
 					}
 					
 					.title {
-						line-height: 1.4;
+						letter-spacing: -0.2px;
+						line-height: 1.2;
 						font-weight: 500;
 					}
 					
 					.name {
+						letter-spacing: -0.3px;
 						display: block;
 						
 						&:hover {
@@ -473,14 +476,24 @@
 						overflow: hidden;
 						text-overflow: ellipsis;
 						line-height: 1.2;
+						letter-spacing: -0.3px;
+						margin-top: 2px;
+						font-size: 0.965rem;
 					}
 				}
 				
 				.quote {
-					padding-left: .5rem;
+					// padding-left: .5rem;
+					padding-left: 0.55rem;
+					margin-top: 6px;
 					max-width: 100%;
 					overflow: hidden;
 					width: 100%;
+
+					.text {
+						line-height: 1.2;
+					}
+
 				}
 				
 				.name {
@@ -690,7 +703,7 @@
 				color: $darkblue;
 			}
 			
-			.box:hover {
+			.quote:hover {
 				background-color: $light;
 			}
 
@@ -705,6 +718,7 @@
 			
 			.quote {
 				border-left: 2px $darkblue solid;
+				//margin-top: 6px; //MOJET VREMENNO
 				
 				.name {
 					color: $darkblue;
@@ -760,11 +774,7 @@
 		.out {
 			align-items: flex-end;
 			
-			a {
+			.quote:hover {
-				color: $darkgreen;
-			}
-			
-			.box:hover {
 				background-color: rgba($green, 0.12);
 			}
 

src/scss/partials/_chatlist.scss

@@ -76,7 +76,7 @@
   }
 
   li.active > .rp {
-    background: darken(rgba(112, 117, 121, .1), .8);
+    background: rgba(112, 117, 121, 0.08);
   }
 
   .pinned-delimiter {
@@ -213,4 +213,4 @@
   .unread-muted, .tgico-pinnedchat {
     background: #cecece;
   }
-}
+}

src/scss/style.scss

@@ -8,8 +8,8 @@ $color-error: #E53935;
 $color-gray: #707579;
 
 $lightblue: #e6ebee;
-$blue: #4ea4f6;
+$blue: #50a2e9;
-$darkblue: #1da1f1;
+$darkblue: #50a2e9;
 
 $lightgreen: #eeffde;
 $green: #4dcd5e;
@@ -1553,4 +1553,4 @@ div.scrollable::-webkit-scrollbar-thumb {
       color: #000;
     }
   }
-}
+}