From 93de2307c19d16501d64961874b142b4e34ad15f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Oct 2015 13:54:38 +0100 Subject: [PATCH] improve collapsed LHS implementation - split the tooltip into its own component; position it with javascript as overflow-y + position absolute = clipping hell; preserve the collapse state between MatrixChat re-renders; fix positioning of the 'show' button; switch to dispatcher for show/hide LHS; remove errant scrollbars --- src/controllers/organisms/RoomList.js | 12 +++++ src/skins/vector/css/molecules/RoomTile.css | 23 +------- .../vector/css/molecules/RoomTooltip.css | 33 ++++++++++++ src/skins/vector/css/organisms/LeftPanel.css | 13 +---- .../vector/css/organisms/RoomDirectory.css | 2 +- src/skins/vector/css/organisms/RoomView.css | 2 +- src/skins/vector/skindex.js | 1 + src/skins/vector/views/molecules/RoomTile.js | 12 ++--- .../vector/views/molecules/RoomTooltip.js | 53 +++++++++++++++++++ src/skins/vector/views/organisms/LeftPanel.js | 20 +++---- src/skins/vector/views/organisms/RoomList.js | 15 ++++-- src/skins/vector/views/pages/MatrixChat.js | 4 +- 12 files changed, 128 insertions(+), 62 deletions(-) create mode 100644 src/skins/vector/css/molecules/RoomTooltip.css create mode 100644 src/skins/vector/views/molecules/RoomTooltip.js diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js index b178fce7..c715faad 100644 --- a/src/controllers/organisms/RoomList.js +++ b/src/controllers/organisms/RoomList.js @@ -52,6 +52,11 @@ module.exports = { case 'call_state': this._recheckCallElement(this.props.selectedRoom); break; + case 'view_tooltip': + this.tooltip = payload.tooltip; + this._repositionTooltip(); + if (this.tooltip) this.tooltip.style.display = 'block'; + break } }, @@ -150,6 +155,13 @@ module.exports = { }); }, + _repositionTooltip: function(e) { + if (this.tooltip && this.tooltip.parentElement) { + var scroll = this.getDOMNode(); + this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.scrollTop) + "px"; + } + }, + makeRoomTiles: function() { var self = this; var RoomTile = sdk.getComponent("molecules.RoomTile"); diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css index 2a8abf58..7ff2ff14 100644 --- a/src/skins/vector/css/molecules/RoomTile.css +++ b/src/skins/vector/css/molecules/RoomTile.css @@ -16,7 +16,7 @@ limitations under the License. .mx_RoomTile { cursor: pointer; - display: table-row; + /* display: table-row; */ color: #818794; } @@ -45,27 +45,6 @@ limitations under the License. padding-right: 16px; } -.mx_RoomTile_tooltip { - border: 1px solid #a9dbf4; - border-radius: 8px; - background-color: #fff; - position: absolute; - z-index: 1000; - margin-top: 6px; - left: 64px; - padding: 6px; -} - -.mx_RoomTile_chevron { - position: absolute; - left: -9px; - top: 8px; -} - -.mx_RoomTile_tooltip { - position: absolute; -} - .collapsed .mx_RoomTile_name { display: none; } diff --git a/src/skins/vector/css/molecules/RoomTooltip.css b/src/skins/vector/css/molecules/RoomTooltip.css new file mode 100644 index 00000000..f45970fe --- /dev/null +++ b/src/skins/vector/css/molecules/RoomTooltip.css @@ -0,0 +1,33 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_RoomTooltip { + display: none; + position: fixed; + border: 1px solid #a9dbf4; + border-radius: 8px; + background-color: #fff; + z-index: 1000; + margin-top: 6px; + left: 64px; + padding: 6px; +} + +.mx_RoomTooltip_chevron { + position: absolute; + left: -9px; + top: 8px; +} diff --git a/src/skins/vector/css/organisms/LeftPanel.css b/src/skins/vector/css/organisms/LeftPanel.css index 6643c33f..3639464f 100644 --- a/src/skins/vector/css/organisms/LeftPanel.css +++ b/src/skins/vector/css/organisms/LeftPanel.css @@ -33,13 +33,6 @@ limitations under the License. cursor: pointer; } -.mx_LeftPanel_showButton { - position: absolute; - top: 18px; - left: 16px; - cursor: pointer; -} - .mx_LeftPanel .mx_RoomList { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; @@ -47,7 +40,7 @@ limitations under the License. -webkit-order: 1; order: 1; - overflow-y: scroll; + overflow-y: auto; -webkit-flex: 1 1 0; flex: 1 1 0; } @@ -69,10 +62,6 @@ limitations under the License. color: #378bb4; } -.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile_avatar { - padding-left: 14px; -} - .mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options { margin-top: 12px; width: 100%; diff --git a/src/skins/vector/css/organisms/RoomDirectory.css b/src/skins/vector/css/organisms/RoomDirectory.css index 793ba5af..21985a25 100644 --- a/src/skins/vector/css/organisms/RoomDirectory.css +++ b/src/skins/vector/css/organisms/RoomDirectory.css @@ -57,7 +57,7 @@ limitations under the License. } .mx_RoomDirectory_tableWrapper { - overflow-y: scroll; + overflow-y: auto; -webkit-flex: 1 1 0; flex: 1 1 0; } diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index e1c589a2..babc5fe9 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -109,7 +109,7 @@ limitations under the License. margin-top: 18px; margin-bottom: 18px; - overflow-y: scroll; + overflow-y: auto; } .mx_RoomView_messageListWrapper { diff --git a/src/skins/vector/skindex.js b/src/skins/vector/skindex.js index dbc161fa..167ee644 100644 --- a/src/skins/vector/skindex.js +++ b/src/skins/vector/skindex.js @@ -57,6 +57,7 @@ skin['molecules.RoomDropTarget'] = require('./views/molecules/RoomDropTarget'); skin['molecules.RoomHeader'] = require('./views/molecules/RoomHeader'); skin['molecules.RoomSettings'] = require('./views/molecules/RoomSettings'); skin['molecules.RoomTile'] = require('./views/molecules/RoomTile'); +skin['molecules.RoomTooltip'] = require('./views/molecules/RoomTooltip'); skin['molecules.SenderProfile'] = require('./views/molecules/SenderProfile'); skin['molecules.ServerConfig'] = require('./views/molecules/ServerConfig'); skin['molecules.UnknownMessageTile'] = require('./views/molecules/UnknownMessageTile'); diff --git a/src/skins/vector/views/molecules/RoomTile.js b/src/skins/vector/views/molecules/RoomTile.js index f43b0023..92ac743f 100644 --- a/src/skins/vector/views/molecules/RoomTile.js +++ b/src/skins/vector/views/molecules/RoomTile.js @@ -71,15 +71,13 @@ module.exports = React.createClass({ } */ - var nameElement; + var label; if (!this.props.collapsed) { - nameElement =
{name}
; + label =
{name}
; } else if (this.state.hover) { - nameElement =
- - { name } -
; + var RoomTooltip = sdk.getComponent("molecules.RoomTooltip"); + label = ; } var RoomAvatar = sdk.getComponent('atoms.RoomAvatar'); @@ -89,7 +87,7 @@ module.exports = React.createClass({ { badge } - { nameElement } + { label } ); } diff --git a/src/skins/vector/views/molecules/RoomTooltip.js b/src/skins/vector/views/molecules/RoomTooltip.js new file mode 100644 index 00000000..61c62908 --- /dev/null +++ b/src/skins/vector/views/molecules/RoomTooltip.js @@ -0,0 +1,53 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use strict'; + +var React = require('react'); +var classNames = require('classnames'); + +var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); + +var sdk = require('matrix-react-sdk') +var dis = require('matrix-react-sdk/lib/dispatcher'); + +module.exports = React.createClass({ + displayName: 'RoomTooltip', + + componentDidMount: function() { + // tell the roomlist about us + dis.dispatch({ + action: 'view_tooltip', + tooltip: this.getDOMNode(), + }); + }, + + componentDidUnmount: function() { + dis.dispatch({ + action: 'view_tooltip', + tooltip: null, + }); + }, + + render: function() { + return ( +
+ + { this.props.room.name } +
+ ); + } +}); diff --git a/src/skins/vector/views/organisms/LeftPanel.js b/src/skins/vector/views/organisms/LeftPanel.js index fbd5d3c1..e1b8e252 100644 --- a/src/skins/vector/views/organisms/LeftPanel.js +++ b/src/skins/vector/views/organisms/LeftPanel.js @@ -18,22 +18,15 @@ limitations under the License. var React = require('react'); var sdk = require('matrix-react-sdk') +var dis = require('matrix-react-sdk/lib/dispatcher'); module.exports = React.createClass({ displayName: 'LeftPanel', - getInitialState: function() { - return { - collapsed: false, - }; - }, - - onShowClick: function() { - this.setState({ collapsed : false }); - }, - onHideClick: function() { - this.setState({ collapsed : true }); + dis.dispatch({ + action: 'hide_left_panel', + }); }, render: function() { @@ -43,9 +36,8 @@ module.exports = React.createClass({ var collapseButton; var classes = "mx_LeftPanel"; - if (this.state.collapsed) { + if (this.props.collapsed) { classes += " collapsed"; - collapseButton = > } else { collapseButton = < @@ -55,7 +47,7 @@ module.exports = React.createClass({ ); diff --git a/src/skins/vector/views/organisms/RoomList.js b/src/skins/vector/views/organisms/RoomList.js index 2bca90a0..0869fd28 100644 --- a/src/skins/vector/views/organisms/RoomList.js +++ b/src/skins/vector/views/organisms/RoomList.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); var sdk = require('matrix-react-sdk') +var dis = require('matrix-react-sdk/lib/dispatcher'); var RoomListController = require('../../../../controllers/organisms/RoomList') @@ -25,6 +26,12 @@ module.exports = React.createClass({ displayName: 'RoomList', mixins: [RoomListController], + onShowClick: function() { + dis.dispatch({ + action: 'show_left_panel', + }); + }, + render: function() { var CallView = sdk.getComponent('molecules.voip.CallView'); var RoomDropTarget = sdk.getComponent('molecules.RoomDropTarget'); @@ -34,15 +41,17 @@ module.exports = React.createClass({ callElement = } - var recentsLabel = this.props.collapsed ? "" : "Recents"; + var recentsLabel = this.props.collapsed ? + > : + "Recents"; return ( -
+
{callElement}

Favourites

-

{ recentsLabel } 

+

{ recentsLabel }

{this.makeRoomTiles()}
diff --git a/src/skins/vector/views/pages/MatrixChat.js b/src/skins/vector/views/pages/MatrixChat.js index 5c72ff70..688ac96f 100644 --- a/src/skins/vector/views/pages/MatrixChat.js +++ b/src/skins/vector/views/pages/MatrixChat.js @@ -79,7 +79,7 @@ module.exports = React.createClass({
- +
{page_element}
@@ -91,7 +91,7 @@ module.exports = React.createClass({ else { return (
- +
{page_element}