new paddings chatlist

src/components/pageIm.ts

@@ -728,6 +728,9 @@ export default () => import('../lib/services').then(services => {
   
   Array.from(document.getElementsByClassName('btn-menu-toggle')).forEach((el) => {
     el.addEventListener('click', (e) => {
+      console.log('click pageIm');
+      if(!el.classList.contains('btn-menu-toggle')) return false;
+
       window.removeEventListener('mousemove', onMouseMove);
       openedMenu = el.querySelector('.btn-menu');
       e.cancelBubble = true;

src/lib/appManagers/appSidebarLeft.ts

@@ -74,8 +74,9 @@ class AppSidebarLeft {
     
     appDialogsManager.setListClickListener(this.searchMessagesList);
     
+    let clickTimeout = 0;
     this.searchInput.addEventListener('focus', (e) => {
-      this.toolsBtn.classList.remove('tgico-menu');
+      this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
       this.toolsBtn.classList.add('tgico-back');
       this.searchContainer.classList.add('active');
       
@@ -88,6 +89,12 @@ class AppSidebarLeft {
           this.toolsBtn.classList.add('tgico-menu');
           this.toolsBtn.classList.remove('tgico-back');
           this.searchContainer.classList.remove('active');
+          
+
+          setTimeout(() => {
+            //this.toolsBtn.click();
+            this.toolsBtn.classList.add('btn-menu-toggle');
+          }, 200);
         }
         
         /* this.peerID = 0;
@@ -121,15 +128,20 @@ class AppSidebarLeft {
       });
     });
     
-    this.toolsBtn.addEventListener('click', () => {
+    this.toolsBtn.addEventListener('click', (e) => {
+      this.log('click', this.toolsBtn.classList.contains('tgico-back'));
       if(this.toolsBtn.classList.contains('tgico-back')) {
         this.searchInput.value = '';
-        this.toolsBtn.classList.add('tgico-menu');
+        this.toolsBtn.classList.add('tgico-menu', 'btn-menu-toggle');
         this.toolsBtn.classList.remove('tgico-back');
         this.searchContainer.classList.remove('active');
         this.peerID = 0;
+        e.stopPropagation();
+        e.cancelBubble = true;
+        e.preventDefault();
+        return false;
       }
-    });
+    }, true);
     
     window.addEventListener('resize', () => {
       this.chatsLoadCount = Math.round(document.body.scrollHeight / 70 * 1.5);

src/scss/partials/_chatlist.scss

@@ -60,11 +60,11 @@
     border-radius: $border-radius;
     display: grid;
     align-items: center;
-    grid-template-columns: 60px calc(100% - 60px);
+    grid-template-columns: 64px calc(100% - 64px - 6.5px);
     position: relative;
     cursor: pointer;
-    padding: 0 .5rem;
+    padding: 0 8.5px;
-    margin: 0 .5rem;
+    margin: 0 8.5px;
     overflow: hidden;
 
     &:hover {

src/scss/style.scss

@@ -111,7 +111,7 @@ input {
   border: none;
   padding: .5rem;
   position: relative;
-  overflow: hidden;
+  /* overflow: hidden; */
   
   /* kostil */
   display: flex;
@@ -138,8 +138,9 @@ input {
   &.menu-open {
     background-color: rgba(112, 117, 121, 0.08);
   }
+}
 
-  .btn-menu {
+.btn-menu {
   visibility: hidden;
   position: absolute;
   background: #fff;
@@ -204,14 +205,13 @@ input {
       color: $color-error;
     }
   }
-  }
 }
 
 .user-avatar {
   color: #fff;
-  width: 52px;
+  width: 54px;
-  height: 52px;
+  height: 54px;
-  line-height: 52px;
+  line-height: 54px;
   border-radius: 50%;
   background-color: $button-primary-background;
   text-align: center;