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

new css & reply fixes & scroll changes

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-02-14 20:10:10 +07:00
parent 5d5e657159
commit 6252b7f5aa
8 changed files with 100 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
src/.DS_Store vendored
View File

Binary file not shown.

23
src/components/emoticonsDropdown.ts
View File

@ -36,7 +36,7 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
});
(tabs.children[0] as HTMLLIElement).click(); // set media
let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: Scrollable) => {
let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: Scrollable, menuScroll?: Scrollable) => {
menu.addEventListener('click', function(e) {
let target = e.target as HTMLLIElement;
target = findUpTag(target, 'LI');
@ -44,8 +44,11 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
let index = whichChild(target);
let y = heights[index - 1/* 2 */] || 0; // 10 == padding .scrollable
console.log('emoticonsMenuOnClick', index, y, scroll.container.scrollHeight, scroll);
/* if(menuScroll) {
menuScroll.container.scrollLeft = target.scrollWidth * index;
}
console.log('emoticonsMenuOnClick', menu.getBoundingClientRect(), target.getBoundingClientRect());
*/
scroll.onAddedBottom = () => { // привет, костыль, давно не виделись!
scroll.container.scrollTop = y;
scroll.onAddedBottom = () => {};
@ -54,7 +57,7 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
});
};
let emoticonsContentOnScroll = (menu: HTMLUListElement, heights: number[], prevCategoryIndex: number, scroll: HTMLDivElement) => {
let emoticonsContentOnScroll = (menu: HTMLUListElement, heights: number[], prevCategoryIndex: number, scroll: HTMLDivElement, menuScroll?: Scrollable) => {
let y = scroll.scrollTop;
//console.log(heights, y);
@ -66,6 +69,14 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
prevCategoryIndex = i/* + 1 */;
menu.children[prevCategoryIndex].classList.add('active');
if(menuScroll) {
if(i < heights.length - 4) {
menuScroll.container.scrollLeft = (i - 3) * 50;
} else {
menuScroll.container.scrollLeft = i * 50;
}
}
break;
}
}
@ -350,11 +361,11 @@ const initEmoticonsDropdown = (pageEl: HTMLDivElement,
lazyLoadQueue.check();
lottieLoader.checkAnimations();
prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll.container);
prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll.container, menuScroll);
});
stickersScroll.setVirtualContainer(stickersDiv);
emoticonsMenuOnClick(menu, heights, stickersScroll);
emoticonsMenuOnClick(menu, heights, stickersScroll, menuScroll);
stickersInit = null;
};

27
src/components/scrollable.ts
View File

