OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Make left panel more friendly to new users 

https://github.com/vector-im/riot-web/issues/3609
pull/3804/head
David Baker 2017-04-26 19:00:07 +01:00
parent 4eb0ca63a9
commit 96c867b34b
2 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,6 +82,7 @@ var RoomSubList = React.createClass({
incomingCall: React.PropTypes.object, incomingCall: React.PropTypes.object,
onShowMoreRooms: React.PropTypes.func, onShowMoreRooms: React.PropTypes.func,
searchFilter: React.PropTypes.string, searchFilter: React.PropTypes.string,
emptyContent: React.PropTypes.node, // content shown if the list is empty
}, },
getInitialState: function() { getInitialState: function() {
@ -468,16 +469,18 @@ var RoomSubList = React.createClass({
render: function() { render: function() {
var connectDropTarget = this.props.connectDropTarget; var connectDropTarget = this.props.connectDropTarget;
var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
var TruncatedList = sdk.getComponent('elements.TruncatedList'); var TruncatedList = sdk.getComponent('elements.TruncatedList');
var label = this.props.collapsed ? null : this.props.label; var label = this.props.collapsed ? null : this.props.label;
//console.log("render: " + JSON.stringify(this.state.sortedList)); //console.log("render: " + JSON.stringify(this.state.sortedList));
var target; let content;
if (this.state.sortedList.length == 0 && this.props.editable) { if (this.state.sortedList.length == 0) {
target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>; //content = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
content = this.props.emptyContent;
} else {
content = this.makeRoomTiles();
} }
var roomCount = this.props.list.length > 0 ? this.props.list.length : ''; var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
@ -497,8 +500,7 @@ var RoomSubList = React.createClass({
if (!this.state.hidden) { if (!this.state.hidden) {
subList = <TruncatedList className={ classes } truncateAt={this.state.truncateAt} subList = <TruncatedList className={ classes } truncateAt={this.state.truncateAt}
createOverflowElement={this._createOverflowTile} > createOverflowElement={this._createOverflowTile} >
{ target } { content }
{ this.makeRoomTiles() }
</TruncatedList>; </TruncatedList>;
} }
else { else {

22
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
View File

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2107 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -37,3 +38,24 @@ limitations under the License.
.mx_RoomList_scrollbar .gm-scrollbar.-vertical { .mx_RoomList_scrollbar .gm-scrollbar.-vertical {
z-index: 6; z-index: 6;
} }
.mx_RoomList_greyedSubListLabel {
color: #a2a2a2;
}
.mx_RoomList_emptySubListTip {
font-size: 13px;
margin-left: 18px;
margin-right: 18px;
margin-top: 8px;
margin-bottom: 7px;
padding: 5px;
border: 1px solid $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
}
.mx_RoomList_butonPreview {
float: right;
}