skin RoomDropTarget correctly

src/skins/vector/css/hide.css

@@ -1,4 +1,3 @@
-.mx_RoomDropTarget,
 .mx_RoomSettings_encrypt,
 .mx_CreateRoom_encrypt,
 .mx_RightPanel_filebutton

src/skins/vector/css/molecules/RoomDropTarget.css

@@ -16,12 +16,29 @@ limitations under the License.
 
 .mx_RoomDropTarget {
     font-size: 14px;
-    text-align: center;
+    margin-left: 10px;
-    margin-left: 8px;
+    margin-right: 15px;
-    margin-right: 8px;
+    padding-top: 5px;
-    padding-top: 16px;
+    padding-bottom: 5px;
-    padding-bottom: 16px;
+    border: 1px dashed #76cfa6;
-    background-color: #fbfbfb;
+    color: #454545;
-    border: 1px dashed #d7d7d7;
+    background-color: rgba(255,255,255,0.5);
-    border-radius: 8px;
+    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;
 }

src/skins/vector/css/molecules/RoomTile.css

@@ -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;
+    color: rgba(69, 69, 69, 0.8);
-    opacity: 0.8;
 }
 
 .mx_RoomTile_invite {
-    opacity: 0.5;
+    color: rgba(69, 69, 69, 0.5);
-    font-weight: normal;
 }
 
 .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;

src/skins/vector/css/organisms/LeftPanel.css

@@ -57,8 +57,10 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    -webkit-flex: 0 0 126px;
+    -webkit-flex: 0 0 140px;
-    flex: 0 0 126px;
+    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%;
 }
 

src/skins/vector/css/organisms/RoomList.css

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_RoomList {
     padding-top: 24px;
+    padding-bottom: 12px;
 }
 
 .mx_RoomList_expandButton {

src/skins/vector/views/molecules/RoomDropTarget.js

@@ -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>
         );
     }

src/skins/vector/views/molecules/RoomTile.js

@@ -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) {
+        if (item.targetList.props.order === 'manual') {
-            var roomTile = props.roomSubList.findRoomTile(props.room);
+            if (item.room.roomId !== props.room.roomId) {
-            props.roomSubList.moveRoomTile(item.room, roomTile.index);
+                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();
+            }
         }
     },
 };

src/skins/vector/views/organisms/RoomList.js

@@ -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'] }
+                <RoomSubList list={ this.state.lists['hidden'] }
-                             label="Others"
+                             label="Hidden"
-                             tagname="secondary"
+                             tagname="hidden"
+                             verb="hide"
                              editable={ true }
                              order="recent"
                              activityMap={ this.state.activityMap }

src/skins/vector/views/organisms/RoomSubList.js

@@ -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>