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 580e3b0d81..00cb276923 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 af25155588..c2f79c72d7 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 24f256e706..095a0dca31 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 7b223be3a4..c1cda7bf24 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 0000000000..d91ba1c132
--- /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 0000000000..691e3b3925
--- /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 001cf581a6..e939f4ae0a 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 e939f4ae0a..5cb59f7b84 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 70499e7351..fc6e80fc61 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 ba55ee9d64..2d637fa113 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…",