From ae8723451af2ae75fd2bd46e9791dc069d56905c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:27:36 +0200 Subject: [PATCH 01/13] remove onShowMoreRooms, as room tiles & scrollbar rendered at same level --- src/components/structures/RoomSubList.js | 4 ---- src/components/views/rooms/RoomList.js | 11 ----------- 2 files changed, 15 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index a6117b1a00..5833a8b505 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -52,7 +52,6 @@ const RoomSubList = React.createClass({ onHeaderClick: PropTypes.func, alwaysShowHeader: PropTypes.bool, incomingCall: PropTypes.object, - onShowMoreRooms: PropTypes.func, searchFilter: PropTypes.string, emptyContent: PropTypes.node, // content shown if the list is empty headerItems: PropTypes.node, // content shown in the sublist header @@ -71,8 +70,6 @@ const RoomSubList = React.createClass({ return { onHeaderClick: function() { }, // NOP - onShowMoreRooms: function() { - }, // NOP extraTiles: [], isInvite: false, showEmpty: true, @@ -138,7 +135,6 @@ const RoomSubList = React.createClass({ // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic const isHidden = !this.state.hidden; this.setState({hidden: isHidden}); - this.props.onShowMoreRooms(); this.props.onHeaderClick(isHidden); } else { // The header is stuck, so the click is to be interpreted as a scroll to the header diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index ef82075e89..005c19053e 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -406,13 +406,6 @@ module.exports = React.createClass({ } }, - onShowMoreRooms: function() { - // kick gemini in the balls to get it to wake up - // XXX: uuuuuuugh. - if (!this._gemScroll) return; - this._gemScroll.forceUpdate(); - }, - _getEmptyContent: function(section) { if (this.state.selectedTags.length > 0) { return null; @@ -508,9 +501,6 @@ module.exports = React.createClass({ render: function() { const RoomSubList = sdk.getComponent('structures.RoomSubList'); - // XXX: we can't detect device-level (localStorage) settings onChange as the SettingsStore does not notify - // so checking on every render is the sanest thing at this time. - const showEmpty = SettingsStore.getValue('RoomSubList.showEmpty'); const self = this; @@ -518,7 +508,6 @@ module.exports = React.createClass({ const defaultProps = { collapsed: self.props.collapsed, searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, showEmpty: showEmpty, incomingCall: self.state.incomingCall, }; From 0386a1e048d610e03b473d61ac0f1408b5dd6f73 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:32:49 +0200 Subject: [PATCH 02/13] get rid of obsolete showEmpty prop --- src/components/structures/RoomSubList.js | 2 -- src/components/views/rooms/RoomList.js | 1 - 2 files changed, 3 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 5833a8b505..d703a82664 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -56,7 +56,6 @@ const RoomSubList = React.createClass({ emptyContent: PropTypes.node, // content shown if the list is empty headerItems: PropTypes.node, // content shown in the sublist header extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles - showEmpty: PropTypes.bool, }, getInitialState: function() { @@ -72,7 +71,6 @@ const RoomSubList = React.createClass({ }, // NOP extraTiles: [], isInvite: false, - showEmpty: true, }; }, diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 005c19053e..180112ddfc 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -508,7 +508,6 @@ module.exports = React.createClass({ const defaultProps = { collapsed: self.props.collapsed, searchFilter: self.props.searchFilter, - showEmpty: showEmpty, incomingCall: self.state.incomingCall, }; return subListsProps.reduce((components, props, i) => { From 14cdd723f7855d074fa1e9adc24c85a1c088e97c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:33:51 +0200 Subject: [PATCH 03/13] only show chevron for non-empty lists --- src/components/structures/RoomSubList.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index d703a82664..6017ea64ee 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -265,12 +265,6 @@ const RoomSubList = React.createClass({ const subListNotifCount = subListNotifications[0]; const subListNotifHighlight = subListNotifications[1]; - const chevronClasses = classNames({ - 'mx_RoomSubList_chevron': true, - 'mx_RoomSubList_chevronRight': this.state.hidden, - 'mx_RoomSubList_chevronDown': !this.state.hidden, - }); - const badgeClasses = classNames({ 'mx_RoomSubList_badge': true, 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, @@ -318,11 +312,21 @@ const RoomSubList = React.createClass({ } const tabindex = this.props.searchFilter === "" ? "0" : "-1"; + const len = this.state.sortedList.length + this.props.extraTiles.length; + let chevron; + if (len) { + const chevronClasses = classNames({ + 'mx_RoomSubList_chevron': true, + 'mx_RoomSubList_chevronRight': this.state.hidden, + 'mx_RoomSubList_chevronDown': !this.state.hidden, + }); + chevron = (
); + } return (
-
+ { chevron } { this.props.collapsed ? '' : this.props.label } { badge } { incomingCall } From 57a9d3ca981a0cdcaafebd441ca6652fd3049502 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:37:23 +0200 Subject: [PATCH 04/13] remove obsolete resizer --- res/css/structures/_RoomSubList.scss | 5 ----- src/components/structures/RoomSubList.js | 1 - 2 files changed, 6 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index e37fc4bf8c..b66c015ade 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -25,11 +25,6 @@ limitations under the License. min-height: unset; } -.mx_RoomSubList_resizer { - width: 100%; - height: 3px; - background-color: $roomsublist-background; -} .mx_RoomSubList_labelContainer { display: flex; diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 6017ea64ee..c07f8306f1 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -394,7 +394,6 @@ const RoomSubList = React.createClass({
{this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined} { this.state.hidden ? undefined : content } -
); } From 5091aa3b433bc23dfbdd143d7fae24b99e876a6c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:40:59 +0200 Subject: [PATCH 05/13] get rid of emptyContent, also cleanup sublist render method also assume empty list in css by default and add nonEmpty class --- res/css/structures/_RoomSubList.scss | 6 +- src/components/structures/RoomSubList.js | 45 ++++----------- src/components/views/rooms/RoomList.js | 70 ------------------------ 3 files changed, 15 insertions(+), 106 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index b66c015ade..5ffb3039e2 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -15,14 +15,14 @@ limitations under the License. */ .mx_RoomSubList { - min-height: 80px; flex: 0; display: flex; flex-direction: column; } -.mx_RoomSubList_hidden { - min-height: unset; +.mx_RoomSubList_nonEmpty { + min-height: 80px; + flex: 1; } diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index c07f8306f1..003c0541a2 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -53,7 +53,6 @@ const RoomSubList = React.createClass({ alwaysShowHeader: PropTypes.bool, incomingCall: PropTypes.object, searchFilter: PropTypes.string, - emptyContent: PropTypes.node, // content shown if the list is empty headerItems: PropTypes.node, // content shown in the sublist header extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles }, @@ -337,37 +336,14 @@ const RoomSubList = React.createClass({ }, render: function() { - let content; - - if (this.props.showEmpty) { - // this is new behaviour with still controversial UX in that in hiding RoomSubLists the drop zones for DnD - // are also gone so when filtering users can't DnD rooms to some tags but is a lot cleaner otherwise. - if (this.state.sortedList.length === 0 && !this.props.searchFilter && this.props.extraTiles.length === 0) { - content = this.props.emptyContent; - } else { - content = this.makeRoomTiles(); - content.push(...this.props.extraTiles); - } - } else { - if (this.state.sortedList.length === 0 && this.props.extraTiles.length === 0) { - // if no search filter is applied and there is a placeholder defined then show it, otherwise show nothing - if (!this.props.searchFilter && this.props.emptyContent) { - content = this.props.emptyContent; - } else { - // don't show an empty sublist - return null; - } - } else { - content = this.makeRoomTiles(); - content.push(...this.props.extraTiles); - } - } - const len = this.state.sortedList.length + this.props.extraTiles.length; - if (len) { + const subListClasses = classNames({ + "mx_RoomSubList": true, + "mx_RoomSubList_nonEmpty": len && !this.state.hidden, + }); if (this.state.hidden) { - return
+ return
{this._getHeaderJsx()}
; } else { @@ -377,23 +353,26 @@ const RoomSubList = React.createClass({ maxHeight: `${heightEstimation}px`, }; const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); - return
+ const tiles = this.makeRoomTiles(); + tiles.push(...this.props.extraTiles); + return
{this._getHeaderJsx()} - { content } + { tiles }
; } } else { const Loader = sdk.getComponent("elements.Spinner"); - if (this.props.showSpinner) { + let content; + if (this.props.showSpinner && !this.state.hidden) { content = ; } return (
{this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined} - { this.state.hidden ? undefined : content } + { content }
); } diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 180112ddfc..ad4d348b2a 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -406,64 +406,6 @@ module.exports = React.createClass({ } }, - _getEmptyContent: function(section) { - if (this.state.selectedTags.length > 0) { - return null; - } - - const RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget'); - - if (this.props.collapsed) { - return ; - } - - const StartChatButton = sdk.getComponent('elements.StartChatButton'); - const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton'); - const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton'); - - let tip = null; - - switch (section) { - case 'im.vector.fake.direct': - tip =
- { _t( - "Press to start a chat with someone", - {}, - { 'StartChatButton': }, - ) } -
; - break; - case 'im.vector.fake.recent': - tip =
- { _t( - "You're not in any rooms yet! Press to make a room or"+ - " to browse the directory", - {}, - { - 'CreateRoomButton': , - 'RoomDirectoryButton': , - }, - ) } -
; - break; - } - - if (tip) { - return
- { tip } -
; - } - - // We don't want to display drop targets if there are no room tiles to drag'n'drop - if (this.state.totalRoomCount === 0) { - return null; - } - - const labelText = phraseForSection(section); - - return ; - }, - _getHeaderItems: function(section) { const StartChatButton = sdk.getComponent('elements.StartChatButton'); const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton'); @@ -551,14 +493,12 @@ module.exports = React.createClass({ list: self.state.lists['m.favourite'], label: _t('Favourites'), tagName: "m.favourite", - emptyContent: this._getEmptyContent('m.favourite'), order: "manual", }, { list: self.state.lists['im.vector.fake.direct'], label: _t('People'), tagName: "im.vector.fake.direct", - emptyContent: this._getEmptyContent('im.vector.fake.direct'), headerItems: this._getHeaderItems('im.vector.fake.direct'), order: "recent", alwaysShowHeader: true, @@ -567,7 +507,6 @@ module.exports = React.createClass({ { list: self.state.lists['im.vector.fake.recent'], label: _t('Rooms'), - emptyContent: this._getEmptyContent('im.vector.fake.recent'), headerItems: this._getHeaderItems('im.vector.fake.recent'), order: "recent", onAddRoom: () => {dis.dispatch({action: 'view_create_room'})}, @@ -582,7 +521,6 @@ module.exports = React.createClass({ key: tagName, label: labelForTagName(tagName), tagName: tagName, - emptyContent: this._getEmptyContent(tagName), order: "manual", }; }); @@ -592,18 +530,10 @@ module.exports = React.createClass({ list: self.state.lists['m.lowpriority'], label: _t('Low priority'), tagName: "m.lowpriority", - emptyContent: this._getEmptyContent('m.lowpriority'), order: "recent", }, { list: self.state.lists['im.vector.fake.archived'], - emptyContent: self.props.collapsed ? - null : -
-
- { _t('You have no historical rooms') } -
-
, label: _t('Historical'), order: "recent", alwaysShowHeader: true, From d48f19bc19a9423f6da2337949d5addbd8fee413 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:43:02 +0200 Subject: [PATCH 06/13] remove alwaysShowHeader, as now onAddRoom prop determines this --- src/components/structures/RoomSubList.js | 3 +-- src/components/views/rooms/RoomList.js | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 003c0541a2..0cf719d507 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -50,7 +50,6 @@ const RoomSubList = React.createClass({ showSpinner: PropTypes.bool, // true to show a spinner if 0 elements when expanded collapsed: PropTypes.bool.isRequired, // is LeftPanel collapsed? onHeaderClick: PropTypes.func, - alwaysShowHeader: PropTypes.bool, incomingCall: PropTypes.object, searchFilter: PropTypes.string, headerItems: PropTypes.node, // content shown in the sublist header @@ -371,7 +370,7 @@ const RoomSubList = React.createClass({ return (
- {this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined} + { this._getHeaderJsx() } { content }
); diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index ad4d348b2a..b84f3c0cf0 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -501,7 +501,6 @@ module.exports = React.createClass({ tagName: "im.vector.fake.direct", headerItems: this._getHeaderItems('im.vector.fake.direct'), order: "recent", - alwaysShowHeader: true, onAddRoom: () => {dis.dispatch({action: 'view_create_chat'})}, }, { @@ -536,7 +535,6 @@ module.exports = React.createClass({ list: self.state.lists['im.vector.fake.archived'], label: _t('Historical'), order: "recent", - alwaysShowHeader: true, startAsHidden: true, showSpinner: self.state.isLoadingLeftRooms, onHeaderClick: self.onArchivedHeaderClick, From c6924c47fa86382b648405156c25ef3436f95adb Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:43:54 +0200 Subject: [PATCH 07/13] no need for self --- src/components/views/rooms/RoomList.js | 35 ++++++++++++-------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index b84f3c0cf0..af9e952da6 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -443,14 +443,11 @@ module.exports = React.createClass({ render: function() { const RoomSubList = sdk.getComponent('structures.RoomSubList'); - - const self = this; - - function mapProps(subListsProps) { + const mapProps = (subListsProps) => { const defaultProps = { - collapsed: self.props.collapsed, - searchFilter: self.props.searchFilter, - incomingCall: self.state.incomingCall, + collapsed: this.props.collapsed, + searchFilter: this.props.searchFilter, + incomingCall: this.state.incomingCall, }; return subListsProps.reduce((components, props, i) => { props = Object.assign({}, defaultProps, props); @@ -478,25 +475,25 @@ module.exports = React.createClass({ let subLists = [ { list: [], - extraTiles: this._makeGroupInviteTiles(self.props.searchFilter), + extraTiles: this._makeGroupInviteTiles(this.props.searchFilter), label: _t('Community Invites'), order: "recent", isInvite: true, }, { - list: self.state.lists['im.vector.fake.invite'], + list: this.state.lists['im.vector.fake.invite'], label: _t('Invites'), order: "recent", isInvite: true, }, { - list: self.state.lists['m.favourite'], + list: this.state.lists['m.favourite'], label: _t('Favourites'), tagName: "m.favourite", order: "manual", }, { - list: self.state.lists['im.vector.fake.direct'], + list: this.state.lists['im.vector.fake.direct'], label: _t('People'), tagName: "im.vector.fake.direct", headerItems: this._getHeaderItems('im.vector.fake.direct'), @@ -504,19 +501,19 @@ module.exports = React.createClass({ onAddRoom: () => {dis.dispatch({action: 'view_create_chat'})}, }, { - list: self.state.lists['im.vector.fake.recent'], + list: this.state.lists['im.vector.fake.recent'], label: _t('Rooms'), headerItems: this._getHeaderItems('im.vector.fake.recent'), order: "recent", onAddRoom: () => {dis.dispatch({action: 'view_create_room'})}, }, ]; - const tagSubLists = Object.keys(self.state.lists) + const tagSubLists = Object.keys(this.state.lists) .filter((tagName) => { return !tagName.match(STANDARD_TAGS_REGEX); }).map((tagName) => { return { - list: self.state.lists[tagName], + list: this.state.lists[tagName], key: tagName, label: labelForTagName(tagName), tagName: tagName, @@ -526,21 +523,21 @@ module.exports = React.createClass({ subLists = subLists.concat(tagSubLists); subLists = subLists.concat([ { - list: self.state.lists['m.lowpriority'], + list: this.state.lists['m.lowpriority'], label: _t('Low priority'), tagName: "m.lowpriority", order: "recent", }, { - list: self.state.lists['im.vector.fake.archived'], + list: this.state.lists['im.vector.fake.archived'], label: _t('Historical'), order: "recent", startAsHidden: true, - showSpinner: self.state.isLoadingLeftRooms, - onHeaderClick: self.onArchivedHeaderClick, + showSpinner: this.state.isLoadingLeftRooms, + onHeaderClick: this.onArchivedHeaderClick, }, { - list: self.state.lists['m.server_notice'], + list: this.state.lists['m.server_notice'], label: _t('System Alerts'), tagName: "m.lowpriority", order: "recent", From 8f71210bdfb6b507149959e8fcf0c1a421d1c91b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:44:07 +0200 Subject: [PATCH 08/13] header should never grow or shrink --- res/css/structures/_RoomSubList.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 5ffb3039e2..85b8f73d64 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -15,7 +15,8 @@ limitations under the License. */ .mx_RoomSubList { - flex: 0; + min-height: 31px; + flex: 0 0 auto; display: flex; flex-direction: column; } @@ -25,10 +26,10 @@ limitations under the License. flex: 1; } - .mx_RoomSubList_labelContainer { display: flex; flex-direction: row; + flex: 0 0 auto; } .mx_RoomSubList_label { From acd383c6a9f73f3603856aab8b11cdef64dbe10a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:44:37 +0200 Subject: [PATCH 09/13] move closer to usage --- src/components/structures/RoomSubList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 0cf719d507..be472d92f7 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -309,7 +309,6 @@ const RoomSubList = React.createClass({ ); } - const tabindex = this.props.searchFilter === "" ? "0" : "-1"; const len = this.state.sortedList.length + this.props.extraTiles.length; let chevron; if (len) { @@ -321,6 +320,7 @@ const RoomSubList = React.createClass({ chevron = (
); } + const tabindex = this.props.searchFilter === "" ? "0" : "-1"; return (
From e4276d93781e29f14f2e829e5e7a05b0a616467f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 14:50:35 +0200 Subject: [PATCH 10/13] don't show notification count in expanded room section header --- src/components/structures/RoomSubList.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index be472d92f7..e1bc1954da 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -263,19 +263,21 @@ const RoomSubList = React.createClass({ const subListNotifCount = subListNotifications[0]; const subListNotifHighlight = subListNotifications[1]; - const badgeClasses = classNames({ - 'mx_RoomSubList_badge': true, - 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, - }); let badge; - if (subListNotifCount > 0) { - badge =
- { FormattingUtils.formatCount(subListNotifCount) } -
; - } else if (this.props.isInvite) { - // no notifications but highlight anyway because this is an invite badge - badge =
!
; + if (this.state.hidden) { + const badgeClasses = classNames({ + 'mx_RoomSubList_badge': true, + 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, + }); + if (subListNotifCount > 0) { + badge =
+ { FormattingUtils.formatCount(subListNotifCount) } +
; + } else if (this.props.isInvite) { + // no notifications but highlight anyway because this is an invite badge + badge =
!
; + } } // When collapsed, allow a long hover on the header to show user From 7c64d9637e21336699ea0fe5cc2da8486ffe96bf Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 18:18:45 +0200 Subject: [PATCH 11/13] hide resize handles next to collaped/empty sublists --- res/css/views/rooms/_RoomList.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 3ce47a4bc6..3cb5be1952 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -23,6 +23,11 @@ limitations under the License. flex-direction: column; } +/* hide resize handles next to collapsed / empty sublists */ +.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle { + display: none; +} + .mx_RoomList_expandButton { margin-left: 8px; cursor: pointer; From ebd3d3410606f3baf85034e23080783769fd9e4b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 18:35:27 +0200 Subject: [PATCH 12/13] make sure no resize handle is put after last sublist --- src/components/views/rooms/RoomList.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index af9e952da6..c2baccc676 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -449,14 +449,15 @@ module.exports = React.createClass({ searchFilter: this.props.searchFilter, incomingCall: this.state.incomingCall, }; + + subListsProps = subListsProps.filter((props => { + const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0); + return len !== 0 || props.onAddRoom; + })); + return subListsProps.reduce((components, props, i) => { props = Object.assign({}, defaultProps, props); const isLast = i === subListsProps.length - 1; - const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0); - // empty and no add button? dont render - if (!len && !props.onAddRoom) { - return components; - } const {key, label, ... otherProps} = props; const chosenKey = key || label; From 5c843acc105f2f9ec6e83f622c407361d7183e97 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 22 Oct 2018 11:16:33 +0200 Subject: [PATCH 13/13] fix room lists growing taller than screen height in FF sections with flex-basis don't seem to shrink smaller in FF, so use flexGrow which is unitless/proportional but works as well --- src/components/structures/RoomSubList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e1bc1954da..e00f0f2d03 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -350,7 +350,7 @@ const RoomSubList = React.createClass({ } else { const heightEstimation = (len * 40) + 31; const style = { - flexBasis: `${heightEstimation}px`, + flexGrow: `${heightEstimation}`, maxHeight: `${heightEstimation}px`, }; const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");