diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e79f612de..3a6fecec1 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -79,6 +79,7 @@ var RoomSubList = React.createClass({ incomingCall: React.PropTypes.object, onShowMoreRooms: React.PropTypes.func, searchFilter: React.PropTypes.string, + headerStack: React.PropTypes.func, }, getInitialState: function() { @@ -406,11 +407,13 @@ var RoomSubList = React.createClass({ } return ( -
- { this.props.collapsed ? '' : this.props.label } -
{roomCount}
-
- {badge} +
+
+ { this.props.collapsed ? '' : this.props.label } +
{roomCount}
+
+ {badge} +
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index a5ea7d144..cb80a8f76 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -20,18 +20,33 @@ limitations under the License. width: 100%; } +.mx_RoomSubList_stickyContainer { + height: 29px; + position: relative; +} + .mx_RoomSubList_label { position: relative; text-transform: uppercase; color: #3d3b39; font-weight: 600; font-size: 12px; + width: 203px; /* padding + width = LHS Panel width */ + height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */ padding-left: 16px; /* gutter */ padding-right: 16px; /* gutter */ padding-top: 6px; padding-bottom: 6px; cursor: pointer; background-color: rgba(118, 207, 166, 0.2); + z-index: 3; +} + +.mx_RoomSubList_label.mx_RoomSubList_fixed { + position: fixed; + top: 0; + z-index: 2; + pointer-events: none; } .collapsed .mx_RoomSubList_label {