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

fix dialogs sort & stickers scroll & message paddings

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-02-09 16:22:15 +07:00
parent 01b8e80e05
commit b4ad2e6c66
11 changed files with 100 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/misc.ts
View File

@ -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];

23
src/components/pageIm.ts
View File

@ -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

15
src/components/scrollable.ts
View File

@ -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);

38
src/lib/appManagers/appDialogsManager.ts
View File

@ -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);
let inViewportIndex = -1;
sorted.forEach((d: any) => {
//console.log('sortDom', sorted, this.chatsHidden, this.chatsHidden.up, this.chatsHidden.down);
let hiddenLength: number = this.chatsHidden.up.length;
let inViewportLength = this.chatList.childElementCount;
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;
}

8
src/lib/appManagers/appImManager.ts
View File

@ -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);

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

@ -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) {

4
src/lib/appManagers/appSidebarRight.ts
View File

@ -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';

4
src/lib/mtproto/apiFileManager.ts
View File

@ -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,

42
src/scss/partials/_chat.scss
View File

@ -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 {

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

@ -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 {

2
src/scss/style.scss
View File

@ -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%;