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

new reply

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-02-16 01:08:26 +07:00
parent 956a260a27
commit a74684b493
4 changed files with 186 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/wrappers.ts
View File

@ -10,6 +10,7 @@ import LazyLoadQueue from './lazyLoadQueue';
import apiFileManager, { CancellablePromise } from '../lib/mtproto/apiFileManager'; import apiFileManager, { CancellablePromise } from '../lib/mtproto/apiFileManager';
import appWebpManager from '../lib/appManagers/appWebpManager'; import appWebpManager from '../lib/appManagers/appWebpManager';
import {wrapPlayer} from '../lib/ckin'; import {wrapPlayer} from '../lib/ckin';
import { RichTextProcessor } from '../lib/richtextprocessor';
export type MTDocument = { export type MTDocument = {
_: 'document', _: 'document',
@ -280,7 +281,7 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
} }
svg.insertAdjacentHTML('beforeend', ` svg.insertAdjacentHTML('beforeend', `
<rect x="${index * 4}" y="${23 - height}" width="2" height="${height}" rx="1" ry="1"></rect> <rect x="${index * 4}" y="${23 - height}" width="2" height="${height}" rx="1" ry="1"></rect>
`); `);
++index; ++index;
@ -527,3 +528,63 @@ export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: (
return lazyLoadQueue ? (lazyLoadQueue.push({div, load}), Promise.resolve()) : load(); return lazyLoadQueue ? (lazyLoadQueue.push({div, load}), Promise.resolve()) : load();
} }
export function wrapReply(title: string, subtitle: string, media?: any) {
let div = document.createElement('div');
div.classList.add('reply');
let replyBorder = document.createElement('div');
replyBorder.classList.add('reply-border');
let replyContent = document.createElement('div');
replyContent.classList.add('reply-content');
let replyTitle = document.createElement('div');
replyTitle.classList.add('reply-title');
let replySubtitle = document.createElement('div');
replySubtitle.classList.add('reply-subtitle');
replyTitle.innerHTML = title ? RichTextProcessor.wrapEmojiText(title) : '';
if(media) {
if(media.photo) {
replySubtitle.innerHTML = 'Photo';
} else if(media.document && media.document.type) {
replySubtitle.innerHTML = media.document.type;
} else if(media.webpage) {
replySubtitle.innerHTML = RichTextProcessor.wrapPlainText(media.webpage.url);
} else {
replySubtitle.innerHTML = media._;
}
if(media.photo || (media.document && ['video'].indexOf(media.document.type) !== -1)) {
let replyMedia = document.createElement('div');
replyMedia.classList.add('reply-media');
let photo = media.photo || media.document;
let sizes = photo.sizes || photo.thumbs;
if(sizes && sizes[0].bytes) {
appPhotosManager.setAttachmentPreview(sizes[0].bytes, replyMedia, false, true);
}
appPhotosManager.preloadPhoto(photo, appPhotosManager.choosePhotoSize(photo, 32, 32))
.then((blob) => {
replyMedia.style.backgroundImage = 'url(' + URL.createObjectURL(blob) + ')';
});
replyContent.append(replyMedia);
div.classList.add('is-reply-media');
}
} else {
replySubtitle.innerHTML = subtitle ? RichTextProcessor.wrapEmojiText(subtitle) : '';
}
replyContent.append(replyTitle, replySubtitle);
div.append(replyBorder, replyContent);
console.log('wrapReply', title, subtitle, media);
return div;
}

72
src/lib/appManagers/appImManager.ts
View File

