From 7df47cbc87a8a6358b72ddc5dce4fb12716cdd9d Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 12 Nov 2018 16:09:51 +0100
Subject: [PATCH 01/11] move typing notifications to WhoIsTypingTile, shown in
 ScrollPanel

---
 res/css/_components.scss                      |   1 +
 res/css/views/rooms/_WhoIsTypingTile.scss     | 123 ++++++++++++++++
 src/components/structures/MessagePanel.js     |   2 +
 src/components/structures/TimelinePanel.js    |   1 +
 src/components/views/rooms/WhoIsTypingTile.js | 134 ++++++++++++++++++
 5 files changed, 261 insertions(+)
 create mode 100644 res/css/views/rooms/_WhoIsTypingTile.scss
 create mode 100644 src/components/views/rooms/WhoIsTypingTile.js

diff --git a/res/css/_components.scss b/res/css/_components.scss
index a230842c77..d56f782ffb 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -108,6 +108,7 @@
 @import "./views/rooms/_SearchableEntityList.scss";
 @import "./views/rooms/_Stickers.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
+@import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_IntegrationsManager.scss";
 @import "./views/settings/_Notifications.scss";
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
new file mode 100644
index 0000000000..1323523618
--- /dev/null
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -0,0 +1,123 @@
+/*
+Copyright 2015, 2016 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.
+*/
+
+.mx_WhoIsTypingTile {
+    margin-left: 65px;
+    min-height: 50px;
+    font-size: 14px;
+}
+
+/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
+.mx_WhoIsTypingTile_indicator {
+    padding-left: 17px;
+    padding-right: 12px;
+    margin-left: -73px;
+    margin-top: 15px;
+    float: left;
+    width: 24px;
+    text-align: center;
+}
+
+.mx_WhoIsTypingTile_placeholderIndicator span {
+    color: $primary-fg-color;
+    opacity: 0.5;
+    position: relative;
+    top: -4px;
+/*
+    animation-duration: 1s;
+    animation-name: bounce;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+*/
+}
+
+.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(1) {
+    animation-delay: 0.3s;
+}
+.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(2) {
+    animation-delay: 0.6s;
+}
+.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(3) {
+    animation-delay: 0.9s;
+}
+
+@keyframes bounce {
+    from {
+        opacity: 0.5;
+        top: 0;
+    }
+
+    to {
+        opacity: 0.2;
+        top: -3px;
+    }
+}
+
+.mx_WhoIsTypingTile_typingIndicatorAvatars {
+    width: 52px;
+    margin-top: -1px;
+}
+
+.mx_WhoIsTypingTile_typingIndicatorAvatars .mx_BaseAvatar_image {
+    margin-right: -12px;
+    border: 1px solid $primary-bg-color;
+}
+
+.mx_WhoIsTypingTile_typingIndicatorAvatars .mx_BaseAvatar_initial {
+    padding-left: 1px;
+    padding-top: 1px;
+}
+
+.mx_WhoIsTypingTile_typingIndicatorRemaining {
+    display: inline-block;
+    color: #acacac;
+    background-color: #ddd;
+    border: 1px solid $primary-bg-color;
+    border-radius: 40px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-size: 0.8em;
+    vertical-align: top;
+    text-align: center;
+    position: absolute;
+}
+
+.mx_WhoIsTypingTile_typingBar {
+    height: 50px;
+    line-height: 50px;
+
+    color: $primary-fg-color;
+    opacity: 0.5;
+    overflow-y: hidden;
+    display: block;
+}
+
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_WhoIsTypingTile {
+        min-height: 40px;
+    }
+
+    .mx_WhoIsTypingTile_indicator {
+        margin-top: 10px;
+    }
+
+    .mx_WhoIsTypingTile_typingBar {
+      height: 40px;
+      line-height: 40px;
+    }
+}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index bbaea617f4..7e3a5941ef 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -637,6 +637,7 @@ module.exports = React.createClass({
 
     render: function() {
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+        const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile");
         const Spinner = sdk.getComponent("elements.Spinner");
         let topSpinner;
         let bottomSpinner;
@@ -666,6 +667,7 @@ module.exports = React.createClass({
                     stickyBottom={this.props.stickyBottom}>
                 { topSpinner }
                 { this._getEventTiles() }
+                <WhoIsTypingTile room={this.props.room} />
                 { bottomSpinner }
             </ScrollPanel>
         );
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 44d14cd7cf..f5dc6c7ef4 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -1154,6 +1154,7 @@ var TimelinePanel = React.createClass({
         );
         return (
             <MessagePanel ref="messagePanel"
+                          room={this.props.timelineSet.room}
                           hidden={this.props.hidden}
                           backPaginating={this.state.backPaginating}
                           forwardPaginating={forwardPaginating}
diff --git a/src/components/views/rooms/WhoIsTypingTile.js b/src/components/views/rooms/WhoIsTypingTile.js
new file mode 100644
index 0000000000..994bd757b3
--- /dev/null
+++ b/src/components/views/rooms/WhoIsTypingTile.js
@@ -0,0 +1,134 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 New Vector 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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t, _td } from '../../../languageHandler';
+import sdk from '../../../index';
+import WhoIsTyping from '../../../WhoIsTyping';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import MemberAvatar from '../avatars/MemberAvatar';
+
+module.exports = React.createClass({
+    displayName: 'WhoIsTypingTile',
+
+    propTypes: {
+        // the room this statusbar is representing.
+        room: PropTypes.object.isRequired,
+
+        // 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: PropTypes.number,
+    },
+
+    getDefaultProps: function() {
+        return {
+            whoIsTypingLimit: 3,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
+        };
+    },
+
+    componentWillMount: function() {
+        // MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
+    },
+
+    componentWillUnmount: function() {
+        // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
+        const client = MatrixClientPeg.get();
+        if (client) {
+            // client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
+        }
+    },
+
+    onRoomMemberTyping: function(ev, member) {
+        this.setState({
+            usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
+        });
+    },
+
+    _renderTypingIndicatorAvatars: function(limit) {
+        let users = this.state.usersTyping;
+
+        let othersCount = 0;
+        if (users.length > limit) {
+            othersCount = users.length - limit + 1;
+            users = users.slice(0, limit - 1);
+        }
+
+        const avatars = users.map((u) => {
+            return (
+                <MemberAvatar
+                    key={u.userId}
+                    member={u}
+                    width={24}
+                    height={24}
+                    resizeMethod="crop"
+                />
+            );
+        });
+
+        if (othersCount > 0) {
+            avatars.push(
+                <span className="mx_WhoIsTypingTile_typingIndicatorRemaining" key="others">
+                    +{ othersCount }
+                </span>,
+            );
+        }
+
+        return avatars;
+    },
+
+    // return suitable content for the main (text) part of the status bar.
+    _getContent: function() {
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
+        const typingString = WhoIsTyping.whoIsTypingString(
+            this.state.usersTyping,
+            this.props.whoIsTypingLimit,
+        );
+        if (typingString) {
+            return (
+                <div className="mx_WhoIsTypingTile_typingBar">
+                    <EmojiText>{ typingString }</EmojiText>
+                </div>
+            );
+        }
+    },
+
+    render: function() {
+        // if (this.state.usersTyping.length === 0) {
+        //     return;
+        // }
+        return (
+            <div className="mx_WhoIsTypingTile">
+                <div className="mx_WhoIsTypingTile_indicator">
+                    <div className="mx_WhoIsTypingTile_typingIndicatorAvatars">
+                        { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
+                    </div>
+                </div>
+                <div role="alert">
+                    { this._getContent() }
+                </div>
+            </div>
+        );
+    },
+});

From 465d767bf18fb77289bbd8d1394caae4bb04fbd9 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 12 Nov 2018 16:10:43 +0100
Subject: [PATCH 02/11] remove typing notifications from status bar

---
 src/components/structures/RoomStatusBar.js | 79 +---------------------
 src/components/structures/RoomView.js      |  1 -
 2 files changed, 2 insertions(+), 78 deletions(-)

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index b4d70f3397..6502fb7c37 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -62,10 +62,6 @@ module.exports = React.createClass({
         // more interesting)
         hasActiveCall: 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: PropTypes.number,
-
         // true if the room is being peeked at. This affects components that shouldn't
         // logically be shown when peeking, such as a prompt to invite people to a room.
         isPeeking: PropTypes.bool,
@@ -103,24 +99,16 @@ module.exports = React.createClass({
         onVisible: PropTypes.func,
     },
 
-    getDefaultProps: function() {
-        return {
-            whoIsTypingLimit: 3,
-        };
-    },
-
     getInitialState: function() {
         return {
             syncState: MatrixClientPeg.get().getSyncState(),
             syncStateData: MatrixClientPeg.get().getSyncStateData(),
-            usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
             unsentMessages: getUnsentMessages(this.props.room),
         };
     },
 
     componentWillMount: function() {
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
-        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
         MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
 
         this._checkSize();
@@ -135,7 +123,6 @@ module.exports = React.createClass({
         const client = MatrixClientPeg.get();
         if (client) {
             client.removeListener("sync", this.onSyncStateChange);
-            client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
             client.removeListener("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
         }
     },
@@ -150,12 +137,6 @@ module.exports = React.createClass({
         });
     },
 
-    onRoomMemberTyping: function(ev, member) {
-        this.setState({
-            usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
-        });
-    },
-
     _onSendWithoutVerifyingClick: function() {
         cryptodevices.getUnknownDevicesForRoom(MatrixClientPeg.get(), this.props.room).then((devices) => {
             cryptodevices.markAllDevicesKnown(MatrixClientPeg.get(), devices);
@@ -199,7 +180,6 @@ module.exports = React.createClass({
     // indicate other sizes.
     _getSize: function() {
         if (this._shouldShowConnectionError() ||
-            (this.state.usersTyping.length > 0) ||
             this.props.numUnreadMessages ||
             !this.props.atEndOfLiveTimeline ||
             this.props.hasActiveCall ||
@@ -213,10 +193,7 @@ module.exports = React.createClass({
     },
 
     // return suitable content for the image on the left of the status bar.
-    //
-    // if wantPlaceholder is true, we include a "..." placeholder if
-    // there is nothing better to put in.
-    _getIndicator: function(wantPlaceholder) {
+    _getIndicator: function() {
         if (this.props.numUnreadMessages) {
             return (
                 <div className="mx_RoomStatusBar_scrollDownIndicator"
@@ -250,49 +227,9 @@ module.exports = React.createClass({
             return null;
         }
 
-        if (wantPlaceholder) {
-            return (
-                <div className="mx_RoomStatusBar_typingIndicatorAvatars">
-                    { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
-                </div>
-            );
-        }
-
         return null;
     },
 
-    _renderTypingIndicatorAvatars: function(limit) {
-        let users = this.state.usersTyping;
-
-        let othersCount = 0;
-        if (users.length > limit) {
-            othersCount = users.length - limit + 1;
-            users = users.slice(0, limit - 1);
-        }
-
-        const avatars = users.map((u) => {
-            return (
-                <MemberAvatar
-                    key={u.userId}
-                    member={u}
-                    width={24}
-                    height={24}
-                    resizeMethod="crop"
-                />
-            );
-        });
-
-        if (othersCount > 0) {
-            avatars.push(
-                <span className="mx_RoomStatusBar_typingIndicatorRemaining" key="others">
-                    +{ othersCount }
-                </span>,
-            );
-        }
-
-        return avatars;
-    },
-
     _shouldShowConnectionError: function() {
         // no conn bar trumps unread count since you can't get unread messages
         // without a connection! (technically may already have some but meh)
@@ -440,18 +377,6 @@ module.exports = React.createClass({
             );
         }
 
-        const typingString = WhoIsTyping.whoIsTypingString(
-            this.state.usersTyping,
-            this.props.whoIsTypingLimit,
-        );
-        if (typingString) {
-            return (
-                <div className="mx_RoomStatusBar_typingBar">
-                    <EmojiText>{ typingString }</EmojiText>
-                </div>
-            );
-        }
-
         if (this.props.hasActiveCall) {
             return (
                 <div className="mx_RoomStatusBar_callBar">
@@ -483,7 +408,7 @@ module.exports = React.createClass({
 
     render: function() {
         const content = this._getContent();
-        const indicator = this._getIndicator(this.state.usersTyping.length > 0);
+        const indicator = this._getIndicator();
 
         return (
             <div className="mx_RoomStatusBar">
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 2d9443efb8..12af0eceac 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1613,7 +1613,6 @@ module.exports = React.createClass({
                 onResize={this.onChildResize}
                 onVisible={this.onStatusBarVisible}
                 onHidden={this.onStatusBarHidden}
-                whoIsTypingLimit={3}
             />;
         }
 

From 20b8994714bb65a23d93e4e7df96afee1926c2ed Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 12 Nov 2018 18:19:18 +0100
Subject: [PATCH 03/11] simplify DOM and style to design

---
 res/css/views/rooms/_WhoIsTypingTile.scss     | 105 ++++++------------
 res/themes/dharma/css/_dharma.scss            |   1 +
 res/themes/light/css/_base.scss               |   2 +-
 src/components/views/rooms/WhoIsTypingTile.js |  36 ++----
 4 files changed, 47 insertions(+), 97 deletions(-)

diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 1323523618..7e62d95f56 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -15,73 +15,31 @@ limitations under the License.
 */
 
 .mx_WhoIsTypingTile {
-    margin-left: 65px;
-    min-height: 50px;
-    font-size: 14px;
+    margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
+    height: 40px;
+    display: flex;
+    align-items: center;
 }
 
 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
-.mx_WhoIsTypingTile_indicator {
-    padding-left: 17px;
-    padding-right: 12px;
-    margin-left: -73px;
-    margin-top: 15px;
-    float: left;
-    width: 24px;
+.mx_WhoIsTypingTile_avatars {
+    flex: 0 0 83px; // 18 + 65
     text-align: center;
 }
 
-.mx_WhoIsTypingTile_placeholderIndicator span {
-    color: $primary-fg-color;
-    opacity: 0.5;
-    position: relative;
-    top: -4px;
-/*
-    animation-duration: 1s;
-    animation-name: bounce;
-    animation-direction: alternate;
-    animation-iteration-count: infinite;
-*/
+.mx_WhoIsTypingTile_avatars > :not(:first-child) {
+    margin-left: -12px;
 }
 
-.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(1) {
-    animation-delay: 0.3s;
-}
-.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(2) {
-    animation-delay: 0.6s;
-}
-.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(3) {
-    animation-delay: 0.9s;
-}
-
-@keyframes bounce {
-    from {
-        opacity: 0.5;
-        top: 0;
-    }
-
-    to {
-        opacity: 0.2;
-        top: -3px;
-    }
-}
-
-.mx_WhoIsTypingTile_typingIndicatorAvatars {
-    width: 52px;
-    margin-top: -1px;
-}
-
-.mx_WhoIsTypingTile_typingIndicatorAvatars .mx_BaseAvatar_image {
-    margin-right: -12px;
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_image {
     border: 1px solid $primary-bg-color;
 }
 
-.mx_WhoIsTypingTile_typingIndicatorAvatars .mx_BaseAvatar_initial {
-    padding-left: 1px;
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
     padding-top: 1px;
 }
 
-.mx_WhoIsTypingTile_typingIndicatorRemaining {
+.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
     display: inline-block;
     color: #acacac;
     background-color: #ddd;
@@ -93,31 +51,34 @@ limitations under the License.
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
-    position: absolute;
 }
 
-.mx_WhoIsTypingTile_typingBar {
-    height: 50px;
-    line-height: 50px;
-
-    color: $primary-fg-color;
-    opacity: 0.5;
-    overflow-y: hidden;
-    display: block;
+.mx_WhoIsTypingTile_label {
+    flex: 1;
+    font-size: 14px;
+    font-weight: 600;
+    color: $eventtile-meta-color;
 }
 
+.mx_WhoIsTypingTile_label > span:after {
+    background-image: url('../../img/spinner.gif');
+    background-size: 16px;
+    background-position: right;
+    background-repeat: no-repeat;
+    right: 0px;
+    top: 0;
+    bottom: 0;
+    margin-left: 10px;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    vertical-align: middle;
+    content: "";
+}
 
 .mx_MatrixChat_useCompactLayout {
+
     .mx_WhoIsTypingTile {
-        min-height: 40px;
-    }
-
-    .mx_WhoIsTypingTile_indicator {
-        margin-top: 10px;
-    }
-
-    .mx_WhoIsTypingTile_typingBar {
-      height: 40px;
-      line-height: 40px;
+        height: 35px;
     }
 }
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 0b53202240..07da833cfb 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -119,6 +119,7 @@ $topleftmenu-color: #212121;
 $roomheader-color: #45474a;
 $roomheader-addroom-color: #929eb4;
 $roomtopic-color: #9fa9ba;
+$eventtile-meta-color: $roomtopic-color;
 
 // ********************
 
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index bee9157279..4c41037229 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -115,7 +115,7 @@ $topleftmenu-color: $primary-fg-color;
 $roomheader-color: $primary-fg-color;
 $roomheader-addroom-color: $primary-bg-color;
 $roomtopic-color: $settings-grey-fg-color;
-
+$eventtile-meta-color: $roomtopic-color;
 // ********************
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);
diff --git a/src/components/views/rooms/WhoIsTypingTile.js b/src/components/views/rooms/WhoIsTypingTile.js
index 994bd757b3..80ac64ec3e 100644
--- a/src/components/views/rooms/WhoIsTypingTile.js
+++ b/src/components/views/rooms/WhoIsTypingTile.js
@@ -48,14 +48,14 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
-        // MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
+        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
     },
 
     componentWillUnmount: function() {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
         const client = MatrixClientPeg.get();
         if (client) {
-            // client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
+            client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
         }
     },
 
@@ -88,7 +88,7 @@ module.exports = React.createClass({
 
         if (othersCount > 0) {
             avatars.push(
-                <span className="mx_WhoIsTypingTile_typingIndicatorRemaining" key="others">
+                <span className="mx_WhoIsTypingTile_remainingAvatarPlaceholder" key="others">
                     +{ othersCount }
                 </span>,
             );
@@ -97,36 +97,24 @@ module.exports = React.createClass({
         return avatars;
     },
 
-    // return suitable content for the main (text) part of the status bar.
-    _getContent: function() {
-        const EmojiText = sdk.getComponent('elements.EmojiText');
-
+    render: function() {
         const typingString = WhoIsTyping.whoIsTypingString(
             this.state.usersTyping,
             this.props.whoIsTypingLimit,
         );
-        if (typingString) {
-            return (
-                <div className="mx_WhoIsTypingTile_typingBar">
-                    <EmojiText>{ typingString }</EmojiText>
-                </div>
-            );
+        if (!typingString) {
+            return (<div className="mx_WhoIsTypingTile_empty" />);
         }
-    },
 
-    render: function() {
-        // if (this.state.usersTyping.length === 0) {
-        //     return;
-        // }
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
         return (
             <div className="mx_WhoIsTypingTile">
-                <div className="mx_WhoIsTypingTile_indicator">
-                    <div className="mx_WhoIsTypingTile_typingIndicatorAvatars">
-                        { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
-                    </div>
+                <div className="mx_WhoIsTypingTile_avatars">
+                    { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
                 </div>
-                <div role="alert">
-                    { this._getContent() }
+                <div className="mx_WhoIsTypingTile_label">
+                    <EmojiText>{ typingString }</EmojiText>
                 </div>
             </div>
         );

From e2c57ba2ef8f1e44172e701417103f71a0abea6b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 12 Nov 2018 18:19:34 +0100
Subject: [PATCH 04/11] add ... to translated string

---
 src/WhoIsTyping.js          | 6 +++---
 src/i18n/strings/en_EN.json | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js
index 0edad8d4a5..9fec74130a 100644
--- a/src/WhoIsTyping.js
+++ b/src/WhoIsTyping.js
@@ -63,16 +63,16 @@ module.exports = {
         if (whoIsTyping.length == 0) {
             return '';
         } else if (whoIsTyping.length == 1) {
-            return _t('%(displayName)s is typing', {displayName: whoIsTyping[0].name});
+            return _t('%(displayName)s is typing ...', {displayName: whoIsTyping[0].name});
         }
         const names = whoIsTyping.map(function(m) {
             return m.name;
         });
         if (othersCount>=1) {
-            return _t('%(names)s and %(count)s others are typing', {names: names.slice(0, limit - 1).join(', '), count: othersCount});
+            return _t('%(names)s and %(count)s others are typing ...', {names: names.slice(0, limit - 1).join(', '), count: othersCount});
         } else {
             const lastPerson = names.pop();
-            return _t('%(names)s and %(lastPerson)s are typing', {names: names.join(', '), lastPerson: lastPerson});
+            return _t('%(names)s and %(lastPerson)s are typing ...', {names: names.join(', '), lastPerson: lastPerson});
         }
     },
 };
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d0b34296bf..765c8d05ab 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -202,10 +202,10 @@
     "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s",
     "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s",
-    "%(displayName)s is typing": "%(displayName)s is typing",
-    "%(names)s and %(count)s others are typing|other": "%(names)s and %(count)s others are typing",
-    "%(names)s and %(count)s others are typing|one": "%(names)s and one other is typing",
-    "%(names)s and %(lastPerson)s are typing": "%(names)s and %(lastPerson)s are typing",
+    "%(displayName)s is typing ...": "%(displayName)s is typing ...",
+    "%(names)s and %(count)s others are typing ...|other": "%(names)s and %(count)s others are typing ...",
+    "%(names)s and %(count)s others are typing ...|one": "%(names)s and one other is typing ...",
+    "%(names)s and %(lastPerson)s are typing ...": "%(names)s and %(lastPerson)s are typing ...",
     "Failure to create room": "Failure to create room",
     "Server may be unavailable, overloaded, or you hit a bug.": "Server may be unavailable, overloaded, or you hit a bug.",
     "Send anyway": "Send anyway",

From 8ddd2dd078ef5b6dd3bcc3173f0fc22798e962f2 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 13 Nov 2018 09:15:16 +0100
Subject: [PATCH 05/11] scroll down when showing typing notif and stuck at
 bottom

---
 src/components/structures/MessagePanel.js     |  9 ++++++++-
 src/components/views/rooms/WhoIsTypingTile.js | 11 ++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 7e3a5941ef..1107be8464 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -631,6 +631,13 @@ module.exports = React.createClass({
         }
     },
 
+    _scrollDownIfAtBottom: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        if (scrollPanel) {
+            scrollPanel.checkScroll();
+        }
+    },
+
     onResize: function() {
         dis.dispatch({ action: 'timeline_resize' }, true);
     },
@@ -667,7 +674,7 @@ module.exports = React.createClass({
                     stickyBottom={this.props.stickyBottom}>
                 { topSpinner }
                 { this._getEventTiles() }
-                <WhoIsTypingTile room={this.props.room} />
+                <WhoIsTypingTile room={this.props.room} onVisible={this._scrollDownIfAtBottom} />
                 { bottomSpinner }
             </ScrollPanel>
         );
diff --git a/src/components/views/rooms/WhoIsTypingTile.js b/src/components/views/rooms/WhoIsTypingTile.js
index 80ac64ec3e..ee383575c4 100644
--- a/src/components/views/rooms/WhoIsTypingTile.js
+++ b/src/components/views/rooms/WhoIsTypingTile.js
@@ -29,7 +29,7 @@ module.exports = React.createClass({
     propTypes: {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,
-
+        onVisible: PropTypes.func,
         // 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: PropTypes.number,
@@ -51,6 +51,15 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
     },
 
+    componentDidUpdate: function(_, prevState) {
+        if (this.props.onVisible &&
+            !prevState.usersTyping.length &&
+            this.state.usersTyping.length)
+        {
+            this.props.onVisible();
+        }
+    },
+
     componentWillUnmount: function() {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
         const client = MatrixClientPeg.get();

From ffc73c59b49d9a8f8c82968559e8b9787ae6f335 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 13 Nov 2018 09:15:43 +0100
Subject: [PATCH 06/11] make padding and DOM more like event tile

---
 res/css/views/rooms/_WhoIsTypingTile.scss     | 4 ++--
 src/components/views/rooms/WhoIsTypingTile.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 7e62d95f56..69492bd120 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_WhoIsTypingTile {
     margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
-    height: 40px;
+    padding-top: 18px;
     display: flex;
     align-items: center;
 }
@@ -79,6 +79,6 @@ limitations under the License.
 .mx_MatrixChat_useCompactLayout {
 
     .mx_WhoIsTypingTile {
-        height: 35px;
+        padding-top: 4px;
     }
 }
diff --git a/src/components/views/rooms/WhoIsTypingTile.js b/src/components/views/rooms/WhoIsTypingTile.js
index ee383575c4..43dfa5e30e 100644
--- a/src/components/views/rooms/WhoIsTypingTile.js
+++ b/src/components/views/rooms/WhoIsTypingTile.js
@@ -118,14 +118,14 @@ module.exports = React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
 
         return (
-            <div className="mx_WhoIsTypingTile">
+            <li className="mx_WhoIsTypingTile">
                 <div className="mx_WhoIsTypingTile_avatars">
                     { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
                 </div>
                 <div className="mx_WhoIsTypingTile_label">
                     <EmojiText>{ typingString }</EmojiText>
                 </div>
-            </div>
+            </li>
         );
     },
 });

From ece549bf7147ff8537202efb1c7932047ec494b9 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 13 Nov 2018 09:17:37 +0100
Subject: [PATCH 07/11] fix lint

---
 src/components/views/rooms/WhoIsTypingTile.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/WhoIsTypingTile.js b/src/components/views/rooms/WhoIsTypingTile.js
index 43dfa5e30e..9d49c35d83 100644
--- a/src/components/views/rooms/WhoIsTypingTile.js
+++ b/src/components/views/rooms/WhoIsTypingTile.js
@@ -17,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import WhoIsTyping from '../../../WhoIsTyping';
 import MatrixClientPeg from '../../../MatrixClientPeg';
@@ -54,8 +53,8 @@ module.exports = React.createClass({
     componentDidUpdate: function(_, prevState) {
         if (this.props.onVisible &&
             !prevState.usersTyping.length &&
-            this.state.usersTyping.length)
-        {
+            this.state.usersTyping.length
+        ) {
             this.props.onVisible();
         }
     },

From 734a7ef6c880f32ea440bff5c6afd9954e50d851 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 13 Nov 2018 09:34:54 +0100
Subject: [PATCH 08/11] fix tests

---
 test/components/structures/MessagePanel-test.js  | 4 +++-
 test/components/structures/TimelinePanel-test.js | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index e7176e2c16..0a51cb8918 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -26,11 +26,13 @@ const sdk = require('matrix-react-sdk');
 
 const MessagePanel = sdk.getComponent('structures.MessagePanel');
 import MatrixClientPeg from '../../../src/MatrixClientPeg';
+import Matrix from 'matrix-js-sdk';
 
 const test_utils = require('test-utils');
 const mockclock = require('mock-clock');
 
 let client;
+const room = new Matrix.Room();
 
 // wrap MessagePanel with a component which provides the MatrixClient in the context.
 const WrappedMessagePanel = React.createClass({
@@ -45,7 +47,7 @@ const WrappedMessagePanel = React.createClass({
     },
 
     render: function() {
-        return <MessagePanel {...this.props} />;
+        return <MessagePanel room={room} {...this.props} />;
     },
 });
 
diff --git a/test/components/structures/TimelinePanel-test.js b/test/components/structures/TimelinePanel-test.js
index ea62d427bc..01ea6d8421 100644
--- a/test/components/structures/TimelinePanel-test.js
+++ b/test/components/structures/TimelinePanel-test.js
@@ -82,6 +82,8 @@ describe('TimelinePanel', function() {
         sandbox = test_utils.stubClient(sandbox);
 
         room = sinon.createStubInstance(jssdk.Room);
+        room.currentState = sinon.createStubInstance(jssdk.RoomState);
+        room.currentState.members = {};
         room.roomId = ROOM_ID;
 
         timelineSet = sinon.createStubInstance(jssdk.EventTimelineSet);

From 741e106565661ed9c7a7b9905e996a3516a4ba2c Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 13 Nov 2018 18:30:14 +0100
Subject: [PATCH 09/11] update animation image and location

---
 res/css/views/rooms/_WhoIsTypingTile.scss |  19 ++++++-------------
 res/img/typing-indicator-2x.gif           | Bin 0 -> 4685 bytes
 2 files changed, 6 insertions(+), 13 deletions(-)
 create mode 100644 res/img/typing-indicator-2x.gif

diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 69492bd120..7dfe6d1d5a 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -60,20 +60,13 @@ limitations under the License.
     color: $eventtile-meta-color;
 }
 
-.mx_WhoIsTypingTile_label > span:after {
-    background-image: url('../../img/spinner.gif');
-    background-size: 16px;
-    background-position: right;
+.mx_WhoIsTypingTile_label > span {
+    background-image: url('../../img/typing-indicator-2x.gif');
+    background-size: 25px;
+    background-position: left bottom;
     background-repeat: no-repeat;
-    right: 0px;
-    top: 0;
-    bottom: 0;
-    margin-left: 10px;
-    width: 16px;
-    height: 16px;
-    display: inline-block;
-    vertical-align: middle;
-    content: "";
+    padding-bottom: 15px;
+    display: block;
 }
 
 .mx_MatrixChat_useCompactLayout {
diff --git a/res/img/typing-indicator-2x.gif b/res/img/typing-indicator-2x.gif
new file mode 100644
index 0000000000000000000000000000000000000000..86e34c7555cc9459c4ef9bb4c2fad86cc17a6e8a
GIT binary patch
literal 4685
zcmb_gcUaR`7e-bE#ZM_N9EC81FlAIgRAh#*H-vx?AR7p>k`NG(83{@lLYOiGge7}w
z1u38i6cuDh6<32O6{}*~$M2UwBU<`Yzvm-=@Xx*Hz4txmJ@-97GjmfNU2k>1?R>xS
z@!h#|XJTSvY;0_Ne4NQ-R#sM4RaKRimX?*3m6w-KO-)TsP7V(b-@0{cWMqWJV%65x
zUb=LtxVX5aq-1(}dS+&3U|?WqXsDr~p|P>CsHmv0u&}$kyQin;%9ShEu3hWx?d|L9
zYi(_9Yinz7Z=ao=Ehs4X@ZkgB|LITq!xn23M+c*mwk8^?>H?d9u+l4nLIS{lWex=A
zntZ}IgJ=RoS@Qfq>FGhds$!<Xx8O)qMJN{2X@YH^oWH0foJ;djpJJ(Ap6)wxPepBP
z!Q1=2{!H&Cm(U<0DLU>fF)21OF(o<m9GP|jk2{?en4KA(lb2f%%(ztKVGeU}WZGJ@
zYHI81jZSj$`8oLfeEfV{fghjHK`AMIQNL6lw;KFVPxa>BNBB8nz(i|Gr)EZ7oam+v
zwg~Rq4yk7|#;dwDKO7K>dWbHNWH98WQxB#zy9%zY=U)fGzdJ)nBwX@?WZsT3Ox^v|
z@cftua%q+W5*x(k-yJ8d7_Rq4YdPl_&CVb17}ordD;RqlU4X`BRV0yRo_IR^b&kJX
z)fq!8A=Ti9dQ?QNyu#0c3#PT_MpUJ$5;wf6u&hD!_9exr1S21GyQM~<73j5MKCDhk
zE-Ye3wAuEl#LDo&#DAm}j!O0U<%?+*1_4-7l6w<-L6|`R%R*WLng^?!WHpmB5%~_K
ztw~$?KV@t`H-RQV0$r17=qg)06iJ|TT!qcPLk~6J<_&h7e<~n(%4jbe)wf93+)*t;
zk-vBw+;jwCpXTD!0-D*?*s-*dJvG*+<hXgG$i_fqo0SxF2g?F#2t?+qo_WiStn)E)
z7bkM#ilu69KYNKPX6Svrc4=Qfo7IF-YA&gCWp4kpAh<^sIHmx;-J~8X0@Bnup@e=n
z_Yj@)IHt&uF3<L?7S4Zhr2jg+Go1CZ=sx=!*3arHMeOXEWXgV+g2qFL!iCRL%Z(^#
zupL5R=jfbM(XjGLB8nf$dm5L-LKQRnS|ssj8k4%;U>+BFjJy#LO=KcoBt7Rlt6lp1
z7i?9QtS5L`#^h-FhWCd6_qX>=MNg^Yq1J@`?VyDjfZ5ADW_$0W{j^@t)o<64A`HtM
zy+kBEkij$Nhm{_sR(8mWsSlU6(6w8%Kd-FSv~kFFZ>OQLHO^2|0;?SqG5eM|*oB+d
z*-=-)znZqL9D2Rq_`5i0MH}`N)&FFP32SL#f!(5oRQ;_q-o4~6a@VSy8(7!^C?hZN
zU5SuKs1<W@?a^mrgInEdjM76ay2%YA{!PDkCtRQRZcZ_=$i%<gD|X(!IRHI-{Hgq+
zv?<9K?-pXsheMhZ9g+;4AnPhy{F8?9MU~Cl^7WOi%&lx3KvAx1ssgpfmCY|I*9r5T
zo7z(EHn-3~CFoQ=AgC6MJQdwmST3W{%tA6ol+DSGZq*8?tbu%L#@v#tdk^W#%{2V6
znI`{0qJ{OL)^xIKh@D?FAr@x>*F&FBLl`TDY3q?PDTfuLKdt{&eC%5O-?MDk{1#np
zPkiUpL>4K(4^h1cj-7ik-KAR;B&aE)A{vA4-`90KOM^J2W>0w8DV=QSI4Yr|f0r?K
zC-5B%G<}~?h^94LI1!wKMQy?yJYs|4cDkrzx)g|<E|HvJz=L0Fn_PH7ge@cpsOfa8
z%exIW6CsF#0kggM=}3gs4Tt37(&~s`^(|W6ttTF?q*hDSn$B2}&2mgI*9Z*dty+3z
zu!ifX*ON|BKd24vGOxj2?GNIcJox>*57IU?wDN8k7=?*Fyl2M-w-)r-4lw}d=oCg?
z{>D&&nB~p*E|aB9ryA|Ic}$}Fzxd&@@;w6q)gPyRORXvr>y_ShsLO{{?yKjX&CHN&
z@^o?gC2h;=s9r?jt8!h`PmR9Kk=o^$<x4M04veWO5;q@+5m(<3R|o^J&FMB^6Fi$=
zOr}%bcUnz%k&<yEwFqE)7R_NBPffAiyvjCnM|1HT+lGZ^=40{|nQ|RSDr4m6Qpdf7
zo(Hc;>h8`D9LU>jU^-DK=V0SV2dEm>C`wK@JRS3q>^0S_<{A&6bGm3pjXRs)8Q+dX
zPOBA}Q0g9EK4+^_H5*Wy&#AS<;u5WNxQ4^X^LVYyV%NI|hbo)*bj~d~8Q(3az-R};
zqk6h!>KUGg!qUK}ts?Et9Eyo>jf*F!K`jjYwB&VzR5I}zylk&OfN<bi_a7)VZ?n`p
zF*=fNTtm&Xq=ilACG`C4J%$Zsw4v3ADzfRr=vwlhavgKM!En{`-)Z4a&<J;k-5IZ#
zSV&xaWKuHKg+zlTTnMET;(|l`skssP_`(2JJ~GBNu{6P_B86Ok-u`nhuu1~wDFLL7
zuB!DRmDe7+f$#3uoOsf;nBJAApzz0?Buyzg((ysoX!*DAWue};u`fH$nYJ_QvP2H5
zc1~+_><O!MJN)@m!i_BKvi6PwE=N~_Rsi)u>-oVhTGPX(OUcy}gfNR;QCGYVldSYh
z#wVNMY~df~mqQOw%#JVnMwmrLMZ^3<<Lsi55ma-Z(;lev=ja!tax$HL);B1QqglNL
zr)>bwJh~$p$400>VYqm7;!9sjZtKhOA{aN`gG&~?lEZH^?^m!N^wEnSWrj3eQZ>7Z
zt7jg&)a6v)W`4J7v||}IdH>1JDt4}UDmG)zl*oX<XvGLC<0u_-$Ky#Fidx4}v<$5J
zhM5#X1NdS-sjG!-^G92`&zzb*r;smj+lB|r^FNAQe22kYy~HvAzgV^11!adblIuPi
z+@>pEJ%(A*%a*(Nc<JqaY^!~Z3&`ILOp3=D2dJS=MH^~q>jsL`i5r4*)GJk$%~h{4
zgm~AB@m)4Yy`~)Xk|EXer%yPvNZI@-`5xIUg}o-dE641VeKJPRW0Z*p-}Gz{&(6YC
zN4X$X>`CJknwiMT!=7uAT5oQ&pGQFzF$ZG2g%Wt`{iIoW+d?*hv$@U6j7W3_aM3LM
zTWND;83$6q!HLT&&n;TLidyF}6iupn(%4QHtJ0B{l;bq<G%eGeu)6q{EjRLX3K5m3
zb@e@y*`ar6<ubTnqLNT2fO{$i8OcLkFB)#ouxL*~b33%XY-c%QT5T(*L#K0l2Ap*e
zpjz0ZpBY;TugbHcYf+)j;U28UHnB4`pduYe7GtF6HEi-pYS*b{cxS%nh$F%_^3WO5
znb@-dClX`a6alK~;fKXH<XR{YNHk!b(cJgRy{p~NZ%*whQoj(FR%EMLHJe)NQTLRe
z(=(dra9FMlGYD&>SksfHtfUnbRHC*=TOM~46~CLZv-8HU0gN8sxwEoCP88PwyI3$q
zMbX;V1g?uc7jFZkJ6I_@Y~#Kq90mx>pmI;*Kq<P<Qg4&Ix0ai-Tb<2Sdfy__icwF5
zb}?#h`G+qGp8xUMvTk>6>)cY+{-cf)-9`aKglPoD(DDo(a@Hq4K?0IYg`3mjE}$bb
zqU|qw`z3^Agwuj9lu*mg8j+E1QTbUcM<+MBduvR<dfo9}dF~|fmB!#J?KKDMqkH0N
zyv7~s30TwUU9)Z9GfqFBYR_X%{4Nx)588TN?;#ypuKA4|w4xOobUUvnV|U5heNNut
zenF$xOLF{q))c6ykAWc{#S7IV+-w6K<+$m8@qBQz^`4KW9TqRTZgAoS=eX2WacUg!
zB9i#%c?ueCh-Wz%aP#868_Hsc8QK%Q0yUvhk;Dpw|4;j(LIiS`_uiIral+i}1-V&e
z|K(Bv<?(_F99IC3)~nOaL0bSb&0P7rna(ww2-lye1<bVN1NE9>cD5julII}@m}ya0
z$hwh&7gC7hP1j@v1#^u5mf8Q=_<zE#*+<1doe8WqQ10woR}Q;t6GiX+XDGn*9+qfa
ziMy3$HGc~{%%3(`>@wg)a(^T(rfyQwvhYH5=SGJXwpy<Qaf?xf>xyuC?WDIII26|4
zC4F&0D7SF_#S*Sxa@<a~Q7o#r0!RLHTjoL|#gB{#j}3ug9Qp8W=I%tQlk@rl2YtQs
z<!$-e`H{DgE2b}+Re4*!a2)2X|F=;aD6(~H|8<1tt^JbE13*#m)_>6#2oUF^1#b&?
Ppx|`9Uc^6-%18eTsD04&

literal 0
HcmV?d00001


From 36bc83ce037ee7c65fd5fdfe167b5b40bebf5ac7 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 14 Nov 2018 10:05:53 +0100
Subject: [PATCH 10/11] copyright

---
 res/css/views/rooms/_WhoIsTypingTile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 7dfe6d1d5a..217a10be8d 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From 3d42ea1c0a7ea190f2939e5e88ab12743319a961 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 14 Nov 2018 10:06:08 +0100
Subject: [PATCH 11/11] use propper ellipsis character

---
 src/WhoIsTyping.js          | 6 +++---
 src/i18n/strings/en_EN.json | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/WhoIsTyping.js b/src/WhoIsTyping.js
index 9fec74130a..78ca77ce5a 100644
--- a/src/WhoIsTyping.js
+++ b/src/WhoIsTyping.js
@@ -63,16 +63,16 @@ module.exports = {
         if (whoIsTyping.length == 0) {
             return '';
         } else if (whoIsTyping.length == 1) {
-            return _t('%(displayName)s is typing ...', {displayName: whoIsTyping[0].name});
+            return _t('%(displayName)s is typing …', {displayName: whoIsTyping[0].name});
         }
         const names = whoIsTyping.map(function(m) {
             return m.name;
         });
         if (othersCount>=1) {
-            return _t('%(names)s and %(count)s others are typing ...', {names: names.slice(0, limit - 1).join(', '), count: othersCount});
+            return _t('%(names)s and %(count)s others are typing …', {names: names.slice(0, limit - 1).join(', '), count: othersCount});
         } else {
             const lastPerson = names.pop();
-            return _t('%(names)s and %(lastPerson)s are typing ...', {names: names.join(', '), lastPerson: lastPerson});
+            return _t('%(names)s and %(lastPerson)s are typing …', {names: names.join(', '), lastPerson: lastPerson});
         }
     },
 };
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 765c8d05ab..713d6a9cba 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -202,10 +202,10 @@
     "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s",
     "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s",
-    "%(displayName)s is typing ...": "%(displayName)s is typing ...",
-    "%(names)s and %(count)s others are typing ...|other": "%(names)s and %(count)s others are typing ...",
-    "%(names)s and %(count)s others are typing ...|one": "%(names)s and one other is typing ...",
-    "%(names)s and %(lastPerson)s are typing ...": "%(names)s and %(lastPerson)s are typing ...",
+    "%(displayName)s is typing …": "%(displayName)s is typing …",
+    "%(names)s and %(count)s others are typing …|other": "%(names)s and %(count)s others are typing …",
+    "%(names)s and %(count)s others are typing …|one": "%(names)s and one other is typing …",
+    "%(names)s and %(lastPerson)s are typing …": "%(names)s and %(lastPerson)s are typing …",
     "Failure to create room": "Failure to create room",
     "Server may be unavailable, overloaded, or you hit a bug.": "Server may be unavailable, overloaded, or you hit a bug.",
     "Send anyway": "Send anyway",