Browse Source

new paddings chatlist

master
Eduard Kuzmenko 5 years ago
parent
commit
af5decf644
  1. 3
      src/components/pageIm.ts
  2. 20
      src/lib/appManagers/appSidebarLeft.ts
  3. 6
      src/scss/partials/_chatlist.scss
  4. 122
      src/scss/style.scss

3
src/components/pageIm.ts

@ -728,6 +728,9 @@ export default () => import('../lib/services').then(services => { @@ -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;

20
src/lib/appManagers/appSidebarLeft.ts

@ -74,8 +74,9 @@ class AppSidebarLeft { @@ -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 { @@ -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 { @@ -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);

6
src/scss/partials/_chatlist.scss

@ -60,11 +60,11 @@ @@ -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 {

122
src/scss/style.scss

@ -111,7 +111,7 @@ input { @@ -111,7 +111,7 @@ input {
border: none;
padding: .5rem;
position: relative;
overflow: hidden;
/* overflow: hidden; */
/* kostil */
display: flex;
@ -138,80 +138,80 @@ input { @@ -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;

Loading…
Cancel
Save