fix for #140, fix for some UI breakage, cosmetic changes

css/base.css

@@ -1446,6 +1446,9 @@ i.search {
   font-size: 2.4rem;
   line-height: 3rem;
 }
+.contact-box .avatar-box > .checkmark.material-icons {
+  line-height: unset;
+}
 .contact-box.small .avatar-box > .material-icons {
   font-size: 1.6rem;
   line-height: 2rem;

src/i18n/ar.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "ليس لديك محادثات<br />¯∖_(ツ)_/¯",
+    "translation": "ليس لديك محادثات\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "إضافة أعضاء",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/de.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "Sie haben keine Unterhaltungen<br />¯∖_(ツ)_/¯",
+    "translation": "Sie haben keine Unterhaltungen\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "Mitglieder hinzufügen",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "You have no chats<br />¯∖_(ツ)_/¯",
+    "translation": "You have no chats\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": false,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "add members",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "No tienes chats<br />¯∖_(ツ)_/¯",
+    "translation": "No tienes chats\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "añadir miembros",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -23,6 +23,10 @@
     "defaultMessage": "Report Conversation",
     "description": "Flat button [Report Group]"
   },
+  "add_members_prompt": {
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field"
+  },
   "alias_already_taken": {
     "defaultMessage": "(already taken)",
     "description": "Error message for alias already taken"
@@ -236,7 +240,7 @@
     "description": "Name of the color schema"
   },
   "contacts_not_found": {
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found"
   },
   "contacts_not_found_short": {

src/i18n/fr.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "Vous n'avez aucune conversation<br />¯∖_(ツ)_/¯",
+    "translation": "Vous n'avez aucune conversation\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "ajouter des membres",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/it.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "Non hai chats<br />¯∖_(ツ)_/¯",
+    "translation": "Non hai chats\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "aggiungi membri",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "채팅이없습니다<br/>¯∖_(ツ)_/¯",
+    "translation": "채팅이없습니다\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "멤버 추가",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "Nu ai contacte salvate<br />¯∖_(ツ)_/¯",
+    "translation": "Nu ai contacte salvate\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "adaugă membri",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "Чатов нет<br />¯∖_(ツ)_/¯",
+    "translation": "Чатов нет\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "добавить участников",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/th.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "ไม่พบแชท <br />¯∖_(ツ)_/¯",
+    "translation": "ไม่พบแชท \n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "เพิ่มสมาชิก",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/uk.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "Чатів немає<br />¯∖_(ツ)_/¯",
+    "translation": "Чатів немає\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "додати учасників",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "您沒有任何對話<br />¯∖_(ツ)_/¯",
+    "translation": "您沒有任何對話\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "新增成員",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -259,8 +259,8 @@
     "obsolete": false
   },
   "contacts_not_found": {
-    "translation": "你尚无会话<br />¯∖_(ツ)_/¯",
+    "translation": "你尚无会话\n¯∖_(ツ)_/¯",
-    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "defaultMessage": "You have no chats\\n¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found",
     "missing": false,
     "obsolete": false
@@ -1969,5 +1969,12 @@
     "description": "Label for organization",
     "missing": true,
     "obsolete": true
+  },
+  "add_members_prompt": {
+    "translation": "添加成员",
+    "defaultMessage": "add members",
+    "description": "Placeholder in group members input field",
+    "missing": false,
+    "obsolete": false
   }
 }

src/views/contacts-view.jsx

