gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/structures/RoomSubList.js
View File

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

1
src/skins/vector/css/vector-web/structures/LeftPanel.css
View File

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

3
src/skins/vector/css/vector-web/structures/RoomSubList.css
View File

@ -40,14 +40,13 @@ limitations under the License.
padding-bottom: 6px; padding-bottom: 6px;
cursor: pointer; cursor: pointer;
background-color: rgba(118, 207, 166, 0.2); background-color: rgba(118, 207, 166, 0.2);
z-index: 3;
} }
.mx_RoomSubList_label.mx_RoomSubList_fixed { .mx_RoomSubList_label.mx_RoomSubList_fixed {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 2; z-index: 2;
pointer-events: none; /* pointer-events: none; */
} }
.collapsed .mx_RoomSubList_label { .collapsed .mx_RoomSubList_label {