From 7d4383301dd065c0a80c9049453572ea1675dd42 Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 22 Jul 2020 14:57:45 +1000 Subject: [PATCH] emoji-definition-reversion --- js/models/conversations.js | 2 + stylesheets/_emoji.scss | 16 ++-- ts/components/conversation/Emojify.tsx | 74 +++++++++---------- ts/components/conversation/Timestamp.tsx | 8 +- .../conversation/SessionCompositionBox.tsx | 39 +++++----- 5 files changed, 68 insertions(+), 71 deletions(-) diff --git a/js/models/conversations.js b/js/models/conversations.js index 7cbc75d33..0d003647f 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -1249,6 +1249,8 @@ ) { this.clearTypingTimers(); + console.log('[vince] body:', body); + const destination = this.id; const expireTimer = this.get('expireTimer'); const recipients = this.getRecipients(); diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss index 08397e020..5f110abfa 100644 --- a/stylesheets/_emoji.scss +++ b/stylesheets/_emoji.scss @@ -47,20 +47,20 @@ img.emoji { } img.emoji.small { - width: 1.25em; - height: 1.25em; + width: 1.10em; + height: 1.10em; } img.emoji.medium { - width: 1.75em; - height: 1.75em; + width: 1.30em; + height: 1.30em; } img.emoji.large { - width: 2.5em; - height: 2.5em; + width: 1.7em; + height: 1.7em; } img.emoji.jumbo { - width: 3em; - height: 3em; + width: 2em; + height: 2em; } // we need these, or we'll make conversation items too big in the left-nav diff --git a/ts/components/conversation/Emojify.tsx b/ts/components/conversation/Emojify.tsx index ddd9f2359..056792961 100644 --- a/ts/components/conversation/Emojify.tsx +++ b/ts/components/conversation/Emojify.tsx @@ -4,50 +4,12 @@ import classNames from 'classnames'; import is from '@sindresorhus/is'; import { - findImage, getRegex, - getReplacementData, - getTitle, SizeClassType, } from '../../util/emoji'; import { LocalizerType, RenderTextCallbackType } from '../../types/Util'; - -// Some of this logic taken from emoji-js/replacement -function getImageTag({ - match, - sizeClass, - key, - i18n, -}: { - match: any; - sizeClass?: SizeClassType; - key: string | number; - i18n: LocalizerType; -}) { - const result = getReplacementData(match[0], match[1], match[2]); - - if (is.string(result)) { - return {match[0]}; - } - - const img = findImage(result.value, result.variation); - const title = getTitle(result.value); - - return ( - // tslint:disable-next-line react-a11y-img-has-alt - - ); -} +import { Twemoji } from 'react-emoji-render'; interface Props { text: string; @@ -105,7 +67,39 @@ export class Emojify extends React.Component { ); } - results.push(getImageTag({ match, sizeClass, key: count++, i18n })); + let size = 1.00; + switch (sizeClass) { + case 'jumbo': + size = 2.00; + break; + case 'large': + size = 1.80; + break; + case 'medium': + size = 1.50; + break; + case 'small': + size = 1.10; + break; + default: + } + + const style = { + fontSize: `${size}em`, + }; + + results.push( + + ); last = regex.lastIndex; match = regex.exec(text); diff --git a/ts/components/conversation/Timestamp.tsx b/ts/components/conversation/Timestamp.tsx index a457c1607..b13c69f4b 100644 --- a/ts/components/conversation/Timestamp.tsx +++ b/ts/components/conversation/Timestamp.tsx @@ -59,7 +59,7 @@ export class Timestamp extends React.Component { // Use relative time for under 24hrs ago. const now = Math.floor(Date.now()); const messageAgeInDays = - (now - timestamp) / (1000 * window.CONSTANTS.SECS_IN_DAY); + (now - timestamp) / (window.CONSTANTS.SECS_IN_DAY * 1000); const daysBeforeRelativeTiming = 1; let dateString; @@ -68,7 +68,11 @@ export class Timestamp extends React.Component { } else { dateString = moment(timestamp).fromNow(); // Prevent times reading "NOW AGO" - if (dateString.startsWith('now')) dateString = 'now'; + if (dateString.startsWith('now')) { + dateString = 'now'; + } + + dateString.replace('minutes', 'mins'); } return ( diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index c415d86c9..633550dc7 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -33,8 +33,7 @@ interface Props { interface State { message: string; - messageSpaced: string; - messageJSX: JSX.Element; + nativeMessage: string; // Message with native emojis showRecordingView: boolean; mediaSetting: boolean | null; @@ -54,8 +53,7 @@ export class SessionCompositionBox extends React.Component { this.state = { message: '', - messageSpaced: '', - messageJSX: <>, + nativeMessage: '', attachments: [], voiceRecording: undefined, showRecordingView: false, @@ -161,7 +159,7 @@ export class SessionCompositionBox extends React.Component { private renderCompositionView() { const { placeholder } = this.props; - const { showEmojiPanel, message, messageSpaced, messageJSX } = this.state; + const { showEmojiPanel, message } = this.state; return ( <> @@ -191,9 +189,6 @@ export class SessionCompositionBox extends React.Component { role="main" onClick={this.focusCompositionBox} > - - {messageJSX} - { placeholder={placeholder} maxLength={Constants.CONVERSATION.MAX_MESSAGE_BODY_LENGTH} onKeyDown={this.onKeyDown} - value={messageSpaced} + value={message} onChange={this.onChange} - > - {messageJSX} - - + /> { } private onSendMessage() { - const messagePlaintext = this.state.message; + const messagePlaintext = this.state.nativeMessage; if (!messagePlaintext) { return; } @@ -355,8 +347,6 @@ export class SessionCompositionBox extends React.Component { // success! } - console.log(`[compositionbox] Sending voice message:`, audioBlob); - this.onExitVoiceNoteView(); } @@ -407,14 +397,21 @@ export class SessionCompositionBox extends React.Component { return; } - const { message } = this.state; + const { message, nativeMessage } = this.state; const currentSelectionStart = Number(messageBox.selectionStart); const currentSelectionEnd = Number(messageBox.selectionEnd); - const before = message.slice(0, currentSelectionStart); - const end = message.slice(currentSelectionEnd); - const newMessage = `${before}${colons}${end}`; - this.setState({ message: newMessage }, () => { + const getNewMessage = (comparisonMessage: any, emojiSorter: any) => { + const before = comparisonMessage.slice(0, currentSelectionStart); + const end = comparisonMessage.slice(currentSelectionEnd); + return `${before}${colons}${end}`; + }; + + + const newMessage = getNewMessage(message, colons); + const newNativeMessage = getNewMessage(nativeMessage, native); + + this.setState({ message: newMessage, nativeMessage: newNativeMessage }, () => { // update our selection because updating text programmatically // will put the selection at the end of the textarea const selectionStart = currentSelectionStart + Number(colons.length);