skin RoomDropTarget correctly
This commit is contained in:
Matthew Hodgson
parent
61e55b3ca3
commit
8842147ec3
9 changed files with 72 additions and 33 deletions
|
|
@ -1,4 +1,3 @@
|
|||
.mx_RoomDropTarget,
|
||||
.mx_RoomSettings_encrypt,
|
||||
.mx_CreateRoom_encrypt,
|
||||
.mx_RightPanel_filebutton
|
||||
|
|
|
|||
|
|
@ -16,12 +16,29 @@ limitations under the License.
|
|||
|
||||
.mx_RoomDropTarget {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
background-color: #fbfbfb;
|
||||
border: 1px dashed #d7d7d7;
|
||||
border-radius: 8px;
|
||||
margin-left: 10px;
|
||||
margin-right: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px dashed #76cfa6;
|
||||
color: #454545;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomDropTarget_avatar {
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
float: left;
|
||||
margin-left: 7px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomDropTarget_label {
|
||||
position: relative;
|
||||
margin-top: 3px;
|
||||
line-height: 21px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ limitations under the License.
|
|||
|
||||
.mx_RoomTile_avatar {
|
||||
display: table-cell;
|
||||
background: #eaf5f0;
|
||||
padding-right: 8px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px;
|
||||
|
|
@ -43,13 +42,11 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 16px;
|
||||
color: #454545;
|
||||
opacity: 0.8;
|
||||
color: rgba(69, 69, 69, 0.8);
|
||||
}
|
||||
|
||||
.mx_RoomTile_invite {
|
||||
opacity: 0.5;
|
||||
font-weight: normal;
|
||||
color: rgba(69, 69, 69, 0.5);
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomTile_name {
|
||||
|
|
@ -106,15 +103,16 @@ limitations under the License.
|
|||
|
||||
.mx_RoomTile_unread,
|
||||
.mx_RoomTile_highlight,
|
||||
.mx_RoomTile_invited
|
||||
.mx_RoomTile_selected
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_RoomTile_selected {
|
||||
.mx_RoomTile_selected .mx_RoomTile_name {
|
||||
color: #76cfa6 ! important;
|
||||
}
|
||||
|
||||
.mx_RoomTile.mx_RoomTile_selected {
|
||||
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
|
||||
background: url('img/selected.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
|
|
|
|||
|
|
@ -57,8 +57,10 @@ limitations under the License.
|
|||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
-webkit-flex: 0 0 126px;
|
||||
flex: 0 0 126px;
|
||||
-webkit-flex: 0 0 140px;
|
||||
flex: 0 0 140px;
|
||||
|
||||
background-color: rgba(118,207,166,0.19);
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
|
||||
|
|
@ -66,7 +68,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
|
||||
margin-top: 12px;
|
||||
margin-top: 17px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomList {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomList_expandButton {
|
||||
|
|
|
|||
|
|
@ -18,15 +18,16 @@ limitations under the License.
|
|||
|
||||
var React = require('react');
|
||||
|
||||
//var RoomDropTargetController = require('matrix-react-sdk/lib/controllers/molecules/RoomDropTargetController')
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'RoomDropTarget',
|
||||
// mixins: [RoomDropTargetController],
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_RoomDropTarget">
|
||||
{this.props.text}
|
||||
<div className="mx_RoomDropTarget_avatar"></div>
|
||||
<div className="mx_RoomDropTarget_label">
|
||||
{ this.props.label }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ var sdk = require('matrix-react-sdk')
|
|||
* Only `beginDrag` function is required.
|
||||
*/
|
||||
var roomTileSource = {
|
||||
canDrag: function(props, monitor) {
|
||||
return props.roomSubList.props.editable;
|
||||
},
|
||||
|
||||
beginDrag: function (props) {
|
||||
// Return the data describing the dragged item
|
||||
var item = {
|
||||
|
|
@ -60,8 +64,6 @@ var roomTileSource = {
|
|||
return;
|
||||
}
|
||||
else {
|
||||
// if it's not manual ordering, we'll need to position the tile correctly here according to the right ordering
|
||||
|
||||
// When dropped on a compatible target, actually set the right tags for the new ordering
|
||||
// persistNewOrder(item.room, dropResult.listId);
|
||||
}
|
||||
|
|
@ -86,9 +88,18 @@ var roomTileTarget = {
|
|||
item.targetList = props.roomSubList;
|
||||
}
|
||||
|
||||
if (item.targetList.props.order === 'manual' && item.room.roomId !== props.room.roomId) {
|
||||
var roomTile = props.roomSubList.findRoomTile(props.room);
|
||||
props.roomSubList.moveRoomTile(item.room, roomTile.index);
|
||||
if (item.targetList.props.order === 'manual') {
|
||||
if (item.room.roomId !== props.room.roomId) {
|
||||
var roomTile = props.roomSubList.findRoomTile(props.room);
|
||||
props.roomSubList.moveRoomTile(item.room, roomTile.index);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (!props.roomSubList.findRoomTile(item.room).room) {
|
||||
// add to the list in the right place
|
||||
props.roomSubList.moveRoomTile(item.room, 0);
|
||||
props.roomSubList.sortList();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ module.exports = React.createClass({
|
|||
<RoomSubList list={ this.state.lists['favourites'] }
|
||||
label="Favourites"
|
||||
tagname="favourites"
|
||||
verb="favourite"
|
||||
editable={ true }
|
||||
order="manual"
|
||||
activityMap={ this.state.activityMap }
|
||||
|
|
@ -68,9 +69,10 @@ module.exports = React.createClass({
|
|||
selectedRoom={ this.props.selectedRoom }
|
||||
collapsed={ this.props.collapsed } />
|
||||
|
||||
<RoomSubList list={ this.state.lists['lurking'] }
|
||||
label="Others"
|
||||
tagname="secondary"
|
||||
<RoomSubList list={ this.state.lists['hidden'] }
|
||||
label="Hidden"
|
||||
tagname="hidden"
|
||||
verb="hide"
|
||||
editable={ true }
|
||||
order="recent"
|
||||
activityMap={ this.state.activityMap }
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ var RoomSubList = React.createClass({
|
|||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
this.sortList(this.props.list, this.props.order);
|
||||
this.sortList();
|
||||
},
|
||||
|
||||
componentWillReceiveProps: function(newProps) {
|
||||
|
|
@ -94,6 +94,8 @@ var RoomSubList = React.createClass({
|
|||
},
|
||||
|
||||
sortList: function(list, order) {
|
||||
if (list === undefined) list = this.props.list;
|
||||
if (order === undefined) order = this.props.order;
|
||||
var comparator;
|
||||
list = list || [];
|
||||
if (order === "manual") comparator = this.manualComparator;
|
||||
|
|
@ -178,11 +180,17 @@ var RoomSubList = React.createClass({
|
|||
|
||||
//console.log("render: " + JSON.stringify(this.state.sortedList));
|
||||
|
||||
var target;
|
||||
if (this.state.sortedList.length == 0 && this.props.editable) {
|
||||
target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
|
||||
}
|
||||
|
||||
if (this.state.sortedList.length > 0 || this.props.editable) {
|
||||
return connectDropTarget(
|
||||
<div>
|
||||
<h2 className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }</h2>
|
||||
<div className="mx_RoomSubList">
|
||||
{ target }
|
||||
{ this.makeRoomTiles() }
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue