fix for broken UI when too many users are online in a topic

css/base.css

@@ -1052,6 +1052,17 @@ i.search {
   margin-right: 0.2rem;
 }
 
+#topic-users .avatar-box > .material-icons {
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+}
+
+/* Overflow span "+18 more" */
+#topic-users > span {
+  line-height: 2rem;
+  vertical-align: top;
+}
+
 /* Scrollable panel where the messages are shown */
 #messages-panel {
   position: relative;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.15.15-rc1",
+  "version": "0.15.15-rc2",
   "devDependencies": {
     "@babel/core": "^7.3.4",
     "@babel/preset-env": "^7.3.4",

src/config.js

@@ -59,3 +59,7 @@ export const MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
 // Maximum allowed linear dimension of an inline image in pixels. You may want
 // to adjust it to 1600 or 2400 for production.
 export const MAX_IMAGE_DIM = 768;
+
+// Maximum number of online users to be shown in a topic title bar. Others will be
+// hidden under "+X more"
+export const MAX_ONLINE_IN_TOPIC = 4;

src/i18n/en.json

@@ -100,6 +100,7 @@
   "title_all_contacts": "All Contacts",
   "button_ok": "OK",
   "button_cancel": "Cancel",
+  "more_online_members": "+{overflow} more",
   "download_action": "download",
   "label_file_name": "File name:",
   "label_content_type": "Content type:",

src/i18n/ru.json

@@ -131,5 +131,6 @@
   "chat_invitation_ignore": "Игнорировать",
   "chat_invitation_block": "Заблокировать",
   "peers_messaging_disabled": "Чат заблокирован у корреспондента.",
-  "enable_peers_messaging": "Разблокировать."
+  "enable_peers_messaging": "Разблокировать.",
+  "more_online_members": "+еще {overflow}"
 }

src/messages.json

@@ -101,6 +101,7 @@
     "title_all_contacts": "All Contacts",
     "button_ok": "OK",
     "button_cancel": "Cancel",
+    "more_online_members": "+{overflow} more",
     "download_action": "download",
     "label_file_name": "File name:",
     "label_content_type": "Content type:",
@@ -267,6 +268,7 @@
     "chat_invitation_ignore": "Игнорировать",
     "chat_invitation_block": "Заблокировать",
     "peers_messaging_disabled": "Чат заблокирован у корреспондента.",
-    "enable_peers_messaging": "Разблокировать."
+    "enable_peers_messaging": "Разблокировать.",
+    "more_online_members": "+еще {overflow}"
   }
 }

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.15.15-rc1";
+export const PACKAGE_VERSION = "0.15.15-rc2";

src/widgets/group-subs.jsx

@@ -1,6 +1,9 @@
-/* GroupSubs: a list of group subscribers currently online */
+// GroupSubs: a list of group subscribers currently online.
-
+// Show in the topic title bar
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { MAX_ONLINE_IN_TOPIC } from '../config.js'
 
 import LetterTile from './letter-tile.jsx';
 import { makeImageUrl } from '../lib/blob-helpers.js';
@@ -12,7 +15,10 @@ export default class GroupSubs extends React.Component {
 
   render() {
     const usersOnline = [];
-    (this.props.subscribers || []).map((sub) => {
+    const totalCount = (this.props.subscribers || []).length;
+    const countToShow = Math.min(MAX_ONLINE_IN_TOPIC, totalCount);
+
+    (this.props.subscribers || []).some((sub) => {
       usersOnline.push(
         <div className="avatar-box" key={sub.user}>
           <LetterTile
@@ -21,9 +27,17 @@ export default class GroupSubs extends React.Component {
             title={sub.public ? sub.public.fn : null} />
         </div>
       );
+      return usersOnline.length == countToShow;
     });
+
     return (
-      <div id="topic-users">{usersOnline}</div>
+      <div id="topic-users">{usersOnline} {totalCount > countToShow ?
+        <span>
+          <FormattedMessage id="more_online_members" defaultMessage="+{overflow} more"
+              description="Shown in MessagesView title bar when the number of online subscribers exceeds MAX_ONLINE_IN_TOPIC"
+              values={{ overflow: (totalCount - countToShow) }} />
+        </span> : null}
+      </div>
     );
   }
 };