MrBesen
/
tweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

some changes

This commit is contained in:
Eduard Kuzmenko 2022-11-11 20:21:29 +04:00
parent a8ebd42b7b
commit 8770c2a180
47 changed files with 863 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

371
public/assets/fonts/tgico.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 226 KiB

After

Width:  |  Height:  |  Size: 226 KiB

BIN
public/assets/fonts/tgico.ttf
View File

Binary file not shown.

BIN
public/assets/fonts/tgico.woff
View File

Binary file not shown.

10
src/components/appMediaViewer.ts
View File

@ -4,16 +4,16 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
import type {MyDocument} from '../lib/appManagers/appDocsManager';
import MEDIA_MIME_TYPES_SUPPORTED from '../environment/mediaMimeTypesSupport';
import cancelEvent from '../helpers/dom/cancelEvent';
import {attachClickEvent, detachClickEvent} from '../helpers/dom/clickEvent';
import {attachClickEvent} from '../helpers/dom/clickEvent';
import findUpClassName from '../helpers/dom/findUpClassName';
import findUpTag from '../helpers/dom/findUpTag';
import setInnerHTML from '../helpers/dom/setInnerHTML';
import mediaSizes from '../helpers/mediaSizes';
import SearchListLoader from '../helpers/searchListLoader';
import {Message} from '../layer';
import type {MyDocument} from '../lib/appManagers/appDocsManager';
import appDownloadManager from '../lib/appManagers/appDownloadManager';
import appImManager from '../lib/appManagers/appImManager';
import {MyMessage} from '../lib/appManagers/appMessagesManager';
@ -260,8 +260,10 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
const fromId = (message as Message.message).fwd_from && !message.fromId ? (message as Message.message).fwd_from.from_name : message.fromId;
const media = getMediaFromMessage(message);
const cantForwardMessage = message._ === 'messageService' || ! await this.managers.appMessagesManager.canForward(message);
const cantDownloadMessage = cantForwardMessage || !canSaveMessageMedia(message);
const noForwards = await this.managers.appPeersManager.noForwards(message.peerId);
const isServiceMessage = message._ === 'messageService';
const cantForwardMessage = isServiceMessage || !(await this.managers.appMessagesManager.canForward(message));
const cantDownloadMessage = (isServiceMessage ? noForwards : cantForwardMessage) || !canSaveMessageMedia(message);
[this.buttons.forward, this.btnMenuForward.element].forEach((button) => {
button.classList.toggle('hide', cantForwardMessage);
});

2
src/components/appSearchSuper..ts
View File

@ -748,7 +748,7 @@ export default class AppSearchSuper {
}
const previewDiv = document.createElement('div');
previewDiv.classList.add('preview', 'row-media');
previewDiv.classList.add('preview', 'row-media', 'row-media-big');
// this.log('wrapping webpage', webpage);

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

@ -1495,6 +1495,10 @@ export default class ChatBubbles {
}
if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble-content')) {
if(bubble.classList.contains('is-fake')) {
bubble = bubble.previousElementSibling as HTMLElement;
}
if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) {
return;
}
@ -3813,13 +3817,16 @@ export default class ChatBubbles {
}
buttonEl.classList.add('reply-markup-button', 'rp', 'tgico');
const t = document.createElement('span');
t.classList.add('reply-markup-button-text');
if(typeof(text) === 'string') {
buttonEl.insertAdjacentHTML('beforeend', text);
t.insertAdjacentHTML('beforeend', text);
} else {
buttonEl.append(text);
t.append(text);
}
ripple(buttonEl);
buttonEl.append(t);
rowDiv.append(buttonEl);
});
@ -3865,7 +3872,7 @@ export default class ChatBubbles {
});
if(haveButtons) {
canHaveTail = false;
// canHaveTail = false;
bubble.classList.add('with-reply-markup');
contentWrapper.append(containerDiv);
}

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

