diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 69e8b50501..dea1b58741 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -235,6 +235,32 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
}
+.mx_MessageComposer_sendMessage {
+ cursor: pointer;
+ position: relative;
+ margin-right: 6px;
+ width: 32px;
+ height: 32px;
+ border-radius: 100%;
+ background-color: $button-bg-color;
+
+ &::before {
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ top: 8px;
+ left: 9px;
+
+ mask-image: url('$(res)/img/element-icons/send-message.svg');
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+
+ background-color: $button-fg-color;
+ content: '';
+ }
+}
+
.mx_MessageComposer_formatting {
cursor: pointer;
margin: 0 11px;
diff --git a/res/img/element-icons/send-message.svg b/res/img/element-icons/send-message.svg
new file mode 100644
index 0000000000..ce35bf8bc8
--- /dev/null
+++ b/res/img/element-icons/send-message.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index eea6a6b802..c03178cdf7 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -44,6 +44,20 @@ ComposerAvatar.propTypes = {
me: PropTypes.object.isRequired,
};
+function SendButton(props) {
+ return (
+
+ );
+}
+
+SendButton.propTypes = {
+ onClick: PropTypes.func.isRequired,
+};
+
const EmojiButton = ({addEmoji}) => {
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
@@ -170,6 +184,7 @@ export default class MessageComposer extends React.Component {
canSendMessages: this.props.room.maySendMessage(),
hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room),
joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room),
+ isComposerEmpty: true,
};
}
@@ -298,6 +313,16 @@ export default class MessageComposer extends React.Component {
});
}
+ sendMessage = () => {
+ this.messageComposerInput._sendMessage();
+ }
+
+ onChange = (model) => {
+ this.setState({
+ isComposerEmpty: model.isEmpty,
+ });
+ }
+
render() {
const controls = [
this.state.me ? : null,
@@ -318,6 +343,7 @@ export default class MessageComposer extends React.Component {
resizeNotifier={this.props.resizeNotifier}
permalinkCreator={this.props.permalinkCreator}
replyToEvent={this.props.replyToEvent}
+ onChange={this.onChange}
/>,
,
,
@@ -327,6 +353,12 @@ export default class MessageComposer extends React.Component {
SettingsStore.getValue("MessageComposerInput.showStickersButton")) {
controls.push();
}
+
+ if (!this.state.isComposerEmpty) {
+ controls.push(
+ ,
+ );
+ }
} else if (this.state.tombstone) {
const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 62c474e417..068627455d 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -117,6 +117,7 @@ export default class SendMessageComposer extends React.Component {
placeholder: PropTypes.string,
permalinkCreator: PropTypes.object.isRequired,
replyToEvent: PropTypes.object,
+ onChange: PropTypes.func,
};
static contextType = MatrixClientContext;
@@ -536,10 +537,15 @@ export default class SendMessageComposer extends React.Component {
}
}
+ onChange = () => {
+ if (this.props.onChange) this.props.onChange(this.model);
+ }
+
render() {
return (