Fixes for floating reply
Fix round video size on mobiles
This commit is contained in:
Eduard Kuzmenko
parent
54d55e7c9e
commit
c1ccc73fc3
@ -2467,7 +2467,9 @@ export default class ChatBubbles {
|
||||
|
||||
const isOut = our && (!message.fwd_from || this.peerId !== rootScope.myId);
|
||||
let nameContainer: HTMLElement = bubbleContainer;
|
||||
|
||||
|
||||
let isStandaloneMedia = false;
|
||||
|
||||
// media
|
||||
if(messageMedia/* && messageMedia._ === 'messageMediaPhoto' */) {
|
||||
let attachmentDiv = document.createElement('div');
|
||||
@ -2488,7 +2490,11 @@ export default class ChatBubbles {
|
||||
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];
|
||||
if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) {
|
||||
@ -2671,13 +2677,14 @@ export default class ChatBubbles {
|
||||
}
|
||||
|
||||
case 'messageMediaDocument': {
|
||||
let doc = messageMedia.document;
|
||||
const doc = messageMedia.document;
|
||||
|
||||
//this.log('messageMediaDocument', doc, bubble);
|
||||
|
||||
if(doc.sticker/* && doc.size <= 1e6 */) {
|
||||
bubble.classList.add('sticker');
|
||||
canHaveTail = false;
|
||||
isStandaloneMedia = true;
|
||||
|
||||
if(doc.animated) {
|
||||
bubble.classList.add('sticker-animated');
|
||||
@ -2703,16 +2710,23 @@ export default class ChatBubbles {
|
||||
withThumb: true,
|
||||
loadPromises
|
||||
});
|
||||
|
||||
break;
|
||||
} else if(doc.type === 'video' || doc.type === 'gif' || doc.type === 'round'/* && doc.size <= 20e6 */) {
|
||||
//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;
|
||||
}
|
||||
|
||||
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];
|
||||
if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) {
|
||||
bubble.classList.add('is-album', 'is-grouped');
|
||||
@ -2728,7 +2742,7 @@ export default class ChatBubbles {
|
||||
noAutoDownload: this.chat.noAutoDownloadMedia,
|
||||
});
|
||||
} 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');
|
||||
wrapVideo({
|
||||
doc,
|
||||
@ -2745,8 +2759,6 @@ export default class ChatBubbles {
|
||||
noAutoDownload: this.chat.noAutoDownloadMedia,
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
} else {
|
||||
const newNameContainer = wrapGroupedDocuments({
|
||||
albumMustBeRenderedFull,
|
||||
@ -2769,8 +2781,6 @@ export default class ChatBubbles {
|
||||
bubble.classList.remove('is-message-empty');
|
||||
messageDiv.classList.add((!(['photo', 'pdf'] as MyDocument['type'][]).includes(doc.type) ? doc.type || 'document' : 'document') + '-message');
|
||||
processingWebPage = true;
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
@ -2841,6 +2851,10 @@ export default class ChatBubbles {
|
||||
} */
|
||||
}
|
||||
|
||||
if(isStandaloneMedia) {
|
||||
bubble.classList.add('just-media');
|
||||
}
|
||||
|
||||
if(this.chat.selection.isSelecting) {
|
||||
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;
|
||||
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;
|
||||
|
||||
@ -2857,6 +2871,7 @@ export default class ChatBubbles {
|
||||
if(message.viaBotId) {
|
||||
title = document.createElement('span');
|
||||
title.innerText = '@' + this.appUsersManager.getUser(message.viaBotId).username;
|
||||
title.classList.add('peer-title');
|
||||
} else if(isHidden) {
|
||||
///////this.log('message to render hidden', message);
|
||||
title = document.createElement('span');
|
||||
@ -2871,15 +2886,15 @@ export default class ChatBubbles {
|
||||
//this.log(title);
|
||||
|
||||
if(message.viaBotId) {
|
||||
if(!bubble.classList.contains('sticker')) {
|
||||
//if(!bubble.classList.contains('sticker') || true) {
|
||||
let nameDiv = document.createElement('div');
|
||||
nameDiv.classList.add('name', 'is-via');
|
||||
nameDiv.dataset.peerId = message.viaBotId;
|
||||
nameDiv.append(i18n('ViaBot'), ' ', title);
|
||||
nameContainer.append(nameDiv);
|
||||
} else {
|
||||
bubble.classList.add('hide-name');
|
||||
}
|
||||
// } else {
|
||||
// bubble.classList.add('hide-name');
|
||||
// }
|
||||
} else if((message.fwdFromId || message.fwd_from)) {
|
||||
if(this.peerId !== rootScope.myId && !isForwardFromChannel) {
|
||||
bubble.classList.add('forwarded');
|
||||
@ -2889,17 +2904,23 @@ export default class ChatBubbles {
|
||||
savedFrom = message.savedFrom;
|
||||
}
|
||||
|
||||
if(!bubble.classList.contains('sticker')) {
|
||||
//if(!bubble.classList.contains('sticker') || true) {
|
||||
let nameDiv = document.createElement('div');
|
||||
nameDiv.classList.add('name');
|
||||
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.append(title);
|
||||
} 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>`;
|
||||
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]));
|
||||
|
||||
if(savedFrom) {
|
||||
@ -2908,9 +2929,9 @@ export default class ChatBubbles {
|
||||
}
|
||||
|
||||
nameContainer.append(nameDiv);
|
||||
}
|
||||
//}
|
||||
} else {
|
||||
if(!bubble.classList.contains('sticker') && needName) {
|
||||
if(!isStandaloneMedia && needName) {
|
||||
let nameDiv = document.createElement('div');
|
||||
nameDiv.classList.add('name');
|
||||
nameDiv.append(title);
|
||||
|
||||
@ -9,7 +9,7 @@ import { getEmojiToneIndex } from '../vendor/emoji';
|
||||
import { readBlobAsText } from '../helpers/blob';
|
||||
import { deferredPromise } from '../helpers/cancellablePromise';
|
||||
import { formatDateAccordingToToday, months } from '../helpers/date';
|
||||
import mediaSizes from '../helpers/mediaSizes';
|
||||
import mediaSizes, { ScreenSize } from '../helpers/mediaSizes';
|
||||
import { formatBytes } from '../helpers/number';
|
||||
import { isSafari } from '../helpers/userAgent';
|
||||
import { PhotoSize, StickerSet } from '../layer';
|
||||
@ -47,6 +47,29 @@ import blur from '../helpers/blur';
|
||||
|
||||
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}: {
|
||||
doc: MyDocument,
|
||||
container?: HTMLElement,
|
||||
@ -145,15 +168,20 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
|
||||
const divRound = document.createElement('div');
|
||||
divRound.classList.add('media-round', 'z-depth-1');
|
||||
|
||||
divRound.innerHTML = `<svg class="progress-ring" width="280px" height="280px" style="transform: rotate(-90deg);">
|
||||
<circle class="progress-ring__circle" stroke="white" stroke-opacity="0.3" stroke-width="3.5" cx="140" cy="140" r="133" fill="transparent"/>
|
||||
const size = mediaSizes.active.round;
|
||||
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>`;
|
||||
|
||||
const circle = divRound.querySelector('.progress-ring__circle') as SVGCircleElement;
|
||||
const radius = circle.r.baseVal.value;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
circle.style.strokeDasharray = circumference + ' ' + circumference;
|
||||
circle.style.strokeDashoffset = '' + circumference;
|
||||
const circle = divRound.firstElementChild.firstElementChild as SVGCircleElement;
|
||||
if(!roundVideoCircumference) {
|
||||
roundVideoCircumference = 2 * Math.PI * radius;
|
||||
}
|
||||
circle.style.strokeDasharray = roundVideoCircumference + ' ' + roundVideoCircumference;
|
||||
circle.style.strokeDashoffset = '' + roundVideoCircumference;
|
||||
|
||||
spanTime.classList.add('tgico');
|
||||
|
||||
@ -185,7 +213,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
|
||||
const onFrame = () => {
|
||||
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;
|
||||
|
||||
return !globalVideo.paused;
|
||||
|
||||
@ -16,7 +16,7 @@ export const MAIN_DOMAIN = 'web.telegram.org';
|
||||
const App = {
|
||||
id: 1025907,
|
||||
hash: '452b0359b988148995f22ff0f4229750',
|
||||
version: '0.8.1',
|
||||
version: '0.8.2',
|
||||
langPackVersion: '0.3.3',
|
||||
langPack: 'macos',
|
||||
langPackCode: 'en',
|
||||
|
||||
@ -38,7 +38,8 @@ type MediaTypeSizes = {
|
||||
animatedSticker: MediaSize,
|
||||
staticSticker: MediaSize,
|
||||
emojiSticker: MediaSize,
|
||||
poll: MediaSize
|
||||
poll: MediaSize,
|
||||
round: MediaSize
|
||||
};
|
||||
|
||||
export enum ScreenSize {
|
||||
@ -70,7 +71,8 @@ class MediaSizes extends EventListenerBase<{
|
||||
animatedSticker: makeMediaSize(180, 180),
|
||||
staticSticker: makeMediaSize(180, 180),
|
||||
emojiSticker: makeMediaSize(112, 112),
|
||||
poll: makeMediaSize(240, 0)
|
||||
poll: makeMediaSize(240, 0),
|
||||
round: makeMediaSize(200, 200)
|
||||
},
|
||||
desktop: {
|
||||
regular: makeMediaSize(420, 340),
|
||||
@ -80,7 +82,8 @@ class MediaSizes extends EventListenerBase<{
|
||||
animatedSticker: makeMediaSize(200, 200),
|
||||
staticSticker: makeMediaSize(200, 200),
|
||||
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);
|
||||
|
||||
if(wasScreen !== undefined) {
|
||||
this.dispatchEvent('changeScreen', this.activeScreen, activeScreen);
|
||||
this.dispatchEvent('changeScreen', wasScreen, activeScreen);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -54,7 +54,9 @@ $bubble-margin: .25rem;
|
||||
flex-wrap: wrap;
|
||||
//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 {
|
||||
position: absolute;
|
||||
left: -50%;
|
||||
@ -141,13 +143,15 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
//&.is-highlighted:after, &.is-first-unread:before, &.is-selected:after {
|
||||
&:after, &:before {
|
||||
&:after,
|
||||
&:before {
|
||||
width: 200%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.is-multiple-documents {
|
||||
&:before, &:after {
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -206,14 +210,18 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.bubbles.is-selecting &:not(.is-album) {
|
||||
.audio, .document, .attachment, poll-element {
|
||||
.audio,
|
||||
.document,
|
||||
.attachment,
|
||||
poll-element {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ! hide context menu for media on android
|
||||
.bubbles.is-selecting & {
|
||||
img, video {
|
||||
img,
|
||||
video {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@ -378,7 +386,8 @@ $bubble-margin: .25rem;
|
||||
|
||||
&:not(.forwarded) {
|
||||
&:not(.is-group-first) {
|
||||
.bubble-content > .name, .document-wrapper > .name {
|
||||
.bubble-content > .name,
|
||||
.document-wrapper > .name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -402,7 +411,8 @@ $bubble-margin: .25rem;
|
||||
opacity: 1;
|
||||
} */
|
||||
|
||||
&.photo, &.video {
|
||||
&.photo,
|
||||
&.video {
|
||||
.bubble-content {
|
||||
width: min-content;
|
||||
}
|
||||
@ -451,8 +461,6 @@ $bubble-margin: .25rem;
|
||||
font-size: 0;
|
||||
|
||||
.bubble-content {
|
||||
background: none!important;
|
||||
box-shadow: none;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
@ -502,7 +510,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.sticker, &.round, &.emoji-big {
|
||||
&.just-media {
|
||||
.bubble-content {
|
||||
cursor: pointer;
|
||||
background: none!important;
|
||||
@ -548,7 +556,8 @@ $bubble-margin: .25rem;
|
||||
width: var(--round-video-size) !important;
|
||||
height: var(--round-video-size) !important;
|
||||
|
||||
.media-photo, .media-video {
|
||||
.media-photo,
|
||||
.media-video {
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -578,7 +587,8 @@ $bubble-margin: .25rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
img, video {
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -601,7 +611,8 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.download, .preloader-container {
|
||||
.download,
|
||||
.preloader-container {
|
||||
& ~ .video-play {
|
||||
display: none;
|
||||
}
|
||||
@ -637,7 +648,8 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
img:not(.emoji), video {
|
||||
img:not(.emoji),
|
||||
video {
|
||||
/* object-fit: contain; */
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
@ -645,7 +657,8 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
html.is-safari &:not(.round) {
|
||||
img:not(.emoji), video {
|
||||
img:not(.emoji),
|
||||
video {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
@ -916,7 +929,8 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.web, .reply {
|
||||
.web,
|
||||
.reply {
|
||||
font-size: var(--messages-secondary-text-size);
|
||||
}
|
||||
|
||||
@ -971,42 +985,77 @@ $bubble-margin: .25rem;
|
||||
max-width: calc(100% - 1.5rem);
|
||||
height: auto;
|
||||
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;
|
||||
text-overflow: ellipsis;
|
||||
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 {
|
||||
font-size: var(--messages-text-size);
|
||||
padding: 0 .5rem .375rem .625rem;
|
||||
@ -1023,7 +1072,8 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
.document, .audio {
|
||||
.document,
|
||||
.audio {
|
||||
&-ico, &-download {
|
||||
height: 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: 4px 6px 4px 8px !important;
|
||||
}
|
||||
@ -1335,7 +1386,11 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
&.document-message, &.audio-message, &.voice-message, &.poll-message, &.contact-message {
|
||||
&.document-message,
|
||||
&.audio-message,
|
||||
&.voice-message,
|
||||
&.poll-message,
|
||||
&.contact-message {
|
||||
.time {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -1512,7 +1567,8 @@ $bubble-margin: .25rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:not(.forwarded).hide-name, &.emoji-big {
|
||||
&:not(.forwarded).hide-name,
|
||||
&.emoji-big {
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
@ -1523,7 +1579,8 @@ $bubble-margin: .25rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-content > .name, .document-wrapper > .name {
|
||||
&-content > .name,
|
||||
.document-wrapper > .name {
|
||||
/* padding: .2675rem 9px 0 9px; */
|
||||
/* padding: .32rem 9px 0 9px; */
|
||||
padding: 5px 9px 0 9px;
|
||||
@ -1544,7 +1601,8 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&:not(.webpage) {
|
||||
&.photo, &.video {
|
||||
&.photo,
|
||||
&.video {
|
||||
.bubble-content > .name {
|
||||
//padding-bottom: .2675rem;
|
||||
padding-bottom: 6px;
|
||||
@ -1567,7 +1625,8 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&:not(.sticker):not(.emoji-big) {
|
||||
&.hide-name, &:not(.is-group-first)/* , &.is-out */ {
|
||||
&.hide-name,
|
||||
&:not(.is-group-first)/* , &.is-out */ {
|
||||
.reply {
|
||||
margin-top: 6px;
|
||||
}
|
||||
@ -1594,7 +1653,8 @@ $bubble-margin: .25rem;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
&.photo, &.video {
|
||||
&.photo,
|
||||
&.video {
|
||||
&.is-message-empty.is-group-last:not(.with-replies) {
|
||||
//.bubble-content:after {
|
||||
.bubble-tail {
|
||||
@ -1619,7 +1679,8 @@ $bubble-margin: .25rem;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
audio-element, poll-element {
|
||||
audio-element,
|
||||
poll-element {
|
||||
white-space: normal; // * fix due to .message white-space prewrap
|
||||
}
|
||||
|
||||
@ -1669,7 +1730,8 @@ $bubble-margin: .25rem;
|
||||
color: var(--primary-color);
|
||||
min-width: 15rem;
|
||||
|
||||
.tgico-comments, .tgico-next {
|
||||
.tgico-comments,
|
||||
.tgico-next {
|
||||
font-size: 1.4375rem;
|
||||
}
|
||||
|
||||
@ -1834,7 +1896,8 @@ $bubble-margin: .25rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a, .peer-title {
|
||||
a,
|
||||
.peer-title {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -1853,20 +1916,23 @@ $bubble-margin: .25rem;
|
||||
|
||||
.bubble.is-in {
|
||||
.bubble-content {
|
||||
&, .poll-footer-button {
|
||||
&,
|
||||
.poll-footer-button {
|
||||
border-radius: 6px 12px 12px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-group-first {
|
||||
.bubble-content, .poll-footer-button {
|
||||
.bubble-content,
|
||||
.poll-footer-button {
|
||||
border-top-left-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-group-last {
|
||||
&.can-have-tail {
|
||||
.bubble-content, .poll-footer-button {
|
||||
.bubble-content,
|
||||
.poll-footer-button {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
@ -1881,29 +1947,19 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&:not(.can-have-tail) {
|
||||
.bubble-content, .poll-footer-button {
|
||||
.bubble-content,
|
||||
.poll-footer-button {
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
&.just-media {
|
||||
.reply, .name {
|
||||
left: calc(100% + 10px);
|
||||
|
||||
&.is-reply {
|
||||
&.emoji-big, &.sticker {
|
||||
.reply {
|
||||
left: calc(100% + 10px);
|
||||
background-color: var(--message-background-color);
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
left: calc(100% + 1px);
|
||||
}
|
||||
@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;
|
||||
}
|
||||
|
||||
@ -1965,7 +2023,8 @@ $bubble-margin: .25rem;
|
||||
--link-color: var(--message-out-link-color);
|
||||
|
||||
.bubble-content {
|
||||
&, .poll-footer-button {
|
||||
&,
|
||||
.poll-footer-button {
|
||||
border-radius: 12px 6px 6px 12px;
|
||||
}
|
||||
|
||||
@ -2006,14 +2065,16 @@ $bubble-margin: .25rem;
|
||||
} */
|
||||
|
||||
&.is-group-first {
|
||||
.bubble-content, .poll-footer-button {
|
||||
.bubble-content,
|
||||
.poll-footer-button {
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-group-last {
|
||||
&.can-have-tail {
|
||||
.bubble-content, .poll-footer-button {
|
||||
.bubble-content,
|
||||
.poll-footer-button {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
@ -2029,22 +2090,28 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&:not(.can-have-tail) {
|
||||
.bubble-content, .poll-footer-button {
|
||||
.bubble-content,
|
||||
.poll-footer-button {
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.forwarded .attachment,
|
||||
&.is-reply .attachment {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
&.just-media {
|
||||
.reply, .name {
|
||||
right: calc(100% + 10px);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-reply {
|
||||
&.emoji-big, &.sticker {
|
||||
.web, .reply {
|
||||
right: calc(100% + 10px);
|
||||
&:not(.just-media) {
|
||||
.reply {
|
||||
&-border {
|
||||
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 {
|
||||
background-color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
.quote .webpage-name, .reply-title, .reply i {
|
||||
.quote .webpage-name {
|
||||
color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
@ -2075,7 +2141,8 @@ $bubble-margin: .25rem;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
&:after, .inner:after {
|
||||
&:after,
|
||||
.inner:after {
|
||||
font-size: 19px;
|
||||
//vertical-align: middle;
|
||||
margin-left: 1px;
|
||||
@ -2099,19 +2166,22 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&.is-read {
|
||||
.time:after, .time .inner:after {
|
||||
.time:after,
|
||||
.time .inner:after {
|
||||
content: $tgico-checks;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-sent {
|
||||
.time:after, .time .inner:after {
|
||||
.time:after,
|
||||
.time .inner:after {
|
||||
content: $tgico-check;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-sending {
|
||||
.time:after, .time .inner:after {
|
||||
.time:after,
|
||||
.time .inner:after {
|
||||
content: $tgico-sending;
|
||||
}
|
||||
}
|
||||
@ -2136,11 +2206,13 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-time, &-subtitle {
|
||||
&-time,
|
||||
&-subtitle {
|
||||
color: var(--message-out-status-color);
|
||||
}
|
||||
|
||||
&-toggle, &-download {
|
||||
&-toggle,
|
||||
&-download {
|
||||
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);
|
||||
}
|
||||
|
||||
poll-element {
|
||||
.poll {
|
||||
&-desc, &-votes-count {
|
||||
&-desc,
|
||||
&-votes-count {
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -2234,7 +2309,8 @@ $bubble-margin: .25rem;
|
||||
.progress-line {
|
||||
--color: var(--message-out-primary-color);
|
||||
|
||||
&:before, &__loaded {
|
||||
&:before,
|
||||
&__loaded {
|
||||
background-color: var(--message-out-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -99,6 +99,7 @@ $chat-input-inner-padding-handhelds: .25rem;
|
||||
@include respond-to(handhelds) {
|
||||
--right-column-width: 100vw;
|
||||
--esg-sticker-size: 68px;
|
||||
--round-video-size: 200px;
|
||||
|
||||
--chat-input-size: #{$chat-input-handhelds-size};
|
||||
--chat-input-padding: #{$chat-padding-handhelds};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user