From 29485c058f4088025eb470f6adb74ec5862b9621 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Thu, 3 Jun 2021 16:14:43 +0300 Subject: [PATCH] Empty folder placeholder Fix long text overflow in service messages Fix two stickers margin in stickers helper --- src/components/chat/bubbles.ts | 8 ++- src/components/chat/stickersHelper.ts | 3 +- .../sidebarLeft/tabs/archivedTab.ts | 21 +++---- src/lib/appManagers/appDialogsManager.ts | 61 +++++++++++-------- src/scss/partials/_chatBubble.scss | 1 + src/scss/partials/_leftSidebar.scss | 15 ++--- 6 files changed, 59 insertions(+), 50 deletions(-) diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index e37c1f02..f5c7f806 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -528,13 +528,15 @@ export default class ChatBubbles { this.setMessagesQueuePromise(); } - for(const mid in this.bubbles) { + const mids = getObjectKeysAndSort(this.bubbles, 'desc'); + mids.forEach(mid => { const bubble = this.bubbles[mid]; if(bubble.classList.contains('can-have-big-emoji')) { - const message = this.chat.getMessage(+mid); + const message = this.chat.getMessage(mid); this.renderMessage(message, undefined, false, bubble); + // this.bubbleGroups.addBubble(bubble, message, false); } - } + }); if(isScrolledDown) { this.scrollable.scrollTop = 99999; diff --git a/src/components/chat/stickersHelper.ts b/src/components/chat/stickersHelper.ts index 5e16ce4d..16a28dd3 100644 --- a/src/components/chat/stickersHelper.ts +++ b/src/components/chat/stickersHelper.ts @@ -90,7 +90,8 @@ export default class StickersHelper extends AutocompleteHelper { if(!this.onChangeScreen) { this.onChangeScreen = () => { - this.list.style.width = this.list.childElementCount * mediaSizes.active.esgSticker.width + 'px'; + const width = (this.list.childElementCount * mediaSizes.active.esgSticker.width) + (this.list.childElementCount - 1 * 1); + this.list.style.width = width + 'px'; }; mediaSizes.addEventListener('changeScreen', this.onChangeScreen); } diff --git a/src/components/sidebarLeft/tabs/archivedTab.ts b/src/components/sidebarLeft/tabs/archivedTab.ts index 0d32b5ef..06fd90f0 100644 --- a/src/components/sidebarLeft/tabs/archivedTab.ts +++ b/src/components/sidebarLeft/tabs/archivedTab.ts @@ -15,18 +15,13 @@ export default class AppArchivedTab extends SliderSuperTab { this.container.id = 'chats-archived-container'; this.setTitle('ArchivedChats'); - //this.scrollable = new Scrollable(this.container, 'CLA', 500); - const chatList = appDialogsManager.chatLists[AppArchivedTab.filterId]; - this.scrollable.append(chatList); - this.scrollable.container.addEventListener('scroll', appDialogsManager.onChatsRegularScroll); - this.scrollable.setVirtualContainer(chatList); - this.scrollable.onScrolledTop = appDialogsManager.onChatsScrollTop; - this.scrollable.onScrolledBottom = appDialogsManager.onChatsScroll; - ///this.scroll.attachSentinels(); - - this.listenerSetter.add(window, 'resize', () => { - setTimeout(appDialogsManager.scroll.checkForTriggers, 0); - }); + if(!appDialogsManager.chatLists[AppArchivedTab.filterId]) { + appDialogsManager.generateScrollable(appDialogsManager.createChatList(), AppArchivedTab.filterId); + } + + const scrollable = appDialogsManager.scrollables[AppArchivedTab.filterId]; + this.scrollable.container.replaceWith(scrollable.container); + this.scrollable = scrollable; } onOpen() { @@ -36,7 +31,6 @@ export default class AppArchivedTab extends SliderSuperTab { } this.wasFilterId = appDialogsManager.filterId; - appDialogsManager.scroll = this.scrollable; appDialogsManager.filterId = AppArchivedTab.filterId; appDialogsManager.onTabChange(); } @@ -47,7 +41,6 @@ export default class AppArchivedTab extends SliderSuperTab { } onClose() { - appDialogsManager.scroll = appDialogsManager._scroll; appDialogsManager.filterId = this.wasFilterId; appDialogsManager.onTabChange(); } diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index 1f2b1ba1..a5b80138 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -196,23 +196,23 @@ class ConnectionStatusComponent { } export class AppDialogsManager { - public chatList: HTMLUListElement; + private chatList: HTMLUListElement; - public doms: {[peerId: number]: DialogDom} = {}; + private doms: {[peerId: number]: DialogDom} = {}; - public chatsContainer = document.getElementById('chatlist-container') as HTMLDivElement; + private chatsContainer = document.getElementById('chatlist-container') as HTMLDivElement; private chatsPreloader: HTMLElement; - public loadDialogsPromise: Promise; + private loadDialogsPromise: Promise; - public scroll: Scrollable = null; - public _scroll: Scrollable = null; + private scroll: Scrollable = null; private log = logger('DIALOGS', LogTypes.Log | LogTypes.Error | LogTypes.Warn | LogTypes.Debug); - public contextMenu = new DialogsContextMenu(); + private contextMenu = new DialogsContextMenu(); public chatLists: {[filterId: number]: HTMLUListElement}; + public scrollables: {[filterId: number]: Scrollable} = {}; public filterId: number; private folders: {[k in 'menu' | 'container' | 'menuScrollContainer']: HTMLElement} = { menu: document.getElementById('folders-tabs'), @@ -244,6 +244,9 @@ export class AppDialogsManager { this.chatLists = { 1: archivedChatList }; + this.scrollables = { + 1: this.generateScrollable(this.chatLists[1], 1) + }; this.setListClickListener(archivedChatList, null, true); //this.setListClickListener(archivedChatList, null, true); // * to test peer changing @@ -258,12 +261,6 @@ export class AppDialogsManager { bottomPart.classList.add('connection-status-bottom'); bottomPart.append(this.folders.container); - this.scroll = this._scroll = new Scrollable(bottomPart, 'CL', 500); - /* this.scroll.container.addEventListener('scroll', this.onChatsRegularScroll); - this.scroll.onScrolledTop = this.onChatsScrollTop; - this.scroll.onScrolledBottom = this.onChatsScroll; */ - //this.scroll.attachSentinels(); - /* if(isTouchSupported && isSafari) { let allowUp: boolean, allowDown: boolean, slideBeginY: number; const container = this.scroll.container; @@ -295,7 +292,7 @@ export class AppDialogsManager { }); this.chatList = this.chatLists[this.filterId]; - this.scroll.setVirtualContainer(this.chatList); + this.scroll = this.scrollables[this.filterId]; /* if(testScroll) { let i = 0; @@ -486,7 +483,6 @@ export class AppDialogsManager { if(this.filterId === id) return; this.chatLists[id].innerHTML = ''; - this.scroll.setVirtualContainer(this.chatLists[id]); this.filterId = id; this.onTabChange(); }, () => { @@ -631,8 +627,9 @@ export class AppDialogsManager { } } - onTabChange = () => { + public onTabChange = () => { this.doms = {}; + this.scroll = this.scrollables[this.filterId]; this.scroll.loadedAll.top = true; this.scroll.loadedAll.bottom = false; this.loadDialogsPromise = undefined; @@ -693,6 +690,21 @@ export class AppDialogsManager { } } + public generateScrollable(list: HTMLUListElement, filterId: number) { + const scrollable = new Scrollable(null, 'CL', 500); + scrollable.container.addEventListener('scroll', this.onChatsRegularScroll); + scrollable.container.dataset.filterId = '' + filterId; + scrollable.container.append(list); + scrollable.onScrolledTop = this.onChatsScrollTop; + scrollable.onScrolledBottom = this.onChatsScroll; + scrollable.setVirtualContainer(list); + + this.chatLists[filterId] = list; + this.scrollables[filterId] = scrollable; + + return scrollable; + } + private addFilter(filter: Pick & Partial<{titleEl: HTMLElement}>) { if(this.filtersRendered[filter.id]) return; @@ -715,16 +727,11 @@ export class AppDialogsManager { //containerToAppend.append(li); const ul = this.createChatList(); - const scrollable = new Scrollable(null, 'CL', 500); + const scrollable = this.generateScrollable(ul, filter.id); const div = scrollable.container; - div.append(ul); - div.dataset.filterId = '' + filter.id; - scrollable.onScrolledTop = this.onChatsScrollTop; - scrollable.onScrolledBottom = this.onChatsScroll; //this.folders.container.append(div); - positionElementByIndex(div, this.folders.container, filter.orderIndex); + positionElementByIndex(scrollable.container, this.folders.container, filter.orderIndex); - this.chatLists[filter.id] = ul; this.setListClickListener(ul, null, true); this.filtersRendered[filter.id] = { @@ -909,14 +916,18 @@ export class AppDialogsManager { observer.observe(el); }); */ - //const scrollTopWas = this.scroll.scrollTop; + const scrollTopWas = this.scroll.scrollTop; const firstElementChild = this.chatList.firstElementChild; const rectContainer = this.scroll.container.getBoundingClientRect(); const rectTarget = firstElementChild.getBoundingClientRect(); const children = Array.from(this.scroll.splitUp.children) as HTMLElement[]; - const offsetTop = this.folders.container.offsetTop; + // const padding = 8; + // const offsetTop = this.folders.container.offsetTop; + let offsetTop = this.scroll.splitUp.offsetTop; + if(offsetTop && scrollTopWas < offsetTop) offsetTop -= scrollTopWas; + // const offsetTop = scrollTopWas < padding ? padding - scrollTopWas : 0; const firstY = rectContainer.y + offsetTop; const lastY = rectContainer.y/* - 8 */; // 8px - .chatlist padding-bottom diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index c7c80fa0..cf135e59 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -1671,6 +1671,7 @@ $bubble-margin: .25rem; align-items: center; justify-content: center; text-align: center; + word-break: break-word; i { font-style: normal; diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 4d979416..6adc6aa6 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -124,13 +124,17 @@ //line-height: inherit !important; } - &:not(.hide) + .scrollable { - top: var(--menu-size); + &:not(.hide) + #folders-container { height: calc(100% - var(--menu-size)); + position: relative; - #folders-container { - margin-top: .5rem; + .scrollable { + padding-top: .5rem; } + + /* .chatlist { + top: .5rem; + } */ } } @@ -232,12 +236,9 @@ } #folders-container { - min-height: 100%; - > div { background-color: transparent; position: absolute; - top: .5rem; } }