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 7d8ee302..f84a35b3 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 c42d4499..549fa609 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 f2c1daad..b6255225 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 d755b216..738b0782 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 95123544..7f5e2272 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 b1e15077..c1a2a954 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 383c08d1..ad198694 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 81d23867..2e46c42f 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 68d55c7b..b5655e37 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>