diff --git a/src/skins/vector/img/hide.png b/src/skins/vector/img/hide.png index 31604589af..c5aaf0dd0d 100644 Binary files a/src/skins/vector/img/hide.png and b/src/skins/vector/img/hide.png differ 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
{name}
+ } + else if (this.state.hover) { + var RoomTooltip = sdk.getComponent("molecules.RoomTooltip"); + return ; + } + }, + render: function() { + var BottomLeftMenuTile = sdk.getComponent('molecules.BottomLeftMenuTile'); return (
-
-
- Create new room -
-
Create new room
-
-
-
- Directory -
-
Directory
-
-
-
- Settings -
-
Settings
-
+ + +
); 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 =
{ this.props.label }
; + } + else if (this.state.hover) { + var RoomTooltip = sdk.getComponent("molecules.RoomTooltip"); + label = ; + } + + return ( +
+
+ +
+ { label } +
+ ); + } +}); 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 = ; + label = ; } 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 (
- { this.props.room.name } + { label }
); } 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 } - + ); }