Browse Source

Fix context menu on Android

Fix scroll on Android
Fix propagation to documents loader on selecting
Disable zoom on handhelds
master
Eduard Kuzmenko 4 years ago
parent
commit
b811e1c86f
  1. 122
      src/components/chat/bubbles.ts
  2. 2
      src/components/chat/chat.ts
  3. 8
      src/components/chat/contextMenu.ts
  4. 34
      src/components/chat/markupTooltip.ts
  5. 13
      src/components/misc.ts
  6. 2
      src/components/sidebarRight/tabs/gifs.ts
  7. 7
      src/components/wrappers.ts
  8. 2
      src/index.hbs
  9. 2
      src/lib/appManagers/AppInlineBotsManager.ts
  10. 6
      src/lib/appManagers/appImManager.ts
  11. 4
      src/lib/cacheStorage.ts
  12. 6
      src/lib/storage.ts
  13. 6
      src/scss/partials/_audio.scss
  14. 34
      src/scss/partials/_chat.scss
  15. 31
      src/scss/partials/_chatBubble.scss
  16. 18
      src/scss/partials/_chatDrop.scss
  17. 2
      src/scss/partials/_chatStickersHelper.scss
  18. 1
      src/scss/partials/_chatlist.scss
  19. 15
      src/scss/partials/_document.scss
  20. 1
      src/scss/partials/_fonts.scss
  21. 1
      src/scss/partials/_preloader.scss
  22. 6
      src/scss/partials/_rightSidebar.scss
  23. 6
      src/scss/style.scss

122
src/components/chat/bubbles.ts

