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

Added content wrapper to bubble

Browse Source 
Fix corners on media bubbles
Fix margin between posts with reply markups
This commit is contained in:
morethanwords 2021-01-13 17:08:18 +04:00
parent abf1acc6c8
commit c3db148533
5 changed files with 197 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -536,7 +536,7 @@ export default class ChatBubbles {
if(!bubble) return; if(!bubble) return;
if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble__container')) { if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble-content')) {
if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) { if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) {
return; return;
} }
@ -1101,7 +1101,7 @@ export default class ChatBubbles {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'bubble service is-date'; div.className = 'bubble service is-date';
div.innerHTML = `<div class="bubble__container"><div class="service-msg">${str}</div></div>`; div.innerHTML = `<div class="bubble-content"><div class="service-msg">${str}</div></div>`;
////////this.log('need to render date message', dateTimestamp, str); ////////this.log('need to render date message', dateTimestamp, str);
const container = document.createElement('div'); const container = document.createElement('div');
@ -1536,15 +1536,20 @@ export default class ChatBubbles {
//messageDiv.innerText = message.message; //messageDiv.innerText = message.message;
let bubbleContainer: HTMLDivElement; let bubbleContainer: HTMLDivElement;
let contentWrapper: HTMLElement;
// bubble // bubble
if(!bubble) { if(!bubble) {
contentWrapper = document.createElement('div');
contentWrapper.classList.add('bubble-content-wrapper');
bubbleContainer = document.createElement('div'); bubbleContainer = document.createElement('div');
bubbleContainer.classList.add('bubble__container'); bubbleContainer.classList.add('bubble-content');
bubble = document.createElement('div'); bubble = document.createElement('div');
bubble.classList.add('bubble'); bubble.classList.add('bubble');
bubble.appendChild(bubbleContainer); contentWrapper.appendChild(bubbleContainer);
bubble.appendChild(contentWrapper);
if(!our && !message.pFlags.out) { if(!our && !message.pFlags.out) {
//this.log('not our message', message, message.pFlags.unread); //this.log('not our message', message, message.pFlags.unread);
@ -1561,12 +1566,14 @@ export default class ChatBubbles {
const classNames = ['bubble'].concat(save.filter(c => wasClassNames.includes(c))); const classNames = ['bubble'].concat(save.filter(c => wasClassNames.includes(c)));
bubble.className = classNames.join(' '); bubble.className = classNames.join(' ');
bubbleContainer = bubble.lastElementChild as HTMLDivElement; contentWrapper = bubble.lastElementChild as HTMLElement;
bubbleContainer.innerHTML = ''; bubbleContainer = contentWrapper.firstElementChild as HTMLDivElement;
contentWrapper.innerHTML = '';
contentWrapper.appendChild(bubbleContainer);
//bubbleContainer.style.marginBottom = ''; //bubbleContainer.style.marginBottom = '';
const animationDelay = bubbleContainer.style.animationDelay; const animationDelay = contentWrapper.style.animationDelay;
bubbleContainer.style.cssText = ''; contentWrapper.style.cssText = '';
bubbleContainer.style.animationDelay = animationDelay; contentWrapper.style.animationDelay = animationDelay;
if(bubble === this.firstUnreadBubble) { if(bubble === this.firstUnreadBubble) {
bubble.classList.add('is-first-unread'); bubble.classList.add('is-first-unread');
@ -1648,6 +1655,8 @@ export default class ChatBubbles {
entities: totalEntities entities: totalEntities
}); });
let canHaveTail = true;
if(totalEntities && !messageMedia) { if(totalEntities && !messageMedia) {
let emojiEntities = totalEntities.filter((e) => e._ == 'messageEntityEmoji'); let emojiEntities = totalEntities.filter((e) => e._ == 'messageEntityEmoji');
let strLength = messageMessage.length; let strLength = messageMessage.length;
@ -1672,6 +1681,7 @@ export default class ChatBubbles {
} }
bubble.classList.add('is-message-empty', 'emoji-big'); bubble.classList.add('is-message-empty', 'emoji-big');
canHaveTail = false;
} else { } else {
messageDiv.innerHTML = richText; messageDiv.innerHTML = richText;
} }
@ -1755,11 +1765,9 @@ export default class ChatBubbles {
this.appInlineBotsManager.callbackButtonClick(this.peerId, message.mid, button); this.appInlineBotsManager.callbackButtonClick(this.peerId, message.mid, button);
}); });
const offset = rows.length * 45 + 'px'; canHaveTail = false;
bubbleContainer.style.marginBottom = offset; bubble.classList.add('with-reply-markup');
containerDiv.style.bottom = '-' + offset; contentWrapper.append(containerDiv);
bubbleContainer.prepend(containerDiv);
} }
const isOutgoing = message.pFlags.is_outgoing/* && this.peerId != rootScope.myId */; const isOutgoing = message.pFlags.is_outgoing/* && this.peerId != rootScope.myId */;
@ -1804,10 +1812,14 @@ export default class ChatBubbles {
const photo = messageMedia.photo; const photo = messageMedia.photo;
////////this.log('messageMediaPhoto', photo); ////////this.log('messageMediaPhoto', photo);
if(!messageMessage) {
canHaveTail = false;
}
bubble.classList.add('hide-name', 'photo'); bubble.classList.add('hide-name', '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) {
bubble.classList.add('is-album', 'is-grouped'); bubble.classList.add('is-album', 'is-grouped');
wrapAlbum({ wrapAlbum({
groupId: message.grouped_id, groupId: message.grouped_id,
@ -1822,7 +1834,7 @@ export default class ChatBubbles {
break; break;
} }
const withTail = !isAndroid && !message.message && !withReplies && USE_MEDIA_TAILS; const withTail = !isAndroid && canHaveTail && !withReplies && USE_MEDIA_TAILS;
if(withTail) bubble.classList.add('with-media-tail'); if(withTail) bubble.classList.add('with-media-tail');
wrapPhoto({ wrapPhoto({
photo, photo,
@ -1967,6 +1979,7 @@ export default class ChatBubbles {
if(doc.sticker/* && doc.size <= 1e6 */) { if(doc.sticker/* && doc.size <= 1e6 */) {
bubble.classList.add('sticker'); bubble.classList.add('sticker');
canHaveTail = false;
if(doc.animated) { if(doc.animated) {
bubble.classList.add('sticker-animated'); bubble.classList.add('sticker-animated');
@ -1993,12 +2006,16 @@ export default class ChatBubbles {
}); });
break; 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);
bubble.classList.add('hide-name', doc.type == 'round' ? 'round' : 'video'); if(doc.type === 'round' || !messageMessage) {
canHaveTail = false;
}
bubble.classList.add('hide-name', doc.type === 'round' ? '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');
wrapAlbum({ wrapAlbum({
@ -2011,7 +2028,7 @@ export default class ChatBubbles {
loadPromises loadPromises
}); });
} else { } else {
const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message && !withReplies && USE_MEDIA_TAILS; const withTail = !isAndroid && !isApple && doc.type !== 'round' && 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,
@ -2047,7 +2064,7 @@ export default class ChatBubbles {
lastContainer && lastContainer.append(timeSpan.cloneNode(true)); lastContainer && lastContainer.append(timeSpan.cloneNode(true));
bubble.classList.remove('is-message-empty'); bubble.classList.remove('is-message-empty');
messageDiv.classList.add((doc.type != 'photo' ? doc.type || 'document' : 'document') + '-message'); messageDiv.classList.add((doc.type !== 'photo' ? doc.type || 'document' : 'document') + '-message');
processingWebPage = true; processingWebPage = true;
break; break;
@ -2225,7 +2242,7 @@ export default class ChatBubbles {
//this.log('exec loadDialogPhoto', message); //this.log('exec loadDialogPhoto', message);
bubbleContainer.append(avatarElem); contentWrapper.append(avatarElem);
} }
} else { } else {
bubble.classList.add('hide-name'); bubble.classList.add('hide-name');
@ -2268,6 +2285,10 @@ export default class ChatBubbles {
}); });
} }
if(canHaveTail) {
bubble.classList.add('can-have-tail');
}
return bubble; return bubble;
} }
@ -2612,19 +2633,19 @@ export default class ChatBubbles {
const animationPromise = deferredPromise<void>(); const animationPromise = deferredPromise<void>();
let lastMsDelay = 0; let lastMsDelay = 0;
mids.forEach((mid, idx) => { mids.forEach((mid, idx) => {
const bubble = this.bubbles[mid]; const contentWrapper = this.bubbles[mid].lastElementChild as HTMLElement;
lastMsDelay = ((idx + offsetIndex) || 0.1) * delay; lastMsDelay = ((idx + offsetIndex) || 0.1) * delay;
//lastMsDelay = (idx || 0.1) * 1000; //lastMsDelay = (idx || 0.1) * 1000;
//if(idx || isSafari) { //if(idx || isSafari) {
// ! 0.1 = 1ms задержка для Safari, без этого первое сообщение над самым нижним может появиться позже другого с animation-delay, LOL ! // ! 0.1 = 1ms задержка для Safari, без этого первое сообщение над самым нижним может появиться позже другого с animation-delay, LOL !
bubble.style.animationDelay = lastMsDelay + 'ms'; contentWrapper.style.animationDelay = lastMsDelay + 'ms';
//} //}
bubble.classList.add('zoom-fade'); contentWrapper.classList.add('zoom-fade');
bubble.addEventListener('animationend', () => { contentWrapper.addEventListener('animationend', () => {
bubble.style.animationDelay = ''; contentWrapper.style.animationDelay = '';
bubble.classList.remove('zoom-fade'); contentWrapper.classList.remove('zoom-fade');
if(idx === (mids.length - 1)) { if(idx === (mids.length - 1)) {
animationPromise.resolve(); animationPromise.resolve();

12
src/components/chat/contextMenu.ts
View File

@ -31,11 +31,11 @@ export default class ChatContextMenu {
this.init = null; this.init = null;
} }
let bubble: HTMLElement, bubbleContainer: HTMLElement; let bubble: HTMLElement, contentWrapper: HTMLElement;
try { try {
bubbleContainer = findUpClassName(e.target, 'bubble__container'); contentWrapper = findUpClassName(e.target, 'bubble-content-wrapper');
bubble = bubbleContainer ? bubbleContainer.parentElement : findUpClassName(e.target, 'bubble'); bubble = contentWrapper ? contentWrapper.parentElement : findUpClassName(e.target, 'bubble');
} catch(e) {} } catch(e) {}
// ! context menu click by date bubble (there is no pointer-events) // ! context menu click by date bubble (there is no pointer-events)
@ -51,7 +51,7 @@ export default class ChatContextMenu {
if(!mid) return; if(!mid) return;
// * если открыть контекстное меню для альбома не по бабблу, и последний элемент не выбран, чтобы показать остальные пункты // * если открыть контекстное меню для альбома не по бабблу, и последний элемент не выбран, чтобы показать остальные пункты
if(chat.selection.isSelecting && !bubbleContainer) { if(chat.selection.isSelecting && !contentWrapper) {
const mids = this.chat.getMidsByMid(mid); const mids = this.chat.getMidsByMid(mid);
if(mids.length > 1) { if(mids.length > 1) {
const selectedMid = chat.selection.selectedMids.has(mid) ? mid : mids.find(mid => chat.selection.selectedMids.has(mid)); const selectedMid = chat.selection.selectedMids.has(mid) ? mid : mids.find(mid => chat.selection.selectedMids.has(mid));
@ -83,7 +83,7 @@ export default class ChatContextMenu {
if(chat.selection.isSelecting && !button.withSelection) { if(chat.selection.isSelecting && !button.withSelection) {
good = false; good = false;
} else { } else {
good = bubbleContainer || isTouchSupported ? good = contentWrapper || isTouchSupported ?
button.verify() : button.verify() :
button.notDirect && button.verify() && button.notDirect(); button.notDirect && button.verify() && button.notDirect();
} }
@ -112,7 +112,7 @@ export default class ChatContextMenu {
chat.log('touchend', e); chat.log('touchend', e);
const good = ['bubble', 'bubble__container', 'message', 'time', 'inner'].find(c => className.match(new RegExp(c + '($|\\s)'))); const good = ['bubble', 'bubble-content-wrapper', 'bubble-content', 'message', 'time', 'inner'].find(c => className.match(new RegExp(c + '($|\\s)')));
if(good) { if(good) {
cancelEvent(e); cancelEvent(e);
//onContextMenu((e as TouchEvent).changedTouches[0]); //onContextMenu((e as TouchEvent).changedTouches[0]);

2
src/components/scrollable.ts
View File

@ -14,7 +14,7 @@ console.log(height);
*/ */
/* /*
Array.from($0.querySelectorAll('.bubble__container')).forEach(_el => { Array.from($0.querySelectorAll('.bubble-content')).forEach(_el => {
//_el.style.display = ''; //_el.style.display = '';
//return; //return;

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

@ -1019,7 +1019,7 @@ $chat-helper-size: 39px;
} }
&.is-selecting { &.is-selecting {
&:not(.backwards) .is-in .bubble__container { &:not(.backwards) .is-in .bubble-content-wrapper {
transform: translateX(2.5rem); transform: translateX(2.5rem);
} }
@ -1107,9 +1107,8 @@ $chat-helper-size: 39px;
.is-in { .is-in {
//margin-left: 45px; //margin-left: 45px;
.bubble__container { .bubble-content-wrapper {
margin-left: 45px; margin-left: 45px; //margin-left: 3rem; #DO JS3
//margin-left: 3rem; #DO JS3
@include respond-to(handhelds) { @include respond-to(handhelds) {
max-width: calc(100% - var(--message-handhelds-margin)); max-width: calc(100% - var(--message-handhelds-margin));
@ -1120,11 +1119,11 @@ $chat-helper-size: 39px;
&.is-channel:not(.is-chat) { &.is-channel:not(.is-chat) {
.bubble { .bubble {
&__container { &-content-wrapper {
max-width: 100%; max-width: 100%;
} }
&.with-beside-button .bubble__container { &.with-beside-button .bubble-content-wrapper {
max-width: calc(100% - var(--message-beside-button-margin)) !important; max-width: calc(100% - var(--message-beside-button-margin)) !important;
} }
} }

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

@ -62,6 +62,11 @@ $bubble-margin: .25rem;
z-index: 1; z-index: 1;
margin: 0 auto $bubble-margin; margin: 0 auto $bubble-margin;
user-select: none; user-select: none;
display: flex;
--background-color: #fff;
--accent-color: $color-blue;
--secondary-color: $color-gray;
&.is-highlighted, &.is-selected, /* .bubbles.is-selecting */ & { &.is-highlighted, &.is-selected, /* .bubbles.is-selecting */ & {
&:after { &:after {
@ -72,7 +77,7 @@ $bubble-margin: .25rem;
top: -#{$bubble-margin / 2}; top: -#{$bubble-margin / 2};
bottom: -#{$bubble-margin / 2}; bottom: -#{$bubble-margin / 2};
content: " "; content: " ";
z-index: 1; z-index: -1;
} }
} }
@ -172,16 +177,6 @@ $bubble-margin: .25rem;
} }
} }
&.zoom-fade /* .bubble__container */ {
//transform: scale(.8) translateZ(0);
transform: scale3d(.8, .8, 1);
//transform: scale(.8);
opacity: 0;
transform-origin: center;
animation: zoom-opacity-fade-in .2s linear forwards;
animation-delay: 0;
}
&-select-checkbox { &-select-checkbox {
z-index: 3; z-index: 3;
position: absolute; position: absolute;
@ -218,7 +213,7 @@ $bubble-margin: .25rem;
} }
} }
&__container { &-content {
//min-width: 60px; //min-width: 60px;
min-width: 56px; min-width: 56px;
max-width: 100%; max-width: 100%;
@ -231,8 +226,8 @@ $bubble-margin: .25rem;
width: max-content; width: max-content;
height: fit-content; height: fit-content;
z-index: 2; z-index: 2;
transition: .2s transform;
user-select: none; user-select: none;
background-color: var(--background-color);
body.animation-level-0 & { body.animation-level-0 & {
transition: none; transition: none;
@ -246,42 +241,9 @@ $bubble-margin: .25rem;
html.is-touch body:not(.no-select) .bubbles.is-selecting & { // * need no-select on body because chat-input transforms in channels html.is-touch body:not(.no-select) .bubbles.is-selecting & { // * need no-select on body because chat-input transforms in channels
user-select: text; user-select: text;
} }
@include respond-to(not-handhelds) {
max-width: 85%;
} }
@include respond-to(handhelds) { /* &.with-beside-button &-content {
max-width: calc(100% - var(--message-handhelds-margin));
}
> .user-avatar {
position: absolute;
margin-left: -45px;
//left: -3rem; # DO JS3
cursor: pointer;
.bubbles.is-selecting & {
transform: scale3d(1, 1, 1);
transform-origin: bottom;
transition: transform var(--layer-transition);
body.animation-level-0 & {
transition: none;
}
}
.bubbles.is-selecting:not(.backwards) & {
transform: scale3d(.76, .76, 1);
}
// @include respond-to(handhelds) {
// left: -45px;
// }
}
}
/* &.with-beside-button &__container {
@include respond-to(handhelds) { @include respond-to(handhelds) {
max-width: calc(100% - var(--message-handhelds-margin)) !important; max-width: calc(100% - var(--message-handhelds-margin)) !important;
} }
@ -292,7 +254,7 @@ $bubble-margin: .25rem;
//padding: $bubble-margin 0; //padding: $bubble-margin 0;
max-width: var(--messages-container-width); max-width: var(--messages-container-width);
.bubble__container { .bubble-content {
/* justify-self: center; */ /* justify-self: center; */
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
@ -319,7 +281,7 @@ $bubble-margin: .25rem;
.bubbles-inner:not(.is-scrolling) & { .bubbles-inner:not(.is-scrolling) & {
//transition-delay: 1.35s; //transition-delay: 1.35s;
.bubble__container { .bubble-content {
cursor: default; cursor: default;
} }
} }
@ -329,8 +291,8 @@ $bubble-margin: .25rem;
} */ } */
} }
.chat.type-chat & .bubble__container, .chat.type-chat & .bubble-content,
.chat.type-discussion & .bubble__container { .chat.type-discussion & .bubble-content {
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
@ -361,10 +323,6 @@ $bubble-margin: .25rem;
} }
} }
.message strong {
font-weight: 500 !important;
}
/* &.is-group-first { /* &.is-group-first {
padding-top: 10px; padding-top: 10px;
} */ } */
@ -395,7 +353,7 @@ $bubble-margin: .25rem;
&:not(.forwarded) { &:not(.forwarded) {
&:not(.is-group-first) { &:not(.is-group-first) {
.bubble__container > .name, .document-wrapper > .name { .bubble-content > .name, .document-wrapper > .name {
display: none; display: none;
} }
@ -405,7 +363,7 @@ $bubble-margin: .25rem;
} }
} }
&:not(.is-group-last) .bubble__container > .user-avatar { &:not(.is-group-last) .bubble-content-wrapper > .user-avatar {
display: none; display: none;
} }
@ -429,7 +387,7 @@ $bubble-margin: .25rem;
} }
&.photo, &.video { &.photo, &.video {
.bubble__container { .bubble-content {
width: min-content; width: min-content;
} }
@ -472,7 +430,7 @@ $bubble-margin: .25rem;
&.emoji-big { &.emoji-big {
font-size: 0; font-size: 0;
.bubble__container { .bubble-content {
background: none!important; background: none!important;
box-shadow: none; box-shadow: none;
line-height: 1; line-height: 1;
@ -491,7 +449,7 @@ $bubble-margin: .25rem;
} }
} }
&.sticker .bubble__container { &.sticker .bubble-content {
max-width: 140px !important; max-width: 140px !important;
max-height: 140px !important; max-height: 140px !important;
} }
@ -503,8 +461,6 @@ $bubble-margin: .25rem;
img.emoji { img.emoji {
height: 64px; height: 64px;
width: 64px; width: 64px;
/* height: 96px;
width: 96px; */
} }
} }
@ -514,8 +470,6 @@ $bubble-margin: .25rem;
img.emoji { img.emoji {
height: 48px; height: 48px;
width: 48px; width: 48px;
/* height: 64px;
width: 64px; */
} }
} }
@ -525,13 +479,11 @@ $bubble-margin: .25rem;
img.emoji { img.emoji {
height: 32px; height: 32px;
width: 32px; width: 32px;
/* height: 48px;
width: 48px; */
} }
} }
&.sticker, &.round, &.emoji-big { &.sticker, &.round, &.emoji-big {
.bubble__container { .bubble-content {
cursor: pointer; cursor: pointer;
background: none!important; background: none!important;
box-shadow: none; box-shadow: none;
@ -561,7 +513,7 @@ $bubble-margin: .25rem;
border-radius: 0; border-radius: 0;
} }
.bubble__container { .bubble-content {
max-width: 200px !important; max-width: 200px !important;
max-height: 200px !important; max-height: 200px !important;
} }
@ -719,24 +671,10 @@ $bubble-margin: .25rem;
} }
} }
//&.video {
//.attachment {
//max-height: fit-content;
/*img {
width: 100%;
height: 100%;
}*/
//}
//}
&.round { &.round {
.attachment { .attachment {
max-height: 200px; max-height: 200px;
max-width: 200px; max-width: 200px;
//max-height: fit-content;
//-webkit-clip-path: ellipse(100px 100px at center);
//clip-path: ellipse(100px 100px at center);
} }
} }
@ -750,8 +688,6 @@ $bubble-margin: .25rem;
.preview { .preview {
max-height: unquote('min(400px, 100%)'); max-height: unquote('min(400px, 100%)');
max-width: unquote('min(480px, 100%)'); max-width: unquote('min(480px, 100%)');
/* max-height: 100%;
max-width: 100%; */
border-radius: 4px; border-radius: 4px;
margin-bottom: 3px; margin-bottom: 3px;
overflow: hidden; overflow: hidden;
@ -763,8 +699,6 @@ $bubble-margin: .25rem;
img, video { img, video {
max-width: 100%; max-width: 100%;
/* width: 100%;
height: 100%; */
} }
} }
@ -804,11 +738,6 @@ $bubble-margin: .25rem;
.web, .reply { .web, .reply {
font-size: var(--messages-secondary-text-size); font-size: var(--messages-secondary-text-size);
//transition: anim(background-color);
/* &:hover {
cursor: pointer;
} */
.name, .reply-title { .name, .reply-title {
font-weight: 500 !important; font-weight: 500 !important;
@ -817,7 +746,7 @@ $bubble-margin: .25rem;
} }
&.is-square-photo { &.is-square-photo {
.bubble__container { .bubble-content {
width: fit-content; width: fit-content;
} }
@ -847,7 +776,7 @@ $bubble-margin: .25rem;
} }
&.is-vertical-photo { &.is-vertical-photo {
.bubble__container { .bubble-content {
width: fit-content; width: fit-content;
} }
} }
@ -897,10 +826,7 @@ $bubble-margin: .25rem;
.message { .message {
font-size: var(--messages-text-size); font-size: var(--messages-text-size);
//padding: 0 9px .2675rem 9px;
padding: 0 9px 6px 9px; padding: 0 9px 6px 9px;
/* overflow: hidden;
text-overflow: ellipsis; */
max-width: 100%; max-width: 100%;
color: #000; color: #000;
line-height: 1.3125; // 21 / 16 line-height: 1.3125; // 21 / 16
@ -908,13 +834,7 @@ $bubble-margin: .25rem;
white-space: pre-wrap; // * fix spaces on line begin white-space: pre-wrap; // * fix spaces on line begin
position: relative; position: relative;
/* * {
overflow: hidden;
text-overflow: ellipsis;
} */
&:last-child { &:last-child {
//padding-top: .2675rem;
padding-top: 6px; padding-top: 6px;
} }
} }
@ -1036,7 +956,7 @@ $bubble-margin: .25rem;
} }
&.is-multiple-documents { &.is-multiple-documents {
/* .bubble__container { /* .bubble-content {
position: unset; position: unset;
} */ } */
@ -1382,7 +1302,7 @@ $bubble-margin: .25rem;
user-select: none; user-select: none;
} }
&__container > .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;
@ -1398,13 +1318,13 @@ $bubble-margin: .25rem;
//white-space: nowrap; //white-space: nowrap;
} }
&:not(.is-group-first) .bubble__container > .name .name { &:not(.is-group-first) .bubble-content > .name .name {
display: none; display: none;
} }
&:not(.webpage) { &:not(.webpage) {
&.photo, &.video { &.photo, &.video {
.bubble__container > .name { .bubble-content > .name {
//padding-bottom: .2675rem; //padding-bottom: .2675rem;
padding-bottom: 6px; padding-bottom: 6px;
} }
@ -1433,7 +1353,7 @@ $bubble-margin: .25rem;
} }
} }
&:not(.sticker):not(.emoji-big):not(.round).is-group-last .bubble__container:after { &.can-have-tail.is-group-last .bubble-content:after {
position: absolute; position: absolute;
//bottom: 0; //bottom: 0;
width: 11px; width: 11px;
@ -1447,14 +1367,14 @@ $bubble-margin: .25rem;
&.photo, &.video { &.photo, &.video {
&.is-message-empty.is-group-last:not(.with-replies) { &.is-message-empty.is-group-last:not(.with-replies) {
.bubble__container:after { .bubble-content:after {
display: none; display: none;
} }
} }
} }
&.is-message-empty.is-group-last.with-media-tail { &.is-message-empty.is-group-last.with-media-tail {
.bubble__container:after { .bubble-content:after {
display: none; display: none;
} }
@ -1566,7 +1486,7 @@ $bubble-margin: .25rem;
display: none; display: none;
} }
&.is-in .bubble__container { &.is-in .bubble-content {
margin-left: 0; margin-left: 0;
} }
} }
@ -1582,9 +1502,62 @@ $bubble-margin: .25rem;
} }
} }
.bubble-content-wrapper {
transition: transform var(--layer-transition);
transform: scale(1) translateX(0);
&.zoom-fade /* .bubble-content */ {
//transform: scale(.8) translateZ(0);
transform: scale3d(.8, .8, 1);
//transform: scale(.8);
opacity: 0;
transform-origin: center;
animation: zoom-opacity-fade-in .2s linear forwards;
animation-delay: 0;
}
@include respond-to(not-handhelds) {
max-width: 85%;
}
@include respond-to(handhelds) {
max-width: calc(100% - var(--message-handhelds-margin));
}
> .user-avatar {
position: absolute;
margin-left: -45px;
//left: -3rem; # DO JS3
bottom: 0;
cursor: pointer;
.bubbles.is-selecting & {
transform: scale3d(1, 1, 1);
transform-origin: bottom;
transition: transform var(--layer-transition);
body.animation-level-0 & {
transition: none;
}
}
.bubbles.is-selecting:not(.backwards) & {
transform: scale3d(.76, .76, 1);
}
// @include respond-to(handhelds) {
// left: -45px;
// }
}
}
.bubble.service { .bubble.service {
align-self: center; align-self: center;
.bubble-content {
background-color: transparent;
}
.service-msg { .service-msg {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, .24); background-color: rgba(0, 0, 0, .24);
@ -1624,36 +1597,34 @@ $bubble-margin: .25rem;
} }
.bubble.is-in { .bubble.is-in {
.bubble__container { .bubble-content {
margin-right: auto;
background-color: #ffffff;
&, .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__container, .poll-footer-button { .bubble-content, .poll-footer-button {
border-radius: 12px 12px 12px 6px; border-top-left-radius: 12px;
} }
} }
&.is-group-last { &.is-group-last {
.bubble__container, .poll-footer-button { &.can-have-tail {
border-radius: 6px 12px 12px 0px; .bubble-content, .poll-footer-button {
//border-radius: 12px 12px 12px 0px; border-bottom-left-radius: 0;
} }
.bubble__container:after { .bubble-content:after {
margin-left: -8.4px; margin-left: -8.4px;
background-image: url('assets/img/msg-tail-left.svg'); background-image: url('assets/img/msg-tail-left.svg');
} }
} }
&.is-group-first.is-group-last { &:not(.can-have-tail) {
.bubble__container, .poll-footer-button { .bubble-content, .poll-footer-button {
border-radius: 12px 12px 12px 0px; border-bottom-left-radius: 12px;
}
} }
} }
@ -1690,11 +1661,6 @@ $bubble-margin: .25rem;
.quote { .quote {
border-left: 2px $color-blue solid; border-left: 2px $color-blue solid;
/* * {
overflow: hidden;
text-overflow: ellipsis;
} */
} }
.quote .name, .reply-title/* , .reply i */ { .quote .name, .reply-title/* , .reply i */ {
@ -1712,13 +1678,13 @@ $bubble-margin: .25rem;
} }
&.is-message-empty.is-group-last { &.is-message-empty.is-group-last {
&:not(.with-media-tail):not(.with-replies) { /* &:not(.with-media-tail):not(.with-replies) {
&.photo, &.video { &.photo, &.video {
.bubble__container { .bubble-content {
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
} }
} }
} } */
&.with-media-tail { &.with-media-tail {
.attachment { .attachment {
@ -1744,26 +1710,11 @@ $bubble-margin: .25rem;
} */ } */
} }
/* @include respond-to(handhelds) {
.bubble.is-in {
margin-right: auto;
}
.bubble.is-out {
margin-left: auto;
}
} */
.bubble.is-out { .bubble.is-out {
.bubble__container { flex-direction: row-reverse;
margin-left: auto; --background-color: #eeffde;
background-color: #eeffde;
> .user-avatar {
left: auto;
right: -2.5rem;
}
.bubble-content {
&, .poll-footer-button { &, .poll-footer-button {
border-radius: 12px 6px 6px 12px; border-radius: 12px 6px 6px 12px;
} }
@ -1773,26 +1724,35 @@ $bubble-margin: .25rem;
} }
} }
/* .bubble-content-wrapper {
> .user-avatar {
left: auto;
right: -2.5rem;
}
} */
&.is-group-first { &.is-group-first {
.bubble__container, .poll-footer-button { .bubble-content, .poll-footer-button {
border-radius: 12px 12px 6px 12px; border-top-right-radius: 12px;
} }
} }
&.is-group-last { &.is-group-last {
.bubble__container, .poll-footer-button { &.can-have-tail {
border-radius: 12px 6px 0px 12px; .bubble-content, .poll-footer-button {
border-bottom-right-radius: 0;
} }
.bubble__container:after { .bubble-content:after {
right: -8.4px; right: -8.4px;
background-image: url('assets/img/msg-tail-right.svg'); background-image: url('assets/img/msg-tail-right.svg');
} }
} }
&.is-group-first.is-group-last { &:not(.can-have-tail) {
.bubble__container, .poll-footer-button { .bubble-content, .poll-footer-button {
border-radius: 12px 12px 0px 12px; border-bottom-right-radius: 12px;
}
} }
} }
@ -1920,13 +1880,13 @@ $bubble-margin: .25rem;
} }
&.is-message-empty.is-group-last { &.is-message-empty.is-group-last {
&:not(.with-media-tail) { /* &:not(.with-media-tail) {
&.photo, &.video { &.photo, &.video {
.bubble__container { .bubble-content {
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
} }
} }
} } */
&.with-media-tail { &.with-media-tail {
.attachment { .attachment {
@ -2030,7 +1990,6 @@ $bubble-margin: .25rem;
} }
.reply-markup { .reply-markup {
position: absolute;
width: 100%; width: 100%;
&-row { &-row {