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

Fixes for floating reply 

Fix round video size on mobiles
master
Eduard Kuzmenko 3 years ago
parent
54d55e7c9e
commit
c1ccc73fc3
6 changed files with 263 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 61
      src/components/chat/bubbles.ts
  2. 46
      src/components/wrappers.ts
  3. 2
      src/config/app.ts
  4. 11
      src/helpers/mediaSizes.ts
  5. 270
      src/scss/partials/_chatBubble.scss
  6. 1
      src/scss/style.scss

61
src/components/chat/bubbles.ts
Unescape View File

@ -2468,6 +2468,8 @@ 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;
} }
bubble.classList.add('hide-name', doc.type === 'round' ? 'round' : 'video'); if(!message.viaBotId) {
bubble.classList.add('hide-name');
}
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
Unescape 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
Unescape 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
Unescape 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);
} }
} }

270
src/scss/partials/_chatBubble.scss
Unescape 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;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
} }
&.is-reply { &.just-media {
&.emoji-big, &.sticker { .reply,
.reply { .name {
padding: 10px; padding: 10px;
border-radius: 12px; border-radius: 12px;
background-color: var(--message-background-color); position: absolute;
border: 1px solid var(--border-color); top: 0;
max-width: 300px; margin-bottom: 0;
height: 54px; background-color: var(--message-highlightning-color);
max-height: 54px; white-space: nowrap;
white-space: nowrap; }
position: absolute;
top: 0;
margin-bottom: 0;
@include respond-to(handhelds) { .name {
padding: 8px 6px 8px 8px; color: #fff !important;
max-width: 94px; padding: .3125rem .625rem;
} line-height: var(--line-height);
.reply-content { .peer-title {
margin-top: 0; font-weight: 400 !important;
} pointer-events: none;
} }
} }
.reply-content { .reply {
white-space: nowrap; max-width: 300px;
text-overflow: ellipsis; height: 54px;
overflow: hidden; 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
Unescape 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};

Write Preview
Loading…
Cancel
Save