From 81d0ce2bcf0be35d34c4ed3a52e949a2d636c634 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 15:08:32 +0200 Subject: [PATCH 01/12] remove sticky header code --- src/components/views/rooms/RoomList.js | 115 ------------------------- 1 file changed, 115 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 1ab7c4dd3b..e161dfe46d 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -133,15 +133,10 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); - // Initialise the stickyHeaders when the component is created - this._updateStickyHeaders(true); - this.mounted = true; }, componentDidUpdate: function() { - // Reinitialise the stickyHeaders when the component is updated - this._updateStickyHeaders(true); this._repositionIncomingCallBox(undefined, false); }, @@ -209,10 +204,6 @@ module.exports = React.createClass({ if (!isHidden) { const self = this; this.setState({ isLoadingLeftRooms: true }); - - // Try scrolling to position - this._updateStickyHeaders(true, scrollToPosition); - // we don't care about the response since it comes down via "Room" // events. MatrixClientPeg.get().syncLeftRooms().catch(function(err) { @@ -224,11 +215,6 @@ module.exports = React.createClass({ } }, - onSubListHeaderClick: function(isHidden, scrollToPosition) { - // The scroll area has expanded or contracted, so re-calculate sticky headers positions - this._updateStickyHeaders(true, scrollToPosition); - }, - onRoomReceipt: function(receiptEvent, room) { // because if we read a notification, it will affect notification count // only bother updating if there's a receipt from us @@ -378,7 +364,6 @@ module.exports = React.createClass({ _whenScrolling: function(e) { this._hideTooltip(e); this._repositionIncomingCallBox(e, false); - this._updateStickyHeaders(false); }, _hideTooltip: function(e) { @@ -412,106 +397,6 @@ module.exports = React.createClass({ } }, - // Doing the sticky headers as raw DOM, for speed, as it gets very stuttery if done - // properly through React - _initAndPositionStickyHeaders: function(initialise, scrollToPosition) { - const scrollArea = this._getScrollNode(); - if (!scrollArea) return; - // Use the offset of the top of the scroll area from the window - // as this is used to calculate the CSS fixed top position for the stickies - const scrollAreaOffset = scrollArea.getBoundingClientRect().top + window.pageYOffset; - // Use the offset of the top of the componet from the window - // as this is used to calculate the CSS fixed top position for the stickies - const scrollAreaHeight = ReactDOM.findDOMNode(this).getBoundingClientRect().height; - - if (initialise) { - // Get a collection of sticky header containers references - this.stickies = document.getElementsByClassName("mx_RoomSubList_labelContainer"); - - if (!this.stickies.length) return; - - // Make sure there is sufficient space to do sticky headers: 120px plus all the sticky headers - this.scrollAreaSufficient = (120 + (this.stickies[0].getBoundingClientRect().height * this.stickies.length)) < scrollAreaHeight; - - // Initialise the sticky headers - if (typeof this.stickies === "object" && this.stickies.length > 0) { - // Initialise the sticky headers - Array.prototype.forEach.call(this.stickies, function(sticky, i) { - // Save the positions of all the stickies within scroll area. - // These positions are relative to the LHS Panel top - sticky.dataset.originalPosition = sticky.offsetTop - scrollArea.offsetTop; - - // Save and set the sticky heights - const originalHeight = sticky.getBoundingClientRect().height; - sticky.dataset.originalHeight = originalHeight; - sticky.style.height = originalHeight; - - return sticky; - }); - } - } - - if (!this.stickies) return; - - const self = this; - let scrollStuckOffset = 0; - // Scroll to the passed in position, i.e. a header was clicked and in a scroll to state - // rather than a collapsable one (see RoomSubList.isCollapsableOnClick method for details) - if (scrollToPosition !== undefined) { - scrollArea.scrollTop = scrollToPosition; - } - // Stick headers to top and bottom, or free them - Array.prototype.forEach.call(this.stickies, function(sticky, i, stickyWrappers) { - const stickyPosition = sticky.dataset.originalPosition; - const stickyHeight = sticky.dataset.originalHeight; - const stickyHeader = sticky.childNodes[0]; - const topStuckHeight = stickyHeight * i; - const bottomStuckHeight = stickyHeight * (stickyWrappers.length - i); - - if (self.scrollAreaSufficient && stickyPosition < (scrollArea.scrollTop + topStuckHeight)) { - // Top stickies - sticky.dataset.stuck = "top"; - stickyHeader.classList.add("mx_RoomSubList_fixed"); - stickyHeader.style.top = scrollAreaOffset + topStuckHeight + "px"; - // If stuck at top adjust the scroll back down to take account of all the stuck headers - if (scrollToPosition !== undefined && stickyPosition === scrollToPosition) { - scrollStuckOffset = topStuckHeight; - } - } else if (self.scrollAreaSufficient && stickyPosition > ((scrollArea.scrollTop + scrollAreaHeight) - bottomStuckHeight)) { - /// Bottom stickies - sticky.dataset.stuck = "bottom"; - stickyHeader.classList.add("mx_RoomSubList_fixed"); - stickyHeader.style.top = (scrollAreaOffset + scrollAreaHeight) - bottomStuckHeight + "px"; - } else { - // Not sticky - sticky.dataset.stuck = "none"; - stickyHeader.classList.remove("mx_RoomSubList_fixed"); - stickyHeader.style.top = null; - } - }); - // Adjust the scroll to take account of top stuck headers - if (scrollToPosition !== undefined) { - scrollArea.scrollTop -= scrollStuckOffset; - } - }, - - _updateStickyHeaders: function(initialise, scrollToPosition) { - return; - - const self = this; - - if (initialise) { - // Useing setTimeout to ensure that the code is run after the painting - // of the newly rendered object as using requestAnimationFrame caused - // artefacts to appear on screen briefly - window.setTimeout(function() { - self._initAndPositionStickyHeaders(initialise, scrollToPosition); - }); - } else { - this._initAndPositionStickyHeaders(initialise, scrollToPosition); - } - }, - onShowMoreRooms: function() { // kick gemini in the balls to get it to wake up // XXX: uuuuuuugh. From c12368ea48f211f993cf7aba804fabcf70100fc1 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 15:09:58 +0200 Subject: [PATCH 02/12] process RoomSubList props through function before creating them this way, we'll be able to add adjacent resize handles and scroll wrappers --- src/components/views/rooms/RoomList.js | 261 +++++++++++++------------ 1 file changed, 140 insertions(+), 121 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index e161dfe46d..9df1b72400 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -509,131 +509,150 @@ module.exports = React.createClass({ const showEmpty = SettingsStore.getValue('RoomSubList.showEmpty'); const self = this; + + function mapProps(subListsProps) { + return subListsProps.map((props) => { + const {key, label, ... otherProps} = props; + const chosenKey = key || label; + return ; + }); + } + + let subLists = [ + { + list: [], + extraTiles: this._makeGroupInviteTiles(self.props.searchFilter), + label: _t('Community Invites'), + order: "recent", + isInvite: true, + collapsed: self.props.collapsed, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + }, + { + list: self.state.lists['im.vector.fake.invite'], + label: _t('Invites'), + order: "recent", + isInvite: true, + incomingCall: self.state.incomingCall, + collapsed: self.props.collapsed, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + }, + { + list: self.state.lists['m.favourite'], + label: _t('Favourites'), + tagName: "m.favourite", + emptyContent: this._getEmptyContent('m.favourite'), + order: "manual", + incomingCall: self.state.incomingCall, + collapsed: self.props.collapsed, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + }, + { + 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", + incomingCall: self.state.incomingCall, + collapsed: self.props.collapsed, + alwaysShowHeader: true, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + }, + { + 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", + incomingCall: self.state.incomingCall, + collapsed: self.props.collapsed, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + }, + ]; + const tagSubLists = Object.keys(self.state.lists) + .filter((tagName) => { + return !tagName.match(STANDARD_TAGS_REGEX); + }).map((tagName) => { + return { + list: self.state.lists[tagName], + key: tagName, + label: labelForTagName(tagName), + tagName: tagName, + emptyContent: this._getEmptyContent(tagName), + order: "manual", + incomingCall: self.state.incomingCall, + collapsed: self.props.collapsed, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + }; + }); + subLists = subLists.concat(tagSubLists); + subLists = subLists.concat([ + { + list: self.state.lists['m.lowpriority'], + label: _t('Low priority'), + tagName: "m.lowpriority", + emptyContent: this._getEmptyContent('m.lowpriority'), + order: "recent", + incomingCall: self.state.incomingCall, + collapsed: self.props.collapsed, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + }, + { + list: self.state.lists['im.vector.fake.archived'], + emptyContent: self.props.collapsed ? + null : +
+
+ { _t('You have no historical rooms') } +
+
, + label: _t('Historical'), + order: "recent", + collapsed: self.props.collapsed, + alwaysShowHeader: true, + startAsHidden: true, + showSpinner: self.state.isLoadingLeftRooms, + onHeaderClick: self.onArchivedHeaderClick, + incomingCall: self.state.incomingCall, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + }, + { + list: self.state.lists['m.server_notice'], + label: _t('System Alerts'), + tagName: "m.lowpriority", + order: "recent", + incomingCall: self.state.incomingCall, + collapsed: self.props.collapsed, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: false, + }, + ]); + + const subListComponents = mapProps(subLists); + return (
- - - - - - - - - - - { Object.keys(self.state.lists).map((tagName) => { - if (!tagName.match(STANDARD_TAGS_REGEX)) { - return ; - } - }) } - - - - -
- { _t('You have no historical rooms') } -
-
- } - label={_t('Historical')} - order="recent" - collapsed={self.props.collapsed} - alwaysShowHeader={true} - startAsHidden={true} - showSpinner={self.state.isLoadingLeftRooms} - onHeaderClick={self.onArchivedHeaderClick} - incomingCall={self.state.incomingCall} - searchFilter={self.props.searchFilter} - onShowMoreRooms={self.onShowMoreRooms} - showEmpty={showEmpty} /> - - + { subListComponents } ); From 99982b11643c15806154068acb5dbdbb9a1b605d Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 15:15:56 +0200 Subject: [PATCH 03/12] put repeated props in process function --- src/components/views/rooms/RoomList.js | 51 ++++---------------------- 1 file changed, 7 insertions(+), 44 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 9df1b72400..4e9f0af28e 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -511,6 +511,13 @@ module.exports = React.createClass({ const self = this; function mapProps(subListsProps) { + const defaultProps = { + collapsed: self.props.collapsed, + searchFilter: self.props.searchFilter, + onShowMoreRooms: self.onShowMoreRooms, + showEmpty: showEmpty, + incomingCall: self.state.incomingCall, + }; return subListsProps.map((props) => { const {key, label, ... otherProps} = props; const chosenKey = key || label; @@ -525,21 +532,12 @@ module.exports = React.createClass({ label: _t('Community Invites'), order: "recent", isInvite: true, - collapsed: self.props.collapsed, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: showEmpty, }, { list: self.state.lists['im.vector.fake.invite'], label: _t('Invites'), order: "recent", isInvite: true, - incomingCall: self.state.incomingCall, - collapsed: self.props.collapsed, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: showEmpty, }, { list: self.state.lists['m.favourite'], @@ -547,11 +545,6 @@ module.exports = React.createClass({ tagName: "m.favourite", emptyContent: this._getEmptyContent('m.favourite'), order: "manual", - incomingCall: self.state.incomingCall, - collapsed: self.props.collapsed, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: showEmpty, }, { list: self.state.lists['im.vector.fake.direct'], @@ -560,12 +553,7 @@ module.exports = React.createClass({ emptyContent: this._getEmptyContent('im.vector.fake.direct'), headerItems: this._getHeaderItems('im.vector.fake.direct'), order: "recent", - incomingCall: self.state.incomingCall, - collapsed: self.props.collapsed, alwaysShowHeader: true, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: showEmpty, }, { list: self.state.lists['im.vector.fake.recent'], @@ -573,11 +561,6 @@ module.exports = React.createClass({ emptyContent: this._getEmptyContent('im.vector.fake.recent'), headerItems: this._getHeaderItems('im.vector.fake.recent'), order: "recent", - incomingCall: self.state.incomingCall, - collapsed: self.props.collapsed, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: showEmpty, }, ]; const tagSubLists = Object.keys(self.state.lists) @@ -591,11 +574,6 @@ module.exports = React.createClass({ tagName: tagName, emptyContent: this._getEmptyContent(tagName), order: "manual", - incomingCall: self.state.incomingCall, - collapsed: self.props.collapsed, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: showEmpty, }; }); subLists = subLists.concat(tagSubLists); @@ -606,11 +584,6 @@ module.exports = React.createClass({ tagName: "m.lowpriority", emptyContent: this._getEmptyContent('m.lowpriority'), order: "recent", - incomingCall: self.state.incomingCall, - collapsed: self.props.collapsed, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: showEmpty, }, { list: self.state.lists['im.vector.fake.archived'], @@ -623,26 +596,16 @@ module.exports = React.createClass({ , label: _t('Historical'), order: "recent", - collapsed: self.props.collapsed, alwaysShowHeader: true, startAsHidden: true, showSpinner: self.state.isLoadingLeftRooms, onHeaderClick: self.onArchivedHeaderClick, - incomingCall: self.state.incomingCall, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: showEmpty, }, { list: self.state.lists['m.server_notice'], label: _t('System Alerts'), tagName: "m.lowpriority", order: "recent", - incomingCall: self.state.incomingCall, - collapsed: self.props.collapsed, - searchFilter: self.props.searchFilter, - onShowMoreRooms: self.onShowMoreRooms, - showEmpty: false, }, ]); From c1e602d56f6657390b77d586e6b03fa6589506ae Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 15:19:45 +0200 Subject: [PATCH 04/12] scrollbars and resize handles around room sub lists --- res/css/views/rooms/_RoomList.scss | 25 ++++++++++------------ src/components/views/rooms/RoomList.js | 29 ++++++++++++++++++++------ 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 581016d5ba..30d5272574 100644 --- 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,9 @@ limitations under the License. position: absolute; right: 60px; } + +.mx_RoomList_itemsSubList { + min-height: 80px; + flex: 1; +} + diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 4e9f0af28e..b6585c4e1f 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -34,6 +34,8 @@ import TagOrderStore from '../../../stores/TagOrderStore'; import RoomListStore from '../../../stores/RoomListStore'; import GroupStore from '../../../stores/GroupStore'; +import ResizeHandle from '../elements/ResizeHandle'; +import {Resizer, CollapseDistributor} from '../../../resizer' const HIDE_CONFERENCE_CHANS = true; const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/; @@ -518,11 +520,29 @@ module.exports = React.createClass({ showEmpty: showEmpty, incomingCall: self.state.incomingCall, }; - return subListsProps.map((props) => { + 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); + if (!len) { + return components; //dont render + } const {key, label, ... otherProps} = props; const chosenKey = key || label; - return ; - }); + + let subList = + { } + ; + + if (!isLast) { + return components.concat( + subList, + + ); + } else { + return components.concat(subList); + } + }, []); } let subLists = [ @@ -612,12 +632,9 @@ module.exports = React.createClass({ const subListComponents = mapProps(subLists); return ( -
{ subListComponents }
- ); }, }); From a910f46c5b27e266d697ddb9bafd7b7513add333 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 15:51:01 +0200 Subject: [PATCH 05/12] don't assume config --- src/resizer/distributors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/resizer/distributors.js b/src/resizer/distributors.js index a4dfd9b871..a81925a763 100644 --- a/src/resizer/distributors.js +++ b/src/resizer/distributors.js @@ -27,7 +27,7 @@ class FixedDistributor { this.sizer = sizer; this.item = item; this.beforeOffset = sizer.getItemOffset(this.item); - this.onResized = config.onResized; + this.onResized = config && config.onResized; } resize(offset) { From 39ab3d86bd5c547b5b7bdc2f44851d27163c6d7a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 15:51:22 +0200 Subject: [PATCH 06/12] create sizer that sets item size with flex-basis works with the flex-grow we set initially for the sub lists --- src/components/views/rooms/RoomList.js | 2 +- src/resizer/index.js | 3 ++- src/resizer/sizer.js | 9 ++++++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index b6585c4e1f..bca274dd82 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -35,7 +35,7 @@ import RoomListStore from '../../../stores/RoomListStore'; import GroupStore from '../../../stores/GroupStore'; import ResizeHandle from '../elements/ResizeHandle'; -import {Resizer, CollapseDistributor} from '../../../resizer' +import {Resizer, FixedDistributor, FlexSizer} from '../../../resizer' const HIDE_CONFERENCE_CHANS = true; const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/; diff --git a/src/resizer/index.js b/src/resizer/index.js index f0c5878a1d..df7a839b9b 100644 --- a/src/resizer/index.js +++ b/src/resizer/index.js @@ -14,13 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {Sizer} from "./sizer"; +import {Sizer, FlexSizer} from "./sizer"; import {FixedDistributor, CollapseDistributor, PercentageDistributor} from "./distributors"; import {Resizer} from "./resizer"; module.exports = { Resizer, Sizer, + FlexSizer, FixedDistributor, CollapseDistributor, PercentageDistributor, diff --git a/src/resizer/sizer.js b/src/resizer/sizer.js index b8d1c55dd0..fb4e860d4e 100644 --- a/src/resizer/sizer.js +++ b/src/resizer/sizer.js @@ -97,4 +97,11 @@ class Sizer { } } -module.exports = {Sizer}; +class FlexSizer extends Sizer { + setItemSize(item, size) { + item.style.flexGrow = '0'; + item.style.flexBasis = `${Math.round(size)}px`; + } +} + +module.exports = {Sizer, FlexSizer}; From 01082c8595e39d19def38775c786537fb84d069c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 15:51:58 +0200 Subject: [PATCH 07/12] hook up resizer events --- src/components/views/rooms/RoomList.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index bca274dd82..9978aa25f2 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -135,6 +135,13 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); + this.resizer = new Resizer(this.resizeContainer, FixedDistributor, null, FlexSizer); + this.resizer.setClassNames({ + handle: "mx_ResizeHandle", + vertical: "mx_ResizeHandle_vertical", + reverse: "mx_ResizeHandle_reverse" + }); + this.resizer.attach(); this.mounted = true; }, @@ -632,7 +639,7 @@ module.exports = React.createClass({ const subListComponents = mapProps(subLists); return ( -
+
this.resizeContainer = d} className="mx_RoomList"> { subListComponents }
); From 0b615b21e26cf09963269f633f18036bddcd63a0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 15:53:27 +0200 Subject: [PATCH 08/12] fix lint --- src/components/structures/RoomSubList.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e90934c58f..8d601177bb 100644 --- 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'; @@ -365,9 +363,7 @@ const RoomSubList = React.createClass({ } if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0) { - const subList = this.state.hidden ? undefined : content; - return
{this._getHeaderJsx()} {subList} From d264687796710a850bd106070e8af56bb563d16d Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 16:25:22 +0200 Subject: [PATCH 09/12] don't scroll sub list header --- res/css/structures/_RoomSubList.scss | 11 ++++++++--- res/css/views/rooms/_RoomList.scss | 5 ----- src/components/structures/RoomSubList.js | 22 ++++++++++++++++------ src/components/views/rooms/RoomList.js | 10 +--------- 4 files changed, 25 insertions(+), 23 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 26526f403a..72b8ed4436 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -15,10 +15,15 @@ limitations under the License. */ .mx_RoomSubList { - display: table; - table-layout: fixed; - width: 100%; + min-height: 80px; + flex: 1; + display: flex; + flex-direction: column; +} +.mx_RoomSubList_hidden { + flex: 0; + min-height: unset; } .mx_RoomSubList_resizer { diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 30d5272574..3ce47a4bc6 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -57,8 +57,3 @@ limitations under the License. right: 60px; } -.mx_RoomList_itemsSubList { - min-height: 80px; - flex: 1; -} - diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 8d601177bb..4976d3e211 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -362,12 +362,22 @@ const RoomSubList = React.createClass({ } } - if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0) { - const subList = this.state.hidden ? undefined : content; - return
- {this._getHeaderJsx()} - {subList} -
; + const len = this.state.sortedList.length + this.props.extraTiles.length; + + if (len) { + if (this.state.hidden) { + return
+ {this._getHeaderJsx()} +
; + } else { + const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); + return
+ {this._getHeaderJsx()} + + { content } + +
; + } } else { const Loader = sdk.getComponent("elements.Spinner"); if (this.props.showSpinner) { diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 9978aa25f2..d9913907d1 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -505,13 +505,8 @@ module.exports = React.createClass({ return ret; }, - _collectGemini(gemScroll) { - this._gemScroll = gemScroll; - }, - render: function() { const RoomSubList = sdk.getComponent('structures.RoomSubList'); - const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); // 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. @@ -537,10 +532,7 @@ module.exports = React.createClass({ const {key, label, ... otherProps} = props; const chosenKey = key || label; - let subList = - { } - ; - + let subList = ; if (!isLast) { return components.concat( subList, From 44b92eb0713772fa8d8d893b5719cfaf647eb846 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 16:57:47 +0200 Subject: [PATCH 10/12] set sub list height with flex-basis to make it ... well, grow less --- res/css/structures/_RoomSubList.scss | 3 +-- src/components/structures/RoomSubList.js | 3 ++- src/resizer/sizer.js | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 72b8ed4436..baecc62b2a 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -16,13 +16,12 @@ limitations under the License. .mx_RoomSubList { min-height: 80px; - flex: 1; + flex: 0; display: flex; flex-direction: column; } .mx_RoomSubList_hidden { - flex: 0; min-height: unset; } diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 4976d3e211..e8cf5c4273 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -370,8 +370,9 @@ const RoomSubList = React.createClass({ {this._getHeaderJsx()}
; } else { + const heightEstimation = (len * 40) + 31; const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); - return
+ return
{this._getHeaderJsx()} { content } diff --git a/src/resizer/sizer.js b/src/resizer/sizer.js index fb4e860d4e..4ae35e020a 100644 --- a/src/resizer/sizer.js +++ b/src/resizer/sizer.js @@ -99,7 +99,6 @@ class Sizer { class FlexSizer extends Sizer { setItemSize(item, size) { - item.style.flexGrow = '0'; item.style.flexBasis = `${Math.round(size)}px`; } } From 197dd57461690f490e3f277f26df2b7a74e4eca7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Oct 2018 16:58:23 +0200 Subject: [PATCH 11/12] also set max-height so you can't make a sublist bigger than the content --- src/components/structures/RoomSubList.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e8cf5c4273..8a017c9252 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -371,8 +371,12 @@ const RoomSubList = React.createClass({
; } else { const heightEstimation = (len * 40) + 31; + const style = { + flexBasis: `${heightEstimation}px`, + maxHeight: `${heightEstimation}px`, + }; const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); - return
+ return
{this._getHeaderJsx()} { content } From bfbf41f4311079ef923dac9c504c27c11562f2cd Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 12:09:15 +0200 Subject: [PATCH 12/12] make scrollable room list grab available space without this, in small sizes, it would make the header shrink. --- res/css/structures/_RoomSubList.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index baecc62b2a..4661913b1e 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -131,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;