r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new paddings chatlist

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-02-09 17:30:24 +07:00
parent b4ad2e6c66
commit af5decf644
4 changed files with 85 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/pageIm.ts
View File

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

20
src/lib/appManagers/appSidebarLeft.ts
View File

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

6
src/scss/partials/_chatlist.scss
View File

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

12
src/scss/style.scss
View File

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