put a load of margin on the bottommost sublist to increase its hit target size and avoid problems when toggling its hiddenness

This commit is contained in:
Matthew Hodgson 2015-11-08 14:08:17 +00:00
parent 5494a4ea6c
commit 567176ea6c
3 changed files with 33 additions and 19 deletions

View File

@ -20,6 +20,11 @@ limitations under the License.
width: 100%;
}
.mx_RoomSubList_bottommost {
/* XXX: this should really be 100% of the RoomList height, but can't seem to get at it */
min-height: 400px;
}
.mx_RoomSubList_label {
text-transform: uppercase;
color: #3d3b39;

View File

@ -71,16 +71,6 @@ module.exports = React.createClass({
selectedRoom={ self.props.selectedRoom }
collapsed={ self.props.collapsed } />
<RoomSubList list={ self.state.lists['m.lowpriority'] }
label="Low priority"
tagName="m.lowpriority"
verb="demote"
editable={ true }
order="recent"
activityMap={ self.state.activityMap }
selectedRoom={ self.props.selectedRoom }
collapsed={ self.props.collapsed } />
{ Object.keys(self.state.lists).map(function(tagName) {
if (!tagName.match(/^m\.(invite|favourite|recent|lowpriority|archived)$/)) {
return <RoomSubList list={ self.state.lists[tagName] }
@ -97,10 +87,22 @@ module.exports = React.createClass({
}
}) }
<RoomSubList list={ self.state.lists['m.lowpriority'] }
label="Low priority"
tagName="m.lowpriority"
verb="demote"
editable={ true }
order="recent"
bottommost={ self.state.lists['m.archived'].length === 0 }
activityMap={ self.state.activityMap }
selectedRoom={ self.props.selectedRoom }
collapsed={ self.props.collapsed } />
<RoomSubList list={ self.state.lists['m.archived'] }
label="Historical"
editable={ false }
order="recent"
bottommost={ true }
activityMap={ self.state.activityMap }
selectedRoom={ self.props.selectedRoom }
collapsed={ self.props.collapsed } />

View File

@ -60,6 +60,7 @@ var RoomSubList = React.createClass({
tagName: React.PropTypes.string,
editable: React.PropTypes.bool,
order: React.PropTypes.string.isRequired,
bottommost: React.PropTypes.bool,
selectedRoom: React.PropTypes.string.isRequired,
activityMap: React.PropTypes.object.isRequired,
collapsed: React.PropTypes.bool.isRequired
@ -245,16 +246,22 @@ var RoomSubList = React.createClass({
target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
}
var subList;
if (!this.state.hidden) {
subList = <div className="mx_RoomSubList">
{ target }
{ this.makeRoomTiles() }
</div>;
}
if (this.state.sortedList.length > 0 || this.props.editable) {
var subList;
var classes = "mx_RoomSubList" +
(this.props.bottommost ? " mx_RoomSubList_bottommost" : "");
if (!this.state.hidden) {
subList = <div className={ classes }>
{ target }
{ this.makeRoomTiles() }
</div>;
}
else {
subList = <div className={ classes }>
</div>;
}
return connectDropTarget(
<div>
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }