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

Fixes for floating reply

Browse Source 
Fix round video size on mobiles
This commit is contained in:
Eduard Kuzmenko 2021-09-04 02:53:05 +03:00
parent 54d55e7c9e
commit c1ccc73fc3
6 changed files with 268 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2467,7 +2467,9 @@ export default class ChatBubbles {
const isOut = our && (!message.fwd_from || this.peerId !== rootScope.myId); const isOut = our && (!message.fwd_from || this.peerId !== rootScope.myId);
let nameContainer: HTMLElement = bubbleContainer; let nameContainer: HTMLElement = bubbleContainer;
let isStandaloneMedia = false;
// media // media
if(messageMedia/* && messageMedia._ === 'messageMediaPhoto' */) { if(messageMedia/* && messageMedia._ === 'messageMediaPhoto' */) {
let attachmentDiv = document.createElement('div'); let attachmentDiv = document.createElement('div');
@ -2488,7 +2490,11 @@ export default class ChatBubbles {
canHaveTail = false; canHaveTail = false;
} }
bubble.classList.add('hide-name', 'photo'); if(!message.viaBotId) {
bubble.classList.add('hide-name');
}
bubble.classList.add('photo');
const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id]; const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id];
if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) { if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) {
@ -2671,13 +2677,14 @@ export default class ChatBubbles {
} }
case 'messageMediaDocument': { case 'messageMediaDocument': {
let doc = messageMedia.document; const doc = messageMedia.document;
//this.log('messageMediaDocument', doc, bubble); //this.log('messageMediaDocument', doc, bubble);
if(doc.sticker/* && doc.size <= 1e6 */) { if(doc.sticker/* && doc.size <= 1e6 */) {
bubble.classList.add('sticker'); bubble.classList.add('sticker');
canHaveTail = false; canHaveTail = false;
isStandaloneMedia = true;
if(doc.animated) { if(doc.animated) {
bubble.classList.add('sticker-animated'); bubble.classList.add('sticker-animated');
@ -2703,16 +2710,23 @@ export default class ChatBubbles {
withThumb: true, withThumb: true,
loadPromises loadPromises
}); });
break;
} else if(doc.type === 'video' || doc.type === 'gif' || doc.type === 'round'/* && doc.size <= 20e6 */) { } else if(doc.type === 'video' || doc.type === 'gif' || doc.type === 'round'/* && doc.size <= 20e6 */) {
//this.log('never get free 2', doc); //this.log('never get free 2', doc);
if(doc.type === 'round' || !messageMessage) { const isRound = doc.type === 'round';
if(isRound) {
isStandaloneMedia = true;
}
if(isRound || !messageMessage) {
canHaveTail = false; canHaveTail = false;
} }
if(!message.viaBotId) {
bubble.classList.add('hide-name');
}
bubble.classList.add('hide-name', doc.type === 'round' ? 'round' : 'video'); bubble.classList.add(isRound ? 'round' : 'video');
const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id]; const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id];
if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) { if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) {
bubble.classList.add('is-album', 'is-grouped'); bubble.classList.add('is-album', 'is-grouped');
@ -2728,7 +2742,7 @@ export default class ChatBubbles {
noAutoDownload: this.chat.noAutoDownloadMedia, noAutoDownload: this.chat.noAutoDownloadMedia,
}); });
} else { } else {
const withTail = !isAndroid && !isApple && doc.type !== 'round' && canHaveTail && !withReplies && USE_MEDIA_TAILS; const withTail = !isAndroid && !isApple && !isRound && canHaveTail && !withReplies && USE_MEDIA_TAILS;
if(withTail) bubble.classList.add('with-media-tail'); if(withTail) bubble.classList.add('with-media-tail');
wrapVideo({ wrapVideo({
doc, doc,
@ -2745,8 +2759,6 @@ export default class ChatBubbles {
noAutoDownload: this.chat.noAutoDownloadMedia, noAutoDownload: this.chat.noAutoDownloadMedia,
}); });
} }
break;
} else { } else {
const newNameContainer = wrapGroupedDocuments({ const newNameContainer = wrapGroupedDocuments({
albumMustBeRenderedFull, albumMustBeRenderedFull,
@ -2769,8 +2781,6 @@ export default class ChatBubbles {
bubble.classList.remove('is-message-empty'); bubble.classList.remove('is-message-empty');
messageDiv.classList.add((!(['photo', 'pdf'] as MyDocument['type'][]).includes(doc.type) ? doc.type || 'document' : 'document') + '-message'); messageDiv.classList.add((!(['photo', 'pdf'] as MyDocument['type'][]).includes(doc.type) ? doc.type || 'document' : 'document') + '-message');
processingWebPage = true; processingWebPage = true;
break;
} }
break; break;
@ -2841,6 +2851,10 @@ export default class ChatBubbles {
} */ } */
} }
if(isStandaloneMedia) {
bubble.classList.add('just-media');
}
if(this.chat.selection.isSelecting) { if(this.chat.selection.isSelecting) {
this.chat.selection.toggleBubbleCheckbox(bubble, true); this.chat.selection.toggleBubbleCheckbox(bubble, true);
} }
@ -2849,7 +2863,7 @@ export default class ChatBubbles {
const needName = ((peerId < 0 && (peerId !== message.fromId || our)) && message.fromId !== rootScope.myId) || message.viaBotId; const needName = ((peerId < 0 && (peerId !== message.fromId || our)) && message.fromId !== rootScope.myId) || message.viaBotId;
if(needName || message.fwd_from || message.reply_to_mid) { // chat if(needName || message.fwd_from || message.reply_to_mid) { // chat
let title: HTMLSpanElement; let title: HTMLElement | DocumentFragment;
const isForwardFromChannel = message.from_id && message.from_id._ === 'peerChannel' && message.fromId === message.fwdFromId; const isForwardFromChannel = message.from_id && message.from_id._ === 'peerChannel' && message.fromId === message.fwdFromId;
@ -2857,6 +2871,7 @@ export default class ChatBubbles {
if(message.viaBotId) { if(message.viaBotId) {
title = document.createElement('span'); title = document.createElement('span');
title.innerText = '@' + this.appUsersManager.getUser(message.viaBotId).username; title.innerText = '@' + this.appUsersManager.getUser(message.viaBotId).username;
title.classList.add('peer-title');
} else if(isHidden) { } else if(isHidden) {
///////this.log('message to render hidden', message); ///////this.log('message to render hidden', message);
title = document.createElement('span'); title = document.createElement('span');
@ -2871,15 +2886,15 @@ export default class ChatBubbles {
//this.log(title); //this.log(title);
if(message.viaBotId) { if(message.viaBotId) {
if(!bubble.classList.contains('sticker')) { //if(!bubble.classList.contains('sticker') || true) {
let nameDiv = document.createElement('div'); let nameDiv = document.createElement('div');
nameDiv.classList.add('name', 'is-via'); nameDiv.classList.add('name', 'is-via');
nameDiv.dataset.peerId = message.viaBotId; nameDiv.dataset.peerId = message.viaBotId;
nameDiv.append(i18n('ViaBot'), ' ', title); nameDiv.append(i18n('ViaBot'), ' ', title);
nameContainer.append(nameDiv); nameContainer.append(nameDiv);
} else { // } else {
bubble.classList.add('hide-name'); // bubble.classList.add('hide-name');
} // }
} else if((message.fwdFromId || message.fwd_from)) { } else if((message.fwdFromId || message.fwd_from)) {
if(this.peerId !== rootScope.myId && !isForwardFromChannel) { if(this.peerId !== rootScope.myId && !isForwardFromChannel) {
bubble.classList.add('forwarded'); bubble.classList.add('forwarded');
@ -2889,17 +2904,23 @@ export default class ChatBubbles {
savedFrom = message.savedFrom; savedFrom = message.savedFrom;
} }
if(!bubble.classList.contains('sticker')) { //if(!bubble.classList.contains('sticker') || true) {
let nameDiv = document.createElement('div'); let nameDiv = document.createElement('div');
nameDiv.classList.add('name'); nameDiv.classList.add('name');
nameDiv.dataset.peerId = message.fwdFromId; nameDiv.dataset.peerId = message.fwdFromId;
if(this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || isForwardFromChannel) { if((this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || isForwardFromChannel) && !isStandaloneMedia) {
nameDiv.style.color = this.appPeersManager.getPeerColorById(message.fwdFromId, false); nameDiv.style.color = this.appPeersManager.getPeerColorById(message.fwdFromId, false);
nameDiv.append(title); nameDiv.append(title);
} else { } else {
/* const fromTitle = message.fromId === this.myID || appPeersManager.isBroadcast(message.fwdFromId || message.fromId) ? '' : `<div class="name" data-peer-id="${message.fromId}" style="color: ${appPeersManager.getPeerColorByID(message.fromId, false)};">${appPeersManager.getPeerTitle(message.fromId)}</div>`; /* const fromTitle = message.fromId === this.myID || appPeersManager.isBroadcast(message.fwdFromId || message.fromId) ? '' : `<div class="name" data-peer-id="${message.fromId}" style="color: ${appPeersManager.getPeerColorByID(message.fromId, false)};">${appPeersManager.getPeerTitle(message.fromId)}</div>`;
nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */ nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */
if(isStandaloneMedia) {
const fragment = document.createDocumentFragment();
fragment.append(document.createElement('br'));
fragment.append(title);
title = fragment;
}
nameDiv.append(i18n('ForwardedFrom', [title])); nameDiv.append(i18n('ForwardedFrom', [title]));
if(savedFrom) { if(savedFrom) {
@ -2908,9 +2929,9 @@ export default class ChatBubbles {
} }
nameContainer.append(nameDiv); nameContainer.append(nameDiv);
} //}
} else { } else {
if(!bubble.classList.contains('sticker') && needName) { if(!isStandaloneMedia && needName) {
let nameDiv = document.createElement('div'); let nameDiv = document.createElement('div');
nameDiv.classList.add('name'); nameDiv.classList.add('name');
nameDiv.append(title); nameDiv.append(title);

46
src/components/wrappers.ts
View File

@ -9,7 +9,7 @@ import { getEmojiToneIndex } from '../vendor/emoji';
import { readBlobAsText } from '../helpers/blob'; import { readBlobAsText } from '../helpers/blob';
import { deferredPromise } from '../helpers/cancellablePromise'; import { deferredPromise } from '../helpers/cancellablePromise';
import { formatDateAccordingToToday, months } from '../helpers/date'; import { formatDateAccordingToToday, months } from '../helpers/date';
import mediaSizes from '../helpers/mediaSizes'; import mediaSizes, { ScreenSize } from '../helpers/mediaSizes';
import { formatBytes } from '../helpers/number'; import { formatBytes } from '../helpers/number';
import { isSafari } from '../helpers/userAgent'; import { isSafari } from '../helpers/userAgent';
import { PhotoSize, StickerSet } from '../layer'; import { PhotoSize, StickerSet } from '../layer';
@ -47,6 +47,29 @@ import blur from '../helpers/blur';
const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB
let roundVideoCircumference = 0;
mediaSizes.addEventListener('changeScreen', (from, to) => {
if(to === ScreenSize.mobile || from === ScreenSize.mobile) {
const elements = Array.from(document.querySelectorAll('.media-round .progress-ring')) as SVGSVGElement[];
const width = mediaSizes.active.round.width;
const halfSize = width / 2;
const radius = halfSize - 7;
roundVideoCircumference = 2 * Math.PI * radius;
elements.forEach(element => {
element.setAttributeNS(null, 'width', '' + width);
element.setAttributeNS(null, 'height', '' + width);
const circle = element.firstElementChild as SVGCircleElement;
circle.setAttributeNS(null, 'cx', '' + halfSize);
circle.setAttributeNS(null, 'cy', '' + halfSize);
circle.setAttributeNS(null, 'r', '' + radius);
circle.style.strokeDasharray = roundVideoCircumference + ' ' + roundVideoCircumference;
circle.style.strokeDashoffset = '' + roundVideoCircumference;
});
}
});
export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTail, isOut, middleware, lazyLoadQueue, noInfo, group, onlyPreview, withoutPreloader, loadPromises, noPlayButton, noAutoDownload, size}: { export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTail, isOut, middleware, lazyLoadQueue, noInfo, group, onlyPreview, withoutPreloader, loadPromises, noPlayButton, noAutoDownload, size}: {
doc: MyDocument, doc: MyDocument,
container?: HTMLElement, container?: HTMLElement,
@ -145,15 +168,20 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
const divRound = document.createElement('div'); const divRound = document.createElement('div');
divRound.classList.add('media-round', 'z-depth-1'); divRound.classList.add('media-round', 'z-depth-1');
divRound.innerHTML = `<svg class="progress-ring" width="280px" height="280px" style="transform: rotate(-90deg);"> const size = mediaSizes.active.round;
<circle class="progress-ring__circle" stroke="white" stroke-opacity="0.3" stroke-width="3.5" cx="140" cy="140" r="133" fill="transparent"/> const halfSize = size.width / 2;
const strokeWidth = 3.5;
const radius = halfSize - (strokeWidth * 2);
divRound.innerHTML = `<svg class="progress-ring" width="${size.width}" height="${size.width}" style="transform: rotate(-90deg);">
<circle class="progress-ring__circle" stroke="white" stroke-opacity="0.3" stroke-width="${strokeWidth}" cx="${halfSize}" cy="${halfSize}" r="${radius}" fill="transparent"/>
</svg>`; </svg>`;
const circle = divRound.querySelector('.progress-ring__circle') as SVGCircleElement; const circle = divRound.firstElementChild.firstElementChild as SVGCircleElement;
const radius = circle.r.baseVal.value; if(!roundVideoCircumference) {
const circumference = 2 * Math.PI * radius; roundVideoCircumference = 2 * Math.PI * radius;
circle.style.strokeDasharray = circumference + ' ' + circumference; }
circle.style.strokeDashoffset = '' + circumference; circle.style.strokeDasharray = roundVideoCircumference + ' ' + roundVideoCircumference;
circle.style.strokeDashoffset = '' + roundVideoCircumference;
spanTime.classList.add('tgico'); spanTime.classList.add('tgico');
@ -185,7 +213,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
const onFrame = () => { const onFrame = () => {
ctx.drawImage(globalVideo, 0, 0); ctx.drawImage(globalVideo, 0, 0);
const offset = circumference - globalVideo.currentTime / globalVideo.duration * circumference; const offset = roundVideoCircumference - globalVideo.currentTime / globalVideo.duration * roundVideoCircumference;
circle.style.strokeDashoffset = '' + offset; circle.style.strokeDashoffset = '' + offset;
return !globalVideo.paused; return !globalVideo.paused;

2
src/config/app.ts
View File

@ -16,7 +16,7 @@ export const MAIN_DOMAIN = 'web.telegram.org';
const App = { const App = {
id: 1025907, id: 1025907,
hash: '452b0359b988148995f22ff0f4229750', hash: '452b0359b988148995f22ff0f4229750',
version: '0.8.1', version: '0.8.2',
langPackVersion: '0.3.3', langPackVersion: '0.3.3',
langPack: 'macos', langPack: 'macos',
langPackCode: 'en', langPackCode: 'en',

11
src/helpers/mediaSizes.ts
View File

@ -38,7 +38,8 @@ type MediaTypeSizes = {
animatedSticker: MediaSize, animatedSticker: MediaSize,
staticSticker: MediaSize, staticSticker: MediaSize,
emojiSticker: MediaSize, emojiSticker: MediaSize,
poll: MediaSize poll: MediaSize,
round: MediaSize
}; };
export enum ScreenSize { export enum ScreenSize {
@ -70,7 +71,8 @@ class MediaSizes extends EventListenerBase<{
animatedSticker: makeMediaSize(180, 180), animatedSticker: makeMediaSize(180, 180),
staticSticker: makeMediaSize(180, 180), staticSticker: makeMediaSize(180, 180),
emojiSticker: makeMediaSize(112, 112), emojiSticker: makeMediaSize(112, 112),
poll: makeMediaSize(240, 0) poll: makeMediaSize(240, 0),
round: makeMediaSize(200, 200)
}, },
desktop: { desktop: {
regular: makeMediaSize(420, 340), regular: makeMediaSize(420, 340),
@ -80,7 +82,8 @@ class MediaSizes extends EventListenerBase<{
animatedSticker: makeMediaSize(200, 200), animatedSticker: makeMediaSize(200, 200),
staticSticker: makeMediaSize(200, 200), staticSticker: makeMediaSize(200, 200),
emojiSticker: makeMediaSize(112, 112), emojiSticker: makeMediaSize(112, 112),
poll: makeMediaSize(330, 0) poll: makeMediaSize(330, 0),
round: makeMediaSize(280, 280)
} }
}; };
@ -128,7 +131,7 @@ class MediaSizes extends EventListenerBase<{
//console.log('changeScreen', this.activeScreen, activeScreen); //console.log('changeScreen', this.activeScreen, activeScreen);
if(wasScreen !== undefined) { if(wasScreen !== undefined) {
this.dispatchEvent('changeScreen', this.activeScreen, activeScreen); this.dispatchEvent('changeScreen', wasScreen, activeScreen);
} }
} }

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

@ -54,7 +54,9 @@ $bubble-margin: .25rem;
flex-wrap: wrap; flex-wrap: wrap;
//flex-direction: column; // fix 'Unread messages', still need to refactor it //flex-direction: column; // fix 'Unread messages', still need to refactor it
&.is-highlighted, &.is-selected, /* .bubbles.is-selecting */ & { &.is-highlighted,
&.is-selected,
/* .bubbles.is-selecting */ & {
&:after { &:after {
position: absolute; position: absolute;
left: -50%; left: -50%;
@ -141,13 +143,15 @@ $bubble-margin: .25rem;
} }
//&.is-highlighted:after, &.is-first-unread:before, &.is-selected:after { //&.is-highlighted:after, &.is-first-unread:before, &.is-selected:after {
&:after, &:before { &:after,
&:before {
width: 200%; width: 200%;
display: block; display: block;
} }
&.is-multiple-documents { &.is-multiple-documents {
&:before, &:after { &:before,
&:after {
display: none; display: none;
} }
@ -206,14 +210,18 @@ $bubble-margin: .25rem;
} }
.bubbles.is-selecting &:not(.is-album) { .bubbles.is-selecting &:not(.is-album) {
.audio, .document, .attachment, poll-element { .audio,
.document,
.attachment,
poll-element {
pointer-events: none !important; pointer-events: none !important;
} }
} }
// ! hide context menu for media on android // ! hide context menu for media on android
.bubbles.is-selecting & { .bubbles.is-selecting & {
img, video { img,
video {
pointer-events: none; pointer-events: none;
} }
} }
@ -378,7 +386,8 @@ $bubble-margin: .25rem;
&:not(.forwarded) { &:not(.forwarded) {
&:not(.is-group-first) { &:not(.is-group-first) {
.bubble-content > .name, .document-wrapper > .name { .bubble-content > .name,
.document-wrapper > .name {
display: none; display: none;
} }
@ -402,7 +411,8 @@ $bubble-margin: .25rem;
opacity: 1; opacity: 1;
} */ } */
&.photo, &.video { &.photo,
&.video {
.bubble-content { .bubble-content {
width: min-content; width: min-content;
} }
@ -451,8 +461,6 @@ $bubble-margin: .25rem;
font-size: 0; font-size: 0;
.bubble-content { .bubble-content {
background: none!important;
box-shadow: none;
line-height: 1; line-height: 1;
user-select: none; user-select: none;
} }
@ -502,7 +510,7 @@ $bubble-margin: .25rem;
} }
} }
&.sticker, &.round, &.emoji-big { &.just-media {
.bubble-content { .bubble-content {
cursor: pointer; cursor: pointer;
background: none!important; background: none!important;
@ -548,7 +556,8 @@ $bubble-margin: .25rem;
width: var(--round-video-size) !important; width: var(--round-video-size) !important;
height: var(--round-video-size) !important; height: var(--round-video-size) !important;
.media-photo, .media-video { .media-photo,
.media-video {
border-radius: 50%; border-radius: 50%;
pointer-events: none; pointer-events: none;
} }
@ -578,7 +587,8 @@ $bubble-margin: .25rem;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
img, video { img,
video {
max-width: 100%; max-width: 100%;
} }
@ -601,7 +611,8 @@ $bubble-margin: .25rem;
} }
} }
.download, .preloader-container { .download,
.preloader-container {
& ~ .video-play { & ~ .video-play {
display: none; display: none;
} }
@ -637,7 +648,8 @@ $bubble-margin: .25rem;
} }
} }
img:not(.emoji), video { img:not(.emoji),
video {
/* object-fit: contain; */ /* object-fit: contain; */
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
@ -645,7 +657,8 @@ $bubble-margin: .25rem;
} }
html.is-safari &:not(.round) { html.is-safari &:not(.round) {
img:not(.emoji), video { img:not(.emoji),
video {
border-radius: inherit; border-radius: inherit;
} }
} }
@ -916,7 +929,8 @@ $bubble-margin: .25rem;
} }
} }
.web, .reply { .web,
.reply {
font-size: var(--messages-secondary-text-size); font-size: var(--messages-secondary-text-size);
} }
@ -971,42 +985,77 @@ $bubble-margin: .25rem;
max-width: calc(100% - 1.5rem); max-width: calc(100% - 1.5rem);
height: auto; height: auto;
min-height: 32px; min-height: 32px;
}
}
&.is-reply {
&.emoji-big, &.sticker {
.reply {
padding: 10px;
border-radius: 12px;
background-color: var(--message-background-color);
border: 1px solid var(--border-color);
max-width: 300px;
height: 54px;
max-height: 54px;
white-space: nowrap;
position: absolute;
top: 0;
margin-bottom: 0;
@include respond-to(handhelds) {
padding: 8px 6px 8px 8px;
max-width: 94px;
}
.reply-content {
margin-top: 0;
}
}
}
.reply-content {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
} }
&.just-media {
.reply,
.name {
padding: 10px;
border-radius: 12px;
position: absolute;
top: 0;
margin-bottom: 0;
background-color: var(--message-highlightning-color);
white-space: nowrap;
}
.name {
color: #fff !important;
padding: .3125rem .625rem;
line-height: var(--line-height);
.peer-title {
font-weight: 400 !important;
pointer-events: none;
}
}
.reply {
max-width: 300px;
height: 54px;
max-height: 54px;
@include respond-to(handhelds) {
padding: 8px 6px 8px 8px;
max-width: 94px;
}
&-content {
margin-top: 0;
}
&-title,
i {
color: #fff;
}
&-border {
background: #fff;
}
}
}
/* &.photo, &.video {
&:not(.hide-name) {
.attachment {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
} */
&.forwarded .attachment,
&.is-reply .attachment,
&:not(.hide-name).is-message-empty .attachment/* ,
&:not(.hide-name):not(.sticker) .attachment */ {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.message { .message {
font-size: var(--messages-text-size); font-size: var(--messages-text-size);
padding: 0 .5rem .375rem .625rem; padding: 0 .5rem .375rem .625rem;
@ -1023,7 +1072,8 @@ $bubble-margin: .25rem;
} }
@include respond-to(handhelds) { @include respond-to(handhelds) {
.document, .audio { .document,
.audio {
&-ico, &-download { &-ico, &-download {
height: 2.25rem; height: 2.25rem;
width: 2.25rem; width: 2.25rem;
@ -1071,7 +1121,8 @@ $bubble-margin: .25rem;
} }
} }
.message.audio-message, .message.voice-message { .message.audio-message,
.message.voice-message {
padding: 8px !important; padding: 8px !important;
//padding: 4px 6px 4px 8px !important; //padding: 4px 6px 4px 8px !important;
} }
@ -1335,7 +1386,11 @@ $bubble-margin: .25rem;
} }
.message { .message {
&.document-message, &.audio-message, &.voice-message, &.poll-message, &.contact-message { &.document-message,
&.audio-message,
&.voice-message,
&.poll-message,
&.contact-message {
.time { .time {
position: absolute; position: absolute;
right: 0; right: 0;
@ -1512,7 +1567,8 @@ $bubble-margin: .25rem;
z-index: 1; z-index: 1;
} }
&:not(.forwarded).hide-name, &.emoji-big { &:not(.forwarded).hide-name,
&.emoji-big {
.name { .name {
display: none; display: none;
} }
@ -1523,7 +1579,8 @@ $bubble-margin: .25rem;
user-select: none; user-select: none;
} }
&-content > .name, .document-wrapper > .name { &-content > .name,
.document-wrapper > .name {
/* padding: .2675rem 9px 0 9px; */ /* padding: .2675rem 9px 0 9px; */
/* padding: .32rem 9px 0 9px; */ /* padding: .32rem 9px 0 9px; */
padding: 5px 9px 0 9px; padding: 5px 9px 0 9px;
@ -1544,7 +1601,8 @@ $bubble-margin: .25rem;
} }
&:not(.webpage) { &:not(.webpage) {
&.photo, &.video { &.photo,
&.video {
.bubble-content > .name { .bubble-content > .name {
//padding-bottom: .2675rem; //padding-bottom: .2675rem;
padding-bottom: 6px; padding-bottom: 6px;
@ -1567,7 +1625,8 @@ $bubble-margin: .25rem;
} }
&:not(.sticker):not(.emoji-big) { &:not(.sticker):not(.emoji-big) {
&.hide-name, &:not(.is-group-first)/* , &.is-out */ { &.hide-name,
&:not(.is-group-first)/* , &.is-out */ {
.reply { .reply {
margin-top: 6px; margin-top: 6px;
} }
@ -1594,7 +1653,8 @@ $bubble-margin: .25rem;
transform: translateY(1px); transform: translateY(1px);
} }
&.photo, &.video { &.photo,
&.video {
&.is-message-empty.is-group-last:not(.with-replies) { &.is-message-empty.is-group-last:not(.with-replies) {
//.bubble-content:after { //.bubble-content:after {
.bubble-tail { .bubble-tail {
@ -1619,7 +1679,8 @@ $bubble-margin: .25rem;
border-radius: inherit; border-radius: inherit;
} }
audio-element, poll-element { audio-element,
poll-element {
white-space: normal; // * fix due to .message white-space prewrap white-space: normal; // * fix due to .message white-space prewrap
} }
@ -1669,7 +1730,8 @@ $bubble-margin: .25rem;
color: var(--primary-color); color: var(--primary-color);
min-width: 15rem; min-width: 15rem;
.tgico-comments, .tgico-next { .tgico-comments,
.tgico-next {
font-size: 1.4375rem; font-size: 1.4375rem;
} }
@ -1834,7 +1896,8 @@ $bubble-margin: .25rem;
color: #fff; color: #fff;
} }
a, .peer-title { a,
.peer-title {
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -1853,20 +1916,23 @@ $bubble-margin: .25rem;
.bubble.is-in { .bubble.is-in {
.bubble-content { .bubble-content {
&, .poll-footer-button { &,
.poll-footer-button {
border-radius: 6px 12px 12px 6px; border-radius: 6px 12px 12px 6px;
} }
} }
&.is-group-first { &.is-group-first {
.bubble-content, .poll-footer-button { .bubble-content,
.poll-footer-button {
border-top-left-radius: 12px; border-top-left-radius: 12px;
} }
} }
&.is-group-last { &.is-group-last {
&.can-have-tail { &.can-have-tail {
.bubble-content, .poll-footer-button { .bubble-content,
.poll-footer-button {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
@ -1881,29 +1947,19 @@ $bubble-margin: .25rem;
} }
&:not(.can-have-tail) { &:not(.can-have-tail) {
.bubble-content, .poll-footer-button { .bubble-content,
.poll-footer-button {
border-bottom-left-radius: 12px; border-bottom-left-radius: 12px;
} }
} }
} }
&.forwarded .attachment, &.just-media {
&.is-reply .attachment, .reply, .name {
&:not(.hide-name).is-message-empty .attachment/* , left: calc(100% + 10px);
&:not(.hide-name):not(.sticker) .attachment */ {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
&.is-reply { @include respond-to(handhelds) {
&.emoji-big, &.sticker { left: calc(100% + 1px);
.reply {
left: calc(100% + 10px);
background-color: var(--message-background-color);
@include respond-to(handhelds) {
left: calc(100% + 1px);
}
} }
} }
} }
@ -1944,7 +2000,9 @@ $bubble-margin: .25rem;
} }
} }
.audio-subtitle, .contact-number, .audio-time { .audio-subtitle,
.contact-number,
.audio-time {
color: var(--secondary-text-color) !important; color: var(--secondary-text-color) !important;
} }
@ -1965,7 +2023,8 @@ $bubble-margin: .25rem;
--link-color: var(--message-out-link-color); --link-color: var(--message-out-link-color);
.bubble-content { .bubble-content {
&, .poll-footer-button { &,
.poll-footer-button {
border-radius: 12px 6px 6px 12px; border-radius: 12px 6px 6px 12px;
} }
@ -2006,14 +2065,16 @@ $bubble-margin: .25rem;
} */ } */
&.is-group-first { &.is-group-first {
.bubble-content, .poll-footer-button { .bubble-content,
.poll-footer-button {
border-top-right-radius: 12px; border-top-right-radius: 12px;
} }
} }
&.is-group-last { &.is-group-last {
&.can-have-tail { &.can-have-tail {
.bubble-content, .poll-footer-button { .bubble-content,
.poll-footer-button {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@ -2029,22 +2090,28 @@ $bubble-margin: .25rem;
} }
&:not(.can-have-tail) { &:not(.can-have-tail) {
.bubble-content, .poll-footer-button { .bubble-content,
.poll-footer-button {
border-bottom-right-radius: 12px; border-bottom-right-radius: 12px;
} }
} }
} }
&.forwarded .attachment, &.just-media {
&.is-reply .attachment { .reply, .name {
border-top-left-radius: 0; right: calc(100% + 10px);
border-top-right-radius: 0; }
} }
&.is-reply { &:not(.just-media) {
&.emoji-big, &.sticker { .reply {
.web, .reply { &-border {
right: calc(100% + 10px); background-color: var(--message-out-primary-color);
}
&-title,
i {
color: var(--message-out-primary-color);
} }
} }
} }
@ -2057,12 +2124,11 @@ $bubble-margin: .25rem;
} }
} }
.reply-border,
.quote:before { .quote:before {
background-color: var(--message-out-primary-color); background-color: var(--message-out-primary-color);
} }
.quote .webpage-name, .reply-title, .reply i { .quote .webpage-name {
color: var(--message-out-primary-color); color: var(--message-out-primary-color);
} }
@ -2075,7 +2141,8 @@ $bubble-margin: .25rem;
bottom: 4px; bottom: 4px;
} }
&:after, .inner:after { &:after,
.inner:after {
font-size: 19px; font-size: 19px;
//vertical-align: middle; //vertical-align: middle;
margin-left: 1px; margin-left: 1px;
@ -2099,19 +2166,22 @@ $bubble-margin: .25rem;
} }
&.is-read { &.is-read {
.time:after, .time .inner:after { .time:after,
.time .inner:after {
content: $tgico-checks; content: $tgico-checks;
} }
} }
&.is-sent { &.is-sent {
.time:after, .time .inner:after { .time:after,
.time .inner:after {
content: $tgico-check; content: $tgico-check;
} }
} }
&.is-sending { &.is-sending {
.time:after, .time .inner:after { .time:after,
.time .inner:after {
content: $tgico-sending; content: $tgico-sending;
} }
} }
@ -2136,11 +2206,13 @@ $bubble-margin: .25rem;
} }
} }
&-time, &-subtitle { &-time,
&-subtitle {
color: var(--message-out-status-color); color: var(--message-out-status-color);
} }
&-toggle, &-download { &-toggle,
&-download {
background-color: var(--message-out-primary-color); background-color: var(--message-out-primary-color);
} }
@ -2185,13 +2257,15 @@ $bubble-margin: .25rem;
} }
} }
.contact-number, .document-size { .contact-number,
.document-size {
color: var(--message-out-status-color); color: var(--message-out-status-color);
} }
poll-element { poll-element {
.poll { .poll {
&-desc, &-votes-count { &-desc,
&-votes-count {
color: var(--message-out-primary-color); color: var(--message-out-primary-color);
} }
@ -2211,7 +2285,8 @@ $bubble-margin: .25rem;
} }
} }
&-footer-button, &-hint { &-footer-button,
&-hint {
color: var(--message-out-primary-color); color: var(--message-out-primary-color);
} }
} }
@ -2234,7 +2309,8 @@ $bubble-margin: .25rem;
.progress-line { .progress-line {
--color: var(--message-out-primary-color); --color: var(--message-out-primary-color);
&:before, &__loaded { &:before,
&__loaded {
background-color: var(--message-out-primary-color); background-color: var(--message-out-primary-color);
} }
} }

1
src/scss/style.scss
View File

@ -99,6 +99,7 @@ $chat-input-inner-padding-handhelds: .25rem;
@include respond-to(handhelds) { @include respond-to(handhelds) {
--right-column-width: 100vw; --right-column-width: 100vw;
--esg-sticker-size: 68px; --esg-sticker-size: 68px;
--round-video-size: 200px;
--chat-input-size: #{$chat-input-handhelds-size}; --chat-input-size: #{$chat-input-handhelds-size};
--chat-input-padding: #{$chat-padding-handhelds}; --chat-input-padding: #{$chat-padding-handhelds};