diff --git a/src/component-index.js b/src/component-index.js index dfe549930a..a2ee1ad4eb 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -48,8 +48,7 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader'); module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator'); module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp'); -module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile'); -module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView'); +module.exports.components['views.rooms.DNDRoomTile'] = require('./components/views/rooms/DNDRoomTile'); module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget'); module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip'); module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar'); diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 27ae2924f2..77493b17ca 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -30,6 +30,7 @@ module.exports = React.createClass({ getInitialState: function() { return({ + directoryHover : false, roomsHover : false, peopleHover : false, settingsHover : false, @@ -37,8 +38,20 @@ module.exports = React.createClass({ }, // Room events + onDirectoryClick: function() { + dis.dispatch({ action: 'view_room_directory' }); + }, + + onDirectoryMouseEnter: function() { + this.setState({ directoryHover: true }); + }, + + onDirectoryMouseLeave: function() { + this.setState({ directoryHover: false }); + }, + onRoomsClick: function() { - dis.dispatch({action: 'view_create_room'}); + dis.dispatch({ action: 'view_create_room' }); }, onRoomsMouseEnter: function() { @@ -51,7 +64,7 @@ module.exports = React.createClass({ // People events onPeopleClick: function() { - dis.dispatch({action: 'view_create_chat'}); + dis.dispatch({ action: 'view_create_chat' }); }, onPeopleMouseEnter: function() { @@ -64,7 +77,7 @@ module.exports = React.createClass({ // Settings events onSettingsClick: function() { - dis.dispatch({action: 'view_user_settings'}); + dis.dispatch({ action: 'view_user_settings' }); }, onSettingsMouseEnter: function() { @@ -88,9 +101,13 @@ module.exports = React.createClass({ return (
+
+ + { 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 4d6a5dc804..224ff2c635 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 e06af69e89..233fb8bbf1 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 9bd9934ea2..8dce58a3cc 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 4c60881561..0ebbe201d4 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 4dcda646f6..110dcd5b6b 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 ab432a31a9..623d578632 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 12991fc2db..5a71ac28c8 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 fef044162e..9e4162817a 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 0000000000..4be70df0db --- /dev/null +++ b/src/skins/vector/img/icon_person.svg @@ -0,0 +1,23 @@ + + + + 815EF7DE-169A-4322-AE2A-B65CBE91DCED + Created with sketchtool. + + + + + + + + + + + + + + + + + +