From 4972b1ba7c593ca9adec96645f7c9b734fd4a9a0 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 30 Oct 2018 13:25:06 +0100
Subject: [PATCH] move aux panel into room body

to put a resize handle between the body and the right panel later on
---
 res/css/structures/_RoomView.scss     |  8 -----
 res/css/views/rooms/_RoomHeader.scss  |  7 ++++
 src/components/structures/RoomView.js | 50 +++++++++++++++------------
 3 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 1283f05150..73167a49d8 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -24,12 +24,6 @@ limitations under the License.
     flex-direction: column;
 }
 
-.mx_RoomView .mx_RoomHeader {
-    order: 1;
-
-    flex: 0 0 52px;
-}
-
 .mx_RoomView_fileDropTarget {
     min-width: 0px;
     width: 100%;
@@ -69,8 +63,6 @@ limitations under the License.
     margin: 0px auto;
 
     overflow: auto;
-    border-bottom: 1px solid $primary-hairline-color;
-
     flex: 0 0 auto;
 }
 
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index b4a3d27d4f..f7c3e902bc 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_RoomHeader {
+    order: 1;
+    flex: 0 0 52px;
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
+
 /* add 20px to the height of the header when editing */
 .mx_RoomHeader_editing {
     flex: 0 0 93px ! important;
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index e20ac54006..4061dbc715 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1507,18 +1507,20 @@ module.exports = React.createClass({
                             oobData={this.props.oobData}
                             collapsedRhs={this.props.collapsedRhs}
                         />
-                        <div className="mx_RoomView_auxPanel">
-                            <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
-                                            onForgetClick={this.onForgetClick}
-                                            onRejectClick={this.onRejectThreepidInviteButtonClicked}
-                                            canPreview={false} error={this.state.roomLoadError}
-                                            roomAlias={roomAlias}
-                                            spinner={this.state.joining}
-                                            spinnerState="joining"
-                                            inviterName={inviterName}
-                                            invitedEmail={invitedEmail}
-                                            room={this.state.room}
-                            />
+                        <div className="mx_RoomView_body">
+                            <div className="mx_RoomView_auxPanel">
+                                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                                                onForgetClick={this.onForgetClick}
+                                                onRejectClick={this.onRejectThreepidInviteButtonClicked}
+                                                canPreview={false} error={this.state.roomLoadError}
+                                                roomAlias={roomAlias}
+                                                spinner={this.state.joining}
+                                                spinnerState="joining"
+                                                inviterName={inviterName}
+                                                invitedEmail={invitedEmail}
+                                                room={this.state.room}
+                                />
+                            </div>
                         </div>
                         <div className="mx_RoomView_messagePanel"></div>
                     </div>
@@ -1552,16 +1554,18 @@ module.exports = React.createClass({
                             room={this.state.room}
                             collapsedRhs={this.props.collapsedRhs}
                         />
-                        <div className="mx_RoomView_auxPanel">
-                            <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
-                                            onForgetClick={this.onForgetClick}
-                                            onRejectClick={this.onRejectButtonClicked}
-                                            inviterName={inviterName}
-                                            canPreview={false}
-                                            spinner={this.state.joining}
-                                            spinnerState="joining"
-                                            room={this.state.room}
-                            />
+                        <div className="mx_RoomView_body">
+                            <div className="mx_RoomView_auxPanel">
+                                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                                                onForgetClick={this.onForgetClick}
+                                                onRejectClick={this.onRejectButtonClicked}
+                                                inviterName={inviterName}
+                                                canPreview={false}
+                                                spinner={this.state.joining}
+                                                spinnerState="joining"
+                                                room={this.state.room}
+                                />
+                            </div>
                         </div>
                         <div className="mx_RoomView_messagePanel"></div>
                     </div>
@@ -1824,8 +1828,8 @@ module.exports = React.createClass({
                     onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
                     onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                 />
-                { auxPanel }
                 <div className={fadableSectionClasses}>
+                    { auxPanel }
                     { topUnreadMessagesBar }
                     { messagePanel }
                     { searchResultsPanel }