put a load of margin on the bottommost sublist to increase its hit target size and avoid problems when toggling its hiddenness
parent
5494a4ea6c
commit
567176ea6c
|
@ -20,6 +20,11 @@ limitations under the License.
|
||||||
width: 100%;
|
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 {
|
.mx_RoomSubList_label {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #3d3b39;
|
color: #3d3b39;
|
||||||
|
|
|
@ -71,16 +71,6 @@ module.exports = React.createClass({
|
||||||
selectedRoom={ self.props.selectedRoom }
|
selectedRoom={ self.props.selectedRoom }
|
||||||
collapsed={ self.props.collapsed } />
|
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) {
|
{ Object.keys(self.state.lists).map(function(tagName) {
|
||||||
if (!tagName.match(/^m\.(invite|favourite|recent|lowpriority|archived)$/)) {
|
if (!tagName.match(/^m\.(invite|favourite|recent|lowpriority|archived)$/)) {
|
||||||
return <RoomSubList list={ self.state.lists[tagName] }
|
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'] }
|
<RoomSubList list={ self.state.lists['m.archived'] }
|
||||||
label="Historical"
|
label="Historical"
|
||||||
editable={ false }
|
editable={ false }
|
||||||
order="recent"
|
order="recent"
|
||||||
|
bottommost={ true }
|
||||||
activityMap={ self.state.activityMap }
|
activityMap={ self.state.activityMap }
|
||||||
selectedRoom={ self.props.selectedRoom }
|
selectedRoom={ self.props.selectedRoom }
|
||||||
collapsed={ self.props.collapsed } />
|
collapsed={ self.props.collapsed } />
|
||||||
|
|
|
@ -60,6 +60,7 @@ var RoomSubList = React.createClass({
|
||||||
tagName: React.PropTypes.string,
|
tagName: React.PropTypes.string,
|
||||||
editable: React.PropTypes.bool,
|
editable: React.PropTypes.bool,
|
||||||
order: React.PropTypes.string.isRequired,
|
order: React.PropTypes.string.isRequired,
|
||||||
|
bottommost: React.PropTypes.bool,
|
||||||
selectedRoom: React.PropTypes.string.isRequired,
|
selectedRoom: React.PropTypes.string.isRequired,
|
||||||
activityMap: React.PropTypes.object.isRequired,
|
activityMap: React.PropTypes.object.isRequired,
|
||||||
collapsed: React.PropTypes.bool.isRequired
|
collapsed: React.PropTypes.bool.isRequired
|
||||||
|
@ -245,16 +246,22 @@ var RoomSubList = React.createClass({
|
||||||
target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
|
target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.state.sortedList.length > 0 || this.props.editable) {
|
||||||
var subList;
|
var subList;
|
||||||
|
var classes = "mx_RoomSubList" +
|
||||||
|
(this.props.bottommost ? " mx_RoomSubList_bottommost" : "");
|
||||||
|
|
||||||
if (!this.state.hidden) {
|
if (!this.state.hidden) {
|
||||||
subList = <div className="mx_RoomSubList">
|
subList = <div className={ classes }>
|
||||||
{ target }
|
{ target }
|
||||||
{ this.makeRoomTiles() }
|
{ this.makeRoomTiles() }
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
subList = <div className={ classes }>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
if (this.state.sortedList.length > 0 || this.props.editable) {
|
|
||||||
return connectDropTarget(
|
return connectDropTarget(
|
||||||
<div>
|
<div>
|
||||||
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }
|
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }
|
||||||
|
|
Loading…
Reference in New Issue