Browse Source

Fix emoji margin on macOS

master
morethanwords 3 years ago
parent
commit
3547a42a3e
  1. 48
      src/components/chat/input.ts
  2. 2
      src/components/chat/replyContainer.ts
  3. 5
      src/lib/richtextprocessor.ts
  4. 5
      src/scss/partials/_chat.scss
  5. 4
      src/scss/partials/_chatlist.scss

48
src/components/chat/input.ts

@ -74,6 +74,8 @@ import debounce from '../../helpers/schedulers/debounce';
import noop from '../../helpers/noop'; import noop from '../../helpers/noop';
import { putPreloader } from '../misc'; import { putPreloader } from '../misc';
import SetTransition from '../singleTransition'; import SetTransition from '../singleTransition';
import replaceContent from '../../helpers/dom/replaceContent';
import PeerTitle from '../peerTitle';
const RECORD_MIN_TIME = 500; const RECORD_MIN_TIME = 500;
const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@ -108,11 +110,9 @@ export default class ChatInput {
private sendMenu: SendMenu; private sendMenu: SendMenu;
private replyElements: { private replyElements: {
container?: HTMLElement, container: HTMLElement,
cancelBtn?: HTMLButtonElement, cancelBtn: HTMLButtonElement
titleEl?: HTMLElement, } = {} as any;
subtitleEl?: HTMLElement
} = {};
private willSendWebPage: any = null; private willSendWebPage: any = null;
private forwardingMids: number[] = []; private forwardingMids: number[] = [];
@ -292,12 +292,7 @@ export default class ChatInput {
this.replyElements.cancelBtn = ButtonIcon('close reply-cancel'); this.replyElements.cancelBtn = ButtonIcon('close reply-cancel');
const dac = new DivAndCaption('reply'); this.replyElements.container.append(this.replyElements.cancelBtn);
this.replyElements.titleEl = dac.title;
this.replyElements.subtitleEl = dac.subtitle;
this.replyElements.container.append(this.replyElements.cancelBtn, dac.container);
this.newMessageWrapper = document.createElement('div'); this.newMessageWrapper = document.createElement('div');
this.newMessageWrapper.classList.add('new-message-wrapper'); this.newMessageWrapper.classList.add('new-message-wrapper');
@ -1691,9 +1686,8 @@ export default class ChatInput {
// ! костыль // ! костыль
const replyFragment = this.appMessagesManager.wrapMessageForReply(message, undefined, [message.mid]); const replyFragment = this.appMessagesManager.wrapMessageForReply(message, undefined, [message.mid]);
this.setTopInfo('edit', f, 'Editing', undefined, input, message); this.setTopInfo('edit', f, 'Editing', undefined, input, message);
const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle'); const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle') as HTMLElement;
subtitleEl.textContent = ''; replaceContent(subtitleEl, replyFragment);
subtitleEl.append(replyFragment);
this.editMsgId = mid; this.editMsgId = mid;
input = undefined; input = undefined;
@ -1736,9 +1730,8 @@ export default class ChatInput {
this.setTopInfo('forward', f, title); this.setTopInfo('forward', f, title);
// ! костыль // ! костыль
const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle'); const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle') as HTMLElement;
subtitleEl.textContent = ''; replaceContent(subtitleEl, replyFragment);
subtitleEl.append(replyFragment);
} else { } else {
this.setTopInfo('forward', f, title, mids.length + ' ' + (mids.length > 1 ? 'forwarded messages' : 'forwarded message')); this.setTopInfo('forward', f, title, mids.length + ' ' + (mids.length > 1 ? 'forwarded messages' : 'forwarded message'));
} }
@ -1753,7 +1746,11 @@ export default class ChatInput {
public initMessageReply(mid: number) { public initMessageReply(mid: number) {
const message = this.chat.getMessage(mid); const message = this.chat.getMessage(mid);
const f = () => { const f = () => {
this.setTopInfo('reply', f, this.appPeersManager.getPeerTitle(message.fromId, true), message.message, undefined, message); const peerTitleEl = new PeerTitle({
peerId: message.fromId,
dialog: false
}).element;
this.setTopInfo('reply', f, peerTitleEl, message.message, undefined, message);
this.replyToMsgId = mid; this.replyToMsgId = mid;
}; };
f(); f();
@ -1795,18 +1792,25 @@ export default class ChatInput {
}); });
} }
public setTopInfo(type: ChatInputHelperType, callerFunc: () => void, title = '', subtitle = '', input?: string, message?: any) { public setTopInfo(type: ChatInputHelperType,
callerFunc: () => void,
title: HTMLElement | string = '',
subtitle: HTMLElement | string = '',
input?: string,
message?: any) {
if(type !== 'webpage') { if(type !== 'webpage') {
this.clearHelper(type); this.clearHelper(type);
this.helperType = type; this.helperType = type;
this.helperFunc = callerFunc; this.helperFunc = callerFunc;
} }
if(this.replyElements.container.lastElementChild.tagName === 'DIV') { const replyParent = this.replyElements.container;
this.replyElements.container.lastElementChild.remove(); if(replyParent.lastElementChild.tagName === 'DIV') {
this.replyElements.container.append(wrapReply(title, subtitle, message)); replyParent.lastElementChild.remove();
} }
replyParent.append(wrapReply(title, subtitle, message));
this.chat.container.classList.add('is-helper-active'); this.chat.container.classList.add('is-helper-active');
/* const scroll = appImManager.scrollable; /* const scroll = appImManager.scrollable;
if(scroll.isScrolledDown && !scroll.scrollLocked && !appImManager.messagesQueuePromise && !appImManager.setPeerPromise) { if(scroll.isScrolledDown && !scroll.scrollLocked && !appImManager.messagesQueuePromise && !appImManager.setPeerPromise) {

2
src/components/chat/replyContainer.ts

@ -41,7 +41,7 @@ export function wrapReplyDivAndCaption(options: {
let media = message && message.media; let media = message && message.media;
let setMedia = false, isRound = false; let setMedia = false, isRound = false;
const mediaChildren = mediaEl ? Array.from(mediaEl.children) : []; const mediaChildren = mediaEl ? Array.from(mediaEl.children).slice() : [];
let middleware: () => boolean; let middleware: () => boolean;
if(media && mediaEl) { if(media && mediaEl) {
subtitleEl.textContent = ''; subtitleEl.textContent = '';

5
src/lib/richtextprocessor.ts

@ -542,9 +542,10 @@ namespace RichTextProcessor {
// } else { // } else {
insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`); insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`);
// } // }
}/* else if(options.mustWrapEmoji) { //} else if(options.mustWrapEmoji) {
} else if(!options.wrappingDraft) {
insertPart(entity, '<span class="emoji">', '</span>'); insertPart(entity, '<span class="emoji">', '</span>');
} */ }
/* if(!emojiSupported) { /* if(!emojiSupported) {
insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`); insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`);
} */ } */

5
src/scss/partials/_chat.scss

@ -925,7 +925,12 @@ $chat-helper-size: 36px;
&-title { &-title {
margin-top: -1px; margin-top: -1px;
margin-bottom: 1px; margin-bottom: 1px;
}
} }
.peer-title {
font-weight: 500;
} }
/* span.emoji { /* span.emoji {

4
src/scss/partials/_chatlist.scss

@ -329,12 +329,12 @@ ul.chatlist {
margin-top: -3px; margin-top: -3px;
} }
span.emoji { /* span.emoji {
font-size: 1.2rem; font-size: 1.2rem;
margin: 0 .125rem; margin: 0 .125rem;
overflow: visible; overflow: visible;
//margin-top: -1.5px; //margin-top: -1.5px;
} } */
} }
.user-title, .user-last-message { .user-title, .user-last-message {

Loading…
Cancel
Save