@@ -91,7 +91,7 @@ export default class ContactsView extends React.Component {
   render() {
     return (
       <FormattedMessage id="contacts_not_found"
-        defaultMessage="You have no chats<br />¯∖_(ツ)_/¯"
+        defaultMessage="You have no chats\n¯∖_(ツ)_/¯"
         description="HTML message shown in ContactList when no contacts are found">{
         (no_contacts) => <ContactList
           tinode={this.props.tinode}

src/widgets/chip-input.jsx

@@ -23,7 +23,6 @@ export default class ChipInput extends React.Component {
 
   static deriveStateFromProps(props) {
     return {
-      placeholder: props.chips ? '' : props.prompt,
       sortedChips: ChipInput.sortChips(props.chips, props.staticMembers),
       chipIndex: ChipInput.indexChips(props.chips)
     };
@@ -137,7 +136,7 @@ export default class ChipInput extends React.Component {
       <div className={className}>
         {chips}
         <input type="text"
-          placeholder={this.state.placeholder}
+          placeholder={this.props.prompt}
           onChange={this.handleTextInput}
           onFocus={this.handleFocusGained}
           onBlur={this.handleFocusLost}

src/widgets/contact-list.jsx

@@ -25,7 +25,7 @@ const messages = defineMessages({
   }
 });
 
-class ContactList extends React.Component {
+class ContactList extends React.PureComponent {
   render() {
     const { formatMessage } = this.props.intl;
     const showCheckmark = Array.isArray(this.props.topicSelected);
@@ -53,6 +53,8 @@ class ContactList extends React.Component {
       contactsCount ++;
     }
     if (this.props.contacts && this.props.contacts.length > 0) {
+      // Used keys to prevent duplicates when the user comes both from the 'fnd' and the list of contacts.
+      const usedKeys = {};
       this.props.contacts.forEach(c => {
         if (c.action) {
           // Action item
@@ -65,6 +67,10 @@ class ContactList extends React.Component {
         } else {
           // Normal contact
           const key = this.props.showMode ? c.user : (c.topic || c.user);
+          if (usedKeys[key]) {
+            return;
+          }
+          usedKeys[key] = true;
           // If filter function is provided, filter out the items
           // which don't satisfy the condition.
           if (this.props.filterFunc && this.props.filter) {
@@ -150,12 +156,13 @@ class ContactList extends React.Component {
         }
       }, this);
     }
-
+    /* dangerouslySetInnerHTML={{__html: this.props.emptyListMessage}} */
     return (
       <div className={this.props.noScroll ? null : "scrollable-panel"}>
         {contactsCount == 0 ?
-          <div className="center-medium-text"
+          <div className="center-medium-text" style={{whiteSpace: 'pre-line'}}>
-            dangerouslySetInnerHTML={{__html: this.props.emptyListMessage}} />
+            {this.props.emptyListMessage}
+          </div>
           :
           null
         }

src/widgets/group-manager.jsx

@@ -15,6 +15,11 @@ const messages = defineMessages({
     id: 'contacts_not_found_short',
     defaultMessage: "No contacts match ''{query}''",
     description: 'Shown in ContactsView when search returned no results'
+  },
+  add_members_prompt: {
+    id: 'add_members_prompt',
+    defaultMessage: 'add members',
+    description: 'Placeholder in group members input field'
   }
 });
 
@@ -166,7 +171,7 @@ class GroupManager extends React.Component {
             tinode={this.props.tinode}
             chips={this.state.members}
             staticMembers={this.state.staticMembers}
-            prompt="add members"
+            prompt={this.props.intl.formatMessage(messages.add_members_prompt)}
             filterFunc={this.handleContactFilter}
             onChipRemoved={this.handleMemberRemoved} />
         </div>

umd/index.dev.js

@@ -9328,13 +9328,7 @@ class ContactsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       id: "contacts_not_found",
       defaultMessage: [{
         "type": 0,
-        "value": "You have no chats"
+        "value": "You have no chats\\n¯∖_(ツ)_/¯"
-      }, {
-        "type": 0,
-        "value": "<br/>"
-      }, {
-        "type": 0,
-        "value": "¯∖_(ツ)_/¯"
       }]
     }, no_contacts => react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_contact_list_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
       tinode: this.props.tinode,
@@ -13583,7 +13577,6 @@ class ChipInput extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
   }
   static deriveStateFromProps(props) {
     return {
-      placeholder: props.chips ? '' : props.prompt,
       sortedChips: ChipInput.sortChips(props.chips, props.staticMembers),
       chipIndex: ChipInput.indexChips(props.chips)
     };
@@ -13690,7 +13683,7 @@ class ChipInput extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       className: className
     }, chips, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
       type: "text",
-      placeholder: this.state.placeholder,
+      placeholder: this.props.prompt,
       onChange: this.handleTextInput,
       onFocus: this.handleFocusGained,
       onBlur: this.handleFocusLost,
@@ -13881,7 +13874,7 @@ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
     }]
   }
 });
-class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
+class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
   render() {
     const {
       formatMessage
@@ -13906,6 +13899,7 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
       contactsCount++;
     }
     if (this.props.contacts && this.props.contacts.length > 0) {
+      const usedKeys = {};
       this.props.contacts.forEach(c => {
         if (c.action) {
           contactNodes.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_action_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
@@ -13917,6 +13911,10 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
           }));
         } else {
           const key = this.props.showMode ? c.user : c.topic || c.user;
+          if (usedKeys[key]) {
+            return;
+          }
+          usedKeys[key] = true;
           if (this.props.filterFunc && this.props.filter) {
             const filterOn = [key];
             if (c.private && c.private.comment) {
@@ -14001,10 +13999,10 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
       className: this.props.noScroll ? null : "scrollable-panel"
     }, contactsCount == 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "center-medium-text",
-      dangerouslySetInnerHTML: {
+      style: {
-        __html: this.props.emptyListMessage
+        whiteSpace: 'pre-line'
       }
-    }) : null, contactNodes.length > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    }, this.props.emptyListMessage) : null, contactNodes.length > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
       className: "contact-box"
     }, contactNodes) : null);
   }

umd/src_views_info-view_jsx.dev.js

@@ -879,6 +879,13 @@ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
       "type": 0,
       "value": "'"
     }]
+  },
+  add_members_prompt: {
+    id: "add_members_prompt",
+    defaultMessage: [{
+      "type": 0,
+      "value": "add members"
+    }]
   }
 });
 class GroupManager extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
@@ -1029,7 +1036,7 @@ class GroupManager extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       tinode: this.props.tinode,
       chips: this.state.members,
       staticMembers: this.state.staticMembers,
-      prompt: "add members",
+      prompt: this.props.intl.formatMessage(messages.add_members_prompt),
       filterFunc: this.handleContactFilter,
       onChipRemoved: this.handleMemberRemoved
     })), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {