diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss index 9feb337042..10f8e21e43 100644 --- a/res/css/views/rooms/_ReplyPreview.scss +++ b/res/css/views/rooms/_ReplyPreview.scss @@ -15,10 +15,6 @@ limitations under the License. */ .mx_ReplyPreview { - position: absolute; - bottom: 0; - z-index: 1000; - width: 100%; border: 1px solid $primary-hairline-color; background: $primary-bg-color; border-bottom: none; diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss index 0b646666e7..9f6a8d52ce 100644 --- a/res/css/views/rooms/_SendMessageComposer.scss +++ b/res/css/views/rooms/_SendMessageComposer.scss @@ -44,10 +44,5 @@ limitations under the License. overflow-y: auto; } } - - .mx_SendMessageComposer_overlayWrapper { - position: relative; - height: 0; - } } diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 9a61523941..a79e5b0aa8 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1913,6 +1913,7 @@ export default createReactClass({ disabled={this.props.disabled} showApps={this.state.showApps} e2eStatus={this.state.e2eStatus} + resizeNotifier={this.props.resizeNotifier} permalinkCreator={this._getPermalinkCreatorForRoom(this.state.room)} />; } diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index c4f400c872..922cc2b11e 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -30,6 +30,8 @@ import E2EIcon from './E2EIcon'; import SettingsStore from "../../../settings/SettingsStore"; import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import ReplyPreview from "./ReplyPreview"; + function ComposerAvatar(props) { const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar'); return
@@ -223,7 +225,7 @@ export default class MessageComposer extends React.Component { this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this); this._onTombstoneClick = this._onTombstoneClick.bind(this); this.renderPlaceholderText = this.renderPlaceholderText.bind(this); - + this._dispatcherRef = null; this.state = { isQuoting: Boolean(RoomViewStore.getQuotingEvent()), tombstone: this._getRoomTombstone(), @@ -232,7 +234,20 @@ export default class MessageComposer extends React.Component { }; } + onAction = (payload) => { + if (payload.action === 'reply_to_event') { + // add a timeout for the reply preview to be rendered, so + // that the ScrollPanel listening to the resizeNotifier can + // correctly measure it's new height and scroll down to keep + // at the bottom if it already is + setTimeout(() => { + this.props.resizeNotifier.notifyTimelineHeightChanged(); + }, 100); + } + }; + componentDidMount() { + this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents); this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate); this._waitForOwnMember(); @@ -261,6 +276,7 @@ export default class MessageComposer extends React.Component { if (this._roomStoreToken) { this._roomStoreToken.remove(); } + dis.unregister(this.dispatcherRef); } _onRoomStateEvents(ev, state) { @@ -364,6 +380,7 @@ export default class MessageComposer extends React.Component { key="controls_input" room={this.props.room} placeholder={this.renderPlaceholderText()} + resizeNotifier={this.props.resizeNotifier} permalinkCreator={this.props.permalinkCreator} />, , , @@ -414,6 +431,7 @@ export default class MessageComposer extends React.Component { return (
+
{ controls }
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 130135f641..6a7b2fc753 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -29,7 +29,6 @@ import { } from '../../../editor/serialize'; import {CommandPartCreator} from '../../../editor/parts'; import BasicMessageComposer from "./BasicMessageComposer"; -import ReplyPreview from "./ReplyPreview"; import RoomViewStore from '../../../stores/RoomViewStore'; import ReplyThread from "../elements/ReplyThread"; import {parseEvent} from '../../../editor/deserialize'; @@ -444,9 +443,6 @@ export default class SendMessageComposer extends React.Component { render() { return (
-
- -