From 8842147ec3e54088fd655d1713d0f675acb64095 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 5 Nov 2015 11:21:45 +0000
Subject: [PATCH] skin RoomDropTarget correctly

---
 src/skins/vector/css/hide.css                 |  1 -
 .../vector/css/molecules/RoomDropTarget.css   | 33 ++++++++++++++-----
 src/skins/vector/css/molecules/RoomTile.css   | 14 ++++----
 src/skins/vector/css/organisms/LeftPanel.css  |  8 +++--
 src/skins/vector/css/organisms/RoomList.css   |  1 +
 .../vector/views/molecules/RoomDropTarget.js  |  9 ++---
 src/skins/vector/views/molecules/RoomTile.js  | 21 +++++++++---
 src/skins/vector/views/organisms/RoomList.js  |  8 +++--
 .../vector/views/organisms/RoomSubList.js     | 10 +++++-
 9 files changed, 72 insertions(+), 33 deletions(-)

diff --git a/src/skins/vector/css/hide.css b/src/skins/vector/css/hide.css
index 7d8ee30294..f84a35b313 100644
--- a/src/skins/vector/css/hide.css
+++ b/src/skins/vector/css/hide.css
@@ -1,4 +1,3 @@
-.mx_RoomDropTarget,
 .mx_RoomSettings_encrypt,
 .mx_CreateRoom_encrypt,
 .mx_RightPanel_filebutton
diff --git a/src/skins/vector/css/molecules/RoomDropTarget.css b/src/skins/vector/css/molecules/RoomDropTarget.css
index c42d44995d..549fa609ec 100644
--- a/src/skins/vector/css/molecules/RoomDropTarget.css
+++ b/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: 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;
 }
diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css
index f2c1daadb3..b62552252b 100644
--- a/src/skins/vector/css/molecules/RoomTile.css
+++ b/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;
-    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;
diff --git a/src/skins/vector/css/organisms/LeftPanel.css b/src/skins/vector/css/organisms/LeftPanel.css
index d755b2164e..738b07829d 100644
--- a/src/skins/vector/css/organisms/LeftPanel.css
+++ b/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;
-    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%;
 }
 
diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/organisms/RoomList.css
index 9512354469..7f5e2272cd 100644
--- a/src/skins/vector/css/organisms/RoomList.css
+++ b/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 {
diff --git a/src/skins/vector/views/molecules/RoomDropTarget.js b/src/skins/vector/views/molecules/RoomDropTarget.js
index b1e1507796..c1a2a9548f 100644
--- a/src/skins/vector/views/molecules/RoomDropTarget.js
+++ b/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>
         );
     }
diff --git a/src/skins/vector/views/molecules/RoomTile.js b/src/skins/vector/views/molecules/RoomTile.js
index 383c08d161..ad198694e2 100644
--- a/src/skins/vector/views/molecules/RoomTile.js
+++ b/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) {
-            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();
+            }
         }
     },
 };
diff --git a/src/skins/vector/views/organisms/RoomList.js b/src/skins/vector/views/organisms/RoomList.js
index 81d23867d3..2e46c42fbc 100644
--- a/src/skins/vector/views/organisms/RoomList.js
+++ b/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'] }
-                             label="Others"
-                             tagname="secondary"
+                <RoomSubList list={ this.state.lists['hidden'] }
+                             label="Hidden"
+                             tagname="hidden"
+                             verb="hide"
                              editable={ true }
                              order="recent"
                              activityMap={ this.state.activityMap }
diff --git a/src/skins/vector/views/organisms/RoomSubList.js b/src/skins/vector/views/organisms/RoomSubList.js
index 68d55c7b90..b5655e3739 100644
--- a/src/skins/vector/views/organisms/RoomSubList.js
+++ b/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>