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

new reply

master
Eduard Kuzmenko 4 years ago
parent
956a260a27
commit
a74684b493
4 changed files with 186 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 61
      src/components/wrappers.ts
  2. 72
      src/lib/appManagers/appImManager.ts
  3. 87
      src/scss/partials/_chat.scss
  4. 8
      src/scss/style.scss

61
src/components/wrappers.ts
Unescape 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',
@ -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
Unescape 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');

87
src/scss/partials/_chat.scss
Unescape 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;
} }
.text, .reply-subtitle {
line-height: 1.2;
} }
.name { .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
Unescape 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 {

Write Preview
Loading…
Cancel
Save