From b4ad2e6c66e057766843bb583657e9a111648cd0 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sun, 9 Feb 2020 16:22:15 +0700 Subject: [PATCH] fix dialogs sort & stickers scroll & message paddings --- src/components/misc.ts | 2 +- src/components/pageIm.ts | 23 ++++++++----- src/components/scrollable.ts | 15 ++++----- src/lib/appManagers/appDialogsManager.ts | 38 ++++++++++++++------- src/lib/appManagers/appImManager.ts | 8 +++-- src/lib/appManagers/appSidebarLeft.ts | 4 +-- src/lib/appManagers/appSidebarRight.ts | 4 +++ src/lib/mtproto/apiFileManager.ts | 4 +-- src/scss/partials/_chat.scss | 42 ++++++++++++++++++------ src/scss/partials/_chatlist.scss | 5 +-- src/scss/style.scss | 2 +- 11 files changed, 100 insertions(+), 47 deletions(-) diff --git a/src/components/misc.ts b/src/components/misc.ts index eb428591..0d401a65 100644 --- a/src/components/misc.ts +++ b/src/components/misc.ts @@ -563,7 +563,7 @@ export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: ( console.error('wrong doc for wrapSticker!', doc, div); } - console.log('wrap sticker', doc); + //console.log('wrap sticker', doc); if(doc.thumbs && !div.firstElementChild) { let thumb = doc.thumbs[0]; diff --git a/src/components/pageIm.ts b/src/components/pageIm.ts index bc1158fb..321892f6 100644 --- a/src/components/pageIm.ts +++ b/src/components/pageIm.ts @@ -39,7 +39,7 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement, }); (tabs.children[0] as HTMLLIElement).click(); // set media - let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: HTMLDivElement) => { + let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: Scrollable) => { menu.addEventListener('click', function(e) { let target = e.target as HTMLLIElement; target = findUpTag(target, 'LI'); @@ -47,15 +47,17 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement, let index = whichChild(target); let y = heights[index - 1/* 2 */] || 0; // 10 == padding .scrollable - //console.log(target, index, heights, y, scroll); + console.log('emoticonsMenuOnClick', index, y, scroll.container.scrollHeight, scroll); - //scroll.scroll({y: y + 'px'}); - scroll.scrollTop = y; + scroll.onAddedBottom = () => { // привет, костыль, давно не виделись! + scroll.container.scrollTop = y; + scroll.onAddedBottom = () => {}; + }; + scroll.container.scrollTop = y; }); }; let emoticonsContentOnScroll = (menu: HTMLUListElement, heights: number[], prevCategoryIndex: number, scroll: HTMLDivElement) => { - let pos = scroll.scroll(); let y = scroll.scrollTop; //console.log(heights, y); @@ -182,7 +184,7 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement, }); //emojiScroll.setVirtualContainer(emojiScroll.container); - emoticonsMenuOnClick(menu, heights, emojiScroll.container); + emoticonsMenuOnClick(menu, heights, emojiScroll); } let stickersInit = () => { @@ -354,7 +356,7 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement, }); stickersScroll.setVirtualContainer(stickersDiv); - emoticonsMenuOnClick(menu, heights, stickersScroll.container); + emoticonsMenuOnClick(menu, heights, stickersScroll); stickersInit = null; }; @@ -431,6 +433,7 @@ export default () => import('../lib/services').then(services => { document.addEventListener('dialogs_multiupdate', (e: CustomEvent) => { let dialogs = e.detail; + let performed = 0; for(let id in dialogs) { let dialog = dialogs[id]; @@ -442,9 +445,13 @@ export default () => import('../lib/services').then(services => { } appDialogsManager.setLastMessage(dialog); + + ++performed; } - appDialogsManager.sortDom(); + if(performed) { + appDialogsManager.sortDom(); + } }); // @ts-ignore diff --git a/src/components/scrollable.ts b/src/components/scrollable.ts index a3c4f86a..4f056f25 100644 --- a/src/components/scrollable.ts +++ b/src/components/scrollable.ts @@ -27,6 +27,8 @@ export default class Scrollable { public splitUp: HTMLElement; + public onAddedBottom: () => void = null; + /* public topObserver: IntersectionObserver; public isTopIntersecting: boolean; public bottomObserver: IntersectionObserver; @@ -129,14 +131,9 @@ export default class Scrollable { public setVirtualContainer(el: HTMLElement) { this.splitUp = el; - this.hiddenElements = { - up: [], - down: [] - }; - this.paddings = { - up: 0, - down: 0 - }; + + this.hiddenElements.up.length = this.hiddenElements.down.length = 0; + this.paddings.up = this.paddings.down = 0; if(this.paddingTopDiv.parentElement) { this.paddingTopDiv.style.height = ''; @@ -235,6 +232,8 @@ export default class Scrollable { this.paddings.down -= child.scrollHeight; this.paddingBottomDiv.style.height = this.paddings.down + 'px'; } + + if(this.onAddedBottom) this.onAddedBottom(); } //console.log('onscroll', container, firstVisible, lastVisible, hiddenElements); diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index 772f3d38..b0d1624e 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -134,7 +134,6 @@ export class AppDialogsManager { } public sortDom() { - console.log('sortDom'); //return; let dialogs = appMessagesManager.dialogsStorage.dialogs; @@ -142,11 +141,11 @@ export class AppDialogsManager { let inUpper: HTMLLIElement[] = []; let inBottom: HTMLLIElement[] = []; - let lastPinnedIndex = -1; + let pinnedDialogs = []; for(let i = 0; i < dialogs.length; ++i) { let dialog = dialogs[i]; if(!dialog.pFlags.pinned) break; - lastPinnedIndex = i; + pinnedDialogs.push(dialog); } let sorted = dialogs @@ -158,28 +157,45 @@ export class AppDialogsManager { return timeB - timeA; }); - if(lastPinnedIndex != -1) { - sorted = dialogs.slice(0, lastPinnedIndex + 1).concat(sorted); - } + sorted = pinnedDialogs.concat(sorted); + + //console.log('sortDom', sorted, this.chatsHidden, this.chatsHidden.up, this.chatsHidden.down); + + let hiddenLength: number = this.chatsHidden.up.length; + let inViewportLength = this.chatList.childElementCount; - let inViewportIndex = -1; - sorted.forEach((d: any) => { + this.chatList.innerHTML = ''; + + let inViewportIndex = 0; + sorted.forEach((d: any, idx) => { let dom = this.getDialogDom(d.peerID); if(!dom) return; - if(this.chatsHidden.up.find((d: HTMLLIElement) => d === dom.listEl)) { + if(inUpper.length < hiddenLength) { + inUpper.push(dom.listEl); + } else if(inViewportIndex <= inViewportLength - 1) { + this.chatList.append(dom.listEl); + ++inViewportIndex; + //this.chatList.insertBefore(dom.listEl, this.chatList.children[inViewportIndex++]); + } else { + inBottom.push(dom.listEl); + } + + /* if(this.chatsHidden.up.find((d: HTMLLIElement) => d === dom.listEl)) { inUpper.push(dom.listEl); } else if(isElementInViewport(dom.listEl)) { this.chatList.insertBefore(dom.listEl, this.chatList.children[++inViewportIndex]); } else if(this.chatsHidden.down.find((d: HTMLLIElement) => d === dom.listEl)) { inBottom.push(dom.listEl); } else { - //console.warn('found no dom!', dom, d); - } + //console.warn('sortDom found no dom!', dom, d); + } */ //this.chatList.append(dom.listEl); }); + console.log('sortDom', sorted.length, inUpper.length, this.chatList.childElementCount, inBottom.length); + this.chatsHidden.up = inUpper; this.chatsHidden.down = inBottom; } diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index fdb593e0..4a2b5f96 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -578,9 +578,11 @@ export class AppImManager { this.titleEl.innerText = appSidebarRight.profileElements.name.innerText = dom.titleSpan.innerText; - this.topbar.style.display = this.chatInput.style.display = ''; + this.topbar.style.display = ''; appSidebarRight.toggleSidebar(true); + this.chatInput.style.display = appPeersManager.isChannel(peerID) && !appPeersManager.isMegagroup(peerID) ? 'none' : ''; + return Promise.all([ this.getHistory(lastMsgID).then(() => { this.log('setPeer removing preloader'); @@ -1012,11 +1014,13 @@ export class AppImManager { } } */ - if(!bubble.classList.contains('sticker')) { + if(!bubble.classList.contains('sticker') && (peerID < 0 && peerID != message.fromID)) { let nameDiv = document.createElement('div'); nameDiv.classList.add('name'); nameDiv.innerText = title; bubble.append(nameDiv); + } else { + bubble.classList.add('hide-name'); } //bubble.prepend(avatarDiv); diff --git a/src/lib/appManagers/appSidebarLeft.ts b/src/lib/appManagers/appSidebarLeft.ts index 3e60abf9..4d2bb89c 100644 --- a/src/lib/appManagers/appSidebarLeft.ts +++ b/src/lib/appManagers/appSidebarLeft.ts @@ -49,8 +49,8 @@ class AppSidebarLeft { this.chatsLoadCount = Math.round(document.body.scrollHeight / 70 * 1.5); this.scroll = new Scrollable(this.chatsContainer as HTMLDivElement); - appDialogsManager.chatsHidden = this.scroll.hiddenElements; this.scroll.setVirtualContainer(appDialogsManager.chatList); + appDialogsManager.chatsHidden = this.scroll.hiddenElements; this.scroll.container.addEventListener('scroll', this.onChatsScroll.bind(this)); @@ -171,7 +171,7 @@ class AppSidebarLeft { } public onChatsScroll() { - //this.log(this.scroll); + this.log(this.scroll); if(this.scroll.hiddenElements.down.length > 0/* || 1 == 1 */) return; if(!this.loadDialogsPromise) { diff --git a/src/lib/appManagers/appSidebarRight.ts b/src/lib/appManagers/appSidebarRight.ts index bf822348..e1a7bfc9 100644 --- a/src/lib/appManagers/appSidebarRight.ts +++ b/src/lib/appManagers/appSidebarRight.ts @@ -297,6 +297,10 @@ class AppSidebarRight { this.loadSidebarMediaPromises = {}; this.lastSharedMediaDiv = document.createElement('div'); + if(this.sharedMediaSelected) { + this.sidebarScroll.setVirtualContainer(this.sharedMediaSelected); + } + this.profileContentEl.parentElement.scrollTop = 0; this.profileElements.bio.style.display = 'none'; this.profileElements.phone.style.display = 'none'; diff --git a/src/lib/mtproto/apiFileManager.ts b/src/lib/mtproto/apiFileManager.ts index e92f373e..f617a4e2 100644 --- a/src/lib/mtproto/apiFileManager.ts +++ b/src/lib/mtproto/apiFileManager.ts @@ -179,7 +179,7 @@ export class ApiFileManager { return Promise.reject({type: 'BROWSER_BLOB_NOT_SUPPORTED'}); } - this.log('downloadSmallFile', location, options); + //this.log('downloadSmallFile', location, options); let dcID = options.dcID || location.dc_id; let mimeType = options.mimeType || 'image/jpeg'; @@ -210,7 +210,7 @@ export class ApiFileManager { limit: 1024 * 1024 }; - this.log('next small promise', params); + //this.log('next small promise', params); return apiManager.invokeApi('upload.getFile', params, { dcID: dcID, fileDownload: true, diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 690c79ae..5b83f91f 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -215,7 +215,8 @@ width: min-content; .box.web { - width: min-content; + width: max-content; + /* width: min-content; */ max-width: 100%; } } @@ -427,9 +428,8 @@ } .message { - font-size: 1rem; + font-size: 1rem; padding: 0 .6rem .2675rem .6rem; - padding-top: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; @@ -501,11 +501,6 @@ cursor: pointer; } - &.forwarded/* .message-empty + */ .attachment { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - > .name { padding: .2675rem .6rem 0 .6rem; font-weight: 500; @@ -519,6 +514,22 @@ white-space: nowrap; } + &:not(.webpage) { + &.photo, &.video { + .name { + padding-bottom: .2675rem; + } + + .message:not(.message-empty) { + padding-top: .2675rem; + } + } + } + + &.hide-name .message:not(.message-empty) { + padding-top: .2675rem; + } + &:not(.sticker):not(.emoji-big):last-child:after { position: absolute; bottom: -1px; @@ -594,7 +605,13 @@ &:first-child:last-child { border-radius: 12px 12px 12px 0px; - } + } + + &.forwarded .attachment, + &:not(.hide-name):not(.sticker) .attachment { + border-top-left-radius: 0; + border-top-right-radius: 0; + } } } @@ -674,7 +691,12 @@ &:first-child:last-child { border-radius: 12px 12px 0px 12px; - } + } + + &.forwarded .attachment { + border-top-left-radius: 0; + border-top-right-radius: 0; + } } .user-avatar { diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index eebd4e87..cd621ff0 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -100,7 +100,8 @@ height: 1.7rem; // hot-fix span:not(.tgico-pinnedchat):not(.emoji):last-child { - font-size: .9rem; + /* font-size: .9rem; */ + font-size: .8rem; } } @@ -121,7 +122,7 @@ max-width: 100%; max-height: 100%; overflow: hidden; - color: $placeholder-color; + color: $color-gray; } .user-title { diff --git a/src/scss/style.scss b/src/scss/style.scss index db8d2732..780df934 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1304,7 +1304,7 @@ div.scrollable::-webkit-scrollbar-thumb { flex-direction: column; } - > div { + > div:not(.scroll-padding) { width: 100%; padding: 7.5px; max-width: 100%;