diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 26526f403a..4661913b1e 100644 --- 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 index 581016d5ba..3ce47a4bc6 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,4 @@ limitations under the License. position: absolute; right: 60px; } + diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e90934c58f..8a017c9252 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'; @@ -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
- {this._getHeaderJsx()} - {subList} -
; + if (len) { + if (this.state.hidden) { + return
+ {this._getHeaderJsx()} +
; + } else { + const heightEstimation = (len * 40) + 31; + const style = { + flexBasis: `${heightEstimation}px`, + maxHeight: `${heightEstimation}px`, + }; + 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 1ab7c4dd3b..d9913907d1 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, 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))$/; @@ -133,15 +135,17 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); - // Initialise the stickyHeaders when the component is created - this._updateStickyHeaders(true); - + 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; }, componentDidUpdate: function() { - // Reinitialise the stickyHeaders when the component is updated - this._updateStickyHeaders(true); this._repositionIncomingCallBox(undefined, false); }, @@ -209,10 +213,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 +224,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 +373,6 @@ module.exports = React.createClass({ _whenScrolling: function(e) { this._hideTooltip(e); this._repositionIncomingCallBox(e, false); - this._updateStickyHeaders(false); }, _hideTooltip: function(e) { @@ -412,106 +406,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. @@ -611,146 +505,135 @@ 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. const showEmpty = SettingsStore.getValue('RoomSubList.showEmpty'); 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.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; + + let subList = ; + if (!isLast) { + return components.concat( + subList, + + ); + } else { + return components.concat(subList); + } + }, []); + } + + let subLists = [ + { + list: [], + extraTiles: this._makeGroupInviteTiles(self.props.searchFilter), + label: _t('Community Invites'), + order: "recent", + isInvite: true, + }, + { + list: self.state.lists['im.vector.fake.invite'], + label: _t('Invites'), + order: "recent", + isInvite: true, + }, + { + 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, + }, + { + 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", + }, + ]; + 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", + }; + }); + 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", + }, + { + 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, + startAsHidden: true, + showSpinner: self.state.isLoadingLeftRooms, + onHeaderClick: self.onArchivedHeaderClick, + }, + { + list: self.state.lists['m.server_notice'], + label: _t('System Alerts'), + tagName: "m.lowpriority", + order: "recent", + }, + ]); + + 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} /> - - +
this.resizeContainer = d} className="mx_RoomList"> + { subListComponents }
- ); }, }); 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) { 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..4ae35e020a 100644 --- a/src/resizer/sizer.js +++ b/src/resizer/sizer.js @@ -97,4 +97,10 @@ class Sizer { } } -module.exports = {Sizer}; +class FlexSizer extends Sizer { + setItemSize(item, size) { + item.style.flexBasis = `${Math.round(size)}px`; + } +} + +module.exports = {Sizer, FlexSizer};