Merge pull request #2354 from matrix-org/bwindels/leftpanelsmallfixes

Redesign: some small fixes

res/css/views/elements/_ResizeHandle.scss

@@ -17,21 +17,30 @@ limitations under the License.
 .mx_ResizeHandle {
     cursor: row-resize;
     flex: 0 0 auto;
-    background: $panel-divider-color;
-    background-clip: content-box;
     z-index: 100;
 }
 
 .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    width: 1px;
     margin: 0 -5px;
     padding: 0 5px;
     cursor: col-resize;
 }
 
 .mx_ResizeHandle.mx_ResizeHandle_vertical {
-    height: 1px;
     margin: -5px 0;
     padding: 5px 0;
     cursor: row-resize;
 }
+
+.mx_ResizeHandle > div {
+    background: $panel-divider-color;
+}
+
+.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
+    width: 1px;
+    height: 100%;
+}
+
+.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
+    height: 1px;
+}

res/css/views/rooms/_RoomTile.scss

@@ -39,10 +39,6 @@ limitations under the License.
     .mx_RoomTile_menuButton {
         display: block;
     }
-
-    .mx_RoomTile_badge {
-        display: none;
-    }
 }
 
 .mx_RoomTile_tooltip {

src/components/structures/RoomSubList.js

@@ -313,6 +313,12 @@ const RoomSubList = React.createClass({
         );
     },
 
+    checkOverflow: function() {
+        if (this.refs.scroller) {
+            this.refs.scroller.checkOverflow();
+        }
+    },
+
     render: function() {
         const len = this.props.list.length + this.props.extraTiles.length;
         if (len) {
@@ -330,7 +336,7 @@ const RoomSubList = React.createClass({
                 tiles.push(...this.props.extraTiles);
                 return <div className={subListClasses}>
                     {this._getHeaderJsx()}
-                    <IndicatorScrollbar className="mx_RoomSubList_scroll">
+                    <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
                         { tiles }
                     </IndicatorScrollbar>
                 </div>;

src/components/views/elements/ResizeHandle.js

@@ -14,7 +14,7 @@ const ResizeHandle = (props) => {
         classNames.push('mx_ResizeHandle_reverse');
     }
     return (
-        <div className={classNames.join(' ')} data-id={props.id} />
+        <div className={classNames.join(' ')} data-id={props.id}><div /></div>
     );
 };
 

src/components/views/rooms/RoomList.js

@@ -71,6 +71,10 @@ module.exports = React.createClass({
 
     getInitialState: function() {
 
+        this._subListRefs = {
+            // key => RoomSubList ref
+        };
+
         const sizesJson = window.localStorage.getItem("mx_roomlist_sizes");
         const collapsedJson = window.localStorage.getItem("mx_roomlist_collapsed");
         this.subListSizes = sizesJson ? JSON.parse(sizesJson) : {};
@@ -174,8 +178,11 @@ module.exports = React.createClass({
         this.mounted = true;
     },
 
-    componentDidUpdate: function() {
+    componentDidUpdate: function(prevProps) {
         this._repositionIncomingCallBox(undefined, false);
+        if (this.props.searchFilter !== prevProps.searchFilter) {
+             Object.values(this._subListRefs).forEach(l => l.checkOverflow());
+        }
     },
 
     onAction: function(payload) {
@@ -483,6 +490,14 @@ module.exports = React.createClass({
         window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState));
     },
 
+    _subListRef: function(key, ref) {
+        if (!ref) {
+            delete this._subListRefs[key];
+        } else {
+            this._subListRefs[key] = ref;
+        }
+    },
+
     _mapSubListProps: function(subListsProps) {
         const defaultProps = {
             collapsed: this.props.collapsed,
@@ -513,6 +528,7 @@ module.exports = React.createClass({
             const startAsHidden = props.startAsHidden || this.collapsedState[chosenKey];
 
             let subList = (<RoomSubList
+                ref={this._subListRef.bind(this, chosenKey)}
                 startAsHidden={startAsHidden}
                 onHeaderClick={onSubListHeaderClick}
                 key={chosenKey}