From 01d624fdafc2f49c7d516da2c6075c0dca82ffed Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 31 Jul 2020 13:47:40 +0200 Subject: [PATCH 1/4] Make the reply preview not an overlay on the timeline anymore As users can't scroll down all the way down to the timeline like this to see the last message (and perhaps adjust their reply to it) This also remove the wrapper div as it is not needed anymore --- res/css/views/rooms/_ReplyPreview.scss | 4 ---- res/css/views/rooms/_SendMessageComposer.scss | 5 ----- src/components/views/rooms/SendMessageComposer.js | 4 +--- 3 files changed, 1 insertion(+), 12 deletions(-) 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/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 130135f641..57927af4d0 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -444,9 +444,7 @@ export default class SendMessageComposer extends React.Component { render() { return (
-
- -
+ Date: Fri, 31 Jul 2020 14:02:40 +0200 Subject: [PATCH 2/4] Notify the timeline it's height has changed, so it can keep being at the bottom this way new messages will appear in the timeline without needing to scroll --- src/components/structures/RoomView.js | 1 + src/components/views/rooms/MessageComposer.js | 1 + src/components/views/rooms/SendMessageComposer.js | 7 +++++++ src/utils/ResizeNotifier.js | 4 ++++ 4 files changed, 13 insertions(+) diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 7dc2d57ff0..b6cc7722ee 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1912,6 +1912,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 bf4700ed97..00a02cf087 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -354,6 +354,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} />, , , diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 57927af4d0..d25eb52fb0 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -365,6 +365,13 @@ export default class SendMessageComposer extends React.Component { onAction = (payload) => { switch (payload.action) { case '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); case Action.FocusComposer: this._editorRef && this._editorRef.focus(); break; diff --git a/src/utils/ResizeNotifier.js b/src/utils/ResizeNotifier.js index f726a43e08..5467716576 100644 --- a/src/utils/ResizeNotifier.js +++ b/src/utils/ResizeNotifier.js @@ -53,6 +53,10 @@ export default class ResizeNotifier extends EventEmitter { this._updateMiddlePanel(); } + notifyTimelineHeightChanged() { + this._updateMiddlePanel(); + } + // can be called in quick succession notifyWindowResized() { // no need to throttle this one, From a3ca80b206d1e525225642c29dcd231cbde0f19b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 31 Jul 2020 18:27:07 +0200 Subject: [PATCH 3/4] move the reply preview one level higher so the buttons and avatar don't get centered with it --- src/components/views/rooms/MessageComposer.js | 21 ++++++++++++++++++- .../views/rooms/SendMessageComposer.js | 9 -------- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 00a02cf087..22522c748e 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -29,6 +29,7 @@ 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'); @@ -213,7 +214,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(), @@ -222,7 +223,24 @@ 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); + } + }; + + componentWillUnmount() { + dis.unregister(this.dispatcherRef); + } + componentDidMount() { + this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents); this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate); this._waitForOwnMember(); @@ -405,6 +423,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 d25eb52fb0..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'; @@ -365,13 +364,6 @@ export default class SendMessageComposer extends React.Component { onAction = (payload) => { switch (payload.action) { case '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); case Action.FocusComposer: this._editorRef && this._editorRef.focus(); break; @@ -451,7 +443,6 @@ export default class SendMessageComposer extends React.Component { render() { return (
- Date: Tue, 18 Aug 2020 12:34:43 +0200 Subject: [PATCH 4/4] remove dupe method --- src/components/views/rooms/MessageComposer.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 22522c748e..9fe87cc98b 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -235,10 +235,6 @@ export default class MessageComposer extends React.Component { } }; - componentWillUnmount() { - dis.unregister(this.dispatcherRef); - } - componentDidMount() { this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents); @@ -269,6 +265,7 @@ export default class MessageComposer extends React.Component { if (this._roomStoreToken) { this._roomStoreToken.remove(); } + dis.unregister(this.dispatcherRef); } _onRoomStateEvents(ev, state) {