From af5decf644867ae562a808282dee84f634079f00 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sun, 9 Feb 2020 17:30:24 +0700 Subject: [PATCH] new paddings chatlist --- src/components/pageIm.ts | 3 + src/lib/appManagers/appSidebarLeft.ts | 22 +++-- src/scss/partials/_chatlist.scss | 6 +- src/scss/style.scss | 122 +++++++++++++------------- 4 files changed, 84 insertions(+), 69 deletions(-) diff --git a/src/components/pageIm.ts b/src/components/pageIm.ts index 321892f6..490581fe 100644 --- a/src/components/pageIm.ts +++ b/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; diff --git a/src/lib/appManagers/appSidebarLeft.ts b/src/lib/appManagers/appSidebarLeft.ts index 4d2bb89c..81553df5 100644 --- a/src/lib/appManagers/appSidebarLeft.ts +++ b/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); diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index cd621ff0..2bd4c8fa 100644 --- a/src/scss/partials/_chatlist.scss +++ b/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; - margin: 0 .5rem; + padding: 0 8.5px; + margin: 0 8.5px; overflow: hidden; &:hover { diff --git a/src/scss/style.scss b/src/scss/style.scss index 780df934..f1e1cea2 100644 --- a/src/scss/style.scss +++ b/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 { - visibility: hidden; - position: absolute; - background: #fff; - box-shadow: 0 5px 8px 1px rgba(0,0,0,.24); - z-index: 3; - top: 100%; - margin-top: 8px; - padding: 9px 0; - border-radius: $border-radius; - opacity: 0; - transform: scale(.8); - transition-property: opacity,transform,visibility; - transition-duration: .2s; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - font-size: 16px; +.btn-menu { + visibility: hidden; + position: absolute; + background: #fff; + box-shadow: 0 5px 8px 1px rgba(0,0,0,.24); + z-index: 3; + top: 100%; + margin-top: 8px; + padding: 9px 0; + border-radius: $border-radius; + opacity: 0; + transform: scale(.8); + transition-property: opacity,transform,visibility; + transition-duration: .2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + font-size: 16px; - &.active { - visibility: visible; - opacity: 1; - transform: scale(1); - } + &.active { + visibility: visible; + opacity: 1; + transform: scale(1); + } - &.bottom-left { - right: 0; - top: 100%; - transform-origin: top right; - } + &.bottom-left { + right: 0; + top: 100%; + transform-origin: top right; + } - &.bottom-right { - left: 0; - top: 100%; - transform-origin: top left; - } + &.bottom-right { + left: 0; + top: 100%; + transform-origin: top left; + } - > div { - display: flex; - position: relative; - padding: 0 40px 0 20px; - height: 56px; - cursor: pointer; - background-position: 16px center; - background-size: 24px 24px; - background-repeat: no-repeat; - color: #000; - text-transform: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - align-items: center; + > div { + display: flex; + position: relative; + padding: 0 40px 0 20px; + height: 56px; + cursor: pointer; + background-position: 16px center; + background-size: 24px 24px; + background-repeat: no-repeat; + color: #000; + text-transform: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + align-items: center; - &:hover { - background-color: rgba(112, 117, 121, 0.06); - } + &:hover { + background-color: rgba(112, 117, 121, 0.06); + } - &:before { - color: $color-gray; - font-size: 1.5rem; - margin-right: 35px; - } + &:before { + color: $color-gray; + font-size: 1.5rem; + margin-right: 35px; + } - &.danger:before { - color: $color-error; - } + &.danger:before { + color: $color-error; } } } .user-avatar { color: #fff; - width: 52px; - height: 52px; - line-height: 52px; + width: 54px; + height: 54px; + line-height: 54px; border-radius: 50%; background-color: $button-primary-background; text-align: center;