Getting click to not collapse expand when header stuck

This commit is contained in:
wmwragg 2016-08-26 14:35:40 +01:00
parent d2937c2aed
commit 5467fd89d8
3 changed files with 49 additions and 40 deletions
src
components/structures
skins/vector/css/vector-web/structures

View File

@ -17,6 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var classNames = require('classnames');
var DropTarget = require('react-dnd').DropTarget;
var sdk = require('matrix-react-sdk')
@ -114,46 +115,54 @@ var RoomSubList = React.createClass({
});
},
isHeaderStuck: function() {
var stuck = this.refs.header.dataset.stuck;
return stuck !== undefined && (stuck === "top" || stuck === "bottom");
},
onClick: function(ev) {
// Collapse and truncation logic
var isHidden = false;
var isTruncatable = this.props.list.length > TRUNCATE_AT;
if (!this.isHeaderStuck()) {
// Collapse and truncation logic
var isHidden = false;
var isTruncatable = this.props.list.length > TRUNCATE_AT;
if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
isHidden = false;
this.setState({
hidden : isHidden,
capTruncate : true,
truncateAt : TRUNCATE_AT
});
} else if ((!this.state.hidden && this.state.capTruncate)
|| (this.state.hidden && (this.state.capTruncate && !isTruncatable)))
{
isHidden = false;
this.setState({
hidden : isHidden,
capTruncate : false,
truncateAt : -1
});
} else if (!this.state.hidden && !this.state.capTruncate) {
isHidden = true;
this.setState({
hidden : isHidden,
capTruncate : true,
truncateAt : TRUNCATE_AT
});
} else {
// Catch any weird states the system gets into
isHidden = false;
this.setState({
hidden : isHidden,
capTruncate : true,
truncateAt : TRUNCATE_AT
});
if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
isHidden = false;
this.setState({
hidden : isHidden,
capTruncate : true,
truncateAt : TRUNCATE_AT
});
} else if ((!this.state.hidden && this.state.capTruncate)
|| (this.state.hidden && (this.state.capTruncate && !isTruncatable)))
{
isHidden = false;
this.setState({
hidden : isHidden,
capTruncate : false,
truncateAt : -1
});
} else if (!this.state.hidden && !this.state.capTruncate) {
isHidden = true;
this.setState({
hidden : isHidden,
capTruncate : true,
truncateAt : TRUNCATE_AT
});
} else {
// Catch any weird states the system gets into
isHidden = false;
this.setState({
hidden : isHidden,
capTruncate : true,
truncateAt : TRUNCATE_AT
});
}
this.props.onShowMoreRooms();
}
this.props.onShowMoreRooms();
this.props.onHeaderClick(isHidden);
ev.persist();
this.props.onHeaderClick(ev, isHidden);
},
tsOfNewestEvent: function(room) {
@ -406,7 +415,7 @@ var RoomSubList = React.createClass({
}
return (
<div className="mx_RoomSubList_labelContainer">
<div className="mx_RoomSubList_labelContainer" ref="header">
<div onClick={ this.onClick } className="mx_RoomSubList_label">
{ this.props.collapsed ? '' : this.props.label }
<div className="mx_RoomSubList_roomCount">{roomCount}</div>

View File

@ -49,6 +49,7 @@ limitations under the License.
flex: 1 1 0;
overflow-y: auto;
z-index: 3;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {

View File

@ -40,14 +40,13 @@ limitations under the License.
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;
/* pointer-events: none; */
}
.collapsed .mx_RoomSubList_label {