@ -3,7 +3,7 @@ import type { AppMessagesManager, Dialog, HistoryResult } from "../../lib/appMan
import type { AppSidebarRight } from "../sidebarRight"; import type { AppSidebarRight } from "../sidebarRight";
import type { AppStickersManager } from "../../lib/appManagers/appStickersManager"; import type { AppStickersManager } from "../../lib/appManagers/appStickersManager";
import type { AppUsersManager } from "../../lib/appManagers/appUsersManager"; 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 { AppPhotosManager } from "../../lib/appManagers/appPhotosManager";
import type { AppDocsManager } from "../../lib/appManagers/appDocsManager"; import type { AppDocsManager } from "../../lib/appManagers/appDocsManager";
import type { AppPeersManager } from "../../lib/appManagers/appPeersManager"; import type { AppPeersManager } from "../../lib/appManagers/appPeersManager";
@ -345,7 +345,63 @@ export default class ChatBubbles {
} }
}); });
this.listenerSetter.add(this.bubblesContainer, 'click', (e) => { 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) {
const dateMessage = this.dateMessages[timestamp];
if(dateMessage.container == target) {
dateMessage.div.classList.toggle('is-sticky', stuck);
break;
}
}
});
this.unreadedObserver = new IntersectionObserver((entries) => {
if(this.chat.appImManager.offline) { // ! but you can scroll the page without triggering 'focus', need something now
return;
}
const readed: number[] = [];
entries.forEach(entry => {
if(entry.isIntersecting) {
const target = entry.target as HTMLElement;
const mid = +target.dataset.mid;
readed.push(mid);
this.unreadedObserver.unobserve(target);
this.unreaded.findAndSplice(id => id == mid);
}
});
if(readed.length) {
const max = Math.max(...readed);
let length = readed.length;
for(let i = this.unreaded.length - 1; i >= 0; --i) {
const mid = this.unreaded[i];
if(mid < max) {
length++;
this.unreaded.splice(i, 1);
}
}
this.log('will readHistory by ids:', max, length);
/* if(this.peerId < 0) {
max = appMessagesIDsManager.getMessageIdInfo(max)[0];
} */
//appMessagesManager.readMessages(readed);
/* false && */ appMessagesManager.readHistory(this.peerId, max).catch((err: any) => {
this.log.error('readHistory err:', err);
appMessagesManager.readHistory(this.peerId, max);
});
}
});
}
public onBubblesClick = (e: Event) => {
let target = e.target as HTMLElement; let target = e.target as HTMLElement;
let bubble: HTMLElement = null; let bubble: HTMLElement = null;
try { try {
@ -407,7 +463,7 @@ export default class ChatBubbles {
if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) { if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) {
const messageId = +bubble.dataset.mid; const messageId = +bubble.dataset.mid;
const message = appMessagesManager.getMessage(messageId); const message = this.appMessagesManager.getMessage(messageId);
const doc = message.media?.document; const doc = message.media?.document;
@ -423,7 +479,7 @@ export default class ChatBubbles {
|| isVideoComponentElement || isVideoComponentElement
|| (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) { || (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) {
let messageId = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid; let messageId = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid;
let message = appMessagesManager.getMessage(messageId); let message = this.appMessagesManager.getMessage(messageId);
if(!message) { if(!message) {
this.log.warn('no message by messageId:', messageId); this.log.warn('no message by messageId:', messageId);
return; return;
@ -433,7 +489,7 @@ export default class ChatBubbles {
let ids = Object.keys(this.bubbles).map(k => +k).filter(id => { let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
//if(!this.scrollable.visibleElements.find(e => e.element == this.bubbles[id])) return false; //if(!this.scrollable.visibleElements.find(e => e.element == this.bubbles[id])) return false;
let message = appMessagesManager.getMessage(id); 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))); 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); }).sort((a, b) => a - b);
@ -530,61 +586,7 @@ export default class ChatBubbles {
} }
//console.log('chatInner click', e); //console.log('chatInner click', e);
}, {capture: true, passive: false}); };
this.stickyIntersector = new StickyIntersector(this.scrollable.container, (stuck, target) => {
for(const timestamp in this.dateMessages) {
const dateMessage = this.dateMessages[timestamp];
if(dateMessage.container == target) {
dateMessage.div.classList.toggle('is-sticky', stuck);
break;
}
}
});
this.unreadedObserver = new IntersectionObserver((entries) => {
if(this.chat.appImManager.offline) { // ! but you can scroll the page without triggering 'focus', need something now
return;
}
const readed: number[] = [];
entries.forEach(entry => {
if(entry.isIntersecting) {
const target = entry.target as HTMLElement;
const mid = +target.dataset.mid;
readed.push(mid);
this.unreadedObserver.unobserve(target);
this.unreaded.findAndSplice(id => id == mid);
}
});
if(readed.length) {
const max = Math.max(...readed);
let length = readed.length;
for(let i = this.unreaded.length - 1; i >= 0; --i) {
const mid = this.unreaded[i];
if(mid < max) {
length++;
this.unreaded.splice(i, 1);
}
}
this.log('will readHistory by ids:', max, length);
/* if(this.peerId < 0) {
max = appMessagesIDsManager.getMessageIdInfo(max)[0];
} */
//appMessagesManager.readMessages(readed);
/* false && */ appMessagesManager.readHistory(this.peerId, max).catch((err: any) => {
this.log.error('readHistory err:', err);
appMessagesManager.readHistory(this.peerId, max);
});
}
});
}
public onGoDownClick() { public onGoDownClick() {
if(this.replyFollowHistory.length) { if(this.replyFollowHistory.length) {

2
src/components/chat/chat.ts

@ -1,7 +1,7 @@
import type { AppChatsManager } from "../../lib/appManagers/appChatsManager"; import type { AppChatsManager } from "../../lib/appManagers/appChatsManager";
import type { AppDocsManager } from "../../lib/appManagers/appDocsManager"; import type { AppDocsManager } from "../../lib/appManagers/appDocsManager";
import type { AppImManager } from "../../lib/appManagers/appImManager"; 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 { AppMessagesManager } from "../../lib/appManagers/appMessagesManager";
import type { AppPeersManager } from "../../lib/appManagers/appPeersManager"; import type { AppPeersManager } from "../../lib/appManagers/appPeersManager";
import type { AppPhotosManager } from "../../lib/appManagers/appPhotosManager"; import type { AppPhotosManager } from "../../lib/appManagers/appPhotosManager";

8
src/components/chat/contextMenu.ts

@ -11,6 +11,7 @@ import PopupDeleteMessages from "../popupDeleteMessages";
import PopupForward from "../popupForward"; import PopupForward from "../popupForward";
import PopupPinMessage from "../popupUnpinMessage"; import PopupPinMessage from "../popupUnpinMessage";
import { copyTextToClipboard } from "../../helpers/clipboard"; import { copyTextToClipboard } from "../../helpers/clipboard";
import { isAppleMobile, isSafari } from "../../helpers/userAgent";
export default class ChatContextMenu { export default class ChatContextMenu {
private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true})[]; 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 // * 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 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'); document.body.classList.remove('no-select');
}, {once: true});
//this.chat.bubbles.onBubblesClick(e);
}, {once: true, capture: true});
cancelSelection(); cancelSelection();
//cancelEvent(e as any); //cancelEvent(e as any);

34
src/components/chat/markupTooltip.ts

@ -1,7 +1,9 @@
import type { AppImManager } from "../../lib/appManagers/appImManager"; 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 RichTextProcessor from "../../lib/richtextprocessor";
import ButtonIcon from "../buttonIcon"; import ButtonIcon from "../buttonIcon";
import { clamp } from "../../helpers/number";
import { isTouchSupported } from "../../helpers/touchSupport";
export default class MarkupTooltip { export default class MarkupTooltip {
public container: HTMLElement; public container: HTMLElement;
@ -41,9 +43,13 @@ export default class MarkupTooltip {
this.appImManager.chat.input.applyMarkdown(c); this.appImManager.chat.input.applyMarkdown(c);
}); });
} else { } else {
button.addEventListener('click', () => { attachClickEvent(button, (e) => {
cancelEvent(e);
this.container.classList.add('is-link'); this.container.classList.add('is-link');
const selection = document.getSelection();
this.savedRange = selection.getRangeAt(0);
if(button.classList.contains('active')) { if(button.classList.contains('active')) {
const startContainer = this.savedRange.startContainer; const startContainer = this.savedRange.startContainer;
const anchor = startContainer.parentElement as HTMLAnchorElement; const anchor = startContainer.parentElement as HTMLAnchorElement;
@ -52,6 +58,7 @@ export default class MarkupTooltip {
this.linkInput.value = ''; this.linkInput.value = '';
} }
this.linkInput.focus();
this.linkInput.classList.toggle('is-valid', this.isLinkValid()); this.linkInput.classList.toggle('is-valid', this.isLinkValid());
}); });
} }
@ -85,14 +92,16 @@ export default class MarkupTooltip {
this.linkInput.classList.remove('error'); this.linkInput.classList.remove('error');
}); });
this.linkBackButton.addEventListener('click', () => { attachClickEvent(this.linkBackButton, (e) => {
cancelEvent(e);
this.container.classList.remove('is-link'); this.container.classList.remove('is-link');
//input.value = ''; //input.value = '';
this.resetSelection(); this.resetSelection();
}); });
this.linkApplyButton = ButtonIcon('check markup-tooltip-link-apply', {noRipple: true}); this.linkApplyButton = ButtonIcon('check markup-tooltip-link-apply', {noRipple: true});
this.linkApplyButton.addEventListener('click', (e) => { attachClickEvent(this.linkApplyButton, (e) => {
cancelEvent(e);
this.applyLink(e); this.applyLink(e);
}); });
@ -199,9 +208,9 @@ export default class MarkupTooltip {
clearTimeout(this.hideTimeout); 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'); this.container.classList.remove('is-link');
const isFirstShow = this.container.classList.contains('hide'); const isFirstShow = this.container.classList.contains('hide');
@ -210,11 +219,15 @@ export default class MarkupTooltip {
this.container.classList.add('no-transition'); this.container.classList.add('no-transition');
} }
const bodyRect = document.body.getBoundingClientRect();
const selectionRect = range.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 containerRect = this.container.getBoundingClientRect();
const sizesRect = this.container.firstElementChild.firstElementChild.getBoundingClientRect(); const sizesRect = this.container.firstElementChild.firstElementChild.getBoundingClientRect();
const top = selectionRect.top - sizesRect.height - 8; const top = selectionTop - sizesRect.height - 8;
const left = selectionRect.left + (selectionRect.width - sizesRect.width) / 2; const left = clamp(selectionRect.left + (selectionRect.width - sizesRect.width) / 2, inputRect.left, inputRect.right - sizesRect.width);
//const top = selectionRect.top - 44 - 8; //const top = selectionRect.top - 44 - 8;
this.container.style.transform = `translate3d(${left}px, ${top}px, 0)`; this.container.style.transform = `translate3d(${left}px, ${top}px, 0)`;
@ -266,7 +279,12 @@ export default class MarkupTooltip {
return; return;
} }
console.log('[MARKUP]: selectionchange');
if(isTouchSupported) {
this.show();
} else {
this.setMouseUpEvent(); this.setMouseUpEvent();
}
}); });
} }
} }