@ -1,4 +1,4 @@
import { isElementInViewport, isScrolledIntoView } from "../lib/utils";
import { isElementInViewport, isScrolledIntoView, cancelEvent } from "../lib/utils";
export default class Scrollable {
public container: HTMLDivElement;
@ -8,6 +8,7 @@ export default class Scrollable {
public side: string;
public scrollType: string;
public scrollSide: string;
public clientAxis: string;
public scrollSize = -1;
public size = 0;
@ -64,12 +65,14 @@ export default class Scrollable {
this.side = 'left';
this.scrollType = 'scrollWidth';
this.scrollSide = 'scrollLeft';
this.clientAxis = 'clientX';
} else if(y) {
this.container.classList.add('scrollable-y');
this.type = 'height';
this.side = 'top';
this.scrollType = 'scrollHeight';
this.scrollSide = 'scrollTop';
this.clientAxis = 'clientY';
} else {
throw new Error('no side for scroll');
}
@ -80,6 +83,28 @@ export default class Scrollable {
// @ts-ignore
this.thumb.style[this.type] = '30px';
let onMouseMove = (e: MouseEvent) => {
let rect = this.thumb.getBoundingClientRect();
let diff: number;
// @ts-ignore
diff = e[this.clientAxis] - rect[this.side];
// @ts-ignore
this.container[this.scrollSide] += diff * 0.5;
console.log('onMouseMove', e, diff);
cancelEvent(e);
};
this.thumb.addEventListener('mousedown', () => {
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', () => {
window.removeEventListener('mousemove', onMouseMove);
}, {once: true});
});
this.container.addEventListener('mouseover', this.resize.bind(this));
window.addEventListener('resize', this.resize.bind(this));

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

@ -140,7 +140,13 @@ class ChatInput {
this.messageInput.addEventListener('keydown', (e: KeyboardEvent) => {
if(e.key == 'Enter') {
if(e.shiftKey || e.ctrlKey) {
/* if(e.ctrlKey || e.metaKey) {
this.messageInput.innerHTML += '<br>';
placeCaretAtEnd(this.message)
return;
} */
if(e.shiftKey || e.ctrlKey || e.metaKey) {
return;
}
@ -646,20 +652,24 @@ export class AppImManager {
this.pinnedMessageContent.innerHTML = RichTextProcessor.wrapEmojiText(message.message);
}
let idx = this.needUpdate.findIndex(v => v.replyMid == mid);
if(idx !== -1) {
let {mid, replyMid} = this.needUpdate.splice(idx, 1)[0];
let bubble = this.bubbles[mid];
if(!bubble) return;
let length = this.needUpdate.length;
for(let i = length - 1; i >= 0; --i) {
if(this.needUpdate[i].replyMid == mid) {
let {mid, replyMid} = this.needUpdate.splice(i, 1)[0];
let message = appMessagesManager.getMessage(mid);
let repliedMessage = appMessagesManager.getMessage(replyMid);
if(repliedMessage.deleted) { // чтобы не пыталось бесконечно загрузить удалённое сообщение
delete message.reply_to_mid; // WARNING!
//this.log('messages_downloaded', mid, replyMid, i, this.needUpdate, this.needUpdate.length, mids, this.bubbles[mid]);
let bubble = this.bubbles[mid];
if(!bubble) return;
let message = appMessagesManager.getMessage(mid);
let repliedMessage = appMessagesManager.getMessage(replyMid);
if(repliedMessage.deleted) { // чтобы не пыталось бесконечно загрузить удалённое сообщение
delete message.reply_to_mid; // WARNING!
}
this.renderMessage(message, false, false, bubble, false);
}
this.renderMessage(message, false, false, bubble, false);
}
});
});
@ -1517,6 +1527,10 @@ export class AppImManager {
//messageDiv.innerText = message.message;
if(!multipleRender) {
this.scrollPosition.prepareFor(reverse ? 'up' : 'down'); // лагает из-за этого
}
// bubble
if(!bubble) {
bubble = document.createElement('div');
@ -1870,10 +1884,9 @@ export class AppImManager {
// need to download separately
if(originalMessage._ == 'messageEmpty') {
this.log('message to render reply empty, need download');
if(appMessagesManager.wrapSingleMessage(message.reply_to_mid).loading) {
this.needUpdate.push({replyMid: message.reply_to_mid, mid: message.mid});
}
this.log('message to render reply empty, need download', message, message.reply_to_mid);
appMessagesManager.wrapSingleMessage(message.reply_to_mid);
this.needUpdate.push({replyMid: message.reply_to_mid, mid: message.mid});
originalPeerTitle = 'Loading...';
}
@ -1979,10 +1992,6 @@ export class AppImManager {
let str = name.outerHTML + ' ' + langPack[action._];
bubble.innerHTML = `<div class="service-msg">${str}</div>`;
}
if(!multipleRender) {
this.scrollPosition.prepareFor(reverse ? 'up' : 'down'); // лагает из-за этого
}
if(updatePosition) {
let type = our ? 'out' : 'in';

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

@ -419,7 +419,8 @@
.box {
font-size: .95rem;
margin: .25rem;
// margin: .25rem;
margin: 4px 4px 4px 6px;
padding: .25rem;
margin-bottom: -5px;
border-radius: 4px;
@ -430,8 +431,8 @@
} */
&.web {
margin-top: -5px;
margin-bottom: 5px;
margin-top: -6px;
// margin-bottom: 5px;
max-width: 100%;
overflow: hidden;
@ -441,7 +442,7 @@
/* max-height: 100%;
max-width: 100%; */
border-radius: 4px;
margin-bottom: 6px;
margin-bottom: 3px;
overflow: hidden;
user-select: none;
cursor: pointer;
@ -457,11 +458,13 @@
}
.title {
line-height: 1.4;
letter-spacing: -0.2px;
line-height: 1.2;
font-weight: 500;
}
.name {
letter-spacing: -0.3px;
display: block;
&:hover {
@ -473,14 +476,24 @@
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
letter-spacing: -0.3px;
margin-top: 2px;
font-size: 0.965rem;
}
}
.quote {
padding-left: .5rem;
// padding-left: .5rem;
padding-left: 0.55rem;
margin-top: 6px;
max-width: 100%;
overflow: hidden;
width: 100%;
.text {
line-height: 1.2;
}
}
.name {
@ -690,7 +703,7 @@
color: $darkblue;
}
.box:hover {
.quote:hover {
background-color: $light;
}
@ -705,6 +718,7 @@
.quote {
border-left: 2px $darkblue solid;
//margin-top: 6px; //MOJET VREMENNO
.name {
color: $darkblue;
@ -760,11 +774,7 @@
.out {
align-items: flex-end;
a {
color: $darkgreen;
}
.box:hover {
.quote:hover {
background-color: rgba($green, 0.12);
}

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

@ -76,7 +76,7 @@
}
li.active > .rp {
background: darken(rgba(112, 117, 121, .1), .8);
background: rgba(112, 117, 121, 0.08);
}
.pinned-delimiter {
@ -213,4 +213,4 @@
.unread-muted, .tgico-pinnedchat {
background: #cecece;
}
}
}

6
src/scss/style.scss
View File

@ -8,8 +8,8 @@ $color-error: #E53935;
$color-gray: #707579;
$lightblue: #e6ebee;
$blue: #4ea4f6;
$darkblue: #1da1f1;
$blue: #50a2e9;
$darkblue: #50a2e9;
$lightgreen: #eeffde;
$green: #4dcd5e;
@ -1553,4 +1553,4 @@ div.scrollable::-webkit-scrollbar-thumb {
color: #000;
}
}
}
}