Fix 0.5 pixel shift in chat

Fix vertical centering in badges

src/components/appSelectPeers.ts

@@ -100,7 +100,7 @@ export default class AppSelectPeers {
         if(!target) return;
   
         const peerId = target.dataset.key;
-        const li = this.chatsContainer.querySelector('[data-peerid="' + peerId + '"]') as HTMLElement;
+        const li = this.chatsContainer.querySelector('[data-peer-id="' + peerId + '"]') as HTMLElement;
         if(!li) {
           this.remove(+peerId || peerId);
         } else {
@@ -117,13 +117,13 @@ export default class AppSelectPeers {
     this.scrollable.setVirtualContainer(this.list);
 
     this.chatsContainer.addEventListener('click', (e) => {
-      const target = findUpAttribute(e.target, 'data-peerId') as HTMLElement;
+      const target = findUpAttribute(e.target, 'data-peer-id') as HTMLElement;
       cancelEvent(e);
 
       if(!target) return;
       if(this.freezed) return;
 
-      let key: any = target.getAttribute('data-peerId');
+      let key: any = target.dataset.peerId;
       key = +key || key;
 
       if(!this.multiSelect) {

src/components/chat/search.ts

@@ -128,7 +128,7 @@ export default class ChatSearch {
   selectResult = (elem: HTMLElement) => {
     if(this.setPeerPromise) return this.setPeerPromise;
 
-    const peerId = +elem.getAttribute('data-peerId');
+    const peerId = +elem.dataset.peerId;
     const lastMsgId = +elem.dataset.mid || undefined;
 
     const index = whichChild(elem);

src/components/dialogsContextMenu.ts

@@ -139,7 +139,7 @@ export default class DialogsContextMenu {
 
     this.filterId = appDialogsManager.filterId;
 
-    this.selectedId = +li.getAttribute('data-peerId');
+    this.selectedId = +li.dataset.peerId;
     this.dialog = appMessagesManager.getDialogByPeerId(this.selectedId)[0];
 
     this.buttons.forEach(button => {

src/components/sidebarLeft/index.ts

@@ -367,7 +367,7 @@ export class AppSidebarLeft extends SidebarSlider {
         return;
       }
 
-      const peerId = +target.getAttribute('data-peerId');
+      const peerId = +target.getAttribute('data-peer-id');
       appStateManager.getState().then(state => {
         const recentSearch = state.recentSearch || [];
         if(recentSearch[0] != peerId) {

src/components/sidebarLeft/tabs/includedChats.ts

@@ -175,7 +175,7 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
 
     let html = '';
     for(const key in details) {
-      html += `<button class="folder-category-button btn-primary btn-transparent tgico-${details[key].ico}" data-peerId="${key}">${details[key].text}${this.checkbox()}</button>`;
+      html += `<button class="folder-category-button btn-primary btn-transparent tgico-${details[key].ico}" data-peer-id="${key}">${details[key].text}${this.checkbox()}</button>`;
     }
     categories.innerHTML = html;
 
@@ -219,7 +219,7 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
     for(const flag in filter.pFlags) {
       // @ts-ignore
       if(details.hasOwnProperty(flag) && !!filter.pFlags[flag]) {
-        (categories.querySelector(`[data-peerId="${flag}"]`) as HTMLElement).click();
+        (categories.querySelector(`[data-peer-id="${flag}"]`) as HTMLElement).click();
       }
     }
   }

src/index.hbs

@@ -146,7 +146,7 @@
                 <div class="folders-tabs-scrollable menu-horizontal-scrollable hide">
                   <nav class="menu-horizontal" id="folders-tabs">
                     <ul>
-                      <li class="rp"><span>All<span class="badge badge-20 badge-blue"></span><i></i></span></li>
+                      <li class="rp"><span>All<div class="badge badge-20 badge-blue"></div><i></i></span></li>
                     </ul>
                   </nav>
                 </div>

src/lib/appManagers/appDialogsManager.ts

@@ -265,8 +265,8 @@ export class AppDialogsManager {
       const dialog = appMessagesManager.getDialogByPeerId(user.id)[0];
       //console.log('updating user:', user, dialog);
 
-      if(dialog && !appUsersManager.isBot(dialog.peerId) && dialog.peerId != rootScope.myId) {
-        const online = user.status?._ == 'userStatusOnline';
+      if(dialog && !appUsersManager.isBot(dialog.peerId) && dialog.peerId !== rootScope.myId) {
+        const online = user.status?._ === 'userStatusOnline';
         const dom = this.getDialogDom(dialog.peerId);
 
         if(dom) {
@@ -348,13 +348,13 @@ export class AppDialogsManager {
 
       //const perf = performance.now();
       for(const element of this.lastActiveElements) {
-        if(+element.getAttribute('data-peerid') !== peerId) {
+        if(+element.dataset.peerId !== peerId) {
           element.classList.remove('active');
           this.lastActiveElements.delete(element);
         }
       }
 
-      const elements = Array.from(document.querySelectorAll(`[data-autonomous="0"] li[data-peerid="${peerId}"]`)) as HTMLElement[];
+      const elements = Array.from(document.querySelectorAll(`[data-autonomous="0"] li[data-peer-id="${peerId}"]`)) as HTMLElement[];
       elements.forEach(element => {
         element.classList.add('active');
         this.lastActiveElements.add(element);
@@ -367,7 +367,7 @@ export class AppDialogsManager {
       if(!this.filtersRendered[filter.id]) {
         this.addFilter(filter);
         return;
-      } else if(filter.id == this.filterId) { // это нет тут смысла вызывать, так как будет dialogs_multiupdate
+      } else if(filter.id === this.filterId) { // это нет тут смысла вызывать, так как будет dialogs_multiupdate
         //this.validateForFilter();
         const folder = appMessagesManager.dialogsStorage.getFolder(filter.id);
         this.validateForFilter();
@@ -442,7 +442,7 @@ export class AppDialogsManager {
 
       id = +tabContent.dataset.filterId || 0;
 
-      if(this.filterId == id) return;
+      if(this.filterId === id) return;
 
       this.chatLists[id].innerHTML = '';
       this.scroll.setVirtualContainer(this.chatLists[id]);
@@ -492,9 +492,9 @@ export class AppDialogsManager {
 
   get topOffsetIndex() {
     if(!this.scroll.loadedAll['top']) {
-      const element = this.chatList.firstElementChild;
+      const element = this.chatList.firstElementChild as HTMLElement;
       if(element) {
-        const peerId = +element.getAttribute('data-peerId');
+        const peerId = +element.dataset.peerId;
         const dialog = appMessagesManager.getDialogByPeerId(peerId)[0];
         return dialog.index;
       }
@@ -584,7 +584,7 @@ export class AppDialogsManager {
     const span = document.createElement('span');
     const titleSpan = document.createElement('span');
     titleSpan.innerHTML = RichTextProcessor.wrapEmojiText(filter.title);
-    const unreadSpan = document.createElement('span');
+    const unreadSpan = document.createElement('div');
     unreadSpan.classList.add('badge', 'badge-20', 'badge-blue');
     const i = document.createElement('i');
     span.append(titleSpan, unreadSpan, i);
@@ -643,18 +643,18 @@ export class AppDialogsManager {
       let offsetIndex = 0;
   
       if(side == 'top') {
-        const element = this.chatList.firstElementChild;
+        const element = this.chatList.firstElementChild as HTMLElement;
         if(element) {
-          const peerId = +element.getAttribute('data-peerId');
+          const peerId = +element.dataset.peerId;
           const index = storage.findIndex(dialog => dialog.peerId == peerId);
           const needIndex = Math.max(0, index - loadCount);
           loadCount = index - needIndex;
           offsetIndex = storage[needIndex].index + 1;
         }
       } else {
-        const element = this.chatList.lastElementChild;
+        const element = this.chatList.lastElementChild as HTMLElement;
         if(element) {
-          const peerId = +element.getAttribute('data-peerId');
+          const peerId = +element.dataset.peerId;
           const dialog = storage.find(dialog => dialog.peerId == peerId);
           offsetIndex = dialog.index;
         }
@@ -786,7 +786,7 @@ export class AppDialogsManager {
 
       sliced.forEach(el => {
         el.remove();
-        const peerId = +el.getAttribute('data-peerId');
+        const peerId = +el.dataset.peerId;
         delete this.doms[peerId];
       });
 
@@ -848,7 +848,7 @@ export class AppDialogsManager {
       if(elem) {
         if(onFound) onFound();
 
-        let peerId = +elem.getAttribute('data-peerId');
+        let peerId = +elem.dataset.peerId;
         let lastMsgId = +elem.dataset.mid || undefined;
 
         appImManager.setPeer(peerId, lastMsgId);
@@ -861,7 +861,7 @@ export class AppDialogsManager {
       list.addEventListener('dblclick', (e) => {
         const li = findUpTag(e.target, 'LI');
         if(li) {
-          const peerId = +li.getAttribute('data-peerId');
+          const peerId = +li.dataset.peerId;
           this.log('debug dialog:', appMessagesManager.getDialogByPeerId(peerId));
         }
       });
@@ -879,16 +879,16 @@ export class AppDialogsManager {
       this.reorderDialogsTimeout = 0;
       let offset = 0;
       if(this.topOffsetIndex) {
-        const element = this.chatList.firstElementChild;
+        const element = this.chatList.firstElementChild as HTMLElement;
         if(element) {
-          const peerId = +element.getAttribute('data-peerId');
+          const peerId = +element.dataset.peerId;
           const firstDialog = appMessagesManager.getDialogByPeerId(peerId);
           offset = firstDialog[1];
         }
       }
   
       const dialogs = appMessagesManager.dialogsStorage.getFolder(this.filterId);
-      const currentOrder = (Array.from(this.chatList.children) as HTMLElement[]).map(el => +el.getAttribute('data-peerId'));
+      const currentOrder = (Array.from(this.chatList.children) as HTMLElement[]).map(el => +el.dataset.peerId);
   
       dialogs.forEach((dialog, index) => {
         const dom = this.getDialogDom(dialog.peerId);
@@ -936,7 +936,7 @@ export class AppDialogsManager {
       lastMessage = appMessagesManager.getMessageByPeer(dialog.peerId, dialog.top_message);
     }
 
-    if(lastMessage._ == 'messageEmpty' || (lastMessage._ == 'messageService' && !lastMessage.rReply)) {
+    if(lastMessage._ === 'messageEmpty' || (lastMessage._ === 'messageService' && !lastMessage.rReply)) {
       dom.lastMessageSpan.innerHTML = '';
       dom.lastTimeSpan.innerHTML = '';
       delete dom.listEl.dataset.mid;
@@ -1071,7 +1071,7 @@ export class AppDialogsManager {
     } else dom.statusSpan.classList.remove('tgico-check', 'tgico-checks');
 
     dom.unreadMessagesSpan.innerText = '';
-    dom.unreadMessagesSpan.classList.remove('tgico-pinnedchat');
+    dom.unreadMessagesSpan.classList.remove('tgico-pinnedchat', 'tgico');
 
     const filter = appMessagesManager.filtersStorage.filters[this.filterId];
     let isPinned: boolean;
@@ -1088,7 +1088,7 @@ export class AppDialogsManager {
     } else {
       dom.unreadMessagesSpan.classList.remove('unread');
       if(isPinned) {
-        dom.unreadMessagesSpan.classList.add('tgico-pinnedchat');
+        dom.unreadMessagesSpan.classList.add('tgico-pinnedchat', 'tgico');
       }
     }
   }
@@ -1222,7 +1222,7 @@ export class AppDialogsManager {
 
     const li = document.createElement('li');
     li.append(paddingDiv);
-    li.setAttribute('data-peerId', '' + peerId);
+    li.dataset.peerId = '' + peerId;
 
     const statusSpan = document.createElement('span');
     statusSpan.classList.add('message-status');
@@ -1230,8 +1230,8 @@ export class AppDialogsManager {
     const lastTimeSpan = document.createElement('span');
     lastTimeSpan.classList.add('message-time');
 
-    const unreadMessagesSpan = document.createElement('span');
-    unreadMessagesSpan.classList.add('dialog-subtitle-badge');
+    const unreadMessagesSpan = document.createElement('div');
+    unreadMessagesSpan.className = 'dialog-subtitle-badge badge badge-24';
 
     const titleP = document.createElement('p');
     titleP.classList.add('dialog-title');

src/scss/partials/_badge.scss

@@ -0,0 +1,50 @@
+.badge {
+  border-radius: .75rem;
+  font-weight: 500;
+  color: white;
+  font-size: .875rem;
+  transition: background-color .2s ease-in-out;
+
+  &:not(.tgico):empty {
+    display: none;
+  }
+
+  &-20 {
+    height: 1.25rem;
+    min-width: 1.25rem;
+    line-height: 1.25rem !important;
+    padding: 0 5.75px;
+
+    html.is-safari & {
+      line-height: 22px !important;
+    }
+  }
+
+  &-24 {
+    height: 1.5rem;
+    min-width: 1.5rem;
+    line-height: 1.5rem !important;
+    padding: 0 7.75px;
+
+    &.tgico {
+      font-size: 1.5rem;
+      width: 1.5rem;
+    }
+  }
+
+  &.tgico {
+    padding: 0;
+  }
+
+  &-green {
+    background-color: $color-green;
+  }
+
+  &-blue {
+    background-color: $color-blue;
+  }
+
+  &-gray {
+    background-color: #c5c9cc;
+  }
+}

src/scss/partials/_chat.scss

@@ -462,6 +462,10 @@ $chat-helper-size: 39px;
 		}
 	}
 
+	@include respond-to(not-handhelds) {
+		border-left: 1px solid #DADCE0;
+	}
+
 	@include respond-to(floating-left-sidebar) {
 		position: fixed !important;
 		left: 0;

src/scss/partials/_chatTopbar.scss

@@ -27,9 +27,6 @@
 	}
 
 	@include respond-to(not-handhelds) {
-		border-left: 1px solid #DADCE0;
-		border-right: 1px solid #DADCE0;
-
 		.menu-search {
 			display: none;
 		}

src/scss/partials/_chatlist.scss

@@ -1,12 +1,6 @@
 .chatlist-container {
   position: relative;
 
-  /* .scrollable {
-    html.is-mac & {
-      overflow-y: scroll;
-    }
-  } */
-
   .search-group-recent.search-group {
     @include respond-to(handhelds) {
       padding: 2px 0 0;
@@ -15,27 +9,16 @@
 
   ul {
     margin: 0;
-    //padding: 0 .5rem;
-    /* display: grid;
-    grid-auto-columns: 1fr; */
     display: flex;
     flex-direction: column;
-    /* grid-gap: 4px; */
     width: 100%;
 
     user-select: none;
     -webkit-user-select: none; /* disable selection/Copy of UIWebView */
     -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
-
-    /* html.is-mac & {
-      transform: translateZ(0);
-    } */
   }
 
   li {
-    //padding: 0 0 2px 0;
-    //padding-bottom: 4px;  - DO MAKETA JS3
-    //overflow: hidden;
     background-color: #fff;
 
     @include respond-to(handhelds) {
@@ -50,12 +33,12 @@
           color: #a3a3a3;
           font-size: 1.125rem;
           margin-left: .125rem;
-          animation: fade-in-opacity .2s ease forwards;
+          animation: fade-in-opacity .2s ease-in-out forwards;
         }
       }
 
       &.backwards .user-title:after {
-        animation: fade-in-backwards-opacity .2s ease forwards;
+        animation: fade-in-backwards-opacity .2s ease-in-out forwards;
       }
     }
   }
@@ -64,9 +47,6 @@
     height: 72px;
     max-height: 72px;
     border-radius: $border-radius-medium;
-    //align-items: center;
-    /* display: grid;
-    grid-template-columns: 64px calc(100% - 64px - 6.5px); */
     display: flex;
     align-items: flex-start;
     flex-direction: row;
@@ -104,34 +84,18 @@
     }
   }
 
-  .pinned-delimiter {
-    display: flex;
-    padding: 8px 0 4px;
-
-    span {
-      margin: 0;
-      width: 100%;
-      height: 1px;
-      background-color: #DADCE0;
-    }
-  }
-
   p {
     margin: 0;
     display: flex;
     justify-content: space-between;
     flex-direction: row;
-    //align-items: center;
     align-items: flex-start;
-    //height: 1.7rem; // hot-fix
-    height: 27px; // maybe new hot-fix
+    height: 27px;
   }
 
   .dialog {
     &-title {
       &-details {
-        /* font-size: .9rem; */
-        //font-size: .8rem;
         font-size: .75rem;
         padding: 1px 0px 0px 0px;
         flex: 0 0 auto;
@@ -141,13 +105,6 @@
     
     &-subtitle {
       &-badge {
-        font-size: .9rem;
-
-        &.tgico-pinnedchat {
-          width: 24px;
-          font-size: 1.5rem;
-        }
-
         &:not(:empty), &.tgico-pinnedchat {
           margin-left: .5rem;
         }
@@ -250,28 +207,12 @@
     }
   }
 
-  .unread, .tgico-pinnedchat {
-    height: 24px;
-    text-align: center;
-    line-height: 24px;
-    color: #fff;
-    border-radius: 12px;
+  .dialog-subtitle-badge {
     margin-top: 4px;
     margin-right: -3px;
     flex: 0 0 auto;
   }
 
-  .unread {
-    min-width: 24px;
-    padding: 0 7.75px; // ! fix initial width due to font-size: .9rem;
-    font-weight: 500;
-    transition: .2s background-color;
-  }
-
-  .unread:empty {
-    visibility: hidden;
-  }
-
   .unread, li.is-muted.backwards .unread {
     background: $color-green;
   }

src/scss/partials/_leftSidebar.scss

@@ -3,8 +3,8 @@
   flex-direction: column;
   flex: 1;
   min-width: 18rem;
-  // ! -.5 because of border-left and border-right on whole page
-  max-width: calc(#{$large-screen} / 4);
+  // ! -1 because of border-left and border-right on whole page
+  max-width: calc(#{$large-screen} / 4 - 1px);
 
   @include respond-to(handhelds) {
     width: 100%;

src/scss/style.scss

@@ -135,6 +135,7 @@ $chat-padding-handhelds: .5rem;
 @import "partials/ico";
 @import "partials/input";
 @import "partials/button";
+@import "partials/badge";
 @import "partials/checkbox";
 @import "partials/chatlist";
 @import "partials/chat";
@@ -1068,48 +1069,6 @@ middle-ellipsis-element {
   }
 }
 
-.badge {
-  border-radius: .75rem;
-  font-weight: 500;
-  color: white;
-  font-size: .9rem; // ! this will fix vertical center
-  transition: background-color .2s ease-in-out;
-
-  &:empty {
-    display: none;
-  }
-
-  &-20 {
-    height: 1.25rem;
-    min-width: 1.25rem;
-    line-height: 1.25rem !important;
-    padding: 0 5.75px;
-
-    html.is-safari & {
-      line-height: 22px !important;
-    }
-  }
-
-  &-24 {
-    height: 1.5rem;
-    min-width: 1.5rem;
-    line-height: 1.5rem !important;
-    padding: 0 7.75px;
-  }
-
-  &-green {
-    background-color: $color-green;
-  }
-
-  &-blue {
-    background-color: $color-blue;
-  }
-
-  &-gray {
-    background-color: #c5c9cc;
-  }
-}
-
 .row {
   min-height: 3.375rem;
   margin-top: .5rem;