13
src/components/misc.ts

@ -323,12 +323,21 @@ export function attachContextMenuListener(element: HTMLElement, callback: (e: To
add('touchcancel', onCancel, options); add('touchcancel', onCancel, options);
timeout = window.setTimeout(() => { timeout = window.setTimeout(() => {
element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing
callback(e.touches[0]); callback(e.touches[0]);
onCancel(); onCancel();
if(openedMenu) {
element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing
}
}, .4e3); }, .4e3);
}); });
} else { } 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

@ -4,7 +4,7 @@ import Scrollable from "../../scrollable";
import animationIntersector from "../../animationIntersector"; import animationIntersector from "../../animationIntersector";
import appSidebarRight, { AppSidebarRight } from ".."; import appSidebarRight, { AppSidebarRight } from "..";
import appUsersManager from "../../../lib/appManagers/appUsersManager"; 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 GifsMasonry from "../../gifsMasonry";
import { findUpClassName } from "../../../helpers/dom"; import { findUpClassName } from "../../../helpers/dom";
import appImManager from "../../../lib/appManagers/appImManager"; import appImManager from "../../../lib/appManagers/appImManager";

7
src/components/wrappers.ts

@ -26,6 +26,7 @@ import ProgressivePreloader from './preloader';
import './middleEllipsis'; import './middleEllipsis';
import { nextRandomInt } from '../helpers/random'; import { nextRandomInt } from '../helpers/random';
import RichTextProcessor from '../lib/richtextprocessor'; import RichTextProcessor from '../lib/richtextprocessor';
import appImManager from '../lib/appManagers/appImManager';
const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB 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 = new ProgressivePreloader(null, true);
} }
preloader.attach(downloadDiv, true); //preloader.attach(downloadDiv, true);
/* download = appDocsManager.saveDocFile(doc, appImManager.chat.bubbles.lazyLoadQueue.queueId); download = appDocsManager.saveDocFile(doc, appImManager.chat.bubbles.lazyLoadQueue.queueId);
preloader.attach(downloadDiv, true, download); preloader.attach(downloadDiv, true, download);
download.then(() => { download.then(() => {
@ -426,7 +427,7 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
downloadDiv.classList.remove('downloading'); downloadDiv.classList.remove('downloading');
}); });
downloadDiv.classList.add('downloading'); */ downloadDiv.classList.add('downloading');
} else { } else {
download.cancel(); download.cancel();
} }

