From 2c2f689361d1fa12352acd8555d2db831d30ad61 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 2 Aug 2016 14:46:47 +0100 Subject: [PATCH] New design for long names --- src/components/views/rooms/RoomList.js | 6 ++++-- src/components/views/rooms/RoomTile.js | 18 +++++++++++------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index e2bc25653c..8e57ceab9b 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -268,9 +268,11 @@ module.exports = React.createClass({ }, _repositionTooltip: function(e) { - if (this.tooltip && this.tooltip.parentElement) { + // We access the parent of the parent, as the tooltip is inside a container + // Needs refactoring into a better multipurpose tooltip + if (this.tooltip && this.tooltip.parentElement && this.tooltip.parentElement.parentElement) { var scroll = ReactDOM.findDOMNode(this); - this.tooltip.style.top = (3 + scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px"; + this.tooltip.style.top = (3 + scroll.parentElement.offsetTop + this.tooltip.parentElement.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px"; } }, diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index d6b33b9409..5e367ffd80 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -99,7 +99,8 @@ module.exports = React.createClass({ badgeOnMouseEnter: function() { // Only allow none guests to access the context menu - if (!MatrixClientPeg.get().isGuest()) { + // and only change it if it needs to change + if (!MatrixClientPeg.get().isGuest() && !this.state.badgeHover) { this.setState( { badgeHover : true } ); } }, @@ -185,9 +186,9 @@ module.exports = React.createClass({ } if (this.state.areNotifsMuted && !(this.state.badgeHover || this.state.menu)) { - badge =
; + badge =
; } else { - badge =
{ badgeContent }
; + badge =
{ badgeContent }
; } var label; @@ -197,15 +198,16 @@ module.exports = React.createClass({ 'mx_RoomTile_name': true, 'mx_RoomTile_invite': this.props.isInvite, 'mx_RoomTile_mute': this.state.areNotifsMuted, + 'mx_RoomTile_badgeShown': this.props.highlight || notificationCount > 0 || this.state.badgeHover || this.state.menu || this.state.areNotifsMuted, }); let nameHTML = emojifyText(name); if (this.props.selected) { let nameSelected = ; - label =
{ nameSelected }
; + label =
{ nameSelected }
; } else { - label =
; + label =
; } } else if (this.state.hover) { @@ -232,8 +234,10 @@ module.exports = React.createClass({
- { label } - { badge } +
+ { label } + { badge } +
{ incomingCallBox } { tooltip }