diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 4a938c55..5f190a41 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -3,7 +3,7 @@ import type { AppMessagesManager, Dialog, HistoryResult } from "../../lib/appMan import type { AppSidebarRight } from "../sidebarRight"; import type { AppStickersManager } from "../../lib/appManagers/appStickersManager"; import type { AppUsersManager } from "../../lib/appManagers/appUsersManager"; -import type { AppInlineBotsManager } from "../../lib/appManagers/AppInlineBotsManager"; +import type { AppInlineBotsManager } from "../../lib/appManagers/appInlineBotsManager"; import type { AppPhotosManager } from "../../lib/appManagers/appPhotosManager"; import type { AppDocsManager } from "../../lib/appManagers/appDocsManager"; import type { AppPeersManager } from "../../lib/appManagers/appPeersManager"; @@ -345,192 +345,7 @@ export default class ChatBubbles { } }); - this.listenerSetter.add(this.bubblesContainer, 'click', (e) => { - let target = e.target as HTMLElement; - let bubble: HTMLElement = null; - try { - bubble = findUpClassName(target, 'bubble'); - } catch(err) {} - - if(!bubble) return; - - if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble__container')) { - if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) { - return; - } - - for(const timestamp in this.dateMessages) { - const d = this.dateMessages[timestamp]; - if(d.div == bubble) { - new PopupDatePicker(new Date(+timestamp), this.onDatePick).show(); - break; - } - } - - return; - } - - // ! Trusted - due to audio autoclick - if(this.chat.selection.isSelecting && e.isTrusted) { - if(bubble.classList.contains('service') && bubble.dataset.mid === undefined) { - return; - } - - cancelEvent(e); - //console.log('bubble click', e); - - if(isTouchSupported && this.chat.selection.selectedText) { - this.chat.selection.selectedText = undefined; - return; - } - - //this.chatSelection.toggleByBubble(bubble); - this.chat.selection.toggleByBubble(findUpClassName(target, 'grouped-item') || bubble); - return; - } - - const contactDiv: HTMLElement = findUpClassName(target, 'contact'); - if(contactDiv) { - this.chat.appImManager.setInnerPeer(+contactDiv.dataset.peerId); - return; - } - - //this.log('chatInner click:', target); - const isVideoComponentElement = target.tagName == 'SPAN'; - /* if(isVideoComponentElement) { - const video = target.parentElement.querySelector('video') as HTMLElement; - if(video) { - video.click(); // hot-fix for time and play button - return; - } - } */ - - if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) { - const messageId = +bubble.dataset.mid; - const message = appMessagesManager.getMessage(messageId); - - const doc = message.media?.document; - - if(doc?.stickerSetInput) { - new PopupStickers(doc.stickerSetInput).show(); - } - - return; - } - - if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT" && !target.classList.contains('document-thumb')) - || target.classList.contains('album-item') - || isVideoComponentElement - || (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) { - let messageId = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid; - let message = appMessagesManager.getMessage(messageId); - if(!message) { - this.log.warn('no message by messageId:', messageId); - return; - } - - let targets: {element: HTMLElement, mid: number}[] = []; - let ids = Object.keys(this.bubbles).map(k => +k).filter(id => { - //if(!this.scrollable.visibleElements.find(e => e.element == this.bubbles[id])) return false; - - let message = appMessagesManager.getMessage(id); - - return message.media && (message.media.photo || (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif')) || (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo))); - }).sort((a, b) => a - b); - - ids.forEach(id => { - let withTail = this.bubbles[id].classList.contains('with-media-tail'); - let str = '.album-item img, .album-item video, .preview img, .preview video, '; - if(withTail) { - str += '.bubble__media-container'; - } else { - str += '.attachment img, .attachment video'; - } - - let elements = this.bubbles[id].querySelectorAll(str) as NodeListOf; - Array.from(elements).forEach((element: HTMLElement) => { - let albumItem = findUpClassName(element, 'album-item'); - targets.push({ - element, - mid: +albumItem?.dataset.mid || id - }); - }); - }); - - targets.sort((a, b) => a.mid - b.mid); - - let idx = targets.findIndex(t => t.mid == messageId); - - this.log('open mediaViewer single with ids:', ids, idx, targets); - - if(!targets[idx]) { - this.log('no target for media viewer!', target); - return; - } - - new AppMediaViewer().openMedia(message, targets[idx].element, true, - targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */); - - cancelEvent(e); - //appMediaViewer.openMedia(message, target as HTMLImageElement); - return; - } - - if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV'); - - if(target.tagName == 'DIV' || target.tagName == "AVATAR-ELEMENT") { - if(target.classList.contains('goto-original')) { - let savedFrom = bubble.dataset.savedFrom; - let splitted = savedFrom.split('_'); - let peerId = +splitted[0]; - let msgId = +splitted[1]; - ////this.log('savedFrom', peerId, msgID); - this.chat.appImManager.setInnerPeer(peerId, msgId); - return; - } else if(target.classList.contains('forward')) { - const mid = +bubble.dataset.mid; - new PopupForward([mid]); - //appSidebarRight.forwardTab.open([mid]); - return; - } else if(target.classList.contains('name')) { - let peerId = +target.dataset.peerId; - - if(peerId) { - this.chat.appImManager.setInnerPeer(peerId); - } - - return; - } else if(target.tagName == "AVATAR-ELEMENT") { - let peerId = +target.getAttribute('peer'); - - if(peerId) { - this.chat.appImManager.setInnerPeer(peerId); - } - - return; - } - - let isReplyClick = false; - - try { - isReplyClick = !!findUpClassName(e.target, 'reply'); - } catch(err) {} - - if(isReplyClick && bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) { - this.replyFollowHistory.push(+bubble.dataset.mid); - let originalMessageId = +bubble.getAttribute('data-original-mid'); - this.chat.setPeer(this.peerId, originalMessageId); - } - } else if(target.tagName == 'IMG' && target.parentElement.tagName == "AVATAR-ELEMENT") { - let peerId = +target.parentElement.getAttribute('peer'); - - if(peerId) { - this.chat.appImManager.setInnerPeer(peerId); - } - } - - //console.log('chatInner click', e); - }, {capture: true, passive: false}); + this.listenerSetter.add(this.bubblesContainer, 'click', this.onBubblesClick/* , {capture: true, passive: false} */); this.stickyIntersector = new StickyIntersector(this.scrollable.container, (stuck, target) => { for(const timestamp in this.dateMessages) { @@ -586,6 +401,193 @@ export default class ChatBubbles { }); } + public onBubblesClick = (e: Event) => { + let target = e.target as HTMLElement; + let bubble: HTMLElement = null; + try { + bubble = findUpClassName(target, 'bubble'); + } catch(err) {} + + if(!bubble) return; + + if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble__container')) { + if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) { + return; + } + + for(const timestamp in this.dateMessages) { + const d = this.dateMessages[timestamp]; + if(d.div == bubble) { + new PopupDatePicker(new Date(+timestamp), this.onDatePick).show(); + break; + } + } + + return; + } + + // ! Trusted - due to audio autoclick + if(this.chat.selection.isSelecting && e.isTrusted) { + if(bubble.classList.contains('service') && bubble.dataset.mid === undefined) { + return; + } + + cancelEvent(e); + //console.log('bubble click', e); + + if(isTouchSupported && this.chat.selection.selectedText) { + this.chat.selection.selectedText = undefined; + return; + } + + //this.chatSelection.toggleByBubble(bubble); + this.chat.selection.toggleByBubble(findUpClassName(target, 'grouped-item') || bubble); + return; + } + + const contactDiv: HTMLElement = findUpClassName(target, 'contact'); + if(contactDiv) { + this.chat.appImManager.setInnerPeer(+contactDiv.dataset.peerId); + return; + } + + //this.log('chatInner click:', target); + const isVideoComponentElement = target.tagName == 'SPAN'; + /* if(isVideoComponentElement) { + const video = target.parentElement.querySelector('video') as HTMLElement; + if(video) { + video.click(); // hot-fix for time and play button + return; + } + } */ + + if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) { + const messageId = +bubble.dataset.mid; + const message = this.appMessagesManager.getMessage(messageId); + + const doc = message.media?.document; + + if(doc?.stickerSetInput) { + new PopupStickers(doc.stickerSetInput).show(); + } + + return; + } + + if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT" && !target.classList.contains('document-thumb')) + || target.classList.contains('album-item') + || isVideoComponentElement + || (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) { + let messageId = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid; + let message = this.appMessagesManager.getMessage(messageId); + if(!message) { + this.log.warn('no message by messageId:', messageId); + return; + } + + let targets: {element: HTMLElement, mid: number}[] = []; + let ids = Object.keys(this.bubbles).map(k => +k).filter(id => { + //if(!this.scrollable.visibleElements.find(e => e.element == this.bubbles[id])) return false; + + let message = this.appMessagesManager.getMessage(id); + + return message.media && (message.media.photo || (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif')) || (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo))); + }).sort((a, b) => a - b); + + ids.forEach(id => { + let withTail = this.bubbles[id].classList.contains('with-media-tail'); + let str = '.album-item img, .album-item video, .preview img, .preview video, '; + if(withTail) { + str += '.bubble__media-container'; + } else { + str += '.attachment img, .attachment video'; + } + + let elements = this.bubbles[id].querySelectorAll(str) as NodeListOf; + Array.from(elements).forEach((element: HTMLElement) => { + let albumItem = findUpClassName(element, 'album-item'); + targets.push({ + element, + mid: +albumItem?.dataset.mid || id + }); + }); + }); + + targets.sort((a, b) => a.mid - b.mid); + + let idx = targets.findIndex(t => t.mid == messageId); + + this.log('open mediaViewer single with ids:', ids, idx, targets); + + if(!targets[idx]) { + this.log('no target for media viewer!', target); + return; + } + + new AppMediaViewer().openMedia(message, targets[idx].element, true, + targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */); + + cancelEvent(e); + //appMediaViewer.openMedia(message, target as HTMLImageElement); + return; + } + + if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV'); + + if(target.tagName == 'DIV' || target.tagName == "AVATAR-ELEMENT") { + if(target.classList.contains('goto-original')) { + let savedFrom = bubble.dataset.savedFrom; + let splitted = savedFrom.split('_'); + let peerId = +splitted[0]; + let msgId = +splitted[1]; + ////this.log('savedFrom', peerId, msgID); + this.chat.appImManager.setInnerPeer(peerId, msgId); + return; + } else if(target.classList.contains('forward')) { + const mid = +bubble.dataset.mid; + new PopupForward([mid]); + //appSidebarRight.forwardTab.open([mid]); + return; + } else if(target.classList.contains('name')) { + let peerId = +target.dataset.peerId; + + if(peerId) { + this.chat.appImManager.setInnerPeer(peerId); + } + + return; + } else if(target.tagName == "AVATAR-ELEMENT") { + let peerId = +target.getAttribute('peer'); + + if(peerId) { + this.chat.appImManager.setInnerPeer(peerId); + } + + return; + } + + let isReplyClick = false; + + try { + isReplyClick = !!findUpClassName(e.target, 'reply'); + } catch(err) {} + + if(isReplyClick && bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) { + this.replyFollowHistory.push(+bubble.dataset.mid); + let originalMessageId = +bubble.getAttribute('data-original-mid'); + this.chat.setPeer(this.peerId, originalMessageId); + } + } else if(target.tagName == 'IMG' && target.parentElement.tagName == "AVATAR-ELEMENT") { + let peerId = +target.parentElement.getAttribute('peer'); + + if(peerId) { + this.chat.appImManager.setInnerPeer(peerId); + } + } + + //console.log('chatInner click', e); + }; + public onGoDownClick() { if(this.replyFollowHistory.length) { this.replyFollowHistory.forEachReverse((mid, idx) => { diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts index a62d3674..3ce946ee 100644 --- a/src/components/chat/chat.ts +++ b/src/components/chat/chat.ts @@ -1,7 +1,7 @@ import type { AppChatsManager } from "../../lib/appManagers/appChatsManager"; import type { AppDocsManager } from "../../lib/appManagers/appDocsManager"; import type { AppImManager } from "../../lib/appManagers/appImManager"; -import type { AppInlineBotsManager } from "../../lib/appManagers/AppInlineBotsManager"; +import type { AppInlineBotsManager } from "../../lib/appManagers/appInlineBotsManager"; import type { AppMessagesManager } from "../../lib/appManagers/appMessagesManager"; import type { AppPeersManager } from "../../lib/appManagers/appPeersManager"; import type { AppPhotosManager } from "../../lib/appManagers/appPhotosManager"; diff --git a/src/components/chat/contextMenu.ts b/src/components/chat/contextMenu.ts index 1a9cd01d..d5c1fbd2 100644 --- a/src/components/chat/contextMenu.ts +++ b/src/components/chat/contextMenu.ts @@ -11,6 +11,7 @@ import PopupDeleteMessages from "../popupDeleteMessages"; import PopupForward from "../popupForward"; import PopupPinMessage from "../popupUnpinMessage"; import { copyTextToClipboard } from "../../helpers/clipboard"; +import { isAppleMobile, isSafari } from "../../helpers/userAgent"; export default class ChatContextMenu { private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true})[]; @@ -118,9 +119,12 @@ export default class ChatContextMenu { // * these two lines will fix instant text selection on iOS Safari document.body.classList.add('no-select'); // * need no-select on body because chat-input transforms in channels - attachTo.addEventListener('touchend', () => { + attachTo.addEventListener('touchend', (e) => { + cancelEvent(e); // ! this one will fix propagation to document loader button, etc document.body.classList.remove('no-select'); - }, {once: true}); + + //this.chat.bubbles.onBubblesClick(e); + }, {once: true, capture: true}); cancelSelection(); //cancelEvent(e as any); diff --git a/src/components/chat/markupTooltip.ts b/src/components/chat/markupTooltip.ts index a561f75d..eece3e60 100644 --- a/src/components/chat/markupTooltip.ts +++ b/src/components/chat/markupTooltip.ts @@ -1,7 +1,9 @@ import type { AppImManager } from "../../lib/appManagers/appImManager"; -import { MarkdownType, cancelEvent, getSelectedNodes, markdownTags, findUpClassName } from "../../helpers/dom"; +import { MarkdownType, cancelEvent, getSelectedNodes, markdownTags, findUpClassName, attachClickEvent } from "../../helpers/dom"; import RichTextProcessor from "../../lib/richtextprocessor"; import ButtonIcon from "../buttonIcon"; +import { clamp } from "../../helpers/number"; +import { isTouchSupported } from "../../helpers/touchSupport"; export default class MarkupTooltip { public container: HTMLElement; @@ -41,9 +43,13 @@ export default class MarkupTooltip { this.appImManager.chat.input.applyMarkdown(c); }); } else { - button.addEventListener('click', () => { + attachClickEvent(button, (e) => { + cancelEvent(e); this.container.classList.add('is-link'); + const selection = document.getSelection(); + this.savedRange = selection.getRangeAt(0); + if(button.classList.contains('active')) { const startContainer = this.savedRange.startContainer; const anchor = startContainer.parentElement as HTMLAnchorElement; @@ -52,6 +58,7 @@ export default class MarkupTooltip { this.linkInput.value = ''; } + this.linkInput.focus(); this.linkInput.classList.toggle('is-valid', this.isLinkValid()); }); } @@ -85,14 +92,16 @@ export default class MarkupTooltip { this.linkInput.classList.remove('error'); }); - this.linkBackButton.addEventListener('click', () => { + attachClickEvent(this.linkBackButton, (e) => { + cancelEvent(e); this.container.classList.remove('is-link'); //input.value = ''; this.resetSelection(); }); this.linkApplyButton = ButtonIcon('check markup-tooltip-link-apply', {noRipple: true}); - this.linkApplyButton.addEventListener('click', (e) => { + attachClickEvent(this.linkApplyButton, (e) => { + cancelEvent(e); this.applyLink(e); }); @@ -199,9 +208,9 @@ export default class MarkupTooltip { clearTimeout(this.hideTimeout); } - const range = this.savedRange = selection.getRangeAt(0); + const range = /* this.savedRange = */selection.getRangeAt(0); - const activeButton = this.setActiveMarkupButton(); + this.setActiveMarkupButton(); this.container.classList.remove('is-link'); const isFirstShow = this.container.classList.contains('hide'); @@ -210,11 +219,15 @@ export default class MarkupTooltip { this.container.classList.add('no-transition'); } + const bodyRect = document.body.getBoundingClientRect(); const selectionRect = range.getBoundingClientRect(); + const inputRect = this.appImManager.chat.input.rowsWrapper.getBoundingClientRect(); + + const selectionTop = selectionRect.top + (bodyRect.top * -1); //const containerRect = this.container.getBoundingClientRect(); const sizesRect = this.container.firstElementChild.firstElementChild.getBoundingClientRect(); - const top = selectionRect.top - sizesRect.height - 8; - const left = selectionRect.left + (selectionRect.width - sizesRect.width) / 2; + const top = selectionTop - sizesRect.height - 8; + const left = clamp(selectionRect.left + (selectionRect.width - sizesRect.width) / 2, inputRect.left, inputRect.right - sizesRect.width); //const top = selectionRect.top - 44 - 8; this.container.style.transform = `translate3d(${left}px, ${top}px, 0)`; @@ -266,7 +279,12 @@ export default class MarkupTooltip { return; } - this.setMouseUpEvent(); + console.log('[MARKUP]: selectionchange'); + if(isTouchSupported) { + this.show(); + } else { + this.setMouseUpEvent(); + } }); } } \ No newline at end of file diff --git a/src/components/misc.ts b/src/components/misc.ts index 7ff50f28..f55b4abd 100644 --- a/src/components/misc.ts +++ b/src/components/misc.ts @@ -323,12 +323,21 @@ export function attachContextMenuListener(element: HTMLElement, callback: (e: To add('touchcancel', onCancel, options); timeout = window.setTimeout(() => { - element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing callback(e.touches[0]); onCancel(); + + if(openedMenu) { + element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing + } }, .4e3); }); } else { - add('contextmenu', callback); + add('contextmenu', isTouchSupported ? (e: any) => { + callback(e); + + if(openedMenu) { + element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing + } + } : callback); } }; diff --git a/src/components/sidebarRight/tabs/gifs.ts b/src/components/sidebarRight/tabs/gifs.ts index ba002d93..dca94c7b 100644 --- a/src/components/sidebarRight/tabs/gifs.ts +++ b/src/components/sidebarRight/tabs/gifs.ts @@ -4,7 +4,7 @@ import Scrollable from "../../scrollable"; import animationIntersector from "../../animationIntersector"; import appSidebarRight, { AppSidebarRight } from ".."; import appUsersManager from "../../../lib/appManagers/appUsersManager"; -import appInlineBotsManager, { AppInlineBotsManager } from "../../../lib/appManagers/AppInlineBotsManager"; +import appInlineBotsManager, { AppInlineBotsManager } from "../../../lib/appManagers/appInlineBotsManager"; import GifsMasonry from "../../gifsMasonry"; import { findUpClassName } from "../../../helpers/dom"; import appImManager from "../../../lib/appManagers/appImManager"; diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 84cad992..fe3d15ec 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -26,6 +26,7 @@ import ProgressivePreloader from './preloader'; import './middleEllipsis'; import { nextRandomInt } from '../helpers/random'; import RichTextProcessor from '../lib/richtextprocessor'; +import appImManager from '../lib/appManagers/appImManager'; const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB @@ -412,8 +413,8 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals preloader = new ProgressivePreloader(null, true); } - preloader.attach(downloadDiv, true); - /* download = appDocsManager.saveDocFile(doc, appImManager.chat.bubbles.lazyLoadQueue.queueId); + //preloader.attach(downloadDiv, true); + download = appDocsManager.saveDocFile(doc, appImManager.chat.bubbles.lazyLoadQueue.queueId); preloader.attach(downloadDiv, true, download); download.then(() => { @@ -426,7 +427,7 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals downloadDiv.classList.remove('downloading'); }); - downloadDiv.classList.add('downloading'); */ + downloadDiv.classList.add('downloading'); } else { download.cancel(); } diff --git a/src/index.hbs b/src/index.hbs index 30c27e95..218780eb 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -5,7 +5,7 @@ Telegram Web - + diff --git a/src/lib/appManagers/AppInlineBotsManager.ts b/src/lib/appManagers/AppInlineBotsManager.ts index 31102d09..e335c75e 100644 --- a/src/lib/appManagers/AppInlineBotsManager.ts +++ b/src/lib/appManagers/AppInlineBotsManager.ts @@ -1,6 +1,6 @@ import { toast } from "../../components/toast"; import { BotInlineResult } from "../../layer"; -import appPeersManager from "../appManagers/appPeersManager"; +import appPeersManager from "./appPeersManager"; import apiManagerProxy from "../mtproto/mtprotoworker"; import { RichTextProcessor } from "../richtextprocessor"; import appDocsManager from "./appDocsManager"; diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 39de4528..ac074678 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -13,7 +13,7 @@ import appUsersManager from "./appUsersManager"; import Chat, { ChatType } from '../../components/chat/chat'; import appChatsManager from './appChatsManager'; import appDocsManager from './appDocsManager'; -import appInlineBotsManager from './AppInlineBotsManager'; +import appInlineBotsManager from './appInlineBotsManager'; import appMessagesManager from './appMessagesManager'; import appPeersManager from './appPeersManager'; import appPhotosManager from './appPhotosManager'; @@ -206,10 +206,10 @@ export class AppImManager { this.attachDragAndDropListeners(); } - if(!isTouchSupported) { + //if(!isTouchSupported) { this.markupTooltip = new MarkupTooltip(this); this.markupTooltip.handleSelection(); - } + //} } private attachDragAndDropListeners() { diff --git a/src/lib/cacheStorage.ts b/src/lib/cacheStorage.ts index 3886055e..1a0fa55e 100644 --- a/src/lib/cacheStorage.ts +++ b/src/lib/cacheStorage.ts @@ -53,9 +53,9 @@ export default class CacheStorageController { } */ public getFile(fileName: string, method: 'blob' | 'json' | 'text' = 'blob'): Promise { - if(method == 'blob') { + /* if(method == 'blob') { return Promise.reject(); - } + } */ // const str = `get fileName: ${fileName}`; // console.time(str); diff --git a/src/lib/storage.ts b/src/lib/storage.ts index c84db26c..f7ed6141 100644 --- a/src/lib/storage.ts +++ b/src/lib/storage.ts @@ -89,11 +89,13 @@ class AppStorage { if(this.useCS) { try { - //console.log('setItem', key, value); + //console.log('setItem: will set', key/* , value */); + await this.cacheStorage.delete(key); // * try to prevent memory leak in Chrome leading to 'Unexpected internal error.' await this.cacheStorage.save(key, new Response(value, {headers: {'Content-Type': 'application/json'}})); + //console.log('setItem: have set', key/* , value */); } catch(e) { //this.useCS = false; - console.error('[AS]: set error:', e, value); + console.error('[AS]: set error:', e, key/* , value */); } } else { keyValues[key] = value; diff --git a/src/scss/partials/_audio.scss b/src/scss/partials/_audio.scss index fc91ca5a..52af76b8 100644 --- a/src/scss/partials/_audio.scss +++ b/src/scss/partials/_audio.scss @@ -383,9 +383,9 @@ @include respond-to(handhelds) { &-download { - /* background: transparent; */ - margin-left: 2px; - margin-top: 1px; + //background: transparent; + margin-left: 6px; + margin-top: 6px; } &.is-voice { diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 2f3b073e..f933d920 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -99,7 +99,7 @@ $chat-helper-size: 39px; background: none; border: none; width: 100%; - padding: 9px; + padding: 9px 8px 9px 8px; /* height: 100%; */ max-height: calc(30rem - var(--padding-vertical) * 2); overflow-y: none; @@ -333,6 +333,25 @@ $chat-helper-size: 39px; } } } + + .pinned-container { + box-shadow: none; + @include respond-to(handhelds) { + font-size: 15px; + } + + .btn-transparent { + justify-content: center; + + &::before { + margin-right: 10px; + } + } + + &::before { + box-shadow: none; + } + } } @keyframes recordBlink { @@ -437,7 +456,8 @@ $chat-helper-size: 39px; background-color: #fff; border-radius: 12px; border-bottom-right-radius: 0; - box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07); + //box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07); + box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.18); min-height: var(--chat-input-size); max-height: 30rem; flex: 0 0 auto; @@ -722,6 +742,16 @@ $chat-helper-size: 39px; padding: 0.25rem; width: 34px; height: 34px; + //По макету ниже.... + // display: block; + // flex: 0 0 auto; + // font-size: 24px; + // line-height: 24px; + // color: #8d969c; + // padding: 0.25rem; + // margin-left: -1px; + // width: 40px; + // height: 40px; &.active { color: $color-blue; diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 1e600587..faa99f75 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -152,6 +152,18 @@ $bubble-margin: .25rem; } } + &.channel-post { + .message.poll-message { + .time { + position: unset; + } + } + + poll-element .poll-footer { + height: auto; + } + } + &.is-date { position: sticky; top: $bubble-margin; @@ -221,6 +233,13 @@ $bubble-margin: .25rem; pointer-events: none !important; } } + + // ! hide context menu for media on android + .bubbles.is-selecting & { + img, video { + pointer-events: none; + } + } &__container { //min-width: 60px; @@ -1027,7 +1046,7 @@ $bubble-margin: .25rem; height: 58px; @include respond-to(handhelds) { - padding-left: 44px; + padding-left: 44px; //было 44 } &-name { @@ -1120,6 +1139,11 @@ $bubble-margin: .25rem; background: #fff; border-radius: 50%; + @include respond-to(handhelds) { + left: 20px; + top: 25px; + } + &:before { content: " "; position: absolute; @@ -1303,6 +1327,10 @@ $bubble-margin: .25rem; padding: inherit; white-space: nowrap; } + + .tgico-pinnedchat:before { + font-weight: bold; + } } .video-time { @@ -1981,6 +2009,7 @@ poll-element { @include respond-to(handhelds) { max-width: 88%; + white-space: normal; } } diff --git a/src/scss/partials/_chatDrop.scss b/src/scss/partials/_chatDrop.scss index 66c0fd84..17e3d95c 100644 --- a/src/scss/partials/_chatDrop.scss +++ b/src/scss/partials/_chatDrop.scss @@ -59,10 +59,10 @@ &-outline { &-wrapper { position: absolute; - top: 19px; - right: 19px; - bottom: 19px; - left: 19px; + top: 15px; + right: 15px; + bottom: 15px; + left: 15px; pointer-events: none; } @@ -95,6 +95,16 @@ &-header { font-weight: 500; font-size: 1.25rem; + margin-top: -10px; + } + + @media only screen and (max-height: 670px) { + &-icon { + font-size: 0; + } + &-header { + margin-top: 0px; + } } &.is-dragover { diff --git a/src/scss/partials/_chatStickersHelper.scss b/src/scss/partials/_chatStickersHelper.scss index 6471601a..55b51fa5 100644 --- a/src/scss/partials/_chatStickersHelper.scss +++ b/src/scss/partials/_chatStickersHelper.scss @@ -5,11 +5,13 @@ transition: opacity .2s ease-in-out; overflow: hidden; padding: 0 !important; + border-radius: 10px !important; > .scrollable { position: relative; max-height: 220px; - min-height: var(--esg-sticker-size); + min-height: var(--esg-sticker-size); + padding: 7px; } &-stickers { diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index f400fba5..63f37f81 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -71,6 +71,7 @@ .tgico-close { left: auto; right: 0px; + top: 48%; } //input.is-empty ~ .tgico-close { diff --git a/src/scss/partials/_document.scss b/src/scss/partials/_document.scss index 53b02c15..2a58d959 100644 --- a/src/scss/partials/_document.scss +++ b/src/scss/partials/_document.scss @@ -10,6 +10,11 @@ .document:not(.document-with-thumb) & { padding: 1.5rem .25rem 0 .25rem; + + @include respond-to(handhelds) { + padding: 14px 0px 0px 0px; + font-size: 14px; + } } &:after { @@ -132,6 +137,12 @@ .tgico-download { transform: scale(1); transition: .2s scale; + + @include respond-to(handhelds) { + margin-top: -1px; + margin-right: -1px; + font-size: 20px; + } } &.downloading { @@ -146,8 +157,8 @@ height: 42px; @include respond-to(handhelds) { - width: 30px; - height: 30px; + width: 26px; + height: 26px; } } } diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss index a8f9c812..fa467061 100644 --- a/src/scss/partials/_fonts.scss +++ b/src/scss/partials/_fonts.scss @@ -88,6 +88,7 @@ } .tgico-arrow-down:before { content: "\e911"; + margin-top: 2px; } .tgico-pinlist:before { content: "\e912"; diff --git a/src/scss/partials/_preloader.scss b/src/scss/partials/_preloader.scss index addc7153..dcda2f9b 100644 --- a/src/scss/partials/_preloader.scss +++ b/src/scss/partials/_preloader.scss @@ -30,6 +30,7 @@ margin: auto; width: 50px; height: 50px; + display: flex; /* cursor: pointer; */ } } diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index 3cd8a2bb..df6f5378 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -445,10 +445,8 @@ } @include respond-to(handhelds) { - width: 40px; - height: 40px; - top: 2px; - left: -12px; + width: 36px; + height: 36px; } @include respond-to(not-handhelds) { diff --git a/src/scss/style.scss b/src/scss/style.scss index c780fc07..a17152c4 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -280,6 +280,10 @@ html { text-rendering: optimizeSpeed; } +body { + touch-action: pan-x pan-y; +} + /* body { position: absolute; top: 0; @@ -746,7 +750,7 @@ img.emoji { .super-sticker { html.no-touch &:hover { - border-radius: 12px; + border-radius: 10px; background-color: var(--color-gray-hover); }