indicators of deleted content work now

css/base.css

@@ -1334,6 +1334,12 @@ i.search {
   justify-content: flex-end;
 }
 
+.chat-box .center {
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .chat-box .bubble {
   display: flex;
   position: relative;
@@ -1375,6 +1381,11 @@ i.search {
   background-color: #fafafa;
 }
 
+.chat-box .center .bubble {
+  background-color: #eaeafa;
+  padding: 0.75rem 0.75rem 0.5rem 0.75rem;
+}
+
 /* Left triangle placed bottom left flush. */
 .chat-box .left .tip::before {
   content: '';

src/messages.json

@@ -304,7 +304,8 @@
     "clear_messages_warning": "Вы действительно хотите удалить все сообщения в чате? Их будет невозможно восстановить.",
     "topic_delete_warning": "Вы действительно хотите удалить этот чат?",
     "topic_block_warning": "Вы действительно хотите заблокировать этот чат?",
-    "search_no_results": "Ничего не найдено"
+    "search_no_results": "Ничего не найдено",
+    "deleted_content": "удалено"
   },
   "zh": {
     "archived_contacts": "已归档联系人 ({count})",
@@ -448,6 +449,7 @@
     "link_privacy_policy": "隐私政策",
     "action_delete_messages": "删除所有帖子",
     "action_block_contact": "屏蔽联系人",
-    "action_report_chat": "检举垃圾邮件"
+    "action_report_chat": "检举垃圾邮件",
+    "deleted_content": "内容已删除"
   }
 }

src/widgets/chat-message.jsx

@@ -70,10 +70,10 @@ export default class ChatMessage extends React.Component {
   }
 
   render() {
-    const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
+    const sideClass = this.props.delRange ? 'center' :
-    const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ?
+      (this.props.sequence + ' ' + (this.props.response ? 'left' : 'right'));
-      'bubble tip' : 'bubble';
+    const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
-    const avatar = this.props.userAvatar || true;
+    const avatar = this.props.delRange ? null : (this.props.userAvatar || true);
     const fullDisplay = (this.props.userFrom && this.props.response &&
       (this.props.sequence == 'single' || this.props.sequence == 'last'));
 
@@ -99,12 +99,12 @@ export default class ChatMessage extends React.Component {
       content = React.createElement('span', null, Drafty.format(content, draftyFormatter, this));
     } else if (this.props.delRange) {
       // Message represents a range of deleted messages.
-      content = <><i className="material-icons">block</i> <i className="gray">
+      content = <><i className="material-icons gray">block</i> <i className="gray">
         <FormattedMessage id="deleted_content"
           defaultMessage="content deleted" description="Shown when messages are deleted" />
       </i></>
     } else if (typeof content != 'string') {
-      content = <><i className="material-icons">error_outline</i> <i className="gray">
+      content = <><i className="material-icons gray">error_outline</i> <i className="gray">
         <FormattedMessage id="invalid_content"
           defaultMessage="invalid content" description="Shown when message is unreadable" />
       </i></>
@@ -133,11 +133,14 @@ export default class ChatMessage extends React.Component {
                   received={this.props.received} />
                 : null}
             </div>
+            {this.props.delRange ?
+              null :
               <span className="menuTrigger">
                 <a href="#" onClick={this.handleContextClick}>
                   <i className="material-icons">expand_more</i>
                 </a>
               </span>
+            }
           </div>
           {fullDisplay ?
             <div className="author">