From c1ccc73fc3a8b7b5ebe8478a2911a958de724107 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 4 Sep 2021 02:53:05 +0300 Subject: [PATCH] Fixes for floating reply Fix round video size on mobiles --- src/components/chat/bubbles.ts | 63 ++++--- src/components/wrappers.ts | 46 ++++- src/config/app.ts | 2 +- src/helpers/mediaSizes.ts | 11 +- src/scss/partials/_chatBubble.scss | 274 ++++++++++++++++++----------- src/scss/style.scss | 1 + 6 files changed, 263 insertions(+), 134 deletions(-) diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index e7032f05..2bcc4ed7 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -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) ? '' : `
${appPeersManager.getPeerTitle(message.fromId)}
`; 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); diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index a66c2edd..b6c83e7f 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -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 = ` - + const size = mediaSizes.active.round; + const halfSize = size.width / 2; + const strokeWidth = 3.5; + const radius = halfSize - (strokeWidth * 2); + divRound.innerHTML = ` + `; - 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; diff --git a/src/config/app.ts b/src/config/app.ts index 94d8d7cb..69817088 100644 --- a/src/config/app.ts +++ b/src/config/app.ts @@ -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', diff --git a/src/helpers/mediaSizes.ts b/src/helpers/mediaSizes.ts index 427131f5..ddcd9500 100644 --- a/src/helpers/mediaSizes.ts +++ b/src/helpers/mediaSizes.ts @@ -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); } } diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 8d2ccc65..a9311699 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -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; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } } - &.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; + &.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; + } - @include respond-to(handhelds) { - padding: 8px 6px 8px 8px; - max-width: 94px; - } + .name { + color: #fff !important; + padding: .3125rem .625rem; + line-height: var(--line-height); - .reply-content { - margin-top: 0; - } + .peer-title { + font-weight: 400 !important; + pointer-events: none; } } - .reply-content { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + .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); } } diff --git a/src/scss/style.scss b/src/scss/style.scss index 9b810ccc..387deed6 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -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};