From 833dcbac644911a845a91e3bef18ffc534461be2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 19 Dec 2019 09:25:51 +0000 Subject: [PATCH 1/4] Rewire the Sticker button to be an Emoji Picker --- src/components/views/rooms/MessageComposer.js | 37 ++++++++++++++++++- .../views/rooms/SendMessageComposer.js | 14 +++++++ src/components/views/rooms/Stickerpicker.js | 1 + 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 580e3b0d810..00cb276923c 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -22,10 +22,10 @@ import MatrixClientPeg from '../../../MatrixClientPeg'; import sdk from '../../../index'; import dis from '../../../dispatcher'; import RoomViewStore from '../../../stores/RoomViewStore'; -import Stickerpicker from './Stickerpicker'; import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks'; import ContentMessages from '../../../ContentMessages'; import E2EIcon from './E2EIcon'; +import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu"; function ComposerAvatar(props) { const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar'); @@ -102,6 +102,32 @@ HangupButton.propTypes = { roomId: PropTypes.string.isRequired, }; +const EmojiButton = ({addEmoji}) => { + const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); + + let contextMenu; + if (menuDisplayed) { + const buttonRect = button.current.getBoundingClientRect(); + const EmojiPicker = sdk.getComponent('emojipicker.EmojiPicker'); + contextMenu = + + ; + } + + return + + + + + { contextMenu } + ; +}; + class UploadButton extends React.Component { static propTypes = { roomId: PropTypes.string.isRequired, @@ -298,6 +324,13 @@ export default class MessageComposer extends React.Component { } } + addEmoji(emoji) { + dis.dispatch({ + action: "insert_emoji", + emoji, + }); + } + render() { const controls = [ this.state.me ? : null, @@ -321,7 +354,7 @@ export default class MessageComposer extends React.Component { room={this.props.room} placeholder={this.renderPlaceholderText()} permalinkCreator={this.props.permalinkCreator} />, - , + , , callInProgress ? : null, callInProgress ? null : , diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index af251555880..c2f79c72d78 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -317,6 +317,9 @@ export default class SendMessageComposer extends React.Component { case 'quote': this._insertQuotedMessage(payload.event); break; + case 'insert_emoji': + this._insertEmoji(payload.emoji); + break; } }; @@ -353,6 +356,17 @@ export default class SendMessageComposer extends React.Component { this._editorRef && this._editorRef.focus(); } + _insertEmoji = (emoji) => { + const {model} = this; + const {partCreator} = model; + const caret = this._editorRef.getCaret(); + const position = model.positionForOffset(caret.offset, caret.atNodeEnd); + model.transform(() => { + const addedLen = model.insert([partCreator.plain(emoji)], position); + return model.positionForOffset(caret.offset + addedLen, true); + }); + }; + _onPaste = (event) => { const {clipboardData} = event; if (clipboardData.files.length) { diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 24f256e7062..095a0dca315 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -36,6 +36,7 @@ const STICKERPICKER_Z_INDEX = 3500; // Key to store the widget's AppTile under in PersistedElement const PERSISTED_ELEMENT_KEY = "stickerPicker"; +// TODO figure out where to expose it now that the EmojiPicker has taken its place export default class Stickerpicker extends React.Component { static currentWidget; From f40cfe4a3b331c58b6de172a9e8116600d1b85ce Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 May 2020 15:00:27 +0100 Subject: [PATCH 2/4] Implement new design with new iconography Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_MessageComposer.scss | 6 +++++- res/img/feather-customised/emoji3.custom.svg | 6 ++++++ res/img/feather-customised/sticker.custom.svg | 4 ++++ src/components/views/rooms/MessageComposer.js | 5 +++-- 4 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 res/img/feather-customised/emoji3.custom.svg create mode 100644 res/img/feather-customised/sticker.custom.svg diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 7b223be3a4c..c1cda7bf24c 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -214,8 +214,12 @@ limitations under the License. mask-image: url('$(res)/img/feather-customised/video.svg'); } +.mx_MessageComposer_emoji::before { + mask-image: url('$(res)/img/feather-customised/emoji3.custom.svg'); +} + .mx_MessageComposer_stickers::before { - mask-image: url('$(res)/img/feather-customised/face.svg'); + mask-image: url('$(res)/img/feather-customised/sticker.custom.svg'); } .mx_MessageComposer_formatting { diff --git a/res/img/feather-customised/emoji3.custom.svg b/res/img/feather-customised/emoji3.custom.svg new file mode 100644 index 00000000000..d91ba1c132d --- /dev/null +++ b/res/img/feather-customised/emoji3.custom.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/feather-customised/sticker.custom.svg b/res/img/feather-customised/sticker.custom.svg new file mode 100644 index 00000000000..691e3b39256 --- /dev/null +++ b/res/img/feather-customised/sticker.custom.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 001cf581a66..e939f4ae0a8 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -117,7 +117,7 @@ const EmojiButton = ({addEmoji}) => { } return - , - , , + , + , ); if (this.state.showCallButtons) { From 3020e395c10c30dd6752d39a2532469b23fc3cf2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 2 Jun 2020 13:48:08 +0100 Subject: [PATCH 3/4] iterate PR Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/MessageComposer.js | 2 +- src/components/views/rooms/Stickerpicker.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index e939f4ae0a8..5cb59f7b840 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -120,7 +120,7 @@ const EmojiButton = ({addEmoji}) => { diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 70499e73515..fc6e80fc616 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -35,7 +35,6 @@ const STICKERPICKER_Z_INDEX = 3500; // Key to store the widget's AppTile under in PersistedElement const PERSISTED_ELEMENT_KEY = "stickerPicker"; -// TODO figure out where to expose it now that the EmojiPicker has taken its place export default class Stickerpicker extends React.Component { static currentWidget; From ef1d6826836ccd765f121d3310357a9f4488b703 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 2 Jun 2020 13:51:58 +0100 Subject: [PATCH 4/4] i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/i18n/strings/en_EN.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index ba55ee9d643..2d637fa1130 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1086,6 +1086,7 @@ "Voice call": "Voice call", "Video call": "Video call", "Hangup": "Hangup", + "Emoji picker": "Emoji picker", "Upload file": "Upload file", "Send an encrypted reply…": "Send an encrypted reply…", "Send a reply…": "Send a reply…",