added actions for chat invitation. bubble shadows

css/base.css

@@ -558,6 +558,7 @@ table.permission-editor td.checkbox {
   overflow: hidden;
   min-width: 8rem;
   line-height: 2rem;
+  padding: 0.35rem;
 }
 .bot-form div {
   min-height: 2rem;
@@ -565,7 +566,7 @@ table.permission-editor td.checkbox {
 }
 .bot-form button {
   display: inline-block;
-  margin: 0;
+  margin: 0.15rem;
   width: 100%;
   background-color: #eef;
   color: #2196f3; /* blue 500 */
@@ -1108,6 +1109,38 @@ i.search {
   color: #2196f3!important;
 }
 
+/* New chat invitation panel */
+
+.accept-invite-panel {
+  background-color: #eceff1;
+  box-shadow: 0 -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
+  width: 100%;
+}
+
+.accept-invite-panel .title {
+  font-size: 1.2rem;
+  padding: 0.75rem;
+}
+
+.accept-invite-panel .footer {
+  border-top: 1px solid #f5f5f5;
+  background-color: #fafafa;
+  white-space: nowrap;
+  padding-left: 2rem;
+  padding-bottom: 0.35rem;
+}
+
+.accept-invite-panel button {
+  font-size: 1rem;
+  height: 2em;
+  line-height: 2em;
+  border: 1px solid transparent;
+  margin: 0.25rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+}
+
+/* END of chat invitation panel */
+
 /* A static panel shown when no topic is selected */
 #dummy-view {
   width: 100%;
@@ -1200,6 +1233,7 @@ i.search {
   margin: 0;
   text-align: left;
   border-radius: 0.5rem;
+  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.12);
 }
 
 .chat-box li.single {
@@ -1237,15 +1271,16 @@ i.search {
   width: 0;
   height: 0;
   right: auto;
-  left: -10px;
+  left: -.8rem;
   top: auto;
   bottom: 0;
-  border: 10px solid;
+  border: 0.62rem solid #c5e1a5;
   color: #c5e1a5;
   border-top-color: transparent;
-  border-right-color: transparent;
+  border-right-color: inherit;
   border-bottom-color: inherit;
   border-left-color: transparent;
+  box-shadow: 0 1.6px 0.5px -0.8px rgba(0, 0, 0, 0.12);
 }
 
 /* Right triangle placed bottom right flush. */
@@ -1257,15 +1292,16 @@ i.search {
 	width: 0;
 	height: 0;
   left: auto;
-	right: -10px;
+	right: -.8rem;
   top: auto;
 	bottom: 0;
-	border: 10px solid;
+	border: 0.62rem solid #fafafa;
   color: #fafafa;
   border-top-color: transparent;
   border-right-color: transparent;
   border-bottom-color: inherit;
-  border-left-color: transparent;
+  border-left-color: inherit;
+  box-shadow: 0 1.6px 0.5px -0.8px rgba(0, 0, 0, 0.12);
 }
 
 .chat-box .avatar-box {
@@ -1383,55 +1419,6 @@ i.search {
 
 /* END of InfoView */
 
-/* Modal dialog */
-.dialog-overlay {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background-color: rgba(255,255,255,0.90);
-}
-.modal-dialog {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: white;
-  min-width: 24rem;
-  min-height: 16rem;
-  margin: auto;
-  border-radius: 0.3rem;
-  box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0, 0.25);
-}
-
-.modal-dialog .title-panel {
-  display: flex;
-  justify-content: space-between;
-  font-size: 1.4rem;
-  padding: 1rem;
-}
-.modal-dialog .body-panel {
-  margin: auto 0.5rem auto 0.5rem;
-}
-
-.modal-dialog .dialog-buttons {
-  border-top: 1px solid #f5f5f5;
-  background-color: #fafafa
-}
-
-.modal-dialog .dialog-buttons a {
-  display: inline-block;
-  text-transform: uppercase;
-  text-decoration: none;
-  font-size: 1.1rem;
-  padding: 0.35rem 1.5rem;
-}
-
-/* END of modal dialog */
-
 /* BEGIN Tabs */
 
 ul.tabbar {

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 ?