@ -216,7 +216,7 @@ export default class Chat extends EventListenerBase<{
if(patternRenderer) {
const setOpacityTo = isDarkPattern ? gradientCanvas : patternCanvas;
setOpacityTo.style.setProperty('--opacity-max', '' + Math.abs(intensity));
setOpacityTo.style.setProperty('--opacity-max', '' + (Math.abs(intensity) * (isDarkPattern ? .5 : 1)));
}
const promise = new Promise<void>((resolve) => {
@ -361,7 +361,7 @@ export default class Chat extends EventListenerBase<{
const freeze = to !== this;
const cb = () => {
this.bubbles.observer.toggleObservingNew(freeze);
this.bubbles.observer?.toggleObservingNew(freeze);
animationIntersector.toggleIntersectionGroup(this.animationGroup, freeze);
if(freeze) {
animationIntersector.checkAnimations(freeze, this.animationGroup);

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

@ -387,7 +387,7 @@ export default class ChatBackgroundGradientRenderer {
// public toNextPositionThrottled = throttle(this.toNextPosition.bind(this), 100, true);
public scrollAnimate(start?: boolean) {
// return;
return;
if(this._colors.length < 2 && start) {
return;

10
src/components/chat/input.ts
View File

@ -269,7 +269,7 @@ export default class ChatInput {
this.inputContainer.append(this.rowsWrapperWrapper, fakeRowsWrapper, fakeSelectionWrapper);
this.chatInput.append(this.inputContainer);
this.goDownBtn = ButtonCorner({icon: 'arrow_down', className: 'bubbles-corner-button bubbles-go-down hide'});
this.goDownBtn = ButtonCorner({icon: 'arrow_down', className: 'bubbles-corner-button chat-secondary-button bubbles-go-down hide'});
this.inputContainer.append(this.goDownBtn);
attachClickEvent(this.goDownBtn, (e) => {
@ -484,7 +484,7 @@ export default class ChatInput {
this.goDownUnreadBadge.classList.add('badge', 'badge-24', 'badge-primary');
this.goDownBtn.append(this.goDownUnreadBadge);
this.goMentionBtn = ButtonCorner({icon: 'mention', className: 'bubbles-corner-button bubbles-go-mention'});
this.goMentionBtn = ButtonCorner({icon: 'mention', className: 'bubbles-corner-button chat-secondary-button bubbles-go-mention'});
this.goMentionUnreadBadge = document.createElement('span');
this.goMentionUnreadBadge.classList.add('badge', 'badge-24', 'badge-primary');
this.goMentionBtn.append(this.goMentionUnreadBadge);
@ -627,7 +627,7 @@ export default class ChatInput {
this.inlineHelper = new InlineHelper(this.rowsWrapper, this.autocompleteHelperController, this.chat, this.managers);
this.rowsWrapper.append(this.newMessageWrapper);
this.btnCancelRecord = ButtonIcon('delete btn-circle z-depth-1 btn-record-cancel');
this.btnCancelRecord = ButtonIcon('binfilled btn-circle btn-record-cancel chat-secondary-button');
this.btnSendContainer = document.createElement('div');
this.btnSendContainer.classList.add('btn-send-container');
@ -635,7 +635,7 @@ export default class ChatInput {
this.recordRippleEl = document.createElement('div');
this.recordRippleEl.classList.add('record-ripple');
this.btnSend = ButtonIcon('none btn-circle z-depth-1 btn-send animated-button-icon');
this.btnSend = ButtonIcon('none btn-circle btn-send animated-button-icon');
this.btnSend.insertAdjacentHTML('afterbegin', `
<span class="tgico tgico-send"></span>
<span class="tgico tgico-schedule"></span>
@ -1268,7 +1268,7 @@ export default class ChatInput {
goDownBtn.classList.toggle('is-broadcast', isBroadcast);
goDownBtn.classList.remove('hide');
this.messageInputField.onFakeInput();
this.messageInputField?.onFakeInput();
if(this.goDownUnreadBadge) {
this.setUnreadCount();

40
src/components/chat/patternRenderer.ts
View File

@ -8,6 +8,8 @@ import indexOfAndSplice from '../../helpers/array/indexOfAndSplice';
import deepEqual from '../../helpers/object/deepEqual';
import {renderImageFromUrlPromise} from '../../helpers/dom/renderImageFromUrl';
import mediaSizes, {ScreenSize} from '../../helpers/mediaSizes';
import windowSize from '../../helpers/windowSize';
import IS_IMAGE_BITMAP_SUPPORTED from '../../environment/imageBitmapSupport';
type ChatBackgroundPatternRendererInitOptions = {
url: string,
@ -26,7 +28,8 @@ export default class ChatBackgroundPatternRenderer {
// private createCanvasPatternPromise: Promise<CanvasPattern>;
// private exportCanvasPatternToImagePromise: Promise<string>;
private renderImageFromUrlPromise: Promise<HTMLImageElement>;
private img: HTMLImageElement;
private image: HTMLImageElement;
private imageBitmap: ImageBitmap;
constructor() {
this.canvases = new Set();
@ -71,9 +74,21 @@ export default class ChatBackgroundPatternRenderer {
private renderImageFromUrl(url: string) {
if(this.renderImageFromUrlPromise) return this.renderImageFromUrlPromise;
const img = this.img = document.createElement('img');
const img = this.image = document.createElement('img');
img.crossOrigin = 'anonymous';
return this.renderImageFromUrlPromise = renderImageFromUrlPromise(img, url, false).then(() => img);
return this.renderImageFromUrlPromise = renderImageFromUrlPromise(img, url, false).then(() => {
if(!IS_IMAGE_BITMAP_SUPPORTED) {
return img;
}
return createImageBitmap(img, {
resizeWidth: 1440,
resizeHeight: 2960
}).then((imageBitmap) => {
this.imageBitmap = imageBitmap;
return img;
});
});
}
/* private createCanvasPattern(canvas: HTMLCanvasElement) {
@ -115,6 +130,7 @@ export default class ChatBackgroundPatternRenderer {
indexOfAndSplice(ChatBackgroundPatternRenderer.INSTANCES, this);
if(this.objectUrl) {
this.imageBitmap?.close();
URL.revokeObjectURL(this.objectUrl);
}
}
@ -128,19 +144,15 @@ export default class ChatBackgroundPatternRenderer {
// context.clearRect(0, 0, width, height);
// }
const img = this.img;
const source = this.imageBitmap || this.image;
let imageWidth = img.width, imageHeight = img.height;
// if(imageHeight < height) {
let patternHeight = 1480 * canvas.dpr;
// * correct
// if(+canvas.dataset.originalHeight !== height) hhh *= 2 / 3;
// * but have to make it good
if(+canvas.dataset.originalHeight !== height) patternHeight *= .875;
let imageWidth = source.width, imageHeight = source.height;
// let patternHeight = 1480 * canvas.dpr;
// if(+canvas.dataset.originalHeight !== height) patternHeight *= .6875;
const patternHeight = (500 + (windowSize.height / 2.5)) * canvas.dpr;
const ratio = patternHeight / imageHeight;
imageWidth *= ratio;
imageHeight = patternHeight;
// }
if(this.options.mask) {
context.fillStyle = '#000';
@ -152,11 +164,11 @@ export default class ChatBackgroundPatternRenderer {
const d = (y: number) => {
for(let x = 0; x < width; x += imageWidth) {
context.drawImage(img, x, y, imageWidth, imageHeight);
context.drawImage(source, x, y, imageWidth, imageHeight);
}
};
const centerY = height / 2 - imageHeight / 2;
const centerY = (height - imageHeight) / 2;
d(centerY);
if(centerY > 0) {

3
src/components/checkboxField.ts
View File

@ -30,6 +30,7 @@ export default class CheckboxField {
public input: HTMLInputElement;
public label: HTMLLabelElement;
public span: HTMLSpanElement;
public listenerSetter: ListenerSetter;
constructor(options: CheckboxFieldOptions = {}) {
const label = this.label = document.createElement('label');
@ -47,6 +48,8 @@ export default class CheckboxField {
this.toggleDisability(true);
}
this.listenerSetter = options.listenerSetter;
const input = this.input = document.createElement('input');
input.classList.add('checkbox-field-input');
input.type = 'checkbox';

23
src/components/connectionStatus.ts
View File

@ -78,22 +78,13 @@ export default class ConnectionStatusComponent {
this.setFirstConnectionTimeout = window.setTimeout(this.setConnectionStatus, ConnectionStatusComponent.CHANGE_STATE_DELAY + 1e3);
/* let bool = true;
document.addEventListener('dblclick', () => {
const dcId = 2;
rootScope.dispatchEvent('connection_status_change', {
dcId: dcId,
isFileDownload: false,
isFileNetworker: false,
isFileUpload: false,
name: "NET-" + dcId,
status: bool ? (bool = false, ConnectionStatus.Closed) : (bool = true, ConnectionStatus.Connected),
_: "networkerStatus"
});
}); */
// let bool = true;
// document.addEventListener('dblclick', () => {
// this.setConnectionStatus(bool ? (bool = false, ConnectionStatus.Closed) : (bool = true, ConnectionStatus.Connected));
// });
}
private setConnectionStatus = () => {
private setConnectionStatus = (overrideStatus?: ConnectionStatus) => {
Promise.all([
sessionStorage.get('dc'),
rootScope.managers.rootScope.getConnectionStatus()
@ -108,7 +99,7 @@ export default class ConnectionStatusComponent {
}
const status = connectionStatus['NET-' + baseDcId];
const online = status && status.status === ConnectionStatus.Connected;
const online = status && (overrideStatus || status.status) === ConnectionStatus.Connected;
if(this.connecting && online) {
this.managers.apiUpdatesManager.forceGetDifference();
@ -118,7 +109,7 @@ export default class ConnectionStatusComponent {
this.hadConnect = true;
}
this.timedOut = status && status.status === ConnectionStatus.TimedOut;
this.timedOut = status && (overrideStatus || status.status) === ConnectionStatus.TimedOut;
this.connecting = !online;
this.retryAt = status && status.retryAt;
DEBUG && this.log('connecting', this.connecting);

2
src/components/middleEllipsis.ts
View File

@ -90,7 +90,7 @@ function testElement(element: HTMLElement) {
multiplier = from > 0 && from / 100;
let fontSize = element.dataset.fontSize;
if(fontSize) fontSize += 'px';
if(fontSize && +fontSize) fontSize += 'px';
// const perf = performance.now();
font = `${element.dataset.fontWeight || FontWeight} ${fontSize || FontSize} ${FontFamily}`;
/* const computedStyle = window.getComputedStyle(elm, null);

3
src/components/popups/payment.ts
View File

@ -699,8 +699,7 @@ export default class PopupPayment extends PopupElement {
});
const acceptTermsRow = isRecurring && createRow({
checkboxField: acceptTermsCheckboxField,
noCheckboxSubtitle: true
checkboxField: acceptTermsCheckboxField
});
const recurringElements = isRecurring ? [document.createElement('hr'), acceptTermsRow.container] : [];

3
src/components/popups/paymentCard.ts
View File

@ -439,8 +439,7 @@ export default class PopupPaymentCard extends PopupElement<{
});
const saveRow = new Row({
checkboxField: saveCheckboxField,
subtitleLangKey: canSave ? 'PaymentCardSavePaymentInformationInfoLine1' : 'Checkout.2FA.Text',
noCheckboxSubtitle: true
subtitleLangKey: canSave ? 'PaymentCardSavePaymentInformationInfoLine1' : 'Checkout.2FA.Text'
});
if(!canSave) {

3
src/components/popups/paymentShipping.ts
View File

@ -108,8 +108,7 @@ export default class PopupPaymentShipping extends PopupElement<{
});
const saveRow = new Row({
checkboxField: saveCheckboxField,
subtitleLangKey: 'PaymentShippingSaveInfo',
noCheckboxSubtitle: true
subtitleLangKey: 'PaymentShippingSaveInfo'
});
(receiverSection || addressSection).content.append(saveRow.container);

43
src/components/row.ts
View File

@ -4,7 +4,7 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
import CheckboxField from './checkboxField';
import CheckboxField, {CheckboxFieldOptions} from './checkboxField';
import RadioField from './radioField';
import ripple from './ripple';
import {SliderSuperTab} from './slider';
@ -20,7 +20,6 @@ export default class Row {
public container: HTMLElement;
public title: HTMLDivElement;
public titleRight: HTMLElement;
public subtitle: HTMLElement;
public media: HTMLElement;
public checkboxField: CheckboxField;
@ -30,6 +29,8 @@ export default class Row {
public buttonRight: HTMLElement;
private _subtitle: HTMLElement;
constructor(options: Partial<{
icon: string,
subtitle: string | HTMLElement | DocumentFragment,
@ -37,7 +38,8 @@ export default class Row {
subtitleLangArgs: any[],
radioField: Row['radioField'],
checkboxField: Row['checkboxField'],
noCheckboxSubtitle: boolean,
checkboxFieldOptions: CheckboxFieldOptions,
withCheckboxSubtitle: boolean,
title: string | HTMLElement | DocumentFragment,
titleLangKey: LangPackKey,
titleRight: string | HTMLElement,
@ -51,12 +53,16 @@ export default class Row {
buttonRight?: HTMLElement | boolean,
buttonRightLangKey: LangPackKey
}> = {}) {
this.container = document.createElement(options.radioField || options.checkboxField ? 'label' : 'div');
this.container.classList.add('row');
if(options.checkboxFieldOptions) {
options.checkboxField = new CheckboxField({
listenerSetter: options.listenerSetter,
...options.checkboxFieldOptions
});
}
this.container = document.createElement(options.radioField || options.checkboxField ? 'label' : 'div');
this.container.classList.add('row', 'no-subtitle');
this.subtitle = document.createElement('div');
this.subtitle.classList.add('row-subtitle');
this.subtitle.setAttribute('dir', 'auto');
if(options.subtitle) {
if(typeof(options.subtitle) === 'string') {
setInnerHTML(this.subtitle, options.subtitle);
@ -66,7 +72,6 @@ export default class Row {
} else if(options.subtitleLangKey) {
this.subtitle.append(i18n(options.subtitleLangKey, options.subtitleLangArgs));
}
this.container.append(this.subtitle);
let havePadding = !!options.havePadding;
if(options.radioField || options.checkboxField) {
@ -88,7 +93,7 @@ export default class Row {
this.container.append(this.checkboxField.label);
}
if(!options.noCheckboxSubtitle && !isToggle) {
if(options.withCheckboxSubtitle && !isToggle) {
const onChange = () => {
replaceContent(this.subtitle, i18n(this.checkboxField.input.checked ? 'Checkbox.Enabled' : 'Checkbox.Disabled'));
};
@ -187,6 +192,20 @@ export default class Row {
}
}
public get subtitle() {
return this._subtitle ?? (this._subtitle = this.createSubtitle());
}
private createSubtitle() {
const subtitle = document.createElement('div');
subtitle.classList.add('row-subtitle');
subtitle.setAttribute('dir', 'auto');
if(this.title) this.title.after(subtitle);
else this.container.prepend(subtitle);
this.container.classList.remove('no-subtitle');
return subtitle;
}
public createMedia(size?: 'small') {
this.container.classList.add('row-with-padding');
@ -203,6 +222,10 @@ export default class Row {
}
}
export const CreateRowFromCheckboxField = (checkboxField: CheckboxField) => {
return new Row({checkboxField, listenerSetter: checkboxField.listenerSetter});
};
export const RadioFormFromRows = (rows: Row[], onChange: (value: string) => void) => {
return RadioForm(rows.map((r) => ({container: r.container, input: r.radioField.input})), onChange);
};

2
src/components/sidebarLeft/index.ts
View File

@ -131,7 +131,7 @@ export class AppSidebarLeft extends SidebarSlider {
});
const menuButtons: (ButtonMenuItemOptions & {verify?: () => boolean | Promise<boolean>})[] = [{
icon: 'saved',
icon: 'savedmessages',
text: 'SavedMessages',
onClick: () => {
setTimeout(() => { // menu doesn't close if no timeout (lol)

13
src/components/sidebarLeft/tabs/autoDownload/photo.ts
View File

@ -9,6 +9,7 @@ import {SettingSection} from '../..';
import {LangPackKey} from '../../../../lib/langPack';
import CheckboxField from '../../../checkboxField';
import {SliderSuperTabEventable} from '../../../sliderTab';
import Row, {CreateRowFromCheckboxField} from '../../../row';
export function autoDownloadPeerTypeSection(type: 'photo' | 'video' | 'file', title: LangPackKey, listenerSetter: ListenerSetter) {
const section = new SettingSection({name: title});
@ -18,36 +19,32 @@ export function autoDownloadPeerTypeSection(type: 'photo' | 'video' | 'file', ti
text: 'AutodownloadContacts',
name: 'contacts',
stateKey: key + 'contacts',
withRipple: true,
listenerSetter
});
const privateCheckboxField = new CheckboxField({
text: 'AutodownloadPrivateChats',
name: 'private',
stateKey: key + 'private',
withRipple: true,
listenerSetter
});
const groupsCheckboxField = new CheckboxField({
text: 'AutodownloadGroupChats',
name: 'groups',
stateKey: key + 'groups',
withRipple: true,
listenerSetter
});
const channelsCheckboxField = new CheckboxField({
text: 'AutodownloadChannels',
name: 'channels',
stateKey: key + 'channels',
withRipple: true,
listenerSetter
});
section.content.append(
contactsCheckboxField.label,
privateCheckboxField.label,
groupsCheckboxField.label,
channelsCheckboxField.label
CreateRowFromCheckboxField(contactsCheckboxField).container,
CreateRowFromCheckboxField(privateCheckboxField).container,
CreateRowFromCheckboxField(groupsCheckboxField).container,
CreateRowFromCheckboxField(channelsCheckboxField).container
);
return section;

11
src/components/sidebarLeft/tabs/background.ts
View File

@ -32,6 +32,7 @@ import {renderImageFromUrlPromise} from '../../../helpers/dom/renderImageFromUrl
import scaleMediaElement from '../../../helpers/canvas/scaleMediaElement';
import {MediaSize} from '../../../helpers/mediaSize';
import wrapPhoto from '../../wrappers/photo';
import {CreateRowFromCheckboxField} from '../../row';
export default class AppBackgroundTab extends SliderSuperTab {
private grid: HTMLElement;
@ -69,8 +70,7 @@ export default class AppBackgroundTab extends SliderSuperTab {
const blurCheckboxField = this.blurCheckboxField = new CheckboxField({
text: 'ChatBackground.Blur',
name: 'blur',
checked: this.theme.background.blur,
withRipple: true
checked: this.theme.background.blur
});
this.listenerSetter.add(blurCheckboxField.input)('change', async() => {
@ -91,7 +91,12 @@ export default class AppBackgroundTab extends SliderSuperTab {
}, 100);
});
container.append(uploadButton, colorButton, resetButton, blurCheckboxField.label);
container.append(
uploadButton,
colorButton,
resetButton,
CreateRowFromCheckboxField(blurCheckboxField).container
);
}
rootScope.addEventListener('background_change', this.setActive);

38
src/components/sidebarLeft/tabs/dataAndStorage.ts
View File

@ -45,7 +45,12 @@ export default class AppDataAndStorageTab extends SliderSuperTabEventable {
text: 'AutoDownloadMedia',
name: 'auto',
checked: !state.settings.autoDownloadNew.pFlags.disabled,
withRipple: true
listenerSetter: this.listenerSetter
});
const autoRow = new Row({
checkboxField: autoCheckboxField,
listenerSetter: this.listenerSetter
});
const onChange = () => {
@ -141,7 +146,7 @@ export default class AppDataAndStorageTab extends SliderSuperTabEventable {
setSubtitles();
section.content.append(
autoCheckboxField.label,
autoRow.container,
photoRow.container,
videoRow.container,
fileRow.container,
@ -154,22 +159,23 @@ export default class AppDataAndStorageTab extends SliderSuperTabEventable {
{
const section = new SettingSection({name: 'AutoplayMedia'});
const gifsCheckboxField = new CheckboxField({
text: 'AutoplayGIF',
name: 'gifs',
stateKey: 'settings.autoPlay.gifs',
withRipple: true,
section.content.append(new Row({
checkboxField: new CheckboxField({
text: 'AutoplayGIF',
name: 'gifs',
stateKey: 'settings.autoPlay.gifs',
listenerSetter: this.listenerSetter
}),
listenerSetter: this.listenerSetter
});
const videosCheckboxField = new CheckboxField({
text: 'AutoplayVideo',
name: 'videos',
stateKey: 'settings.autoPlay.videos',
withRipple: true,
}).container, new Row({
checkboxField: new CheckboxField({
text: 'AutoplayVideo',
name: 'videos',
stateKey: 'settings.autoPlay.videos',
listenerSetter: this.listenerSetter
}),
listenerSetter: this.listenerSetter
});
section.content.append(gifsCheckboxField.label, videosCheckboxField.label);
}).container);
this.scrollable.append(section.container);
}

28
src/components/sidebarLeft/tabs/generalSettings.ts
View File

@ -11,7 +11,7 @@ import CheckboxField from '../../checkboxField';
import RadioField from '../../radioField';
import rootScope from '../../../lib/rootScope';
import {IS_APPLE} from '../../../environment/userAgent';
import Row from '../../row';
import Row, {CreateRowFromCheckboxField} from '../../row';
import AppBackgroundTab from './background';
import {LangPackKey, _i18n} from '../../../lib/langPack';
import {attachClickEvent} from '../../../helpers/dom/clickEvent';
@ -112,11 +112,14 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
text: 'EnableAnimations',
name: 'animations',
stateKey: 'settings.animationsEnabled',
withRipple: true,
listenerSetter: this.listenerSetter
});
container.append(range.container, chatBackgroundButton, animationsCheckboxField.label);
container.append(
range.container,
chatBackgroundButton,
CreateRowFromCheckboxField(animationsCheckboxField).container
);
}
{
@ -233,18 +236,19 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
text: 'GeneralSettings.EmojiPrediction',
name: 'suggest-emoji',
stateKey: 'settings.emoji.suggest',
withRipple: true,
listenerSetter: this.listenerSetter
});
const bigCheckboxField = new CheckboxField({
text: 'GeneralSettings.BigEmoji',
name: 'emoji-big',
stateKey: 'settings.emoji.big',
withRipple: true,
listenerSetter: this.listenerSetter
});
container.append(suggestCheckboxField.label, bigCheckboxField.label);
container.append(
CreateRowFromCheckboxField(suggestCheckboxField).container,
CreateRowFromCheckboxField(bigCheckboxField).container
);
}
{
@ -283,14 +287,12 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
text: 'Stickers.SuggestStickers',
name: 'suggest',
stateKey: 'settings.stickers.suggest',
withRipple: true,
listenerSetter: this.listenerSetter
});
const loopCheckboxField = new CheckboxField({
text: 'InstalledStickers.LoopAnimated',
name: 'loop',
stateKey: 'settings.stickers.loop',
withRipple: true,
listenerSetter: this.listenerSetter
});
@ -321,8 +323,8 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
container: div,
group: 'GENERAL-SETTINGS',
lazyLoadQueue,
width: 48,
height: 48,
width: 36,
height: 36,
autoplay: true
});
@ -351,7 +353,11 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
}
});
section.content.append(reactionsRow.container, suggestCheckboxField.label, loopCheckboxField.label);
section.content.append(
reactionsRow.container,
CreateRowFromCheckboxField(suggestCheckboxField).container,
CreateRowFromCheckboxField(loopCheckboxField).container
);
this.scrollable.append(section.container);
}
}

12
src/components/sidebarLeft/tabs/notifications.ts
View File

@ -36,13 +36,15 @@ export default class AppNotificationsTab extends SliderSuperTabEventable {
const enabledRow = new Row({
checkboxField: new CheckboxField({text: options.typeText, checked: true}),
subtitleLangKey: 'Loading',
listenerSetter: this.listenerSetter
listenerSetter: this.listenerSetter,
withCheckboxSubtitle: true
});
const previewEnabledRow = new Row({
checkboxField: new CheckboxField({text: 'MessagePreview', checked: true}),
subtitleLangKey: 'Loading',
listenerSetter: this.listenerSetter
listenerSetter: this.listenerSetter,
withCheckboxSubtitle: true
});
section.content.append(enabledRow.container, previewEnabledRow.container);
@ -114,13 +116,15 @@ export default class AppNotificationsTab extends SliderSuperTabEventable {
const contactsSignUpRow = new Row({
checkboxField: new CheckboxField({text: 'ContactJoined', checked: true}),
subtitleLangKey: 'Loading',
listenerSetter: this.listenerSetter
listenerSetter: this.listenerSetter,
withCheckboxSubtitle: true
});
const soundRow = new Row({
checkboxField: new CheckboxField({text: 'Notifications.Sound', checked: true, stateKey: 'settings.notifications.sound', listenerSetter: this.listenerSetter}),
subtitleLangKey: 'Loading',
listenerSetter: this.listenerSetter
listenerSetter: this.listenerSetter,
withCheckboxSubtitle: true
});
apiManagerProxy.getState().then((state) => {

6
src/components/sidebarLeft/tabs/privacyAndSecurity.ts
View File

@ -271,8 +271,7 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTabEventable {
const checkboxField = new CheckboxField({text: 'ArchiveAndMute'});
const row = new Row({
checkboxField,
noCheckboxSubtitle: true
checkboxField
});
section.content.append(row.container);
@ -318,8 +317,7 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTabEventable {
const checkboxField = new CheckboxField({text: 'PrivacyAndSecurity.SensitiveText'});
const row = new Row({
checkboxField,
noCheckboxSubtitle: true
checkboxField
});
section.content.append(row.container);

12
src/components/sidebarRight/tabs/editChat.ts
View File

@ -8,7 +8,7 @@ import {SliderSuperTab} from '../../slider'
import InputField from '../../inputField';
import EditPeer from '../../editPeer';
import {SettingSection} from '../../sidebarLeft';
import Row from '../../row';
import Row, {CreateRowFromCheckboxField} from '../../row';
import Button from '../../button';
import {ChatRights} from '../../../lib/appManagers/appChatsManager';
import {Chat, ChatFull} from '../../../layer';
@ -273,8 +273,7 @@ export default class AppEditChatTab extends SliderSuperTab {
if(isBroadcast && await this.managers.appChatsManager.hasRights(this.chatId, 'change_info')) {
const signMessagesCheckboxField = new CheckboxField({
text: 'PeerInfo.SignMessages',
checked: !!(chat as Chat.channel).pFlags.signatures,
withRipple: true
checked: !!(chat as Chat.channel).pFlags.signatures
});
this.listenerSetter.add(signMessagesCheckboxField.input)('change', () => {
@ -288,7 +287,7 @@ export default class AppEditChatTab extends SliderSuperTab {
signMessagesCheckboxField.setValueSilently(!!(chat as Chat.channel).pFlags.signatures);
});
section.content.append(signMessagesCheckboxField.label);
section.content.append(CreateRowFromCheckboxField(signMessagesCheckboxField).container);
}
}
@ -309,8 +308,7 @@ export default class AppEditChatTab extends SliderSuperTab {
if(!isBroadcast && canChangeType) {
const showChatHistoryCheckboxField = new CheckboxField({
text: 'ChatHistory',
withRipple: true
text: 'ChatHistory'
});
this.listenerSetter.add(showChatHistoryCheckboxField.input)('change', () => {
@ -328,7 +326,7 @@ export default class AppEditChatTab extends SliderSuperTab {
onChatUpdate();
addChatUpdateListener(onChatUpdate);
section.content.append(showChatHistoryCheckboxField.label);
section.content.append(CreateRowFromCheckboxField(showChatHistoryCheckboxField).container);
}
if(section.content.childElementCount) {

1
src/components/sidebarRight/tabs/editContact.ts
View File

@ -118,6 +118,7 @@ export default class AppEditContactTab extends SliderSuperTab {
if(!isNew) {
const notificationsRow = new Row({
checkboxField: notificationsCheckboxField,
withCheckboxSubtitle: true,
listenerSetter: this.listenerSetter
});

1
src/components/wrappers/document.ts
View File

@ -60,6 +60,7 @@ export default async function wrapDocument({message, withTime, fontWeight, voice
}): Promise<HTMLElement> {
fontWeight ??= 500;
sizeType ??= '' as any;
fontSize ??= 0;
const noAutoDownload = autoDownloadSize === 0;
const doc = ((message.media as MessageMedia.messageMediaDocument).document || ((message.media as MessageMedia.messageMediaWebPage).webpage as WebPage.webPage).document) as MyDocument;

2
src/helpers/dom/richInputHandler.ts
View File

@ -287,7 +287,7 @@ export default class RichInputHandler {
public makeFocused(input: HTMLElement) {
if(document.activeElement !== input && !this.restoreSavedRange(input)) {
placeCaretAtEnd(input, true, false);
placeCaretAtEnd(input, false, false);
}
}

3
src/lib/appManagers/appMessagesManager.ts
View File

@ -2816,9 +2816,8 @@ export class AppMessagesManager extends AppManager {
if(!isMessage && message.action) {
const action = message.action as MessageAction;
let migrateFrom: PeerId;
let migrateTo: PeerId;
const suffix = message.fromId === this.appUsersManager.getSelf().id ? 'You' : '';
let migrateFrom: PeerId, migrateTo: PeerId;
if((action as MessageAction.messageActionChatEditPhoto).photo) {
(action as MessageAction.messageActionChatEditPhoto).photo = this.appPhotosManager.savePhoto((action as MessageAction.messageActionChatEditPhoto).photo, mediaContext);

5
src/lib/appManagers/appPhotosManager.ts
View File

@ -45,6 +45,11 @@ export class AppPhotosManager extends AppManager {
}
if(photo.sizes?.length) {
// * sometimes photoStrippedSize can be the last item
photo.sizes.sort((a, b) => {
return ((a as PhotoSize.photoSize).size || 0) - ((b as PhotoSize.photoSize).size || 0);
});
const size = photo.sizes[photo.sizes.length - 1];
if(size._ === 'photoSizeProgressive') {
size.size = size.sizes[size.sizes.length - 1];

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

@ -66,7 +66,7 @@ avatar-element {
}
&.tgico-saved:before {
font-size: calc(25px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY
font-size: calc(30px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY
}
&.tgico-reply_filled:before {
@ -78,7 +78,7 @@ avatar-element {
} */
&.tgico-deletedaccount:before {
font-size: calc(54px / var(--multiplier));
font-size: calc(30px / var(--multiplier));
}
&:before {

13
src/scss/partials/_button.scss
View File

@ -36,7 +36,7 @@ $btn-menu-z-index: 4;
padding: .5rem;
position: relative;
// overflow: hidden;
transition: color .15s ease-in-out, opacity .15s ease-in-out, background-color .15s ease-in-out;
transition: color .15s ease-in-out, opacity .15s ease-in-out/* , background-color .15s ease-in-out */;
/* kostil */
display: flex;
@ -70,11 +70,16 @@ $btn-menu-z-index: 4;
border: none;
outline: none;
cursor: pointer;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
@include hover() {
background-color: var(--dark-primary-color);
}
&.is-visible {
--translateY: 0;
@ -323,6 +328,10 @@ $btn-menu-z-index: 4;
width: fit-content;
}
}
.checkbox-field-toggle {
padding: 0;
}
}
/* &-overlay {
@ -601,7 +610,7 @@ $btn-menu-z-index: 4;
transition: .2s opacity;
@include hover() {
transition: .2s background-color, .2s opacity;
transition: /* .2s background-color, */.2s opacity;
background: var(--dark-primary-color);
}

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

@ -8,7 +8,7 @@
$btn-send-margin: .5rem;
$chat-helper-size: 45px;
$chat-input-box-shadow: 0px 1px 8px 1px rgb(0 0 0 / 18%);
$chat-input-box-shadow: 0px 1px 8px 1px rgb(0 0 0 / 12%);
$input-transition-time: .2s;
$input-half-transition-time: math.div($input-transition-time, 2);
@ -240,7 +240,21 @@ $chat-input-border-radius: 1rem;
position: absolute;
right: 0;
top: 0;
background-color: var(--danger-color) !important;
@include hover() {
&:after {
background-color: var(--light-danger-color);
}
}
.c-ripple__circle {
background-color: var(--light-danger-color);
}
&:before {
color: var(--danger-color);
}
// background-color: var(--danger-color) !important;
// background-color: var(--surface-color) !important;
// here percents can be used since there are no other transforms
@ -319,18 +333,28 @@ $chat-input-border-radius: 1rem;
}
.btn-icon {
transition: .2s color, background-color .2s, .2s opacity;
transition: /* .2s color, background-color .2s, */ .2s opacity;
@include animation-level(0) {
transition: none;
}
}
.btn-send,
.btn-cancel-record {
box-shadow: $chat-input-box-shadow;
}
.btn-send {
color: #fff !important;
background-color: var(--primary-color) !important;
// color: var(--secondary-text-color);
z-index: 3;
@include hover() {
background-color: var(--dark-primary-color) !important;
}
// .tgico-send {
// color: var(--primary-color) !important;
// }
@ -383,7 +407,6 @@ $chat-input-border-radius: 1rem;
.btn-send {
font-size: 1.5rem;
line-height: 1.5rem;
color: #fff !important;
}
.record-time {
@ -408,12 +431,13 @@ $chat-input-border-radius: 1rem;
.record-ripple {
border-radius: 50%;
background-color: rgba(0, 0, 0, .2);
background-color: var(--message-highlightning-color);
width: 300px;
height: 300px;
transform: scale(0);
position: absolute;
visibility: hidden;
opacity: .5;
@include respond-to(handhelds) {
width: 240px;
@ -734,7 +758,7 @@ $chat-input-border-radius: 1rem;
}
&:not(.is-dark) &-pattern-canvas {
mix-blend-mode: overlay;
mix-blend-mode: soft-light;
// height: 100%;
}
@ -1741,15 +1765,44 @@ $chat-input-border-radius: 1rem;
transition: transform var(--layer-transition), opacity var(--layer-transition), visibility 0s .2s !important;
}
.bubbles-corner-button {
position: absolute;
background-color: var(--surface-color);
.chat-secondary-button {
position: absolute;
background-color: var(--surface-color) !important;
border-radius: 50%;
color: var(--secondary-text-color);
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: $chat-input-box-shadow !important;
@include animation-level(0) {
transition: none !important;
}
&:before {
position: relative;
}
&:after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
}
@include hover() {
&:after {
background-color: var(--light-secondary-text-color);
}
}
}
.bubbles-corner-button {
right: var(--chat-input-padding);
//top: calc((var(--chat-input-size) * -1) - 6px);
bottom: calc(var(--chat-input-size) + var(--bottom) + 10px);
@ -1759,10 +1812,6 @@ $chat-input-border-radius: 1rem;
//--translateY: calc(var(--chat-input-size) + 10px);
//--translateY: calc(100% + 10px);
@include animation-level(0) {
transition: none !important;
}
/* &.is-broadcast {
--translateY: 99px !important;
} */

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

@ -36,6 +36,7 @@
height: auto;
pointer-events: all;
// max-height: 20rem;
max-height: 207px !important;
@include animation-level(2) {
opacity: 0;

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

@ -11,6 +11,8 @@ $bubble-margin-big: .5rem;
$bubble-overflow: math.div($bubble-margin-big, 8);
$bubble-overflow-big: math.div($bubble-margin-big, 2);
$bubble-beside-button-width: 38px;
$bubble-border-radius-medium: 6px;
$bubble-border-radius-big: 12px;
@keyframes bubbleSelected {
0% {
@ -309,7 +311,7 @@ $bubble-beside-button-width: 38px;
//min-width: 60px;
min-width: 56px;
max-width: 100%;
border-radius: 12px;
border-radius: $bubble-border-radius-big;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .15);
position: relative;
display: flex;
@ -413,6 +415,7 @@ $bubble-beside-button-width: 38px;
transition: opacity .3s ease;
opacity: .99999; // for safari
pointer-events: none;
font-weight: var(--font-weight-bold);
&:before,
&:after {
@ -1211,7 +1214,8 @@ $bubble-beside-button-width: 38px;
.reply {
padding: .25rem;
margin: 0 .25rem .375rem .375rem;
margin: .375rem;
margin-top: 0;
cursor: pointer;
border-radius: .25rem;
min-width: 10rem;
@ -1243,6 +1247,10 @@ $bubble-beside-button-width: 38px;
&:not(.just-media) {
.reply {
border-radius: $bubble-border-radius-medium;
// border-top-left-radius: $bubble-border-radius-medium;
// border-top-right-radius: $bubble-border-radius-medium;
@include hover() {
background-color: var(--light-filled-message-primary-color);
}
@ -1828,6 +1836,10 @@ $bubble-beside-button-width: 38px;
.reaction-block {
--chosen-background-color: var(--primary-color);
&:hover:after {
content: none;
}
}
}
@ -1919,19 +1931,20 @@ $bubble-beside-button-width: 38px;
}
.video-time {
--height: calc(var(--messages-time-text-size) + .375rem);
position: absolute;
top: 3px;
left: 3px;
border-radius: 12px;
border-radius: var(--height);
background-color: var(--message-time-background);
padding: 0px 6px 0px 6px;
padding: 0px 6px;
z-index: 2;
font-size: var(--messages-time-text-size);
color: white;
display: flex;
align-items: center;
user-select: none;
height: calc(var(--messages-time-text-size) + .375rem);
height: var(--height);
line-height: 1;
&.can-autoplay:after {
@ -2153,7 +2166,7 @@ $bubble-beside-button-width: 38px;
}
&-footer {
height: 3.1875rem;
height: 3.0625rem;
border-top: .0625rem solid var(--border-color);
position: relative;
display: flex;
@ -2163,6 +2176,18 @@ $bubble-beside-button-width: 38px;
border-bottom-right-radius: inherit;
color: var(--primary-color);
min-width: 15rem;
@include hover() {
background-color: var(--light-primary-color);
& ~ .bubble-tail {
fill: var(--light-filled-message-primary-color);
}
// .tgico-next {
// animation: arrow-shake .3s ease-out forwards;
// }
}
.tgico-comments,
.tgico-next {
@ -2252,8 +2277,33 @@ $bubble-beside-button-width: 38px;
background-color: inherit !important;
}
}
&.with-reply-markup {
.bubble-content {
border-bottom-left-radius: $bubble-border-radius-medium !important;
border-bottom-right-radius: $bubble-border-radius-medium !important;
}
}
}
// @keyframes arrow-shake {
// 0% {
// transform: translateX(0);
// }
// 25% {
// transform: translateX(-.25rem);
// }
// 75% {
// transform: translateX(.125rem);
// }
// 100% {
// transform: translateX(0);
// }
// }
// * fix scroll with only 1 bubble
.bubbles-date-group:last-of-type {
.bubbles-group:last-of-type {
@ -2373,24 +2423,24 @@ $bubble-beside-button-width: 38px;
.bubble.is-in {
.bubble-content {
&,
&,
.poll-footer-button {
border-radius: 6px 12px 12px 6px;
border-radius: $bubble-border-radius-medium $bubble-border-radius-big $bubble-border-radius-big $bubble-border-radius-medium;
}
}
&.is-group-first {
.bubble-content,
.bubble-content,
.poll-footer-button {
border-top-left-radius: 12px;
border-top-left-radius: $bubble-border-radius-big;
}
}
&.is-group-last {
&.can-have-tail {
.bubble-content,
.bubble-content,
.poll-footer-button {
border-bottom-left-radius: 0;
border-bottom-left-radius: 0 !important;
}
.bubble-tail {
@ -2406,7 +2456,7 @@ $bubble-beside-button-width: 38px;
&:not(.can-have-tail) {
.bubble-content,
.poll-footer-button {
border-bottom-left-radius: 12px;
border-bottom-left-radius: $bubble-border-radius-big;
}
}
}
@ -2477,18 +2527,28 @@ $bubble-beside-button-width: 38px;
color: var(--monospace-text-color);
}
&:not(.just-media) .reply.is-overriding-color {
.reply-border {
background-color: rgb(var(--override-color));
&:not(.just-media) {
.reply {
&.is-overriding-color {
.reply-border {
background-color: rgb(var(--override-color));
}
.reply-title {
color: rgb(var(--override-color));
}
@include hover() {
background-color: rgba(var(--override-color), #{$hover-alpha});
}
}
}
.reply-title {
color: rgb(var(--override-color));
}
@include hover() {
background-color: rgba(var(--override-color), #{$hover-alpha});
}
// &:not(.is-group-first) {
// .reply {
// border-top-left-radius: .25rem;
// }
// }
}
}
@ -2507,7 +2567,7 @@ $bubble-beside-button-width: 38px;
&,
.poll-footer-button {
border-radius: 12px 6px 6px 12px;
border-radius: $bubble-border-radius-big $bubble-border-radius-medium $bubble-border-radius-medium $bubble-border-radius-big;
}
.name {
@ -2553,7 +2613,7 @@ $bubble-beside-button-width: 38px;
&.is-group-first {
.bubble-content,
.poll-footer-button {
border-top-right-radius: 12px;
border-top-right-radius: $bubble-border-radius-big;
}
}
@ -2561,7 +2621,7 @@ $bubble-beside-button-width: 38px;
&.can-have-tail {
.bubble-content,
.poll-footer-button {
border-bottom-right-radius: 0;
border-bottom-right-radius: 0 !important;
}
.bubble-tail {
@ -2578,7 +2638,7 @@ $bubble-beside-button-width: 38px;
&:not(.can-have-tail) {
.bubble-content,
.poll-footer-button {
border-bottom-right-radius: 12px;
border-bottom-right-radius: $bubble-border-radius-big;
}
}
}
@ -2605,6 +2665,12 @@ $bubble-beside-button-width: 38px;
color: var(--message-out-primary-color) !important;
}
}
// &:not(.is-group-first) {
// .reply {
// border-top-right-radius: .25rem;
// }
// }
}
.quote:before {
@ -2891,29 +2957,36 @@ $bubble-beside-button-width: 38px;
.reply-markup {
width: 100%;
margin-top: .0625rem;
.bubble:not(.is-group-last) & {
margin-bottom: $bubble-margin;
}
&-row {
margin-top: .1875rem;
margin-top: $bubble-margin;
overflow: hidden;
min-height: 2.5rem;
display: flex;
border-radius: .375rem;
&:last-child {
border-bottom-left-radius: $border-radius-big;
border-bottom-right-radius: $border-radius-big;
}
.reply-markup-button {
&:first-child {
border-bottom-left-radius: $border-radius-big;
}
&:last-child {
border-bottom-right-radius: $border-radius-big;
}
}
}
}
&-button {
padding: .5625rem 0;
border-radius: inherit;
border-radius: .375rem;
z-index: 2;
font-size: .875rem;
font-size: var(--font-size-14);
user-select: none;
text-align: center;
color: #fff !important;
@ -2925,6 +2998,12 @@ $bubble-beside-button-width: 38px;
overflow: hidden;
//line-height: var(--line-height);
background: var(--message-highlightning-color);
font-weight: var(--font-weight-bold);
&-text {
position: relative;
pointer-events: none;
}
&.anchor-url {
text-decoration: none !important;
@ -2942,10 +3021,6 @@ $bubble-beside-button-width: 38px;
opacity: 0;
z-index: -1;
background-color: #fff;
@include animation-level(2) {
transition: opacity .35s ease;
}
}
@include hover() {
@ -2955,7 +3030,15 @@ $bubble-beside-button-width: 38px;
}
& + & {
margin-left: .3125rem;
margin-left: $bubble-margin;
}
&:first-child {
border-bottom-left-radius: inherit;
}
&:last-child {
border-bottom-right-radius: inherit;
}
&.tgico:before,

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

@ -370,7 +370,7 @@ ul.chatlist {
height: 1.25rem;
position: relative;
flex: 0 0 auto;
border-radius: .125rem;
border-radius: .25rem;
margin-top: -0.125rem;
margin-right: 0.375rem;
display: inline-block;

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

@ -351,7 +351,7 @@
.checkbox-field-toggle {
--size: 20px;
margin: 0 .3125rem;
padding: 0;
padding: 0 .25rem; // horizontal because of the bounce
display: flex;
align-items: center;
pointer-events: none;
@ -383,7 +383,7 @@
position: absolute;
@include animation-level(2) {
transition: border-color .1s, transform .1s;
transition: border-color .1s, transform .1s cubic-bezier(.22, .75, .7, 1.44);
}
}
}

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

@ -293,6 +293,10 @@ $menu-transition-duration: .2s;
.menu-horizontal-inner-scroll {
pointer-events: none;
}
.menu-horizontal-div-item:first-child {
pointer-events: all;
}
}
}

27
src/scss/partials/_leftSidebar.scss
View File

@ -73,13 +73,13 @@
}
}
.item-main {
--menu-size: 3.1875rem;
}
// .item-main {
// --menu-size: 3.1875rem;
// }
.menu-horizontal {
&-scrollable {
--scrollable-size: var(--menu-size);
// --scrollable-size: var(--menu-size);
z-index: 1;
background-color: var(--surface-color);
position: relative;
@ -99,7 +99,7 @@
}
&:not(.hide) + #folders-container {
height: calc(100% - var(--menu-size));
height: calc(100% - var(--scrollable-size));
position: relative;
.scrollable {
@ -120,7 +120,7 @@
position: relative !important;
justify-content: flex-start;
z-index: 0;
padding: 0 0 5px; // 4px + 1px border
// padding: 0 0 5px; // 4px + 1px border // floating design
--padding-horizontal: .6875rem;
@include respond-to(handhelds) {
@ -153,6 +153,9 @@
} */
.item-main {
--offset-top: 0;
background-color: var(--surface-color);
.input-search {
/* &-input {
--paddingLeft: 0px;
@ -161,7 +164,7 @@
.selector-user {
height: 30px;
position: absolute!important;
position: absolute !important;
left: 6px;
top: 6px;
z-index: 1;
@ -246,7 +249,6 @@
&.has-filters {
.connection-status-bottom {
--offset-top: -3px;
height: calc(100% + var(--offset-top) * -1);
}
}
@ -292,11 +294,10 @@
right: 0;
bottom: 0;
left: 0;
transition: .2s opacity, .15s background-color;
z-index: 2;
margin: 0;
body.animation-level-0 &, body.animation-level-0 &:before {
body.animation-level-0 &:before {
transition: none;
}
@ -318,7 +319,7 @@
width: 100%;
.btn-menu {
width: 300px;
width: 260px;
max-height: calc(100 * var(--vh) - 3.75rem);
.archived-count {
@ -396,7 +397,7 @@
}
.item-main .sidebar-content {
overflow: visible;
// overflow: visible;
justify-content: center;
.btn-menu {
@ -541,7 +542,7 @@
#search-container {
display: flex;
top: -3px !important;
top: var(--offset-top) !important;
.scrollable-y {
position: relative;

19
src/scss/partials/_reaction.scss
View File

@ -114,6 +114,25 @@
margin-right: var(--margin);
color: var(--counter-color);
@include hover() {
&:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: " ";
background-color: var(--chosen-background-color);
border-radius: inherit;
opacity: $hover-alpha;
}
}
.reaction-sticker,
.reaction-counter {
z-index: 1;
}
&:last-child {
margin-right: 0;
}

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

@ -140,6 +140,14 @@
.search-super {
top: 100%;
min-height: calc((var(--vh, 1vh) * 100) - 56px);
&-tabs {
--padding-horizontal: 0;
.menu-horizontal-div-item {
border-radius: 0 !important;
}
}
}
.sidebar-header .transition {
@ -219,8 +227,10 @@
&-tabs {
width: auto;
flex: 1 1 auto;
padding: .25rem 0;
--padding-horizontal: .25rem;
// floating design
// padding: .25rem 0;
// --padding-horizontal: .25rem;
//margin-top: 36px;
/* i {
@ -391,7 +401,7 @@
}
&-field {
position: absolute;
position: absolute !important;
z-index: 2;
margin: 0;
}
@ -538,6 +548,7 @@
.checkbox-field {
padding: 0 !important;
margin: 2rem 0 0 -1.75rem !important;
--offset-left: 0 !important;
}
@include respond-to(not-handhelds) {
@ -861,7 +872,6 @@
.edit-contact-container {
.input-wrapper {
margin-top: 1.8125rem;
padding-bottom: 1rem;
}
.avatar-placeholder {

19
src/scss/partials/_row.scss
View File

@ -16,6 +16,12 @@ $row-border-radius: $border-radius-medium;
flex-direction: column;
justify-content: center;
&.no-subtitle {
min-height: 3rem;
padding-top: .1875rem;
padding-bottom: .1875rem;
}
@include animation-level(2) {
transition: opacity var(--transition-standard-in);
}
@ -151,20 +157,27 @@ $row-border-radius: $border-radius-medium;
}
&-media {
width: 3rem !important;
height: 3rem !important;
width: 2.25rem !important;
height: 2.25rem !important;
position: absolute !important;
margin: 0 !important;
left: .5rem;
left: .625rem;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
&-small {
width: 2rem !important;
height: 2rem !important;
left: .75rem !important;
}
&-big {
width: 3rem !important;
height: 3rem !important;
left: .5rem !important;
}
}
&.menu-open {

10
src/scss/partials/_slider.scss
View File

@ -4,8 +4,10 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
$menu-size: 3rem;
.menu-horizontal-scrollable {
--scrollable-size: 3.5rem;
--scrollable-size: #{$menu-size};
height: var(--scrollable-size);
&:after {
@ -25,7 +27,7 @@
}
.menu-horizontal-div {
--size: var(--scrollable-size, 3.5rem);
--size: var(--scrollable-size, #{$menu-size});
--padding-horizontal: 0px;
width: 100%;
height: var(--size);
@ -48,7 +50,7 @@
}
.menu-horizontal-div-item {
border-radius: $border-radius-medium;
border-radius: $border-radius-medium $border-radius-medium 0 0;
}
}
@ -99,7 +101,7 @@
i {
position: absolute;
bottom: calc(-.6875rem - 6px);
bottom: -.8125rem;
left: 0;
opacity: 0;
background-color: var(--primary-color);

6
src/scss/partials/popups/_mediaAttacher.scss
View File

@ -33,12 +33,12 @@
.btn-primary {
width: auto;
height: 36px;
font-size: 14px;
font-weight: normal;
height: 2.25rem;
font-size: var(--font-size-14);
padding: 0 1.375rem;
border-radius: $border-radius-medium;
text-transform: uppercase;
line-height: 2.25rem;
}
}

35
src/scss/style.scss
View File

@ -170,7 +170,7 @@ $chat-input-inner-padding-handhelds: .25rem;
}
}
@mixin splitColor($property, $color, $light: true, $dark: true, $light-rgb: false, $dark-rgb: false, $rgb: false) {
@mixin splitColor($property, $color, $light: true, $dark: true, $light-rgb: false, $dark-rgb: false, $rgb: false, $alpha: $hover-alpha) {
--#{$property}: #{$color};
$lightened: hover-color($color);
@ -182,7 +182,7 @@ $chat-input-inner-padding-handhelds: .25rem;
--light-filled-#{$property}: #{rgba-to-rgb($lightened, $light-rgb)};
}
$darkened: darken($color, $hover-alpha * 100);
$darkened: darken($color, $alpha * 100);
@if $dark != false {
--dark-#{$property}: #{$darkened};
}
@ -212,13 +212,13 @@ $chat-input-inner-padding-handhelds: .25rem;
--input-search-background-color: #fff;
--input-search-border-color: #dfe1e5;
@include splitColor(primary-color, #3390ec, true, true, #fff, false, true);
@include splitColor(primary-color, #3390ec, true, true, #fff, false, true, .04);
@include splitColor(primary-text-color, #000, false, false, false, false, true);
--secondary-color: #c4c9cc;
@include splitColor(secondary-text-color, #707579, true, false);
@include splitColor(danger-color, #df3f40, true, false);
@include splitColor(danger-color, #df3f40, true, true);
--avatar-online-color: #0ac630;
--avatar-color-top: var(--peer-avatar-blue-top);
@ -295,7 +295,7 @@ $chat-input-inner-padding-handhelds: .25rem;
--secondary-color: #707579;
@include splitColor(secondary-text-color, #aaaaaa, true, false);
@include splitColor(danger-color, #ff595a, true, false);
@include splitColor(danger-color, #ff595a, true, true);
--avatar-online-color: #0ac630;
--avatar-color-top: var(--peer-avatar-violet-top);
@ -1989,3 +1989,28 @@ hr {
}
}
}
// .contacts-container .chatlist-chat {
// /* align-items: center; */
// /* align-items: center; */
// }
// .contacts-container .dialog-title {
// /* height: 21px; */
// height: 20px;
// /* line-height: 21px; */
// line-height: 20px;
// }
// .contacts-container .dialog-subtitle {
// /* margin-top: 1px; */
// margin-top: 0;
// vertical-align: middle;
// }
// .contacts-container .user-caption {
// /* padding-left: 22px; */
// /* padding-left: 22px; */
// /* padding-top: 0; */
// /* padding-bottom: 0; */
// padding: 1px 0 1px 22px;
// }

11
src/scss/tgico/_style.scss
View File

@ -3,9 +3,9 @@
@font-face {
font-family: '#{$tgico-font-family}';
src:
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?2teg58') format('truetype'),
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?2teg58') format('woff'),
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?2teg58##{$tgico-font-family}') format('svg');
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?6k8p6j') format('truetype'),
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?6k8p6j') format('woff'),
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?6k8p6j##{$tgico-font-family}') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@ -122,6 +122,11 @@
content: $tgico-avatarprevious;
}
}
.tgico-binfilled {
&:before {
content: $tgico-binfilled;
}
}
.tgico-bold {
&:before {
content: $tgico-bold;

371
src/scss/tgico/_variables.scss
View File

@ -16,189 +16,190 @@ $tgico-audio_repeat: "\e90e";
$tgico-audio_repeat_single: "\e90f";
$tgico-avatarnext: "\e910";
$tgico-avatarprevious: "\e911";
$tgico-bold: "\e912";
$tgico-botcom: "\e913";
$tgico-bots: "\e914";
$tgico-bug: "\e915";
$tgico-calendar: "\e916";
$tgico-calendarfilter: "\e917";
$tgico-camera: "\e918";
$tgico-cameraadd: "\e919";
$tgico-car: "\e91a";
$tgico-card: "\e91b";
$tgico-card_outline: "\e91c";
$tgico-channel: "\e91d";
$tgico-channelviews: "\e91e";
$tgico-chatspinned: "\e91f";
$tgico-chatsplaceholder: "\e920";
$tgico-check1: "\e921";
$tgico-checkbox: "\e922";
$tgico-checkboxblock: "\e923";
$tgico-checkboxempty: "\e924";
$tgico-checkboxon: "\e925";
$tgico-checkretract: "\e926";
$tgico-checkround: "\e927";
$tgico-close: "\e928";
$tgico-clouddownload: "\e929";
$tgico-colorize: "\e92a";
$tgico-comments: "\e92b";
$tgico-commentssticker: "\e92c";
$tgico-copy: "\e92d";
$tgico-darkmode: "\e92e";
$tgico-data: "\e92f";
$tgico-delete: "\e930";
$tgico-delete_filled: "\e931";
$tgico-deletedaccount: "\e932";
$tgico-deleteleft: "\e933";
$tgico-deleteuser: "\e934";
$tgico-devices: "\e935";
$tgico-document: "\e936";
$tgico-down: "\e937";
$tgico-download: "\e938";
$tgico-dragfiles: "\e939";
$tgico-dragmedia: "\e93a";
$tgico-eats: "\e93b";
$tgico-edit: "\e93c";
$tgico-email: "\e93d";
$tgico-endcall_filled: "\e93e";
$tgico-enter: "\e93f";
$tgico-eye1: "\e940";
$tgico-eye2: "\e941";
$tgico-fast_forward: "\e942";
$tgico-fast_rewind: "\e943";
$tgico-favourites: "\e944";
$tgico-flag: "\e945";
$tgico-flip: "\e946";
$tgico-folder: "\e947";
$tgico-fontsize: "\e948";
$tgico-forward: "\e949";
$tgico-forward_filled: "\e94a";
$tgico-fullscreen: "\e94b";
$tgico-gc_microphone: "\e94c";
$tgico-gc_microphoneoff: "\e94d";
$tgico-gifs: "\e94e";
$tgico-group: "\e94f";
$tgico-help: "\e950";
$tgico-image: "\e951";
$tgico-info: "\e952";
$tgico-info2: "\e953";
$tgico-italic: "\e954";
$tgico-keyboard: "\e955";
$tgico-lamp: "\e956";
$tgico-language: "\e957";
$tgico-largepause: "\e958";
$tgico-largeplay: "\e959";
$tgico-left: "\e95a";
$tgico-limit_chat: "\e95b";
$tgico-limit_chats: "\e95c";
$tgico-limit_file: "\e95d";
$tgico-limit_folders: "\e95e";
$tgico-limit_link: "\e95f";
$tgico-limit_pin: "\e960";
$tgico-link: "\e961";
$tgico-listscreenshare: "\e962";
$tgico-livelocation: "\e963";
$tgico-location: "\e964";
$tgico-lock: "\e965";
$tgico-lockoff: "\e966";
$tgico-loginlogodesktop: "\e967";
$tgico-loginlogomobile: "\e968";
$tgico-logout: "\e969";
$tgico-mention: "\e96a";
$tgico-menu: "\e96b";
$tgico-message: "\e96c";
$tgico-messageunread: "\e96d";
$tgico-microphone: "\e96e";
$tgico-microphone_crossed: "\e96f";
$tgico-microphone_crossed_filled: "\e970";
$tgico-microphone_filled: "\e971";
$tgico-minus: "\e972";
$tgico-monospace: "\e973";
$tgico-more: "\e974";
$tgico-mute: "\e975";
$tgico-muted: "\e976";
$tgico-newchannel: "\e977";
$tgico-newchat_filled: "\e978";
$tgico-newgroup: "\e979";
$tgico-newprivate: "\e97a";
$tgico-next: "\e97b";
$tgico-noncontacts: "\e97c";
$tgico-nosound: "\e97d";
$tgico-passwordoff: "\e97e";
$tgico-pause: "\e97f";
$tgico-permissions: "\e980";
$tgico-phone: "\e981";
$tgico-pin: "\e982";
$tgico-pinlist: "\e983";
$tgico-pinned_filled: "\e984";
$tgico-pinnedchat: "\e985";
$tgico-pip: "\e986";
$tgico-play: "\e987";
$tgico-playback_05: "\e988";
$tgico-playback_15: "\e989";
$tgico-playback_1x: "\e98a";
$tgico-playback_2x: "\e98b";
$tgico-plus: "\e98c";
$tgico-poll: "\e98d";
$tgico-premium_addone: "\e98e";
$tgico-premium_double: "\e98f";
$tgico-premium_lock: "\e990";
$tgico-premium_unlock: "\e991";
$tgico-previous: "\e992";
$tgico-radiooff: "\e993";
$tgico-radioon: "\e994";
$tgico-reactions: "\e995";
$tgico-readchats: "\e996";
$tgico-recent: "\e997";
$tgico-replace: "\e998";
$tgico-reply: "\e999";
$tgico-reply_filled: "\e99a";
$tgico-rightpanel: "\e99b";
$tgico-rotate_left: "\e99c";
$tgico-rotate_right: "\e99d";
$tgico-saved: "\e99e";
$tgico-savedmessages: "\e99f";
$tgico-schedule: "\e9a0";
$tgico-scheduled: "\e9a1";
$tgico-search: "\e9a2";
$tgico-select: "\e9a3";
$tgico-send: "\e9a4";
$tgico-send2: "\e9a5";
$tgico-sending: "\e9a6";
$tgico-sendingerror: "\e9a7";
$tgico-settings: "\e9a8";
$tgico-settings_filled: "\e9a9";
$tgico-sharescreen_filled: "\e9aa";
$tgico-shipping: "\e9ab";
$tgico-shuffle: "\e9ac";
$tgico-smallscreen: "\e9ad";
$tgico-smile: "\e9ae";
$tgico-spoiler: "\e9af";
$tgico-sport: "\e9b0";
$tgico-star: "\e9b1";
$tgico-stickers: "\e9b2";
$tgico-stickers_face: "\e9b3";
$tgico-stop: "\e9b4";
$tgico-strikethrough: "\e9b5";
$tgico-textedit: "\e9b6";
$tgico-tip: "\e9b7";
$tgico-tools: "\e9b8";
$tgico-unarchive: "\e9b9";
$tgico-underline: "\e9ba";
$tgico-unmute: "\e9bb";
$tgico-unpin: "\e9bc";
$tgico-unread: "\e9bd";
$tgico-up: "\e9be";
$tgico-user: "\e9bf";
$tgico-username: "\e9c0";
$tgico-videocamera: "\e9c1";
$tgico-videocamera_crossed_filled: "\e9c2";
$tgico-videocamera_filled: "\e9c3";
$tgico-videochat: "\e9c4";
$tgico-volume_down: "\e9c5";
$tgico-volume_mute: "\e9c6";
$tgico-volume_off: "\e9c7";
$tgico-volume_up: "\e9c8";
$tgico-zoomin: "\e9c9";
$tgico-zoomout: "\e9ca";
$tgico-binfilled: "\e912";
$tgico-bold: "\e913";
$tgico-botcom: "\e914";
$tgico-bots: "\e915";
$tgico-bug: "\e916";
$tgico-calendar: "\e917";
$tgico-calendarfilter: "\e918";
$tgico-camera: "\e919";
$tgico-cameraadd: "\e91a";
$tgico-car: "\e91b";
$tgico-card: "\e91c";
$tgico-card_outline: "\e91d";
$tgico-channel: "\e91e";
$tgico-channelviews: "\e91f";
$tgico-chatspinned: "\e920";
$tgico-chatsplaceholder: "\e921";
$tgico-check1: "\e922";
$tgico-checkbox: "\e923";
$tgico-checkboxblock: "\e924";
$tgico-checkboxempty: "\e925";
$tgico-checkboxon: "\e926";
$tgico-checkretract: "\e927";
$tgico-checkround: "\e928";
$tgico-close: "\e929";
$tgico-clouddownload: "\e92a";
$tgico-colorize: "\e92b";
$tgico-comments: "\e92c";
$tgico-commentssticker: "\e92d";
$tgico-copy: "\e92e";
$tgico-darkmode: "\e92f";
$tgico-data: "\e930";
$tgico-delete: "\e931";
$tgico-delete_filled: "\e932";
$tgico-deletedaccount: "\e933";
$tgico-deleteleft: "\e934";
$tgico-deleteuser: "\e935";
$tgico-devices: "\e936";
$tgico-document: "\e937";
$tgico-down: "\e938";
$tgico-download: "\e939";
$tgico-dragfiles: "\e93a";
$tgico-dragmedia: "\e93b";
$tgico-eats: "\e93c";
$tgico-edit: "\e93d";
$tgico-email: "\e93e";
$tgico-endcall_filled: "\e93f";
$tgico-enter: "\e940";
$tgico-eye1: "\e941";
$tgico-eye2: "\e942";
$tgico-fast_forward: "\e943";
$tgico-fast_rewind: "\e944";
$tgico-favourites: "\e945";
$tgico-flag: "\e946";
$tgico-flip: "\e947";
$tgico-folder: "\e948";
$tgico-fontsize: "\e949";
$tgico-forward: "\e94a";
$tgico-forward_filled: "\e94b";
$tgico-fullscreen: "\e94c";
$tgico-gc_microphone: "\e94d";
$tgico-gc_microphoneoff: "\e94e";
$tgico-gifs: "\e94f";
$tgico-group: "\e950";
$tgico-help: "\e951";
$tgico-image: "\e952";
$tgico-info: "\e953";
$tgico-info2: "\e954";
$tgico-italic: "\e955";
$tgico-keyboard: "\e956";
$tgico-lamp: "\e957";
$tgico-language: "\e958";
$tgico-largepause: "\e959";
$tgico-largeplay: "\e95a";
$tgico-left: "\e95b";
$tgico-limit_chat: "\e95c";
$tgico-limit_chats: "\e95d";
$tgico-limit_file: "\e95e";
$tgico-limit_folders: "\e95f";
$tgico-limit_link: "\e960";
$tgico-limit_pin: "\e961";
$tgico-link: "\e962";
$tgico-listscreenshare: "\e963";
$tgico-livelocation: "\e964";
$tgico-location: "\e965";
$tgico-lock: "\e966";
$tgico-lockoff: "\e967";
$tgico-loginlogodesktop: "\e968";
$tgico-loginlogomobile: "\e969";
$tgico-logout: "\e96a";
$tgico-mention: "\e96b";
$tgico-menu: "\e96c";
$tgico-message: "\e96d";
$tgico-messageunread: "\e96e";
$tgico-microphone: "\e96f";
$tgico-microphone_crossed: "\e970";
$tgico-microphone_crossed_filled: "\e971";
$tgico-microphone_filled: "\e972";
$tgico-minus: "\e973";
$tgico-monospace: "\e974";
$tgico-more: "\e975";
$tgico-mute: "\e976";
$tgico-muted: "\e977";
$tgico-newchannel: "\e978";
$tgico-newchat_filled: "\e979";
$tgico-newgroup: "\e97a";
$tgico-newprivate: "\e97b";
$tgico-next: "\e97c";
$tgico-noncontacts: "\e97d";
$tgico-nosound: "\e97e";
$tgico-passwordoff: "\e97f";
$tgico-pause: "\e980";
$tgico-permissions: "\e981";
$tgico-phone: "\e982";
$tgico-pin: "\e983";
$tgico-pinlist: "\e984";
$tgico-pinned_filled: "\e985";
$tgico-pinnedchat: "\e986";
$tgico-pip: "\e987";
$tgico-play: "\e988";
$tgico-playback_05: "\e989";
$tgico-playback_15: "\e98a";
$tgico-playback_1x: "\e98b";
$tgico-playback_2x: "\e98c";
$tgico-plus: "\e98d";
$tgico-poll: "\e98e";
$tgico-premium_addone: "\e98f";
$tgico-premium_double: "\e990";
$tgico-premium_lock: "\e991";
$tgico-premium_unlock: "\e992";
$tgico-previous: "\e993";
$tgico-radiooff: "\e994";
$tgico-radioon: "\e995";
$tgico-reactions: "\e996";
$tgico-readchats: "\e997";
$tgico-recent: "\e998";
$tgico-replace: "\e999";
$tgico-reply: "\e99a";
$tgico-reply_filled: "\e99b";
$tgico-rightpanel: "\e99c";
$tgico-rotate_left: "\e99d";
$tgico-rotate_right: "\e99e";
$tgico-saved: "\e99f";
$tgico-savedmessages: "\e9a0";
$tgico-schedule: "\e9a1";
$tgico-scheduled: "\e9a2";
$tgico-search: "\e9a3";
$tgico-select: "\e9a4";
$tgico-send: "\e9a5";
$tgico-send2: "\e9a6";
$tgico-sending: "\e9a7";
$tgico-sendingerror: "\e9a8";
$tgico-settings: "\e9a9";
$tgico-settings_filled: "\e9aa";
$tgico-sharescreen_filled: "\e9ab";
$tgico-shipping: "\e9ac";
$tgico-shuffle: "\e9ad";
$tgico-smallscreen: "\e9ae";
$tgico-smile: "\e9af";
$tgico-spoiler: "\e9b0";
$tgico-sport: "\e9b1";
$tgico-star: "\e9b2";
$tgico-stickers: "\e9b3";
$tgico-stickers_face: "\e9b4";
$tgico-stop: "\e9b5";
$tgico-strikethrough: "\e9b6";
$tgico-textedit: "\e9b7";
$tgico-tip: "\e9b8";
$tgico-tools: "\e9b9";
$tgico-unarchive: "\e9ba";
$tgico-underline: "\e9bb";
$tgico-unmute: "\e9bc";
$tgico-unpin: "\e9bd";
$tgico-unread: "\e9be";
$tgico-up: "\e9bf";
$tgico-user: "\e9c0";
$tgico-username: "\e9c1";
$tgico-videocamera: "\e9c2";
$tgico-videocamera_crossed_filled: "\e9c3";
$tgico-videocamera_filled: "\e9c4";
$tgico-videochat: "\e9c5";
$tgico-volume_down: "\e9c6";
$tgico-volume_mute: "\e9c7";
$tgico-volume_off: "\e9c8";
$tgico-volume_up: "\e9c9";
$tgico-zoomin: "\e9ca";
$tgico-zoomout: "\e9cb";