Merge pull request #2226 from matrix-org/bwindels/resizeroomsublists

Redesign: 1st go at resizing room sublists
matrix-org · Oct 19, 2018 · 73d9a71 · 73d9a71
2 parents f2ee830 + bfbf41f
commit 73d9a71
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 274 deletions.
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
@@ -15,10 +15,14 @@ limitations under the License.
 */
 
 .mx_RoomSubList {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    min-height: 80px;
+    flex: 0;
+    display: flex;
+    flex-direction: column;
+}
 
+.mx_RoomSubList_hidden {
+    min-height: unset;
 }
 
 .mx_RoomSubList_resizer {
@@ -127,6 +131,11 @@ limitations under the License.
     transform: rotateZ(-90deg);
 }
 
+.mx_RoomSubList .gm-scrollbar-container {
+    /* let rooms list grab all available space */
+    flex: 1;
+}
+
 .collapsed {
     .mx_RoomSubList_label {
         height: 17px;

diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
@@ -16,8 +16,11 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    padding-bottom: 12px;
-    min-height: 400px;
+    /* take up remaining space below TopLeftMenu */
+    flex: 1;
+    /* use flexbox to layout sublists */
+    display: flex;
+    flex-direction: column;
 }
 
 .mx_RoomList_expandButton {
@@ -27,18 +30,6 @@ limitations under the License.
     padding-right: 12px;
 }
 
-/* Evil hacky override until Chrome fixes drop and drag table cells
-   and we can correctly fix horizontal wrapping in the sidebar again */
-.mx_RoomList_scrollbar .gm-scroll-view {
-    overflow-x: hidden ! important;
-    overflow-y: scroll ! important;
-}
-
-/* Make sure the scrollbar is above the sticky headers from RoomList */
-.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
-    z-index: 6;
-}
-
 .mx_RoomList_emptySubListTip_container {
     background-color: $secondary-accent-color;
     padding-left: 18px;
@@ -65,3 +56,4 @@ limitations under the License.
     position: absolute;
     right: 60px;
 }
+
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
@@ -19,8 +19,6 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 import sdk from '../../index';
-import { Droppable } from 'react-beautiful-dnd';
-import { _t } from '../../languageHandler';
 import dis from '../../dispatcher';
 import Unread from '../../Unread';
 import * as RoomNotifs from '../../RoomNotifs';
@@ -364,14 +362,27 @@ const RoomSubList = React.createClass({
             }
         }
 
-        if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0) {
+        const len = this.state.sortedList.length + this.props.extraTiles.length;
 
-            const subList = this.state.hidden ? undefined : content;
-
-            return <div className={"mx_RoomSubList"}>
-                {this._getHeaderJsx()}
-                {subList}
-            </div>;
+        if (len) {
+            if (this.state.hidden) {
+                return <div className={["mx_RoomSubList", "mx_RoomSubList_hidden"]}>
+                    {this._getHeaderJsx()}
+                </div>;
+            } else {
+                const heightEstimation = (len * 40) + 31;
+                const style = {
+                    flexBasis: `${heightEstimation}px`,
+                    maxHeight: `${heightEstimation}px`,
+                };
+                const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+                return <div className={"mx_RoomSubList"} style={style}>
+                    {this._getHeaderJsx()}
+                    <GeminiScrollbarWrapper>
+                        { content }
+                    </GeminiScrollbarWrapper>
+                </div>;
+            }
         } else {
             const Loader = sdk.getComponent("elements.Spinner");
             if (this.props.showSpinner) {