Added content wrapper to bubble
Fix corners on media bubbles Fix margin between posts with reply markups
This commit is contained in:
morethanwords
parent
abf1acc6c8
commit
c3db148533
@ -536,7 +536,7 @@ export default class ChatBubbles {
|
||||
|
||||
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')) {
|
||||
return;
|
||||
}
|
||||
@ -1101,7 +1101,7 @@ export default class ChatBubbles {
|
||||
|
||||
const div = document.createElement('div');
|
||||
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);
|
||||
|
||||
const container = document.createElement('div');
|
||||
@ -1536,15 +1536,20 @@ export default class ChatBubbles {
|
||||
//messageDiv.innerText = message.message;
|
||||
|
||||
let bubbleContainer: HTMLDivElement;
|
||||
let contentWrapper: HTMLElement;
|
||||
|
||||
// bubble
|
||||
if(!bubble) {
|
||||
contentWrapper = document.createElement('div');
|
||||
contentWrapper.classList.add('bubble-content-wrapper');
|
||||
|
||||
bubbleContainer = document.createElement('div');
|
||||
bubbleContainer.classList.add('bubble__container');
|
||||
bubbleContainer.classList.add('bubble-content');
|
||||
|
||||
bubble = document.createElement('div');
|
||||
bubble.classList.add('bubble');
|
||||
bubble.appendChild(bubbleContainer);
|
||||
contentWrapper.appendChild(bubbleContainer);
|
||||
bubble.appendChild(contentWrapper);
|
||||
|
||||
if(!our && !message.pFlags.out) {
|
||||
//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)));
|
||||
bubble.className = classNames.join(' ');
|
||||
|
||||
bubbleContainer = bubble.lastElementChild as HTMLDivElement;
|
||||
bubbleContainer.innerHTML = '';
|
||||
contentWrapper = bubble.lastElementChild as HTMLElement;
|
||||
bubbleContainer = contentWrapper.firstElementChild as HTMLDivElement;
|
||||
contentWrapper.innerHTML = '';
|
||||
contentWrapper.appendChild(bubbleContainer);
|
||||
//bubbleContainer.style.marginBottom = '';
|
||||
const animationDelay = bubbleContainer.style.animationDelay;
|
||||
bubbleContainer.style.cssText = '';
|
||||
bubbleContainer.style.animationDelay = animationDelay;
|
||||
const animationDelay = contentWrapper.style.animationDelay;
|
||||
contentWrapper.style.cssText = '';
|
||||
contentWrapper.style.animationDelay = animationDelay;
|
||||
|
||||
if(bubble === this.firstUnreadBubble) {
|
||||
bubble.classList.add('is-first-unread');
|
||||
@ -1647,6 +1654,8 @@ export default class ChatBubbles {
|
||||
let richText = RichTextProcessor.wrapRichText(messageMessage, {
|
||||
entities: totalEntities
|
||||
});
|
||||
|
||||
let canHaveTail = true;
|
||||
|
||||
if(totalEntities && !messageMedia) {
|
||||
let emojiEntities = totalEntities.filter((e) => e._ == 'messageEntityEmoji');
|
||||
@ -1672,6 +1681,7 @@ export default class ChatBubbles {
|
||||
}
|
||||
|
||||
bubble.classList.add('is-message-empty', 'emoji-big');
|
||||
canHaveTail = false;
|
||||
} else {
|
||||
messageDiv.innerHTML = richText;
|
||||
}
|
||||
@ -1755,11 +1765,9 @@ export default class ChatBubbles {
|
||||
this.appInlineBotsManager.callbackButtonClick(this.peerId, message.mid, button);
|
||||
});
|
||||
|
||||
const offset = rows.length * 45 + 'px';
|
||||
bubbleContainer.style.marginBottom = offset;
|
||||
containerDiv.style.bottom = '-' + offset;
|
||||
|
||||
bubbleContainer.prepend(containerDiv);
|
||||
canHaveTail = false;
|
||||
bubble.classList.add('with-reply-markup');
|
||||
contentWrapper.append(containerDiv);
|
||||
}
|
||||
|
||||
const isOutgoing = message.pFlags.is_outgoing/* && this.peerId != rootScope.myId */;
|
||||
@ -1803,11 +1811,15 @@ export default class ChatBubbles {
|
||||
case 'messageMediaPhoto': {
|
||||
const photo = messageMedia.photo;
|
||||
////////this.log('messageMediaPhoto', photo);
|
||||
|
||||
if(!messageMessage) {
|
||||
canHaveTail = false;
|
||||
}
|
||||
|
||||
bubble.classList.add('hide-name', 'photo');
|
||||
|
||||
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');
|
||||
wrapAlbum({
|
||||
groupId: message.grouped_id,
|
||||
@ -1822,7 +1834,7 @@ export default class ChatBubbles {
|
||||
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');
|
||||
wrapPhoto({
|
||||
photo,
|
||||
@ -1967,6 +1979,7 @@ export default class ChatBubbles {
|
||||
|
||||
if(doc.sticker/* && doc.size <= 1e6 */) {
|
||||
bubble.classList.add('sticker');
|
||||
canHaveTail = false;
|
||||
|
||||
if(doc.animated) {
|
||||
bubble.classList.add('sticker-animated');
|
||||
@ -1993,12 +2006,16 @@ export default class ChatBubbles {
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
if(doc.type === 'round' || !messageMessage) {
|
||||
canHaveTail = false;
|
||||
}
|
||||
|
||||
bubble.classList.add('hide-name', doc.type == 'round' ? 'round' : 'video');
|
||||
bubble.classList.add('hide-name', doc.type === 'round' ? 'round' : 'video');
|
||||
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');
|
||||
|
||||
wrapAlbum({
|
||||
@ -2011,7 +2028,7 @@ export default class ChatBubbles {
|
||||
loadPromises
|
||||
});
|
||||
} 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');
|
||||
wrapVideo({
|
||||
doc,
|
||||
@ -2047,7 +2064,7 @@ export default class ChatBubbles {
|
||||
lastContainer && lastContainer.append(timeSpan.cloneNode(true));
|
||||
|
||||
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;
|
||||
|
||||
break;
|
||||
@ -2225,7 +2242,7 @@ export default class ChatBubbles {
|
||||
|
||||
//this.log('exec loadDialogPhoto', message);
|
||||
|
||||
bubbleContainer.append(avatarElem);
|
||||
contentWrapper.append(avatarElem);
|
||||
}
|
||||
} else {
|
||||
bubble.classList.add('hide-name');
|
||||
@ -2268,6 +2285,10 @@ export default class ChatBubbles {
|
||||
});
|
||||
}
|
||||
|
||||
if(canHaveTail) {
|
||||
bubble.classList.add('can-have-tail');
|
||||
}
|
||||
|
||||
return bubble;
|
||||
}
|
||||
|
||||
@ -2612,19 +2633,19 @@ export default class ChatBubbles {
|
||||
const animationPromise = deferredPromise<void>();
|
||||
let lastMsDelay = 0;
|
||||
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 || 0.1) * 1000;
|
||||
//if(idx || isSafari) {
|
||||
// ! 0.1 = 1ms задержка для Safari, без этого первое сообщение над самым нижним может появиться позже другого с animation-delay, LOL !
|
||||
bubble.style.animationDelay = lastMsDelay + 'ms';
|
||||
contentWrapper.style.animationDelay = lastMsDelay + 'ms';
|
||||
//}
|
||||
|
||||
bubble.classList.add('zoom-fade');
|
||||
bubble.addEventListener('animationend', () => {
|
||||
bubble.style.animationDelay = '';
|
||||
bubble.classList.remove('zoom-fade');
|
||||
contentWrapper.classList.add('zoom-fade');
|
||||
contentWrapper.addEventListener('animationend', () => {
|
||||
contentWrapper.style.animationDelay = '';
|
||||
contentWrapper.classList.remove('zoom-fade');
|
||||
|
||||
if(idx === (mids.length - 1)) {
|
||||
animationPromise.resolve();
|
||||
|
||||
@ -31,11 +31,11 @@ export default class ChatContextMenu {
|
||||
this.init = null;
|
||||
}
|
||||
|
||||
let bubble: HTMLElement, bubbleContainer: HTMLElement;
|
||||
let bubble: HTMLElement, contentWrapper: HTMLElement;
|
||||
|
||||
try {
|
||||
bubbleContainer = findUpClassName(e.target, 'bubble__container');
|
||||
bubble = bubbleContainer ? bubbleContainer.parentElement : findUpClassName(e.target, 'bubble');
|
||||
contentWrapper = findUpClassName(e.target, 'bubble-content-wrapper');
|
||||
bubble = contentWrapper ? contentWrapper.parentElement : findUpClassName(e.target, 'bubble');
|
||||
} catch(e) {}
|
||||
|
||||
// ! context menu click by date bubble (there is no pointer-events)
|
||||
@ -51,7 +51,7 @@ export default class ChatContextMenu {
|
||||
if(!mid) return;
|
||||
|
||||
// * если открыть контекстное меню для альбома не по бабблу, и последний элемент не выбран, чтобы показать остальные пункты
|
||||
if(chat.selection.isSelecting && !bubbleContainer) {
|
||||
if(chat.selection.isSelecting && !contentWrapper) {
|
||||
const mids = this.chat.getMidsByMid(mid);
|
||||
if(mids.length > 1) {
|
||||
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) {
|
||||
good = false;
|
||||
} else {
|
||||
good = bubbleContainer || isTouchSupported ?
|
||||
good = contentWrapper || isTouchSupported ?
|
||||
button.verify() :
|
||||
button.notDirect && button.verify() && button.notDirect();
|
||||
}
|
||||
@ -112,7 +112,7 @@ export default class ChatContextMenu {
|
||||
|
||||
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) {
|
||||
cancelEvent(e);
|
||||
//onContextMenu((e as TouchEvent).changedTouches[0]);
|
||||
|
||||
@ -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 = '';
|
||||
//return;
|
||||
|
||||
|
||||
@ -1019,7 +1019,7 @@ $chat-helper-size: 39px;
|
||||
}
|
||||
|
||||
&.is-selecting {
|
||||
&:not(.backwards) .is-in .bubble__container {
|
||||
&:not(.backwards) .is-in .bubble-content-wrapper {
|
||||
transform: translateX(2.5rem);
|
||||
}
|
||||
|
||||
@ -1107,10 +1107,9 @@ $chat-helper-size: 39px;
|
||||
.is-in {
|
||||
//margin-left: 45px;
|
||||
|
||||
.bubble__container {
|
||||
margin-left: 45px;
|
||||
//margin-left: 3rem; #DO JS3
|
||||
|
||||
.bubble-content-wrapper {
|
||||
margin-left: 45px; //margin-left: 3rem; #DO JS3
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
max-width: calc(100% - var(--message-handhelds-margin));
|
||||
}
|
||||
@ -1120,11 +1119,11 @@ $chat-helper-size: 39px;
|
||||
|
||||
&.is-channel:not(.is-chat) {
|
||||
.bubble {
|
||||
&__container {
|
||||
&-content-wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.with-beside-button .bubble__container {
|
||||
&.with-beside-button .bubble-content-wrapper {
|
||||
max-width: calc(100% - var(--message-beside-button-margin)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,6 +62,11 @@ $bubble-margin: .25rem;
|
||||
z-index: 1;
|
||||
margin: 0 auto $bubble-margin;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
|
||||
--background-color: #fff;
|
||||
--accent-color: $color-blue;
|
||||
--secondary-color: $color-gray;
|
||||
|
||||
&.is-highlighted, &.is-selected, /* .bubbles.is-selecting */ & {
|
||||
&:after {
|
||||
@ -72,7 +77,7 @@ $bubble-margin: .25rem;
|
||||
top: -#{$bubble-margin / 2};
|
||||
bottom: -#{$bubble-margin / 2};
|
||||
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 {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
@ -218,7 +213,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
&-content {
|
||||
//min-width: 60px;
|
||||
min-width: 56px;
|
||||
max-width: 100%;
|
||||
@ -231,8 +226,8 @@ $bubble-margin: .25rem;
|
||||
width: max-content;
|
||||
height: fit-content;
|
||||
z-index: 2;
|
||||
transition: .2s transform;
|
||||
user-select: none;
|
||||
background-color: var(--background-color);
|
||||
|
||||
body.animation-level-0 & {
|
||||
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
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
@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
|
||||
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 {
|
||||
/* &.with-beside-button &-content {
|
||||
@include respond-to(handhelds) {
|
||||
max-width: calc(100% - var(--message-handhelds-margin)) !important;
|
||||
}
|
||||
@ -292,7 +254,7 @@ $bubble-margin: .25rem;
|
||||
//padding: $bubble-margin 0;
|
||||
max-width: var(--messages-container-width);
|
||||
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
/* justify-self: center; */
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
@ -319,7 +281,7 @@ $bubble-margin: .25rem;
|
||||
.bubbles-inner:not(.is-scrolling) & {
|
||||
//transition-delay: 1.35s;
|
||||
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
@ -329,8 +291,8 @@ $bubble-margin: .25rem;
|
||||
} */
|
||||
}
|
||||
|
||||
.chat.type-chat & .bubble__container,
|
||||
.chat.type-discussion & .bubble__container {
|
||||
.chat.type-chat & .bubble-content,
|
||||
.chat.type-discussion & .bubble-content {
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
@ -361,10 +323,6 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message strong {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
/* &.is-group-first {
|
||||
padding-top: 10px;
|
||||
} */
|
||||
@ -395,7 +353,7 @@ $bubble-margin: .25rem;
|
||||
|
||||
&:not(.forwarded) {
|
||||
&:not(.is-group-first) {
|
||||
.bubble__container > .name, .document-wrapper > .name {
|
||||
.bubble-content > .name, .document-wrapper > .name {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -429,7 +387,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&.photo, &.video {
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@ -472,7 +430,7 @@ $bubble-margin: .25rem;
|
||||
&.emoji-big {
|
||||
font-size: 0;
|
||||
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
background: none!important;
|
||||
box-shadow: none;
|
||||
line-height: 1;
|
||||
@ -491,7 +449,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.sticker .bubble__container {
|
||||
&.sticker .bubble-content {
|
||||
max-width: 140px !important;
|
||||
max-height: 140px !important;
|
||||
}
|
||||
@ -503,8 +461,6 @@ $bubble-margin: .25rem;
|
||||
img.emoji {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
/* height: 96px;
|
||||
width: 96px; */
|
||||
}
|
||||
}
|
||||
|
||||
@ -514,8 +470,6 @@ $bubble-margin: .25rem;
|
||||
img.emoji {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
/* height: 64px;
|
||||
width: 64px; */
|
||||
}
|
||||
}
|
||||
|
||||
@ -525,13 +479,11 @@ $bubble-margin: .25rem;
|
||||
img.emoji {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
/* height: 48px;
|
||||
width: 48px; */
|
||||
}
|
||||
}
|
||||
|
||||
&.sticker, &.round, &.emoji-big {
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
cursor: pointer;
|
||||
background: none!important;
|
||||
box-shadow: none;
|
||||
@ -561,7 +513,7 @@ $bubble-margin: .25rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
max-width: 200px !important;
|
||||
max-height: 200px !important;
|
||||
}
|
||||
@ -718,25 +670,11 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//&.video {
|
||||
//.attachment {
|
||||
//max-height: fit-content;
|
||||
|
||||
/*img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}*/
|
||||
//}
|
||||
//}
|
||||
|
||||
|
||||
&.round {
|
||||
.attachment {
|
||||
max-height: 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 {
|
||||
max-height: unquote('min(400px, 100%)');
|
||||
max-width: unquote('min(480px, 100%)');
|
||||
/* max-height: 100%;
|
||||
max-width: 100%; */
|
||||
border-radius: 4px;
|
||||
margin-bottom: 3px;
|
||||
overflow: hidden;
|
||||
@ -763,8 +699,6 @@ $bubble-margin: .25rem;
|
||||
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
/* width: 100%;
|
||||
height: 100%; */
|
||||
}
|
||||
}
|
||||
|
||||
@ -804,11 +738,6 @@ $bubble-margin: .25rem;
|
||||
|
||||
.web, .reply {
|
||||
font-size: var(--messages-secondary-text-size);
|
||||
//transition: anim(background-color);
|
||||
|
||||
/* &:hover {
|
||||
cursor: pointer;
|
||||
} */
|
||||
|
||||
.name, .reply-title {
|
||||
font-weight: 500 !important;
|
||||
@ -817,7 +746,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&.is-square-photo {
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@ -847,7 +776,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&.is-vertical-photo {
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
@ -897,24 +826,15 @@ $bubble-margin: .25rem;
|
||||
|
||||
.message {
|
||||
font-size: var(--messages-text-size);
|
||||
//padding: 0 9px .2675rem 9px;
|
||||
padding: 0 9px 6px 9px;
|
||||
/* overflow: hidden;
|
||||
text-overflow: ellipsis; */
|
||||
max-width: 100%;
|
||||
color: #000;
|
||||
line-height: 1.3125; // 21 / 16
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap; // * fix spaces on line begin
|
||||
position: relative;
|
||||
|
||||
/* * {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
} */
|
||||
|
||||
|
||||
&:last-child {
|
||||
//padding-top: .2675rem;
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
@ -1036,7 +956,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&.is-multiple-documents {
|
||||
/* .bubble__container {
|
||||
/* .bubble-content {
|
||||
position: unset;
|
||||
} */
|
||||
|
||||
@ -1382,7 +1302,7 @@ $bubble-margin: .25rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&__container > .name, .document-wrapper > .name {
|
||||
&-content > .name, .document-wrapper > .name {
|
||||
/* padding: .2675rem 9px 0 9px; */
|
||||
/* padding: .32rem 9px 0 9px; */
|
||||
padding: 5px 9px 0 9px;
|
||||
@ -1398,13 +1318,13 @@ $bubble-margin: .25rem;
|
||||
//white-space: nowrap;
|
||||
}
|
||||
|
||||
&:not(.is-group-first) .bubble__container > .name .name {
|
||||
&:not(.is-group-first) .bubble-content > .name .name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.webpage) {
|
||||
&.photo, &.video {
|
||||
.bubble__container > .name {
|
||||
.bubble-content > .name {
|
||||
//padding-bottom: .2675rem;
|
||||
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;
|
||||
//bottom: 0;
|
||||
width: 11px;
|
||||
@ -1447,14 +1367,14 @@ $bubble-margin: .25rem;
|
||||
|
||||
&.photo, &.video {
|
||||
&.is-message-empty.is-group-last:not(.with-replies) {
|
||||
.bubble__container:after {
|
||||
.bubble-content:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-message-empty.is-group-last.with-media-tail {
|
||||
.bubble__container:after {
|
||||
.bubble-content:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1566,7 +1486,7 @@ $bubble-margin: .25rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-in .bubble__container {
|
||||
&.is-in .bubble-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -1582,8 +1502,61 @@ $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 {
|
||||
align-self: center;
|
||||
|
||||
.bubble-content {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.service-msg {
|
||||
color: #fff;
|
||||
@ -1624,39 +1597,37 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.bubble.is-in {
|
||||
.bubble__container {
|
||||
margin-right: auto;
|
||||
background-color: #ffffff;
|
||||
|
||||
.bubble-content {
|
||||
&, .poll-footer-button {
|
||||
border-radius: 6px 12px 12px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-group-first {
|
||||
.bubble__container, .poll-footer-button {
|
||||
border-radius: 12px 12px 12px 6px;
|
||||
.bubble-content, .poll-footer-button {
|
||||
border-top-left-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-group-last {
|
||||
.bubble__container, .poll-footer-button {
|
||||
border-radius: 6px 12px 12px 0px;
|
||||
//border-radius: 12px 12px 12px 0px;
|
||||
&.can-have-tail {
|
||||
.bubble-content, .poll-footer-button {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.bubble-content:after {
|
||||
margin-left: -8.4px;
|
||||
background-image: url('assets/img/msg-tail-left.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.bubble__container:after {
|
||||
margin-left: -8.4px;
|
||||
background-image: url('assets/img/msg-tail-left.svg');
|
||||
&:not(.can-have-tail) {
|
||||
.bubble-content, .poll-footer-button {
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-group-first.is-group-last {
|
||||
.bubble__container, .poll-footer-button {
|
||||
border-radius: 12px 12px 12px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.forwarded .attachment,
|
||||
&.is-reply .attachment,
|
||||
&:not(.hide-name).is-message-empty .attachment/* ,
|
||||
@ -1690,11 +1661,6 @@ $bubble-margin: .25rem;
|
||||
|
||||
.quote {
|
||||
border-left: 2px $color-blue solid;
|
||||
|
||||
/* * {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
} */
|
||||
}
|
||||
|
||||
.quote .name, .reply-title/* , .reply i */ {
|
||||
@ -1712,13 +1678,13 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&.is-message-empty.is-group-last {
|
||||
&:not(.with-media-tail):not(.with-replies) {
|
||||
/* &:not(.with-media-tail):not(.with-replies) {
|
||||
&.photo, &.video {
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
&.with-media-tail {
|
||||
.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__container {
|
||||
margin-left: auto;
|
||||
background-color: #eeffde;
|
||||
|
||||
> .user-avatar {
|
||||
left: auto;
|
||||
right: -2.5rem;
|
||||
}
|
||||
flex-direction: row-reverse;
|
||||
--background-color: #eeffde;
|
||||
|
||||
.bubble-content {
|
||||
&, .poll-footer-button {
|
||||
border-radius: 12px 6px 6px 12px;
|
||||
}
|
||||
@ -1772,27 +1723,36 @@ $bubble-margin: .25rem;
|
||||
color: #50af4f;
|
||||
}
|
||||
}
|
||||
|
||||
/* .bubble-content-wrapper {
|
||||
> .user-avatar {
|
||||
left: auto;
|
||||
right: -2.5rem;
|
||||
}
|
||||
} */
|
||||
|
||||
&.is-group-first {
|
||||
.bubble__container, .poll-footer-button {
|
||||
border-radius: 12px 12px 6px 12px;
|
||||
.bubble-content, .poll-footer-button {
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-group-last {
|
||||
.bubble__container, .poll-footer-button {
|
||||
border-radius: 12px 6px 0px 12px;
|
||||
&.can-have-tail {
|
||||
.bubble-content, .poll-footer-button {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.bubble-content:after {
|
||||
right: -8.4px;
|
||||
background-image: url('assets/img/msg-tail-right.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.bubble__container:after {
|
||||
right: -8.4px;
|
||||
background-image: url('assets/img/msg-tail-right.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.is-group-first.is-group-last {
|
||||
.bubble__container, .poll-footer-button {
|
||||
border-radius: 12px 12px 0px 12px;
|
||||
|
||||
&:not(.can-have-tail) {
|
||||
.bubble-content, .poll-footer-button {
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1920,13 +1880,13 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&.is-message-empty.is-group-last {
|
||||
&:not(.with-media-tail) {
|
||||
/* &:not(.with-media-tail) {
|
||||
&.photo, &.video {
|
||||
.bubble__container {
|
||||
.bubble-content {
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
&.with-media-tail {
|
||||
.attachment {
|
||||
@ -2030,7 +1990,6 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.reply-markup {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
&-row {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user