From b05f3343e2e336560ab9bc57a58019c2d9bc11bf Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 11 Oct 2015 15:00:43 +0100
Subject: [PATCH] tooltipize BottomLeftMenu too for consistency

---
 src/skins/vector/img/hide.png                 | Bin 1235 -> 1165 bytes
 src/skins/vector/skindex.js                   |   1 +
 .../vector/views/molecules/BottomLeftMenu.js  |  34 +++++-----
 .../views/molecules/BottomLeftMenuTile.js     |  60 ++++++++++++++++++
 src/skins/vector/views/molecules/RoomTile.js  |   2 +-
 .../vector/views/molecules/RoomTooltip.js     |  30 ++++++---
 src/skins/vector/views/organisms/LeftPanel.js |   2 +-
 7 files changed, 98 insertions(+), 31 deletions(-)
 create mode 100644 src/skins/vector/views/molecules/BottomLeftMenuTile.js

diff --git a/src/skins/vector/img/hide.png b/src/skins/vector/img/hide.png
index 31604589afb230f0035d9b405768a5f345031a4a..c5aaf0dd0def9ce594a1bb8d9538aebba69039b4 100644
GIT binary patch
delta 333
zcmV-T0kZzn35^Mm83+ad006o0+!3)MG6DfNli&gxlWqbb0XUP80#5-oli&h70XCD6
z0vVGv13`cJZ<=BN008?*L_t(|+G70w|33pMfRR)U3?L2o@Q0s&#Sc9D@gK&=Yr~6g
ze;rrc{l4$Z-~SBm((Ip1McMe7a4Ej`=}-Nl+uy*7<++&|bcI+Yar)uH+g}g1KK>~W
zlF<=hVepmXU}k1w{D)P;!RJ5!AAb1@%(fC^V{m_xVrRq|N?RWO_<!O3Zw8PG4;l7{
z#v*JAScCQF-~U`|?*I6D|H~f+R-o!21<n<!{49}J<Kfe<zv9d9{&?}~$6p4Z-xwm4
zxtt`qnD^rf3?>E=0qIU6%hO~BD_Ic-19yQ*W9|L#4ZncWprjG1#L3OU%=nGu#7Eua
fO_doO2M}NYcmVLzBdu0a00000NkvXXu0mjf)t8}L

delta 403
zcmV;E0c`$_3DXIX83+OZ001_UOGdFFG6DfJli&gxlWqbb0W_140#5-kli&h70Wy=2
z0vVGv13`ZlTYP5#00BWsL_t(|+G6@o1Ylwy0^n5i@z=kD&woPLELc^%`1W_j-S1!i
z{^w$0G!<pTqUheIKWpxP|Mj0io|{=$h!u-T7vBEb`uOL61_m7g7GF6IW+p~-ML<U!
ze)$W?uo7c)lw@OMWJGb(zyJTYJ^Fd!{coVKhYWwau?QQoW{{$vfB&z!|Kt9bKdg)l
zK?<Cz{OE3A`TYCe^1DA?{rJnx%n+f>CCSB1LO7u);$>xuSLIaXVfp%(VbSexw?F>D
zZW22)W27>NfgtPe{|u|{e?R-?7k2BI7#V%!Ic&w*fFZQ~$<KYyegfkayPNDK*?nZ$
zfuUb;?A5Q04}bjq_aD2%4TRYulsMTK8LoWzv+VBoAAkR2_nk5yOPnef4>RM#uYWJU
x`wbGpmC!!?{CnWp4+xtP*?}Y{I%EJ4U;rZEy1KkF*Vq66002ovPDHLkV1h60#r*&P

diff --git a/src/skins/vector/skindex.js b/src/skins/vector/skindex.js
index 167ee6442c..e1476fac18 100644
--- a/src/skins/vector/skindex.js
+++ b/src/skins/vector/skindex.js
@@ -35,6 +35,7 @@ skin['atoms.MessageTimestamp'] = require('./views/atoms/MessageTimestamp');
 skin['atoms.RoomAvatar'] = require('./views/atoms/RoomAvatar');
 skin['atoms.voip.VideoFeed'] = require('./views/atoms/voip/VideoFeed');
 skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
+skin['molecules.BottomLeftMenuTile'] = require('./views/molecules/BottomLeftMenuTile');
 skin['molecules.ChangeAvatar'] = require('./views/molecules/ChangeAvatar');
 skin['molecules.ChangeDisplayName'] = require('./views/molecules/ChangeDisplayName');
 skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword');
diff --git a/src/skins/vector/views/molecules/BottomLeftMenu.js b/src/skins/vector/views/molecules/BottomLeftMenu.js
index 2af3bfc723..2020d29d84 100644
--- a/src/skins/vector/views/molecules/BottomLeftMenu.js
+++ b/src/skins/vector/views/molecules/BottomLeftMenu.js
@@ -17,7 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-
+var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 
 module.exports = React.createClass({
@@ -35,28 +35,24 @@ module.exports = React.createClass({
         dis.dispatch({action: 'view_create_room'});
     },
 
+    getLabel: function(name) {
+        if (!this.props.collapsed) {
+            return <div className="mx_RoomTile_name">{name}</div>
+        }
+        else if (this.state.hover) {
+            var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");
+            return <RoomTooltip name={name}/>;
+        }
+    },
+
     render: function() {
+        var BottomLeftMenuTile = sdk.getComponent('molecules.BottomLeftMenuTile');
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
-                    <div className="mx_RoomTile" onClick={this.onCreateRoomClick}>
-                        <div className="mx_RoomTile_avatar">
-                            <img src="img/create-big.png" alt="Create new room" title="Create new room" width="36" height="36"/>
-                        </div>
-                        <div className="mx_RoomTile_name">Create new room</div>
-                    </div>
-                    <div className="mx_RoomTile" onClick={this.onRoomDirectoryClick}>
-                        <div className="mx_RoomTile_avatar">
-                            <img src="img/directory-big.png" alt="Directory" title="Directory" width="36" height="36"/>
-                        </div>
-                        <div className="mx_RoomTile_name">Directory</div>
-                    </div>
-                    <div className="mx_RoomTile" onClick={this.onSettingsClick}>
-                        <div className="mx_RoomTile_avatar">
-                            <img src="img/settings-big.png" alt="Settings" title="Settings" width="36" height="36"/>
-                        </div>
-                        <div className="mx_RoomTile_name">Settings</div>
-                    </div>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.png" label="Create new room" onClick={ this.onCreateRoomClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.png" label="Directory" onClick={ this.onRoomDirectoryClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.png" label="Settings" onClick={ this.onSettingsClick }/>
                 </div>
             </div>
         );
diff --git a/src/skins/vector/views/molecules/BottomLeftMenuTile.js b/src/skins/vector/views/molecules/BottomLeftMenuTile.js
new file mode 100644
index 0000000000..b0d00c62c0
--- /dev/null
+++ b/src/skins/vector/views/molecules/BottomLeftMenuTile.js
@@ -0,0 +1,60 @@
+/*
+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')
+
+module.exports = React.createClass({
+    displayName: 'BottomLeftMenuTile',
+
+    getInitialState: function() {
+        return( { hover : false });
+    },
+
+    onMouseEnter: function() {
+        this.setState( { hover : true });
+    },
+
+    onMouseLeave: function() {
+        this.setState( { hover : false });
+    },
+
+    render: function() {
+        var label;
+        if (!this.props.collapsed) {
+            label = <div className="mx_RoomTile_name">{ this.props.label }</div>;
+        }
+        else if (this.state.hover) {
+            var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");
+            label = <RoomTooltip bottom={ true } label={ this.props.label }/>;
+        }
+
+        return (
+            <div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
+                <div className="mx_RoomTile_avatar">
+                    <img src={ this.props.img } width="36" height="36"/>
+                </div>
+                { label }
+            </div>
+        );
+    }
+});
diff --git a/src/skins/vector/views/molecules/RoomTile.js b/src/skins/vector/views/molecules/RoomTile.js
index 92ac743f6e..39e7b43c5b 100644
--- a/src/skins/vector/views/molecules/RoomTile.js
+++ b/src/skins/vector/views/molecules/RoomTile.js
@@ -77,7 +77,7 @@ module.exports = React.createClass({
         }
         else if (this.state.hover) {
             var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");
-            label = <RoomTooltip room={this.props.room} ref="roomTooltip"/>;
+            label = <RoomTooltip room={this.props.room}/>;
         }
 
         var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
diff --git a/src/skins/vector/views/molecules/RoomTooltip.js b/src/skins/vector/views/molecules/RoomTooltip.js
index 61c62908df..5116b3a977 100644
--- a/src/skins/vector/views/molecules/RoomTooltip.js
+++ b/src/skins/vector/views/molecules/RoomTooltip.js
@@ -28,25 +28,35 @@ module.exports = React.createClass({
     displayName: 'RoomTooltip',
 
     componentDidMount: function() {
-        // tell the roomlist about us
-        dis.dispatch({
-            action: 'view_tooltip',
-            tooltip: this.getDOMNode(),
-        });
+        if (!this.props.bottom) {
+            // tell the roomlist about us so it can position us
+            dis.dispatch({
+                action: 'view_tooltip',
+                tooltip: this.getDOMNode(),
+            });
+        }
+        else {
+            var tooltip = this.getDOMNode();
+            tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px"; 
+            tooltip.style.display = "block";
+        }
     },
 
     componentDidUnmount: function() {
-        dis.dispatch({
-            action: 'view_tooltip',
-            tooltip: null,
-        });
+        if (!this.props.bottom) {
+            dis.dispatch({
+                action: 'view_tooltip',
+                tooltip: null,
+            });
+        }
     },
 
     render: function() {
+        var label = this.props.room ? this.props.room.name : this.props.label;
         return (
             <div className="mx_RoomTooltip">
                  <img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
-                 { this.props.room.name }
+                 { label }
             </div>
         );
     }
diff --git a/src/skins/vector/views/organisms/LeftPanel.js b/src/skins/vector/views/organisms/LeftPanel.js
index e1b8e252c7..a57f7a0a58 100644
--- a/src/skins/vector/views/organisms/LeftPanel.js
+++ b/src/skins/vector/views/organisms/LeftPanel.js
@@ -48,7 +48,7 @@ module.exports = React.createClass({
                 { collapseButton }
                 <IncomingCallBox />
                 <RoomList selectedRoom={this.props.selectedRoom} collapsed={this.props.collapsed}/>
-                <BottomLeftMenu />
+                <BottomLeftMenu collapsed={this.props.collapsed}/>
             </aside>
         );
     }