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,20 +74,27 @@ 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');
       
       if(!this.searchInput.value) {
         this.searchMessagesList.innerHTML = '';
       }
-      
+
       this.searchInput.addEventListener('blur', (e) => {
         if(!this.searchInput.value) {
           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,80 +138,80 @@ input {
   &.menu-open {
     background-color: rgba(112, 117, 121, 0.08);
   }
+}
 
-  .btn-menu {
+.btn-menu {
-    visibility: hidden;
+  visibility: hidden;
-    position: absolute;
+  position: absolute;
-    background: #fff;
+  background: #fff;
-    box-shadow: 0 5px 8px 1px rgba(0,0,0,.24);
+  box-shadow: 0 5px 8px 1px rgba(0,0,0,.24);
-    z-index: 3;
+  z-index: 3;
-    top: 100%;
+  top: 100%;
-    margin-top: 8px;
+  margin-top: 8px;
-    padding: 9px 0;
+  padding: 9px 0;
-    border-radius: $border-radius;
+  border-radius: $border-radius;
-    opacity: 0;
+  opacity: 0;
-    transform: scale(.8);
+  transform: scale(.8);
-    transition-property: opacity,transform,visibility;
+  transition-property: opacity,transform,visibility;
-    transition-duration: .2s;
+  transition-duration: .2s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    font-size: 16px;
+  font-size: 16px;
 
-    &.active {
+  &.active {
-      visibility: visible;
+    visibility: visible;
-      opacity: 1;
+    opacity: 1;
-      transform: scale(1);
+    transform: scale(1);
-    }
+  }
 
-    &.bottom-left {
+  &.bottom-left {
-      right: 0;
+    right: 0;
-      top: 100%;
+    top: 100%;
-      transform-origin: top right;
+    transform-origin: top right;
-    }
+  }
 
-    &.bottom-right {
+  &.bottom-right {
-      left: 0;
+    left: 0;
-      top: 100%;
+    top: 100%;
-      transform-origin: top left;
+    transform-origin: top left;
-    }
+  }
 
-    > div {
+  > div {
-      display: flex;
+    display: flex;
-      position: relative;
+    position: relative;
-      padding: 0 40px 0 20px;
+    padding: 0 40px 0 20px;
-      height: 56px;
+    height: 56px;
-      cursor: pointer;
+    cursor: pointer;
-      background-position: 16px center;
+    background-position: 16px center;
-      background-size: 24px 24px;
+    background-size: 24px 24px;
-      background-repeat: no-repeat;
+    background-repeat: no-repeat;
-      color: #000;
+    color: #000;
-      text-transform: none;
+    text-transform: none;
-      white-space: nowrap;
+    white-space: nowrap;
-      overflow: hidden;
+    overflow: hidden;
-      text-overflow: ellipsis;
+    text-overflow: ellipsis;
-      align-items: center;
+    align-items: center;
 
-      &:hover {
+    &:hover {
-        background-color: rgba(112, 117, 121, 0.06);
+      background-color: rgba(112, 117, 121, 0.06);
-      }
+    }
 
-      &:before {
+    &:before {
-        color: $color-gray;
+      color: $color-gray;
-        font-size: 1.5rem;
+      font-size: 1.5rem;
-        margin-right: 35px;
+      margin-right: 35px;
-      }
+    }
 
-      &.danger:before {
+    &.danger:before {
-        color: $color-error;
+      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;