@ -20,7 +20,7 @@ import appMessagesIDsManager from "./appMessagesIDsManager";
import apiUpdatesManager from './apiUpdatesManager'; import apiUpdatesManager from './apiUpdatesManager';
import initEmoticonsDropdown, { EMOTICONSSTICKERGROUP } from '../../components/emoticonsDropdown'; import initEmoticonsDropdown, { EMOTICONSSTICKERGROUP } from '../../components/emoticonsDropdown';
import LazyLoadQueue from '../../components/lazyLoadQueue'; import LazyLoadQueue from '../../components/lazyLoadQueue';
import { wrapDocument, wrapPhoto, wrapVideo, wrapSticker } from '../../components/wrappers'; import { wrapDocument, wrapPhoto, wrapVideo, wrapSticker, wrapReply } from '../../components/wrappers';
import ProgressivePreloader from '../../components/preloader'; import ProgressivePreloader from '../../components/preloader';
import { openBtnMenu } from '../../components/misc'; import { openBtnMenu } from '../../components/misc';
import appWebPagesManager from './appWebPagesManager'; import appWebPagesManager from './appWebPagesManager';
@ -490,11 +490,15 @@ class ChatInput {
this.btnSend.classList.add('tgico-microphone2'); this.btnSend.classList.add('tgico-microphone2');
}; };
public setTopInfo(title: string, subtitle: string, input?: string) { public setTopInfo(title: string, subtitle: string, input?: string, media?: any) {
//appImManager.scrollPosition.prepareFor('down'); //appImManager.scrollPosition.prepareFor('down');
this.replyElements.titleEl.innerHTML = title ? RichTextProcessor.wrapEmojiText(title) : ''; if(this.replyElements.container.lastElementChild.tagName == 'DIV') {
this.replyElements.subtitleEl.innerHTML = subtitle ? RichTextProcessor.wrapEmojiText(subtitle) : ''; this.replyElements.container.lastElementChild.remove();
this.replyElements.container.append(wrapReply(title, subtitle, media));
}
//this.replyElements.titleEl.innerHTML = title ? RichTextProcessor.wrapEmojiText(title) : '';
//this.replyElements.subtitleEl.innerHTML = subtitle ? RichTextProcessor.wrapEmojiText(subtitle) : '';
this.replyElements.container.classList.add('active'); this.replyElements.container.classList.add('active');
if(input !== undefined) { if(input !== undefined) {
@ -796,7 +800,7 @@ export class AppImManager {
let isReplyClick = false; let isReplyClick = false;
try { try {
isReplyClick = !!findUpClassName(e.target, 'box'); isReplyClick = !!findUpClassName(e.target, 'reply');
} catch(err) {} } catch(err) {}
if(isReplyClick && bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) { if(isReplyClick && bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) {
@ -1000,14 +1004,14 @@ export class AppImManager {
this.contextMenu.querySelector('.menu-reply').addEventListener('click', () => { this.contextMenu.querySelector('.menu-reply').addEventListener('click', () => {
let message = appMessagesManager.getMessage(this.contextMenuMsgID); let message = appMessagesManager.getMessage(this.contextMenuMsgID);
this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID, true), message.message); this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID, true), message.message, undefined, message.media);
this.chatInputC.replyToMsgID = this.contextMenuMsgID; this.chatInputC.replyToMsgID = this.contextMenuMsgID;
this.chatInputC.editMsgID = 0; this.chatInputC.editMsgID = 0;
}); });
this.contextMenuEdit.addEventListener('click', () => { this.contextMenuEdit.addEventListener('click', () => {
let message = appMessagesManager.getMessage(this.contextMenuMsgID); let message = appMessagesManager.getMessage(this.contextMenuMsgID);
this.chatInputC.setTopInfo('Editing', message.message, message.message); this.chatInputC.setTopInfo('Editing', message.message, message.message, message.media);
this.chatInputC.replyToMsgID = 0; this.chatInputC.replyToMsgID = 0;
this.chatInputC.editMsgID = this.contextMenuMsgID; this.chatInputC.editMsgID = this.contextMenuMsgID;
}); });
@ -1992,20 +1996,8 @@ export class AppImManager {
} }
} else { } else {
if(message.reply_to_mid) { if(message.reply_to_mid) {
let box = document.createElement('div');
box.classList.add('box');
let quote = document.createElement('div');
quote.classList.add('quote');
let nameEl = document.createElement('a');
nameEl.classList.add('name');
let textDiv = document.createElement('div');
textDiv.classList.add('text');
let originalMessage = appMessagesManager.getMessage(message.reply_to_mid); let originalMessage = appMessagesManager.getMessage(message.reply_to_mid);
let originalPeerTitle = appPeersManager.getPeerTitle(originalMessage.fromID) || ''; let originalPeerTitle = appPeersManager.getPeerTitle(originalMessage.fromID, true) || '';
this.log('message to render reply', originalMessage, originalPeerTitle, bubble, message); this.log('message to render reply', originalMessage, originalPeerTitle, bubble, message);
@ -2018,54 +2010,16 @@ export class AppImManager {
originalPeerTitle = 'Loading...'; originalPeerTitle = 'Loading...';
} }
let originalText = '';
if(originalMessage.message) {
originalText = RichTextProcessor.wrapRichText(originalMessage.message, {
entities: originalMessage.totalEntities,
noLinebreaks: true
});
}
if(originalMessage.media) {
switch(originalMessage.media._) {
case 'messageMediaPhoto':
if(!originalText) originalText = 'Photo';
break;
default:
if(!originalText) originalText = originalMessage.media._;
break;
}
}
nameEl.innerHTML = originalPeerTitle;
textDiv.innerHTML = originalText;
quote.append(nameEl, textDiv);
box.append(quote);
if(originalMessage.mid) { if(originalMessage.mid) {
bubble.setAttribute('data-original-mid', originalMessage.mid); bubble.setAttribute('data-original-mid', originalMessage.mid);
} else { } else {
bubble.setAttribute('data-original-mid', message.reply_to_mid); bubble.setAttribute('data-original-mid', message.reply_to_mid);
} }
bubble.append(box); bubble.append(wrapReply(originalPeerTitle, originalMessage.message || '', originalMessage.media));
bubble.classList.add('is-reply'); bubble.classList.add('is-reply');
} }
/* if(message.media) {
switch(message.media._) {
case 'messageMediaWebPage': {
let nameDiv = document.createElement('div');
nameDiv.classList.add('name');
nameDiv.innerText = title;
bubble.append(nameDiv);
break;
}
}
} */
if(!bubble.classList.contains('sticker') && (peerID < 0 && peerID != message.fromID)) { if(!bubble.classList.contains('sticker') && (peerID < 0 && peerID != message.fromID)) {
let nameDiv = document.createElement('div'); let nameDiv = document.createElement('div');
nameDiv.classList.add('name'); nameDiv.classList.add('name');

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

@ -251,6 +251,14 @@
} }
} }
.reply {
width: auto;
.reply-content {
height: auto;
}
}
&.photo, &.video { &.photo, &.video {
width: min-content; width: min-content;
@ -426,7 +434,7 @@
} }
} }
.box { .box, .reply {
font-size: .95rem; font-size: .95rem;
// margin: .25rem; // margin: .25rem;
margin: 4px 4px 4px 6px; margin: 4px 4px 4px 6px;
@ -498,43 +506,45 @@
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
.text {
line-height: 1.2;
}
} }
.name { .text, .reply-subtitle {
line-height: 1.2;
}
.name, .reply-title {
font-weight: 500; font-weight: 500;
display: inline!important; display: inline!important;
} }
}
&:not(.web) { .reply {
margin-bottom: 0; margin-bottom: 6px;
margin-top: 0; margin-top: 0;
cursor: pointer; cursor: pointer;
}
} }
&.is-reply { &.is-reply {
&.emoji-big, &.sticker { &.emoji-big, &.sticker {
.box { .reply {
padding: 10px; padding: 10px;
border-radius: 12px; border-radius: 12px;
border: 1px solid #ccc; border: 1px solid #ccc;
max-width: 300px; max-width: 300px;
height: 54px;
max-height: 54px;
white-space: nowrap; white-space: nowrap;
position: absolute; position: absolute;
top: 0; top: 0;
margin-bottom: 0;
.quote { .reply-content {
margin-top: 0; margin-top: 0;
} }
} }
} }
.quote .text { .reply-content {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -688,12 +698,12 @@
} }
} }
&.hide-name .message:not(.message-empty) { &.hide-name:not(.is-reply) .message:not(.message-empty) {
//padding-top: .2675rem; //padding-top: .2675rem;
padding-top: 6px; padding-top: 6px;
} }
&.hide-name:not(.sticker):not(.emoji-big) .box:not(.web) .quote { &.hide-name:not(.sticker):not(.emoji-big) .reply {
margin-top: 6px; margin-top: 6px;
} }
@ -726,13 +736,13 @@
color: $darkblue; color: $darkblue;
} }
.quote:hover { .quote:hover, .reply:hover {
background-color: $light; background-color: $light;
} }
.bubble.is-reply { .bubble.is-reply {
&.emoji-big, &.sticker { &.emoji-big, &.sticker {
.box { .box, .reply {
left: calc(100% + 10px); left: calc(100% + 10px);
background-color: #fff; background-color: #fff;
} }
@ -741,11 +751,6 @@
.quote { .quote {
border-left: 2px $darkblue solid; border-left: 2px $darkblue solid;
//margin-top: 6px; //MOJET VREMENNO
.name {
color: $darkblue;
}
* { * {
overflow: hidden; overflow: hidden;
@ -753,6 +758,10 @@
} }
} }
.quote .name, .reply-title {
color: $darkblue;
}
.time { .time {
color: #a3adb6; color: #a3adb6;
width: 36px; width: 36px;
@ -798,13 +807,13 @@
.out { .out {
align-items: flex-end; align-items: flex-end;
.quote:hover { .quote:hover, .reply:hover {
background-color: rgba($green, 0.12); background-color: rgba($green, 0.12);
} }
.bubble.is-reply { .bubble.is-reply {
&.emoji-big, &.sticker { &.emoji-big, &.sticker {
.box { .box, .reply {
background-color: #eeffde; background-color: #eeffde;
right: calc(100% + 10px); right: calc(100% + 10px);
border-color: rgba($green, .12); border-color: rgba($green, .12);
@ -814,10 +823,14 @@
.quote { .quote {
border-left: 2px $darkgreen solid; border-left: 2px $darkgreen solid;
}
.name { .reply-border {
color: $darkgreen; background-color: $darkgreen;
} }
.quote .name, .reply-title {
color: $darkgreen;
} }
.time { .time {
@ -920,7 +933,7 @@
} }
&-toggle, &-download { &-toggle, &-download {
background-color: #68AB5A; background-color: #4FAE4E;
} }
} }
} }
@ -1089,8 +1102,15 @@
width: 187px; width: 187px;
margin-right: 1rem; margin-right: 1rem;
max-height: 35px; max-height: 35px;
position: relative;
/* padding: .25rem; */ /* padding: .25rem; */
&.is-reply-media {
.pinned-message-content, .reply-content {
padding-left: 40px;
}
}
&:hover { &:hover {
background-color: rgba(112, 117, 121, 0.08); background-color: rgba(112, 117, 121, 0.08);
} }
@ -1108,6 +1128,10 @@
flex-shrink: 1; flex-shrink: 1;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
position: relative;
height: 32px;
display: flex;
flex-direction: column;
} }
&-title { &-title {
@ -1127,6 +1151,19 @@
color: #111; color: #111;
} }
&-media {
height: 32px;
width: 32px;
border-radius: 8px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
img.emoji { img.emoji {
height: 16px; height: 16px;
width: 16px; width: 16px;

8
src/scss/style.scss
View File

@ -479,14 +479,14 @@ input {
.audio { .audio {
position: relative; position: relative;
padding-left: 67px; padding-left: 67px;
min-height: 54px; min-height: 58px;
max-width: 286px; max-width: 286px;
overflow: visible!important; overflow: visible!important;
&-toggle, &-download { &-toggle, &-download {
border-radius: 50%; border-radius: 50%;
background-color: $blue; background-color: $blue;
font-size: 2.5rem; font-size: 2.2rem;
align-items: center; align-items: center;
} }
@ -512,7 +512,7 @@ input {
&-time { &-time {
font-size: 14px; font-size: 14px;
color: $color-gray; color: $color-gray;
margin-top: 4px; margin-top: 3px;
margin-left: -1px; margin-left: -1px;
} }
} }
@ -1317,10 +1317,12 @@ div.scrollable::-webkit-scrollbar-thumb {
&.scrollable-x { &.scrollable-x {
overflow-x: auto; overflow-x: auto;
scrollbar-width: none;
} }
&.scrollable-y { &.scrollable-y {
overflow-y: auto; overflow-y: auto;
scrollbar-width: none;
} }
&.scrollable-x ~ .scrollbar-thumb { &.scrollable-x ~ .scrollbar-thumb {