From 6252b7f5aa22404a3071f55d19b5eb41ffa9d762 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Fri, 14 Feb 2020 20:10:10 +0700 Subject: [PATCH] new css & reply fixes & scroll changes --- .DS_Store | Bin 10244 -> 10244 bytes src/.DS_Store | Bin 10244 -> 10244 bytes src/components/emoticonsDropdown.ts | 23 +++++++++---- src/components/scrollable.ts | 27 ++++++++++++++- src/lib/appManagers/appImManager.ts | 51 ++++++++++++++++------------ src/scss/partials/_chat.scss | 34 ++++++++++++------- src/scss/partials/_chatlist.scss | 4 +-- src/scss/style.scss | 6 ++-- 8 files changed, 100 insertions(+), 45 deletions(-) diff --git a/.DS_Store b/.DS_Store index 2e59d17c401864589341462f97ef872caa2e17d6..a29a3a9e42e11cb5fe09e7f36ed58acbf65f8009 100644 GIT binary patch delta 210 zcmZn(XbISGMTF6Ea-)RPW^vJ%jGh%`y$lQtYzzeqr3^_7ISiQ$$+`J1E=f80NkDN9 zhlQ_ZSp7ceh^Zz8P0eIaae1ajhs{~yVvJx5!kF#;zLGR3{dC(EakrGOANy^DjVqjoE z7M7S?Bh1HmU~{*yA~Unt-u%hy#l-9tw|_LR`gPC|sFs-_har<8DK{UX8&kF*!!S5G zKeqs=o`FG9VKR&OUY?}#;sU6BrzT4aHE>H-SDPE?C>R==nN5BmAjdds@_zw&+1WrH zEDXgA$v|A3la6E#W3S-ki{cV&xBS_R>VHjsFD?aR@=HidGbw=Vg6k{`F3QWv&r1i2 UF>cnCc)+%qU12F3Ej?ro0QDblRsaA1 delta 355 zcmZn(XbG6$LAU^hRb)@B}oe@slW|0eSYt8g$dFkD@F;GiRrBPEpLl9ZF51QbFR zmY7^4%*Pn8xm#F~nVG-p?Bw-gV)k)!j&hoOKIjNk%gm6&kjapgn~%_qDO-?X7@VA+ zTL4tgz#y0~nMHiBUQRla7}FU~pbQH`F+(yC7w6`?AiJe7XW!(D5>jkHB_QTU32A1Q Y2@IRnB_FU&Z1}aAU12HPz&cG70KF+h($ diff --git a/src/components/emoticonsDropdown.ts b/src/components/emoticonsDropdown.ts index 54b947ed..8f322f76 100644 --- a/src/components/emoticonsDropdown.ts +++ b/src/components/emoticonsDropdown.ts @@ -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; }; diff --git a/src/components/scrollable.ts b/src/components/scrollable.ts index 90d3c18e..581e26ab 100644 --- a/src/components/scrollable.ts +++ b/src/components/scrollable.ts @@ -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)); diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index f0bbe174..573c89fe 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -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 += '
'; + 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 message = appMessagesManager.getMessage(mid); + 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 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 = `
${str}
`; } - - if(!multipleRender) { - this.scrollPosition.prepareFor(reverse ? 'up' : 'down'); // лагает из-за этого - } if(updatePosition) { let type = our ? 'out' : 'in'; diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index f5b4a628..9afc427b 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -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); } diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index 6149a545..eedefa9f 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -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; } -} +} \ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index b0841fdd..354093d7 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -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; } } -} +} \ No newline at end of file