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 (