+
+
+ { this.getLabel("Room directory", this.state.directoryHover) }
+
- { this.getLabel("Rooms", this.state.roomsHover) }
+ { this.getLabel("Create new room", this.state.roomsHover) }
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 4d6a5dc8..224ff2c6 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -368,12 +368,12 @@ var RoomSubList = React.createClass({
makeRoomTiles: function() {
var self = this;
- var RoomTile = sdk.getComponent("rooms.RoomTile");
+ var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
return this.state.sortedList.map(function(room) {
var selected = room.roomId == self.props.selectedRoom;
// XXX: is it evil to pass in self as a prop to RoomTile?
return (
- { this.props.label }
;
- }
- else if (this.state.hover) {
- var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
- label =
;
- }
-
- return (
-
-
-
-
- { label }
-
- );
- }
-});
diff --git a/src/components/views/rooms/RoomDNDView.js b/src/components/views/rooms/DNDRoomTile.js
similarity index 97%
rename from src/components/views/rooms/RoomDNDView.js
rename to src/components/views/rooms/DNDRoomTile.js
index e06af69e..233fb8bb 100644
--- a/src/components/views/rooms/RoomDNDView.js
+++ b/src/components/views/rooms/DNDRoomTile.js
@@ -25,6 +25,13 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var sdk = require('matrix-react-sdk');
var RoomTile = require('matrix-react-sdk/lib/components/views/rooms/RoomTile');
+/**
+ * Defines a new Component, DNDRoomTile that wraps RoomTile, making it draggable.
+ * Requires extra props:
+ * roomSubList: React.PropTypes.object.isRequired,
+ * refreshSubList: React.PropTypes.func.isRequired,
+ */
+
/**
* Specifies the drag source contract.
* Only `beginDrag` function is required.
@@ -202,4 +209,3 @@ DragSource('RoomTile', roomTileSource, function(connect, monitor) {
};
})(RoomTile));
-module.exports.replaces = 'RoomTile';
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
index 9bd9934e..8dce58a3 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
@@ -48,7 +48,7 @@ limitations under the License.
.mx_ChatInviteDialog_queryList {
position: absolute;
background-color: #fff;
- width: 470px;
+ width: 485px;
max-height: 116px;
overflow-y: scroll;
border-radius: 3px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
index 4c608815..0ebbe201 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
@@ -73,3 +73,13 @@ limitations under the License.
margin-left: 8px;
line-height: 23px;
}
+
+.mx_MemberInfo_createRoom {
+ cursor: pointer;
+}
+
+.mx_MemberInfo_createRoom_label {
+ width: 160px ! important;
+ cursor: pointer;
+}
+
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
index 4dcda646..110dcd5b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@@ -35,5 +35,5 @@ limitations under the License.
/* Make sure the scrollbar is above the sticky headers from RoomList */
.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
- z-index: 5;
+ z-index: 6;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index ab432a31..623d5786 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -36,6 +36,14 @@ limitations under the License.
height: 24px;
}
+.mx_RightPanel .mx_RoomTile_nameContainer {
+ width: 170px;
+}
+
+.mx_RoomTile_avatar_container {
+ position: relative;
+}
+
.mx_RoomTile_avatar {
display: inline-block;
padding-top: 5px;
@@ -47,6 +55,14 @@ limitations under the License.
vertical-align: middle;
}
+.mx_RoomTile_dm {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ right: -5px;
+ z-index: 2;
+}
+
.mx_RoomTile:hover .mx_RoomTile_avatar_container:before,
.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
display: block;
@@ -55,7 +71,6 @@ limitations under the License.
border-radius: 40px;
background-image: url("img/icons_ellipsis.svg");
background-size: 25px;
- left: 15px;
width: 24px;
height: 24px;
z-index: 4;
@@ -68,11 +83,11 @@ limitations under the License.
content: "";
border-radius: 40px;
background: #4A4A4A;
- top: 5px;
+ bottom: 0;
width: 24px;
height: 24px;
opacity: 0.6;
- z-index: 2;
+ z-index: 1;
}
.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:before {
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index 12991fc2..5a71ac28 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -49,11 +49,11 @@ limitations under the License.
flex: 1 1 0;
overflow-y: auto;
- z-index: 5;
+ z-index: 6;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
- flex: 0 0 120px;
+ flex: 0 0 160px;
}
.mx_LeftPanel .mx_BottomLeftMenu {
@@ -79,6 +79,7 @@ limitations under the License.
pointer-events: none;
}
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.mx_LeftPanel .mx_BottomLeftMenu_people,
.mx_LeftPanel .mx_BottomLeftMenu_settings {
@@ -86,6 +87,7 @@ limitations under the License.
cursor: pointer;
}
+.collapsed .mx_BottomLeftMenu_directory,
.collapsed .mx_BottomLeftMenu_createRoom,
.collapsed .mx_BottomLeftMenu_people,
.collapsed .mx_BottomLeftMenu_settings {
@@ -94,8 +96,16 @@ limitations under the License.
padding-bottom: 3px ! important;
}
+.mx_LeftPanel .mx_BottomLeftMenu_directory {
+ margin-right: 10px;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom {
+ margin-right: 10px;
+}
+
.mx_LeftPanel .mx_BottomLeftMenu_people {
- margin-left: 10px;
+ margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_settings {
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index fef04416..9e416281 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -46,7 +46,7 @@ limitations under the License.
.mx_RoomSubList_label.mx_RoomSubList_fixed {
position: fixed;
top: 0;
- z-index: 4;
+ z-index: 5;
/* pointer-events: none; */
}
diff --git a/src/skins/vector/img/icon_person.svg b/src/skins/vector/img/icon_person.svg
new file mode 100644
index 00000000..4be70df0
--- /dev/null
+++ b/src/skins/vector/img/icon_person.svg
@@ -0,0 +1,23 @@
+
+
+
+ 815EF7DE-169A-4322-AE2A-B65CBE91DCED
+ Created with sketchtool.
+
+
+