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

Message text size improvements

This commit is contained in:
Eduard Kuzmenko 2022-11-07 18:25:27 +04:00
parent 2198b90ab3
commit 515f85ef8e
14 changed files with 116 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/audio.ts
View File

@ -209,7 +209,7 @@ async function wrapVoiceMessage(audioEl: AudioElement) {
mousedown = false;
}
mousemove = false;
})
});
progress.addEventListener('mousemove', (e) => {
mousemove = true;
if(mousedown) scrub(e);
@ -301,6 +301,7 @@ async function wrapAudio(audioEl: AudioElement) {
const middleEllipsisEl = new MiddleEllipsisElement();
middleEllipsisEl.dataset.fontWeight = audioEl.dataset.fontWeight;
middleEllipsisEl.dataset.fontSize = audioEl.dataset.fontSize;
middleEllipsisEl.dataset.sizeType = audioEl.dataset.sizeType;
if(isVoice) {
middleEllipsisEl.append(await wrapSenderToPeer(message));

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

@ -528,7 +528,7 @@ export default class ChatBubbles {
if(!tempMessage.media?.document?.thumbs?.length && doc.thumbs?.length) {
getHeavyAnimationPromise().then(async() => {
const timeSpan = div.querySelector('.time');
const newDiv = await wrapDocument({message});
const newDiv = await wrapDocument({message, fontSize: rootScope.settings.messagesTextSize});
div.replaceWith(newDiv);
if(timeSpan) {
@ -3622,6 +3622,8 @@ export default class ChatBubbles {
}
}
customEmojiSize ??= this.chat.appImManager.customEmojiSize;
const richText = wrapRichText(messageMessage, {
entities: totalEntities,
passEntities: this.passEntities,
@ -4012,7 +4014,8 @@ export default class ChatBubbles {
inputFilter: {
_: 'inputMessagesFilterEmpty'
}
}
},
fontSize: rootScope.settings.messagesTextSize
});
preview.append(docDiv);
preview.classList.add('preview-with-document');
@ -4227,7 +4230,8 @@ export default class ChatBubbles {
useSearch: !(message as Message.message).pFlags.is_scheduled,
isScheduled: (message as Message.message).pFlags.is_scheduled
} : undefined,
sizeType: 'documentName'
sizeType: 'documentName',
fontSize: rootScope.settings.messagesTextSize
});
if(newNameContainer) {

4
src/components/middleEllipsis.ts
View File

@ -89,8 +89,10 @@ function testElement(element: HTMLElement) {
from = /* parseFloat(element.getAttribute(attributeName)) || */50;
multiplier = from > 0 && from / 100;
let fontSize = element.dataset.fontSize;
if(fontSize) fontSize += 'px';
// const perf = performance.now();
font = `${element.dataset.fontWeight || FontWeight} ${FontSize} ${FontFamily}`;
font = `${element.dataset.fontWeight || FontWeight} ${fontSize || FontSize} ${FontFamily}`;
/* const computedStyle = window.getComputedStyle(elm, null);
font = `${computedStyle.getPropertyValue('font-weight')} ${computedStyle.getPropertyValue('font-size')} ${computedStyle.getPropertyValue('font-family')}`; */
// console.log('testMiddleEllipsis get computed style:', performance.now() - perf, font);

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

@ -9,7 +9,6 @@ import {CancellablePromise} from '../../helpers/cancellablePromise';
import {clearBadCharsAndTrim} from '../../helpers/cleanSearchText';
import {formatFullSentTime} from '../../helpers/date';
import {simulateClickEvent, attachClickEvent} from '../../helpers/dom/clickEvent';
import replaceContent from '../../helpers/dom/replaceContent';
import formatBytes from '../../helpers/formatBytes';
import {MediaSizeType} from '../../helpers/mediaSizes';
import noop from '../../helpers/noop';
@ -43,7 +42,7 @@ rootScope.addEventListener('document_downloading', (docId) => {
});
});
export default async function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showSender, searchContext, loadPromises, autoDownloadSize, lazyLoadQueue, sizeType, managers = rootScope.managers, cacheContext}: {
export default async function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showSender, searchContext, loadPromises, autoDownloadSize, lazyLoadQueue, sizeType, managers = rootScope.managers, cacheContext, fontSize}: {
message: Message.message,
withTime?: boolean,
fontWeight?: number,
@ -55,10 +54,11 @@ export default async function wrapDocument({message, withTime, fontWeight, voice
lazyLoadQueue?: LazyLoadQueue,
sizeType?: MediaSizeType,
managers?: AppManagers,
cacheContext?: ThumbCache
cacheContext?: ThumbCache,
fontSize?: number
}): Promise<HTMLElement> {
if(!fontWeight) fontWeight = 500;
if(!sizeType) sizeType = '' as any;
fontWeight ??= 500;
sizeType ??= '' as any;
const noAutoDownload = autoDownloadSize === 0;
const doc = ((message.media as MessageMedia.messageMediaDocument).document || ((message.media as MessageMedia.messageMediaWebPage).webpage as WebPage.webPage).document) as MyDocument;
@ -76,6 +76,7 @@ export default async function wrapDocument({message, withTime, fontWeight, voice
if(showSender) audioElement.showSender = showSender;
audioElement.dataset.fontWeight = '' + fontWeight;
audioElement.dataset.fontSize = '' + fontSize;
audioElement.dataset.sizeType = sizeType;
await audioElement.render();
return audioElement;
@ -177,6 +178,7 @@ export default async function wrapDocument({message, withTime, fontWeight, voice
const nameDiv = docDiv.querySelector('.document-name') as HTMLElement;
const middleEllipsisEl = new MiddleEllipsisElement();
middleEllipsisEl.dataset.fontWeight = '' + fontWeight;
middleEllipsisEl.dataset.fontSize = '' + fontSize;
middleEllipsisEl.dataset.sizeType = sizeType;
middleEllipsisEl.textContent = fileName;
// setInnerHTML(middleEllipsisEl, fileName);

10
src/components/wrappers/groupedDocuments.ts
View File

@ -14,7 +14,7 @@ import Chat from '../chat/chat';
import LazyLoadQueue from '../lazyLoadQueue';
import wrapDocument from './document';
export default async function wrapGroupedDocuments({albumMustBeRenderedFull, message, bubble, messageDiv, chat, loadPromises, autoDownloadSize, lazyLoadQueue, searchContext, useSearch, sizeType, managers}: {
export default async function wrapGroupedDocuments({albumMustBeRenderedFull, message, bubble, messageDiv, chat, loadPromises, autoDownloadSize, lazyLoadQueue, searchContext, useSearch, sizeType, managers, fontWeight, fontSize}: {
albumMustBeRenderedFull: boolean,
message: any,
messageDiv: HTMLElement,
@ -27,7 +27,9 @@ export default async function wrapGroupedDocuments({albumMustBeRenderedFull, mes
searchContext?: MediaSearchContext,
useSearch?: boolean,
sizeType?: MediaSizeType,
managers?: AppManagers
managers?: AppManagers,
fontWeight?: number,
fontSize?: number
}) {
let nameContainer: HTMLElement;
const mids = albumMustBeRenderedFull ? await chat.getMidsByMid(message.mid) : [message.mid];
@ -44,7 +46,9 @@ export default async function wrapGroupedDocuments({albumMustBeRenderedFull, mes
lazyLoadQueue,
searchContext,
sizeType,
managers
managers,
fontWeight,
fontSize
});
const container = document.createElement('div');

3
src/helpers/canvas/getTextWidth.ts
View File

@ -17,6 +17,9 @@ export default function getTextWidth(text: string, font: string) {
if(!context) {
const canvas = document.createElement('canvas');
context = canvas.getContext('2d', {alpha: false});
}
if(context.font !== font) {
context.font = font;
}

2
src/helpers/mediaSizes.ts
View File

@ -39,7 +39,7 @@ const MOBILE_SIZE = 600;
const MEDIUM_SIZE = 1275;
const LARGE_SIZE = 1680;
const CUSTOM_EMOJI_SIZE = makeMediaSize(18, 18);
const CUSTOM_EMOJI_SIZE = makeMediaSize(20, 20);
const ESG_CUSTOM_EMOJI_SIZE = makeMediaSize(36, 36);
const EMOJI_STATUS_SIZE = makeMediaSize(18, 18);

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

@ -69,7 +69,7 @@ import uiNotificationsManager from './uiNotificationsManager';
import appMediaPlaybackController from '../../components/appMediaPlaybackController';
import {PHONE_NUMBER_REG_EXP} from '../richTextProcessor';
import wrapEmojiText from '../richTextProcessor/wrapEmojiText';
import wrapRichText from '../richTextProcessor/wrapRichText';
import wrapRichText, {CustomEmojiRendererElement, renderEmojis} from '../richTextProcessor/wrapRichText';
import wrapUrl from '../richTextProcessor/wrapUrl';
import generateMessageId from './utils/messageId/generateMessageId';
import getUserStatusString from '../../components/wrappers/getUserStatusString';
@ -93,6 +93,8 @@ import {CLICK_EVENT_NAME} from '../../helpers/dom/clickEvent';
import PopupPayment from '../../components/popups/payment';
import wrapPeerTitle from '../../components/wrappers/peerTitle';
import NBSP from '../../helpers/string/nbsp';
import {makeMediaSize, MediaSize} from '../../helpers/mediaSize';
import {MiddleEllipsisElement} from '../../components/middleEllipsis';
export type ChatSavedPosition = {
mids: number[],
@ -144,6 +146,7 @@ export class AppImManager extends EventListenerBase<{
public managers: AppManagers;
public cacheStorage = new CacheStorageController('cachedFiles');
public customEmojiSize: MediaSize;
get myId() {
return rootScope.myId;
@ -1365,7 +1368,26 @@ export class AppImManager extends EventListenerBase<{
}
private setSettings = () => {
document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
const {messagesTextSize} = rootScope.settings;
this.customEmojiSize = makeMediaSize(messagesTextSize + 4, messagesTextSize + 4);
document.documentElement.style.setProperty('--messages-text-size', messagesTextSize + 'px');
const firstTime = !this.customEmojiSize;
if(!firstTime) {
const ellipsisElements = document.querySelectorAll<MiddleEllipsisElement>('middle-ellipsis-element');
ellipsisElements.forEach((element) => {
element.disconnectedCallback();
element.dataset.fontSize = '' + messagesTextSize;
if(element.title) element.textContent = element.title;
element.connectedCallback();
});
const renderers = document.querySelectorAll<CustomEmojiRendererElement>('.chat custom-emoji-renderer-element');
renderers.forEach((renderer) => {
renderer.forceRenderAfterSize = true;
});
}
document.body.classList.toggle('animation-level-0', !rootScope.settings.animationsEnabled);
document.body.classList.toggle('animation-level-1', false);

22
src/lib/richTextProcessor/wrapRichText.ts
View File

@ -225,6 +225,8 @@ export class CustomEmojiRendererElement extends HTMLElement {
public ignoreSettingDimensions: boolean;
public forceRenderAfterSize: boolean;
constructor() {
super();
@ -278,7 +280,7 @@ export class CustomEmojiRendererElement extends HTMLElement {
undefined;
}
public getOffsets(offsetsMap: Map<CustomEmojiElements, {top: number, left: number}[]> = new Map()) {
public getOffsets(offsetsMap: Map<CustomEmojiElements, {top: number, left: number, width: number}[]> = new Map()) {
if(!this.playersSynced.size) {
return offsetsMap;
}
@ -304,7 +306,7 @@ export class CustomEmojiRendererElement extends HTMLElement {
const offsets = visible.map(({rect: elementRect}) => {
const top = elementRect.top - rect.top;
const left = elementRect.left - rect.left;
return {top, left};
return {top, left, width: elementRect.width};
});
if(offsets.length) {
@ -368,6 +370,17 @@ export class CustomEmojiRendererElement extends HTMLElement {
frameHeight = frame.height;
}
// ! check performance of scaling
const elementWidth = Math.round(offsets[0].width * dpr);
if(elementWidth !== frameWidth) {
// if(this.size.width === 36) {
// console.warn('different width', elementWidth, frameWidth, this);
// }
frameWidth = elementWidth;
frameHeight = elementWidth;
}
const maxTop = height - frameHeight;
const maxLeft = width - frameWidth;
@ -388,7 +401,7 @@ export class CustomEmojiRendererElement extends HTMLElement {
offsets.forEach(({top, left}) => {
top = Math.round(top * dpr), left = Math.round(left * dpr);
if(/* top > maxTop || */left > maxLeft) {
if(left < 0 ||/* top > maxTop || */left > maxLeft) {
return;
}
@ -456,7 +469,8 @@ export class CustomEmojiRendererElement extends HTMLElement {
this.isDimensionsSet = true;
this.isCanvasClean = true;
if(this.isSelectable && forceRenderAfter) {
if(this.forceRenderAfterSize || (this.isSelectable && forceRenderAfter)) {
this.forceRenderAfterSize = undefined;
this.forceRender();
}
}

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

@ -178,6 +178,7 @@ $chat-input-border-radius: 1rem;
}
.input-message-input {
--custom-emoji-size: var(--messages-custom-emoji-size);
background: none;
border: none;
width: 100%;

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

@ -1143,7 +1143,17 @@ $bubble-beside-button-width: 38px;
}
.reply {
font-size: var(--messages-secondary-text-size);
--font-size: var(--messages-secondary-text-size);
}
.document {
&-name {
font-size: var(--messages-text-size);
}
&-size {
font-size: var(--messages-secondary-text-size);
}
}
&.is-square-photo {
@ -1291,6 +1301,7 @@ $bubble-beside-button-width: 38px;
}
.message {
--custom-emoji-size: var(--messages-custom-emoji-size);
font-size: var(--messages-text-size);
padding: 0 .5rem .375rem .625rem;
max-width: 100%;
@ -1743,7 +1754,7 @@ $bubble-beside-button-width: 38px;
background-color: var(--message-time-background);
padding: 0 .3125rem;
z-index: 2;
.time {
margin-left: 0;
display: flex;
@ -1751,7 +1762,7 @@ $bubble-beside-button-width: 38px;
padding: 0;
margin: 0;
white-space: nowrap;
height: 18px;
height: calc(var(--messages-time-text-size) + .375rem);
.inner {
right: unset;
@ -1811,7 +1822,8 @@ $bubble-beside-button-width: 38px;
.time {
visibility: hidden; // * can't use color transparent here, because in name can be emoji
font-size: 12px;
font-size: var(--messages-time-text-size);
height: var(--messages-time-text-size);
user-select: none;
line-height: 1;
vertical-align: middle;
@ -1820,7 +1832,6 @@ $bubble-beside-button-width: 38px;
z-index: 1;
/* display: inline-flex;
align-items: center; */
height: 12px;
direction: ltr;
float: right; // * rtl fix
cursor: pointer;
@ -1853,7 +1864,7 @@ $bubble-beside-button-width: 38px;
line-height: 1;
padding: inherit;
white-space: nowrap;
height: 12px; // * as font-size
height: var(--messages-time-text-size); // * as font-size
visibility: visible;
}
@ -1884,12 +1895,12 @@ $bubble-beside-button-width: 38px;
background-color: var(--message-time-background);
padding: 0px 6px 0px 6px;
z-index: 2;
font-size: 12px;
font-size: var(--messages-time-text-size);
color: white;
display: flex;
align-items: center;
user-select: none;
height: 1.125rem;
height: calc(var(--messages-time-text-size) + .375rem);
line-height: 1;
&.can-autoplay:after {
@ -1971,8 +1982,8 @@ $bubble-beside-button-width: 38px;
font-weight: var(--font-weight-bold) !important;
/* padding-bottom: 4px; */
color: var(--primary-color);
font-size: .875rem;
line-height: 1.25rem;
font-size: var(--messages-secondary-text-size);
line-height: calc(var(--messages-secondary-text-size) + .25rem);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
@ -2284,10 +2295,10 @@ $bubble-beside-button-width: 38px;
color: #fff;
//background-color: rgba(0, 0, 0, .24);
background-color: var(--message-highlightning-color);
font-size: .9375rem;
font-size: var(--messages-service-text-size);
padding: .28125rem .625rem;
// line-height: var(--line-height);
line-height: 1.25rem;
line-height: calc(var(--messages-service-text-size) + 5px);
border-radius: inherit;
user-select: none;
display: flex;
@ -2579,10 +2590,10 @@ $bubble-beside-button-width: 38px;
&:after,
.inner:after {
font-size: 19px;
font-size: calc(var(--messages-text-size) + 3px);
//vertical-align: middle;
margin-left: 1px;
line-height: 16px; // of message
line-height: var(--messages-time-text-size); // of message
color: var(--message-out-primary-color);
}
}

16
src/scss/partials/_chatPinned.scss
View File

@ -5,6 +5,8 @@
*/
.pinned-message {
--custom-emoji-size: calc(var(--font-size) + 2px) !important;
&-border {
position: relative;
height: 2rem;
@ -123,6 +125,9 @@
.pinned-message,
.reply {
--font-size: var(--font-size-14);
--custom-emoji-size: calc(var(--font-size) + 4px);
--line-height: calc(var(--font-size) + 4px);
cursor: pointer;
display: flex;
align-items: center;
@ -143,6 +148,9 @@
pointer-events: none;
position: relative;
margin-left: .5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
&-title {
@ -151,8 +159,8 @@
&-title,
&-subtitle {
font-size: var(--font-size-14);
line-height: var(--line-height-14);
font-size: var(--font-size);
line-height: var(--line-height);
position: relative; // ! WARNING (for custom emoji)
@include text-overflow();
@ -214,7 +222,7 @@
} */
&-border {
height: 2rem;
height: calc(var(--font-size) * 2 + .25rem);
border-radius: 1px;
min-width: 2px;
background: var(--primary-color);
@ -480,7 +488,7 @@
}
&-title {
margin-top: -.125rem;
// margin-top: -.125rem;
margin-bottom: .25rem;
}

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

@ -55,8 +55,8 @@
&-placeholder {
display: inline;
width: 18px;
height: 18px;
width: var(--messages-custom-emoji-size);
height: var(--messages-custom-emoji-size);
vertical-align: middle;
margin-top: -.125rem;
}

5
src/scss/style.scss
View File

@ -88,6 +88,9 @@ $chat-input-inner-padding-handhelds: .25rem;
--messages-text-size: 16px;
--messages-secondary-text-size: calc(var(--messages-text-size) - 2px);
--messages-secondary-line-height: calc(var(--messages-secondary-text-size) + 4px);
--messages-time-text-size: calc(var(--messages-text-size) - 4px);
--messages-service-text-size: calc(var(--messages-text-size) - 1px);
--messages-custom-emoji-size: calc(var(--messages-text-size) + 4px);
--bubble-transition-in: transform var(--transition-standard-in), opacity var(--transition-standard-in);
--bubble-transition-out: transform var(--transition-standard-out), opacity var(--transition-standard-out);
--line-height: 1.3125;
@ -118,7 +121,7 @@ $chat-input-inner-padding-handhelds: .25rem;
--call-button-size: 3.375rem;
--call-button-margin: 2rem;
--custom-emoji-size: 1.125rem;
--custom-emoji-size: 1.25rem;
// https://github.com/overtake/TelegramSwift/blob/5cc7d2475fe4738a6aa0486c23eaf80a89d33b97/submodules/TGUIKit/TGUIKit/PresentationTheme.swift#L2054
--peer-avatar-red-top: #ff885e;