From bfa59c6c04ba2f5c9570d3309f6b7f11fb514d0f Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 11:42:57 +0100 Subject: [PATCH 1/8] Increased the width of the query list container to take account of scrollbars --- .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From 09ce3a79ecbba0046a4a030819d91f2ed058805c Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 12:23:50 +0100 Subject: [PATCH 2/8] Added back the Directory listing button, with new tootlip --- src/components/structures/BottomLeftMenu.js | 25 ++++++++++++++++--- .../css/vector-web/structures/LeftPanel.css | 14 +++++++++-- 2 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 27ae2924..77493b17 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/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 12991fc2..3109e595 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -53,7 +53,7 @@ limitations under the License. } .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 { From 18eb9d933058ac310e8a1f120edd9f056c63d607 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 14:36:21 +0100 Subject: [PATCH 3/8] Made sure the z-index was correct for the new little green men --- .../matrix-react-sdk/views/rooms/RoomList.css | 2 +- .../css/vector-web/structures/LeftPanel.css | 2 +- .../css/vector-web/structures/RoomSubList.css | 2 +- src/skins/vector/img/icon_person.svg | 23 +++++++++++++++++++ 4 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 src/skins/vector/img/icon_person.svg 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/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 12991fc2..98b2abd4 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -49,7 +49,7 @@ limitations under the License. flex: 1 1 0; overflow-y: auto; - z-index: 5; + z-index: 6; } .mx_LeftPanel.collapsed .mx_BottomLeftMenu { 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. + + + + + + + + + + + + + + + + + + From cd368004266e6db6cb2a8427666ae81b27859f05 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 14:42:11 +0100 Subject: [PATCH 4/8] New direct message indicator CSS --- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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 2f1da5b2..28145946 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,10 @@ limitations under the License. height: 24px; } +.mx_RoomTile_avatar_container { + position: relative; +} + .mx_RoomTile_avatar { display: inline-block; padding-top: 5px; @@ -47,6 +51,14 @@ limitations under the License. vertical-align: middle; } +.mx_RoomTile_dm { + display: block; + position: absolute; + bottom: 0; + right: -5px; + z-index: 2; +} + .mx_RoomTile_avatar_container:hover:before, .mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before { display: block; From 2476f87e1d3b54d483d640a1268ac2077d4c9ced Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 14:47:26 +0100 Subject: [PATCH 5/8] Positional tweaks for the new Direct Message indicator --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 28145946..9055083c 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 @@ -67,7 +67,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; @@ -80,7 +79,7 @@ limitations under the License. content: ""; border-radius: 40px; background: #4A4A4A; - top: 5px; + bottom: 0; width: 24px; height: 24px; opacity: 0.6; From 965d9aaf47ac985366672001fb1810510b25d430 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 14:56:20 +0100 Subject: [PATCH 6/8] Lowered the Avatar menu background, so the Direct Message indicator is in front of it --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9055083c..29fbd9de 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 @@ -83,7 +83,7 @@ limitations under the License. width: 24px; height: 24px; opacity: 0.6; - z-index: 2; + z-index: 1; } .collapsed .mx_RoomTile_avatar_container:hover:before { From 57804f4e02995b0a4b895a5e18f6d03063e592f1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 9 Sep 2016 16:15:45 +0100 Subject: [PATCH 7/8] Support for common rooms in MemberInfo Renames RoomDNDView to DNDRoomTile which now provides a separate DNDRoomTile component rather than clobberring RoomTile, so we can use a draggable one where we want a draggable one and a non-draggable one where we don't want it to be draggable. RoomTile main is still polluted with DND stuff, but is now optional. Remove BottomLeftMenuTile because it was no longer used in the bottom left menu. Just include the equivalent markup directly in the one place we now use it (in MemberTile in react-sdk). --- src/component-index.js | 3 +- src/components/structures/BottomLeftMenu.js | 1 - src/components/structures/RoomSubList.js | 4 +- .../views/rooms/BottomLeftMenuTile.js | 57 ------------------- .../rooms/{RoomDNDView.js => DNDRoomTile.js} | 8 ++- .../views/rooms/MemberInfo.css | 9 +++ .../matrix-react-sdk/views/rooms/RoomTile.css | 4 ++ 7 files changed, 23 insertions(+), 63 deletions(-) delete mode 100644 src/components/views/rooms/BottomLeftMenuTile.js rename src/components/views/rooms/{RoomDNDView.js => DNDRoomTile.js} (97%) diff --git a/src/component-index.js b/src/component-index.js index dfe54993..a2ee1ad4 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 d36966d2..875d9276 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -46,7 +46,6 @@ module.exports = React.createClass({ }, render: function() { - var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile'); var TintableSvg = sdk.getComponent('elements.TintableSvg'); return (
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 63b34056..651ffae3 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/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css index 4c608815..c05efd26 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,12 @@ limitations under the License. margin-left: 8px; line-height: 23px; } + +.mx_MemberInfo_createRoom { + cursor: pointer; +} + +.mx_MemberInfo_createRoom_label { + width: 160px ! important; +} + 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 25456503..ff302baa 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 @@ -28,6 +28,10 @@ limitations under the License. height: 24px; } +.mx_RightPanel .mx_RoomTile_nameContainer { + width: 170px; +} + .mx_RoomTile_avatar { display: inline-block; padding-top: 5px; From e1c32536ffb99dfaffe1919593b22f846af22c0d Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 9 Sep 2016 19:23:12 +0100 Subject: [PATCH 8/8] Cursor: pointer on member info create room button --- src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css | 1 + 1 file changed, 1 insertion(+) 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 c05efd26..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 @@ -80,5 +80,6 @@ limitations under the License. .mx_MemberInfo_createRoom_label { width: 160px ! important; + cursor: pointer; }