added actions for chat invitation. bubble shadows

src/i18n/en.json

@@ -102,6 +102,10 @@
   "label_file_name": "File name:",
   "label_content_type": "Content type:",
   "label_size": "Size:",
+  "chat_invitation": "You are invited to start a new chat. What would you like to do?",
+  "chat_invitation_accept": "Accept",
+  "chat_invitation_ignore": "Ignore",
+  "chat_invitation_block": "Block",
   "error_invalid_id": "Invalid ID",
   "group_user_id_prompt": "Group or User ID",
   "button_subscribe": "Subscribe",

src/i18n/ru.json

@@ -125,5 +125,9 @@
   "save_attachment": "сохранить",
   "menu_item_archive_topic": "В архив",
   "archived_contacts": "Чаты в архиве ({count})",
-  "sidepanel_title_archive": "Архив чатов"
+  "sidepanel_title_archive": "Архив чатов",
+  "chat_invitation": "Вас пригласили начать новый чат. Как вы хотите поступить?",
+  "chat_invitation_accept": "Принять",
+  "chat_invitation_ignore": "Игнорировать",
+  "chat_invitation_block": "Заблокировать"
 }

src/messages.json

@@ -103,6 +103,10 @@
     "label_file_name": "File name:",
     "label_content_type": "Content type:",
     "label_size": "Size:",
+    "chat_invitation": "You are invited to start a new chat. What would you like to do?",
+    "chat_invitation_accept": "Accept",
+    "chat_invitation_ignore": "Ignore",
+    "chat_invitation_block": "Block",
     "error_invalid_id": "Invalid ID",
     "group_user_id_prompt": "Group or User ID",
     "button_subscribe": "Subscribe",
@@ -255,6 +259,10 @@
     "save_attachment": "сохранить",
     "menu_item_archive_topic": "В архив",
     "archived_contacts": "Чаты в архиве ({count})",
-    "sidepanel_title_archive": "Архив чатов"
+    "sidepanel_title_archive": "Архив чатов",
+    "chat_invitation": "Вас пригласили начать новый чат. Как вы хотите поступить?",
+    "chat_invitation_accept": "Принять",
+    "chat_invitation_ignore": "Игнорировать",
+    "chat_invitation_block": "Заблокировать"
   }
 }

src/views/logo-view.jsx

@@ -12,12 +12,12 @@ export default class LogoView extends React.PureComponent {
     return (
       <div id="dummy-view" className={this.props.hideSelf ? 'nodisplay' : null}>
         <div>
-        <a href="https://github.com/tinode/chat/">
-          <img id="logo" alt="logo" src="img/logo.svg" />
-          <h2>Tinode Web</h2>
-        </a>
-        <p><FormattedMessage id="label_client" defaultMessage="Client:" /> {version}</p>
-        <p><FormattedMessage id="label_server" defaultMessage="Server:" /> {this.props.serverVersion} ({this.props.serverAddress})</p>
+          <a href="https://github.com/tinode/chat/">
+            <img id="logo" alt="logo" src="img/logo.svg" />
+            <h2>Tinode Web</h2>
+          </a>
+          <p><FormattedMessage id="label_client" defaultMessage="Client:" /> {version}</p>
+          <p><FormattedMessage id="label_server" defaultMessage="Server:" /> {this.props.serverVersion} ({this.props.serverAddress})</p>
         </div>
       </div>
     );

src/views/messages-view.jsx

@@ -8,6 +8,7 @@ import ChatMessage from '../widgets/chat-message.jsx';
 import ErrorPanel from '../widgets/error-panel.jsx';
 import GroupSubs from '../widgets/group-subs.jsx';
 import ImagePreview from '../widgets/image-preview.jsx';
+import Invitation from '../widgets/Invitation.jsx';
 import LetterTile from '../widgets/letter-tile.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import LogoView from './logo-view.jsx';
@@ -67,6 +68,7 @@ class MessagesView extends React.Component {
     this.handleContextClick = this.handleContextClick.bind(this);
     this.handleShowContextMenuMessage = this.handleShowContextMenuMessage.bind(this);
     this.handleBackNavigation = this.handleBackNavigation.bind(this);
+    this.handleNewChatAcceptance = this.handleNewChatAcceptance.bind(this);
   }
 
   componentDidMount() {
@@ -408,6 +410,10 @@ class MessagesView extends React.Component {
     this.props.onHideMessagesView();
   }
 
+  handleNewChatAcceptance(action) {
+    console.log(action);
+  }
+
   render() {
     const {formatMessage} = this.props.intl;
 
@@ -532,8 +538,9 @@ class MessagesView extends React.Component {
               <ul id="scroller" className={chatBoxClass}>
                 {messageNodes}
               </ul>
+              <div>Typing notifications here.</div>
             </div>
-          {this.state.writeOnly ?
+            {this.state.writeOnly ?
             <div id="write-only-background">
               <div id="write-only-note">
                 <FormattedMessage id="messages_not_readable" defaultMessage="no access to messages"
@@ -542,7 +549,7 @@ class MessagesView extends React.Component {
             </div>
             :
             null
-          }
+            }
           </div>
           <SendMessage
             tinode={this.props.tinode}
@@ -550,6 +557,7 @@ class MessagesView extends React.Component {
             disabled={this.state.readOnly}
             sendMessage={this.props.sendMessage}
             onError={this.props.onError} />
+          <Invitation onAction={this.handleNewChatAcceptance} />
           {this.state.imagePreview ?
             <ImagePreview content={this.state.imagePreview}
               onClose={this.handleCloseImagePreview} /> : null}

src/widgets/chip.jsx

@@ -14,7 +14,7 @@ export default class Chip extends React.PureComponent {
   }
 
   render() {
-    var title = this.props.title || this.props.topic;
+    const title = this.props.title || this.props.topic;
     return (
       <div className="chip">
         {this.props.noAvatar ?