From 7c66d1c8673f0a67282d2cfeeb9e98b94b05af4d Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 16:01:39 +0000 Subject: [PATCH 1/4] Sync typing indication with avatar typing indication Follow the same rules for displaying "is typing" as with the typing avatars. --- src/WhoIsTyping.js | 19 ++++++++++++------- src/components/structures/RoomStatusBar.js | 8 ++++++-- src/components/structures/RoomView.js | 1 + 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js index 8c3838d615..f8e3f1c7fd 100644 --- a/src/WhoIsTyping.js +++ b/src/WhoIsTyping.js @@ -32,17 +32,22 @@ module.exports = { return whoIsTyping; }, - whoIsTypingString: function(room) { - var whoIsTyping = this.usersTypingApartFromMe(room); + whoIsTypingString: function(room, limit) { + const whoIsTyping = this.usersTypingApartFromMe(room); + const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0); if (whoIsTyping.length == 0) { - return null; + return ''; } else if (whoIsTyping.length == 1) { return whoIsTyping[0].name + ' is typing'; + } + const names = whoIsTyping.map(function(m) { + return m.name; + }); + if (othersCount) { + const other = ' other' + (othersCount > 1 ? 's' : ''); + return names.slice(0, limit).join(', ') + ' and ' + othersCount + other + ' are typing'; } else { - var names = whoIsTyping.map(function(m) { - return m.name; - }); - var lastPerson = names.shift(); + const lastPerson = names.pop(); return names.join(', ') + ' and ' + lastPerson + ' are typing'; } } diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index c80c4db7cc..a691196219 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -53,6 +53,10 @@ module.exports = React.createClass({ // more interesting) hasActiveCall: React.PropTypes.bool, + // Number of names to display in typing indication. E.g. set to 3, will + // result in "X, Y, Z and 100 others are typing." + whoIsTypingLimit: React.PropTypes.number, + // callback for when the user clicks on the 'resend all' button in the // 'unsent messages' bar onResendAllClick: React.PropTypes.func, @@ -80,7 +84,7 @@ module.exports = React.createClass({ getInitialState: function() { return { syncState: MatrixClientPeg.get().getSyncState(), - whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room), + whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit), }; }, @@ -127,7 +131,7 @@ module.exports = React.createClass({ onRoomMemberTyping: function(ev, member) { this.setState({ - whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room), + whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit), }); }, diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 8753540e48..b7f05de339 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1531,6 +1531,7 @@ module.exports = React.createClass({ onResize={this.onChildResize} onVisible={this.onStatusBarVisible} onHidden={this.onStatusBarHidden} + whoIsTypingLimit={2} />; } From 9a360a48d21a08df3ee5bea3752a2ba2933d3834 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 16:04:37 +0000 Subject: [PATCH 2/4] Use the same property to limit avatars --- src/components/structures/RoomStatusBar.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index a691196219..59ff3c8f23 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -21,8 +21,6 @@ var WhoIsTyping = require("../../WhoIsTyping"); var MatrixClientPeg = require("../../MatrixClientPeg"); const MemberAvatar = require("../views/avatars/MemberAvatar"); -const TYPING_AVATARS_LIMIT = 2; - const HIDE_DEBOUNCE_MS = 10000; const STATUS_BAR_HIDDEN = 0; const STATUS_BAR_EXPANDED = 1; @@ -198,7 +196,7 @@ module.exports = React.createClass({ if (wantPlaceholder) { return (
- {this._renderTypingIndicatorAvatars(TYPING_AVATARS_LIMIT)} + {this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit)}
); } From 4186a769ca46956c7dae96d2324fb66002ce73e8 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 17:16:26 +0000 Subject: [PATCH 3/4] Default prop for whoIsTypingLimit --- src/components/structures/RoomStatusBar.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index 59ff3c8f23..212d0d5ee6 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -79,6 +79,12 @@ module.exports = React.createClass({ onVisible: React.PropTypes.func, }, + getDefaultProps: function() { + return { + whoIsTypingLimit: 2, + }; + }, + getInitialState: function() { return { syncState: MatrixClientPeg.get().getSyncState(), From a92fff9da7357df35415bfd7cc6bbabdde88396c Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 17:18:56 +0000 Subject: [PATCH 4/4] Fix linting warnings --- src/WhoIsTyping.js | 6 ++++-- src/components/structures/RoomStatusBar.js | 10 ++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js index f8e3f1c7fd..96e76d618b 100644 --- a/src/WhoIsTyping.js +++ b/src/WhoIsTyping.js @@ -34,7 +34,8 @@ module.exports = { whoIsTypingString: function(room, limit) { const whoIsTyping = this.usersTypingApartFromMe(room); - const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0); + const othersCount = limit === undefined ? + 0 : Math.max(whoIsTyping.length - limit, 0); if (whoIsTyping.length == 0) { return ''; } else if (whoIsTyping.length == 1) { @@ -45,7 +46,8 @@ module.exports = { }); if (othersCount) { const other = ' other' + (othersCount > 1 ? 's' : ''); - return names.slice(0, limit).join(', ') + ' and ' + othersCount + other + ' are typing'; + return names.slice(0, limit).join(', ') + ' and ' + + othersCount + other + ' are typing'; } else { const lastPerson = names.pop(); return names.join(', ') + ' and ' + lastPerson + ' are typing'; diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index 212d0d5ee6..3ba73bb181 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -88,7 +88,10 @@ module.exports = React.createClass({ getInitialState: function() { return { syncState: MatrixClientPeg.get().getSyncState(), - whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit), + whoisTypingString: WhoIsTyping.whoIsTypingString( + this.props.room, + this.props.whoIsTypingLimit + ), }; }, @@ -135,7 +138,10 @@ module.exports = React.createClass({ onRoomMemberTyping: function(ev, member) { this.setState({ - whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit), + whoisTypingString: WhoIsTyping.whoIsTypingString( + this.props.room, + this.props.whoIsTypingLimit + ), }); },