Merge branch 'fix-4963' into develop

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;

res/img/element-icons/send-message.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 18.792 11.145 L 2.356 19.359 C 1.249 19.913 0.097 18.725 0.638 17.642 C 0.638 17.642 2.675 13.528 3.235 12.451 C 3.796 11.373 4.437 11.187 10.393 10.417 C 10.614 10.388 10.794 10.222 10.794 10 C 10.794 9.778 10.614 9.612 10.393 9.583 C 4.437 8.813 3.796 8.627 3.235 7.549 C 2.675 6.472 0.638 2.358 0.638 2.358 C 0.097 1.275 1.249 0.087 2.356 0.64 L 18.792 8.855 C 19.736 9.326 19.736 10.674 18.792 11.145 Z" fill="black"/>
+</svg>

src/components/views/rooms/MessageComposer.js

@@ -44,6 +44,20 @@ ComposerAvatar.propTypes = {
     me: PropTypes.object.isRequired,
 };
 
+function SendButton(props) {
+    return (
+        <AccessibleTooltipButton
+            className="mx_MessageComposer_sendMessage"
+            onClick={props.onClick}
+            title={_t('Send message')}
+        />
+    );
+}
+
+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 ? <ComposerAvatar key="controls_avatar" me={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}
                 />,
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
                 <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
@@ -327,6 +353,12 @@ export default class MessageComposer extends React.Component {
                 SettingsStore.getValue("MessageComposerInput.showStickersButton")) {
                 controls.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
             }
+
+            if (!this.state.isComposerEmpty) {
+                controls.push(
+                    <SendButton key="controls_send" onClick={this.sendMessage} />,
+                );
+            }
         } else if (this.state.tombstone) {
             const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
 

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 (
             <div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>
                 <BasicMessageComposer
+                    onChange={this.onChange}
                     ref={this._setEditorRef}
                     model={this.model}
                     room={this.props.room}

src/i18n/strings/en_EN.json

@@ -1416,6 +1416,7 @@
     "Invited": "Invited",
     "Filter room members": "Filter room members",
     "%(userName)s (power %(powerLevelNumber)s)": "%(userName)s (power %(powerLevelNumber)s)",
+    "Send message": "Send message",
     "Emoji picker": "Emoji picker",
     "Upload file": "Upload file",
     "Send an encrypted reply…": "Send an encrypted reply…",