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 (
- {this.props.text} +
+
+ { this.props.label } +
); } 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({ - ; + } + if (this.state.sortedList.length > 0 || this.props.editable) { return connectDropTarget(

{ this.props.collapsed ? '' : this.props.label }

+ { target } { this.makeRoomTiles() }