2
src/index.hbs

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Telegram Web</title> <title>Telegram Web</title>
<meta name="description" content=""> <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="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"> <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">

2
src/lib/appManagers/AppInlineBotsManager.ts

@ -1,6 +1,6 @@
import { toast } from "../../components/toast"; import { toast } from "../../components/toast";
import { BotInlineResult } from "../../layer"; import { BotInlineResult } from "../../layer";
import appPeersManager from "../appManagers/appPeersManager"; import appPeersManager from "./appPeersManager";
import apiManagerProxy from "../mtproto/mtprotoworker"; import apiManagerProxy from "../mtproto/mtprotoworker";
import { RichTextProcessor } from "../richtextprocessor"; import { RichTextProcessor } from "../richtextprocessor";
import appDocsManager from "./appDocsManager"; import appDocsManager from "./appDocsManager";

6
src/lib/appManagers/appImManager.ts

@ -13,7 +13,7 @@ import appUsersManager from "./appUsersManager";
import Chat, { ChatType } from '../../components/chat/chat'; import Chat, { ChatType } from '../../components/chat/chat';
import appChatsManager from './appChatsManager'; import appChatsManager from './appChatsManager';
import appDocsManager from './appDocsManager'; import appDocsManager from './appDocsManager';
import appInlineBotsManager from './AppInlineBotsManager'; import appInlineBotsManager from './appInlineBotsManager';
import appMessagesManager from './appMessagesManager'; import appMessagesManager from './appMessagesManager';
import appPeersManager from './appPeersManager'; import appPeersManager from './appPeersManager';
import appPhotosManager from './appPhotosManager'; import appPhotosManager from './appPhotosManager';
@ -206,10 +206,10 @@ export class AppImManager {
this.attachDragAndDropListeners(); this.attachDragAndDropListeners();
} }
if(!isTouchSupported) { //if(!isTouchSupported) {
this.markupTooltip = new MarkupTooltip(this); this.markupTooltip = new MarkupTooltip(this);
this.markupTooltip.handleSelection(); this.markupTooltip.handleSelection();
} //}
} }
private attachDragAndDropListeners() { private attachDragAndDropListeners() {

4
src/lib/cacheStorage.ts

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

6
src/lib/storage.ts

@ -89,11 +89,13 @@ class AppStorage {
if(this.useCS) { if(this.useCS) {
try { 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'}})); await this.cacheStorage.save(key, new Response(value, {headers: {'Content-Type': 'application/json'}}));
//console.log('setItem: have set', key/* , value */);
} catch(e) { } catch(e) {
//this.useCS = false; //this.useCS = false;
console.error('[AS]: set error:', e, value); console.error('[AS]: set error:', e, key/* , value */);
} }
} else { } else {
keyValues[key] = value; keyValues[key] = value;

6
src/scss/partials/_audio.scss

@ -383,9 +383,9 @@
@include respond-to(handhelds) { @include respond-to(handhelds) {
&-download { &-download {
/* background: transparent; */ //background: transparent;
margin-left: 2px; margin-left: 6px;
margin-top: 1px; margin-top: 6px;
} }
&.is-voice { &.is-voice {

34
src/scss/partials/_chat.scss

@ -99,7 +99,7 @@ $chat-helper-size: 39px;
background: none; background: none;
border: none; border: none;
width: 100%; width: 100%;
padding: 9px; padding: 9px 8px 9px 8px;
/* height: 100%; */ /* height: 100%; */
max-height: calc(30rem - var(--padding-vertical) * 2); max-height: calc(30rem - var(--padding-vertical) * 2);
overflow-y: none; 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 { @keyframes recordBlink {
@ -437,7 +456,8 @@ $chat-helper-size: 39px;
background-color: #fff; background-color: #fff;
border-radius: 12px; border-radius: 12px;
border-bottom-right-radius: 0; 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); min-height: var(--chat-input-size);
max-height: 30rem; max-height: 30rem;
flex: 0 0 auto; flex: 0 0 auto;
@ -722,6 +742,16 @@ $chat-helper-size: 39px;
padding: 0.25rem; padding: 0.25rem;
width: 34px; width: 34px;
height: 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 { &.active {
color: $color-blue; color: $color-blue;

31
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 { &.is-date {
position: sticky; position: sticky;
top: $bubble-margin; top: $bubble-margin;
@ -222,6 +234,13 @@ $bubble-margin: .25rem;
} }
} }
// ! hide context menu for media on android
.bubbles.is-selecting & {
img, video {
pointer-events: none;
}
}
&__container { &__container {
//min-width: 60px; //min-width: 60px;
min-width: 56px; min-width: 56px;
@ -1027,7 +1046,7 @@ $bubble-margin: .25rem;
height: 58px; height: 58px;
@include respond-to(handhelds) { @include respond-to(handhelds) {
padding-left: 44px; padding-left: 44px; //было 44
} }
&-name { &-name {
@ -1120,6 +1139,11 @@ $bubble-margin: .25rem;
background: #fff; background: #fff;
border-radius: 50%; border-radius: 50%;
@include respond-to(handhelds) {
left: 20px;
top: 25px;
}
&:before { &:before {
content: " "; content: " ";
position: absolute; position: absolute;
@ -1303,6 +1327,10 @@ $bubble-margin: .25rem;
padding: inherit; padding: inherit;
white-space: nowrap; white-space: nowrap;
} }
.tgico-pinnedchat:before {
font-weight: bold;
}
} }
.video-time { .video-time {
@ -1981,6 +2009,7 @@ poll-element {
@include respond-to(handhelds) { @include respond-to(handhelds) {
max-width: 88%; max-width: 88%;
white-space: normal;
} }
} }

18
src/scss/partials/_chatDrop.scss

@ -59,10 +59,10 @@
&-outline { &-outline {
&-wrapper { &-wrapper {
position: absolute; position: absolute;
top: 19px; top: 15px;
right: 19px; right: 15px;
bottom: 19px; bottom: 15px;
left: 19px; left: 15px;
pointer-events: none; pointer-events: none;
} }
@ -95,6 +95,16 @@
&-header { &-header {
font-weight: 500; font-weight: 500;
font-size: 1.25rem; font-size: 1.25rem;
margin-top: -10px;
}
@media only screen and (max-height: 670px) {
&-icon {
font-size: 0;
}
&-header {
margin-top: 0px;
}
} }
&.is-dragover { &.is-dragover {

2
src/scss/partials/_chatStickersHelper.scss

@ -5,11 +5,13 @@
transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;
overflow: hidden; overflow: hidden;
padding: 0 !important; padding: 0 !important;
border-radius: 10px !important;
> .scrollable { > .scrollable {
position: relative; position: relative;
max-height: 220px; max-height: 220px;
min-height: var(--esg-sticker-size); min-height: var(--esg-sticker-size);
padding: 7px;
} }
&-stickers { &-stickers {

1
src/scss/partials/_chatlist.scss

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

15
src/scss/partials/_document.scss

@ -10,6 +10,11 @@
.document:not(.document-with-thumb) & { .document:not(.document-with-thumb) & {
padding: 1.5rem .25rem 0 .25rem; padding: 1.5rem .25rem 0 .25rem;
@include respond-to(handhelds) {
padding: 14px 0px 0px 0px;
font-size: 14px;
}
} }
&:after { &:after {
@ -132,6 +137,12 @@
.tgico-download { .tgico-download {
transform: scale(1); transform: scale(1);
transition: .2s scale; transition: .2s scale;
@include respond-to(handhelds) {
margin-top: -1px;
margin-right: -1px;
font-size: 20px;
}
} }
&.downloading { &.downloading {
@ -146,8 +157,8 @@
height: 42px; height: 42px;
@include respond-to(handhelds) { @include respond-to(handhelds) {
width: 30px; width: 26px;
height: 30px; height: 26px;
} }
} }
} }

1
src/scss/partials/_fonts.scss

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

1
src/scss/partials/_preloader.scss

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

6
src/scss/partials/_rightSidebar.scss

@ -445,10 +445,8 @@
} }
@include respond-to(handhelds) { @include respond-to(handhelds) {
width: 40px; width: 36px;
height: 40px; height: 36px;
top: 2px;
left: -12px;
} }
@include respond-to(not-handhelds) { @include respond-to(not-handhelds) {

6
src/scss/style.scss

@ -280,6 +280,10 @@ html {
text-rendering: optimizeSpeed; text-rendering: optimizeSpeed;
} }
body {
touch-action: pan-x pan-y;
}
/* body { /* body {
position: absolute; position: absolute;
top: 0; top: 0;
@ -746,7 +750,7 @@ img.emoji {
.super-sticker { .super-sticker {
html.no-touch &:hover { html.no-touch &:hover {
border-radius: 12px; border-radius: 10px;
background-color: var(--color-gray-hover); background-color: var(--color-gray-hover);
} }

Loading…
Cancel
Save