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

new reply

master
Eduard Kuzmenko 5 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. 137
      src/components/wrappers.ts
  2. 74
      src/lib/appManagers/appImManager.ts
  3. 99
      src/scss/partials/_chat.scss
  4. 8
      src/scss/style.scss

137
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',
@ -159,7 +160,7 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
if(doc.type == 'voice') { if(doc.type == 'voice') {
return wrapAudio(doc, withTime); return wrapAudio(doc, withTime);
} }
let docDiv = document.createElement('div'); let docDiv = document.createElement('div');
docDiv.classList.add('document'); docDiv.classList.add('document');
@ -210,27 +211,27 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
appDocsManager.saveDocFile(doc.id).then(res => { appDocsManager.saveDocFile(doc.id).then(res => {
promise = res.promise; promise = res.promise;
preloader.attach(downloadDiv, true, promise); preloader.attach(downloadDiv, true, promise);
promise.then(() => { promise.then(() => {
downloadDiv.classList.remove('downloading'); downloadDiv.classList.remove('downloading');
downloadDiv.remove(); downloadDiv.remove();
}); });
}) })
downloadDiv.classList.add('downloading'); downloadDiv.classList.add('downloading');
} else { } else {
downloadDiv.classList.remove('downloading'); downloadDiv.classList.remove('downloading');
promise = null; promise = null;
} }
}); });
/* apiFileManager.getDownloadedFile(Object.assign({}, doc, {_: 'inputDocumentFileLocation'})).then(() => { /* apiFileManager.getDownloadedFile(Object.assign({}, doc, {_: 'inputDocumentFileLocation'})).then(() => {
downloadDiv.classList.remove('downloading'); downloadDiv.classList.remove('downloading');
downloadDiv.remove(); downloadDiv.remove();
}, () => { }, () => {
}); */ }); */
return docDiv; return docDiv;
@ -241,51 +242,51 @@ let lastAudioToggle: HTMLDivElement = null;
export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement { export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
let div = document.createElement('div'); let div = document.createElement('div');
div.classList.add('audio'); div.classList.add('audio');
let duration = doc.duration; let duration = doc.duration;
// @ts-ignore // @ts-ignore
let durationStr = String(duration | 0).toHHMMSS(true); let durationStr = String(duration | 0).toHHMMSS(true);
div.innerHTML = ` div.innerHTML = `
<div class="audio-toggle audio-ico tgico-largeplay"></div> <div class="audio-toggle audio-ico tgico-largeplay"></div>
<div class="audio-download"><div class="tgico-download"></div></div> <div class="audio-download"><div class="tgico-download"></div></div>
<div class="audio-time">${durationStr}</div> <div class="audio-time">${durationStr}</div>
`; `;
console.log('wrapping audio', doc, doc.attributes[0].waveform); console.log('wrapping audio', doc, doc.attributes[0].waveform);
let timeDiv = div.lastElementChild as HTMLDivElement; let timeDiv = div.lastElementChild as HTMLDivElement;
let downloadDiv = div.querySelector('.audio-download') as HTMLDivElement; let downloadDiv = div.querySelector('.audio-download') as HTMLDivElement;
let preloader: ProgressivePreloader; let preloader: ProgressivePreloader;
let promise: CancellablePromise<Blob>; let promise: CancellablePromise<Blob>;
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.classList.add('audio-waveform'); svg.classList.add('audio-waveform');
svg.setAttributeNS(null, 'width', '250'); svg.setAttributeNS(null, 'width', '250');
svg.setAttributeNS(null, 'height', '23'); svg.setAttributeNS(null, 'height', '23');
svg.setAttributeNS(null, 'viewBox', '0 0 250 23'); svg.setAttributeNS(null, 'viewBox', '0 0 250 23');
div.insertBefore(svg, div.lastElementChild); div.insertBefore(svg, div.lastElementChild);
let wave = doc.attributes[0].waveform as Uint8Array; let wave = doc.attributes[0].waveform as Uint8Array;
let index = 0; let index = 0;
for(let uint8 of wave) { for(let uint8 of wave) {
let percents = uint8 / 255; let percents = uint8 / 255;
let height = 23 * percents; let height = 23 * percents;
if(/* !height || */height < 2) { if(/* !height || */height < 2) {
height = 2; height = 2;
} }
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;
} }
let onClick = () => { let onClick = () => {
if(!promise) { if(!promise) {
if(downloadDiv.classList.contains('downloading')) { if(downloadDiv.classList.contains('downloading')) {
@ -298,47 +299,47 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
let promise = appDocsManager.downloadDoc(doc.id); let promise = appDocsManager.downloadDoc(doc.id);
preloader.attach(downloadDiv, true, promise); preloader.attach(downloadDiv, true, promise);
promise.then(blob => { promise.then(blob => {
downloadDiv.classList.remove('downloading'); downloadDiv.classList.remove('downloading');
downloadDiv.remove(); downloadDiv.remove();
let audio = document.createElement('audio'); let audio = document.createElement('audio');
let source = document.createElement('source'); let source = document.createElement('source');
source.src = URL.createObjectURL(blob); source.src = URL.createObjectURL(blob);
source.type = doc.mime_type; source.type = doc.mime_type;
div.removeEventListener('click', onClick); div.removeEventListener('click', onClick);
let toggle = div.querySelector('.audio-toggle') as HTMLDivElement; let toggle = div.querySelector('.audio-toggle') as HTMLDivElement;
let interval = 0; let interval = 0;
toggle.addEventListener('click', () => { toggle.addEventListener('click', () => {
if(audio.paused) { if(audio.paused) {
if(lastAudioToggle && lastAudioToggle.classList.contains('tgico-largepause')) { if(lastAudioToggle && lastAudioToggle.classList.contains('tgico-largepause')) {
lastAudioToggle.click(); lastAudioToggle.click();
} }
audio.currentTime = 0; audio.currentTime = 0;
audio.play(); audio.play();
lastAudioToggle = toggle; lastAudioToggle = toggle;
toggle.classList.remove('tgico-largeplay'); toggle.classList.remove('tgico-largeplay');
toggle.classList.add('tgico-largepause'); toggle.classList.add('tgico-largepause');
(Array.from(svg.children) as HTMLElement[]).forEach(node => node.classList.remove('active')); (Array.from(svg.children) as HTMLElement[]).forEach(node => node.classList.remove('active'));
let lastIndex = 0; let lastIndex = 0;
interval = setInterval(() => { interval = setInterval(() => {
if(lastIndex >= svg.childElementCount) { if(lastIndex >= svg.childElementCount) {
clearInterval(interval); clearInterval(interval);
return; return;
} }
// @ts-ignore // @ts-ignore
timeDiv.innerText = String(audio.currentTime | 0).toHHMMSS(true); timeDiv.innerText = String(audio.currentTime | 0).toHHMMSS(true);
//svg.children[lastIndex].setAttributeNS(null, 'fill', '#000'); //svg.children[lastIndex].setAttributeNS(null, 'fill', '#000');
svg.children[lastIndex].classList.add('active'); svg.children[lastIndex].classList.add('active');
++lastIndex; ++lastIndex;
@ -348,23 +349,23 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
audio.pause(); audio.pause();
toggle.classList.add('tgico-largeplay'); toggle.classList.add('tgico-largeplay');
toggle.classList.remove('tgico-largepause'); toggle.classList.remove('tgico-largepause');
clearInterval(interval); clearInterval(interval);
} }
}); });
audio.addEventListener('ended', () => { audio.addEventListener('ended', () => {
toggle.classList.add('tgico-largeplay'); toggle.classList.add('tgico-largeplay');
toggle.classList.remove('tgico-largepause'); toggle.classList.remove('tgico-largepause');
clearInterval(interval); clearInterval(interval);
// @ts-ignore // @ts-ignore
timeDiv.innerText = String(audio.currentTime | 0).toHHMMSS(true); timeDiv.innerText = String(audio.currentTime | 0).toHHMMSS(true);
}); });
audio.append(source); audio.append(source);
}); });
downloadDiv.classList.add('downloading'); downloadDiv.classList.add('downloading');
} else { } else {
downloadDiv.classList.remove('downloading'); downloadDiv.classList.remove('downloading');
@ -373,7 +374,7 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
}; };
div.addEventListener('click', onClick); div.addEventListener('click', onClick);
div.click(); div.click();
return div; return div;
@ -397,9 +398,9 @@ export function wrapPhoto(this: AppImManager, photo: any, message: any, containe
let load = () => { let load = () => {
let promise = appPhotosManager.preloadPhoto(photo.id, size); let promise = appPhotosManager.preloadPhoto(photo.id, size);
preloader.attach(container, true, promise); preloader.attach(container, true, promise);
return promise.then((blob) => { return promise.then((blob) => {
if(this.peerID != peerID) { if(this.peerID != peerID) {
this.log.warn('peer changed'); this.log.warn('peer changed');
@ -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;
}

74
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;
}); });
@ -1563,7 +1567,7 @@ export class AppImManager {
if(this.peerID == peerID) { if(this.peerID == peerID) {
this.setPeerPromise = null; this.setPeerPromise = null;
} }
this.log.error('setPeer promises error:', err); this.log.error('setPeer promises error:', err);
return false; return false;
}); });
@ -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');

99
src/scss/partials/_chat.scss
Unescape View File

@ -250,6 +250,14 @@
opacity: 1; opacity: 1;
} }
} }
.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 { .text, .reply-subtitle {
line-height: 1.2; line-height: 1.2;
}
} }
.name { .name, .reply-title {
font-weight: 500; font-weight: 500;
display: inline!important; display: inline!important;
} }
}
&:not(.web) {
margin-bottom: 0; .reply {
margin-top: 0; margin-bottom: 6px;
cursor: pointer; margin-top: 0;
} 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,17 +751,16 @@
.quote { .quote {
border-left: 2px $darkblue solid; border-left: 2px $darkblue solid;
//margin-top: 6px; //MOJET VREMENNO
.name {
color: $darkblue;
}
* { * {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.quote .name, .reply-title {
color: $darkblue;
}
.time { .time {
color: #a3adb6; color: #a3adb6;
@ -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 {
color: $darkgreen; .reply-border {
} 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,7 +1102,14 @@
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