From 775fc971020772c2ee80e0b291b2d1e00b88840a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 14:33:54 +0100 Subject: [PATCH 1/7] Slight refactor to better match current code --- src/components/views/rooms/RoomTile.js | 28 +++----------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index aa83110632..3dccb6ee6a 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -84,6 +84,7 @@ module.exports = React.createClass({ 'mx_RoomTile_selected': this.props.selected, 'mx_RoomTile_unread': this.props.unread, 'mx_RoomTile_unreadNotify': notificationCount > 0, + 'mx_RoomTile_read': !(this.props.highlight || notificationCount > 0), 'mx_RoomTile_highlight': this.props.highlight, 'mx_RoomTile_invited': (me && me.membership == 'invite'), }); @@ -91,11 +92,10 @@ module.exports = React.createClass({ // XXX: We should never display raw room IDs, but sometimes the // room name js sdk gives is undefined (cannot repro this -- k) var name = this.props.room.name || this.props.room.roomId; - name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon + var badge; var badgeContent; - var badgeClasses; if (this.state.badgeHover) { badgeContent = "\u00B7\u00B7\u00B7"; @@ -105,29 +105,7 @@ module.exports = React.createClass({ badgeContent = '\u200B'; } - if (this.props.highlight || notificationCount > 0) { - badgeClasses = "mx_RoomTile_badge"; - } else { - badgeClasses = "mx_RoomTile_badge mx_RoomTile_badge_no_unread"; - } - - badge =
{ badgeContent }
; - - /* - if (this.props.highlight) { - badge =
!
; - } - else if (this.props.unread) { - badge =
1
; - } - var nameCell; - if (badge) { - nameCell =
{name}
{badge}
; - } - else { - nameCell =
{name}
; - } - */ + badge =
{ badgeContent }
; var label; if (!this.props.collapsed) { From 762873350a5489f77e8b256f35a29aeff03a6c64 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 18:20:12 +0100 Subject: [PATCH 2/7] Badge dohickey shown on name hover and badge hover --- src/components/views/rooms/RoomTile.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 3dccb6ee6a..2857a99aa2 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -97,6 +97,11 @@ module.exports = React.createClass({ var badge; var badgeContent; + var badgeClasses = classNames({ + 'mx_RoomTile_badge': true, + 'mx_RoomTile_badgeButton': this.state.badgeHover, + }); + if (this.state.badgeHover) { badgeContent = "\u00B7\u00B7\u00B7"; } else if (this.props.highlight || notificationCount > 0) { @@ -105,7 +110,7 @@ module.exports = React.createClass({ badgeContent = '\u200B'; } - badge =
{ badgeContent }
; + badge =
{ badgeContent }
; var label; if (!this.props.collapsed) { @@ -113,9 +118,9 @@ module.exports = React.createClass({ let nameHTML = emojifyText(name); if (this.props.selected) { name = ; - label =
{ name }
; + label =
{ name }
; } else { - label =
; + label =
; } } else if (this.state.hover) { @@ -138,9 +143,9 @@ module.exports = React.createClass({ var connectDropTarget = this.props.connectDropTarget; return connectDragSource(connectDropTarget( -
+
- +
{ label } { badge } From 922bb0f40204763794c353958632d4ccc794da60 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 18:50:07 +0100 Subject: [PATCH 3/7] +99 badge when notifications are greater the 99 --- src/components/views/rooms/RoomTile.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 2857a99aa2..0012f66306 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -105,7 +105,8 @@ module.exports = React.createClass({ if (this.state.badgeHover) { badgeContent = "\u00B7\u00B7\u00B7"; } else if (this.props.highlight || notificationCount > 0) { - badgeContent = notificationCount ? notificationCount : '!'; + var limitedCount = (notificationCount > 99) ? '+99' : notificationCount; + badgeContent = notificationCount ? limitedCount : '!'; } else { badgeContent = '\u200B'; } From ca75d93434ad840cc2f76f3cd3dfc470b0839fbe Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 11:31:26 +0100 Subject: [PATCH 4/7] Tweaked the offset for the tooltip so that it is next to the element it is tipping --- src/components/views/rooms/RoomList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index aff03182a1..7d41b69567 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -270,7 +270,7 @@ module.exports = React.createClass({ _repositionTooltip: function(e) { if (this.tooltip && this.tooltip.parentElement) { var scroll = ReactDOM.findDOMNode(this); - this.tooltip.style.top = (70 + scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px"; + this.tooltip.style.top = (3 + scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px"; } }, From 6984a55b11a9e87100d19b3e6c43f89c973f99d0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 14:58:09 +0100 Subject: [PATCH 5/7] The tooltip now appears even when not collapsed when hover over the avater, to allow the full name to be shown --- src/components/views/rooms/RoomTile.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 0012f66306..20d0c9824c 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -114,6 +114,7 @@ module.exports = React.createClass({ badge =
{ badgeContent }
; var label; + var tooltip; if (!this.props.collapsed) { var className = 'mx_RoomTile_name' + (this.props.isInvite ? ' mx_RoomTile_invite' : ''); let nameHTML = emojifyText(name); @@ -123,6 +124,11 @@ module.exports = React.createClass({ } else { label =
; } + + if (this.state.hover) { + var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); + tooltip = ; + } } else if (this.state.hover) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); @@ -151,6 +157,7 @@ module.exports = React.createClass({ { label } { badge } { incomingCallBox } + { tooltip }
)); } From e4dd6c8dbeced4604dea6d28970f6d0162fac3fd Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 15:15:24 +0100 Subject: [PATCH 6/7] Browser tooltip being used instead of the HTML styled one. --- src/components/views/rooms/RoomTile.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 20d0c9824c..47d61cf95a 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -120,15 +120,17 @@ module.exports = React.createClass({ let nameHTML = emojifyText(name); if (this.props.selected) { name = ; - label =
{ name }
; + label =
{ name }
; } else { - label =
; + label =
; } + /* if (this.state.hover) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); tooltip = ; } + */ } else if (this.state.hover) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); From 8b8486a8d096b285e2b03032aedf5917afcdfa7d Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 25 Jul 2016 14:39:15 +0100 Subject: [PATCH 7/7] Move from +99 to 99+ for more than 99 messages --- src/components/views/rooms/RoomTile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 47d61cf95a..b39e80cb54 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -105,7 +105,7 @@ module.exports = React.createClass({ if (this.state.badgeHover) { badgeContent = "\u00B7\u00B7\u00B7"; } else if (this.props.highlight || notificationCount > 0) { - var limitedCount = (notificationCount > 99) ? '+99' : notificationCount; + var limitedCount = (notificationCount > 99) ? '99+' : notificationCount; badgeContent = notificationCount ? limitedCount : '!'; } else { badgeContent = '\u200B';