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

Fix context menu on Android

Browse Source 
Fix scroll on Android
Fix propagation to documents loader on selecting
Disable zoom on handhelds
This commit is contained in:
Eduard Kuzmenko 2020-12-13 01:29:12 +02:00
parent 6d62a9a660
commit b811e1c86f
23 changed files with 355 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

376
src/components/chat/bubbles.ts
View File

@ -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<HTMLElement>;
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<HTMLElement>;
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) => {

2
src/components/chat/chat.ts
View File

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

8
src/components/chat/contextMenu.ts
View File

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

36
src/components/chat/markupTooltip.ts
View File

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

13
src/components/misc.ts
View File

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

2
src/components/sidebarRight/tabs/gifs.ts
View File

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

7
src/components/wrappers.ts
View File

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

2
src/index.hbs
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<title>Telegram Web</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">

2
src/lib/appManagers/AppInlineBotsManager.ts
View File

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

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

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

4
src/lib/cacheStorage.ts
View File

@ -53,9 +53,9 @@ export default class CacheStorageController {
} */
public getFile(fileName: string, method: 'blob' | 'json' | 'text' = 'blob'): Promise<any> {
if(method == 'blob') {
/* if(method == 'blob') {
return Promise.reject();
}
} */
// const str = `get fileName: ${fileName}`;
// console.time(str);

6
src/lib/storage.ts
View File

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

6
src/scss/partials/_audio.scss
View File

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

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

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

31
src/scss/partials/_chatBubble.scss
View File

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

18
src/scss/partials/_chatDrop.scss
View File

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

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

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

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

@ -71,6 +71,7 @@
.tgico-close {
left: auto;
right: 0px;
top: 48%;
}
//input.is-empty ~ .tgico-close {

15
src/scss/partials/_document.scss
View File

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

1
src/scss/partials/_fonts.scss
View File

@ -88,6 +88,7 @@
}
.tgico-arrow-down:before {
content: "\e911";
margin-top: 2px;
}
.tgico-pinlist:before {
content: "\e912";

1
src/scss/partials/_preloader.scss
View File

@ -30,6 +30,7 @@
margin: auto;
width: 50px;
height: 50px;
display: flex;
/* cursor: pointer; */
}
}

6
src/scss/partials/_rightSidebar.scss
View File

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

6
src/scss/style.scss
View File

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