adding message deletion - incomplete yet

css/base.css

@@ -247,6 +247,36 @@ ul.menu > li.separator {
 ul.menu > li.separator:hover {
   background-color: #ccc;
 }
+
+/* The down arrow head - trigger for context menu */
+li .menuTrigger {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  width: 1.5rem;
+  height: 1.2rem;
+  line-height: 1.2rem;
+  border-radius: 0.6rem;
+  text-align: center;
+  opacity: 0;
+}
+li:hover .menuTrigger {
+  opacity: 1.0;
+}
+
+li:hover .menuTrigger a {
+  color: #757575;
+}
+
+li.left:hover .menuTrigger {
+  -text-shadow: #c5e1a5 0 0 15px, #c5e1a5 0 0 5px;
+  background-image: radial-gradient(#c5e1a5 40%, transparent 75%);
+}
+li.right:hover .menuTrigger {
+  -text-shadow: #fafafa 0 0 15px, #fafafa 0 0 5px;
+  background-image: radial-gradient(#fafafa 40%, transparent 75%);
+}
+
 /* END popup/dropdown menu */
 
 /* Generic text colors */
@@ -581,6 +611,7 @@ table.permission-editor td.checkbox {
 
 .contact-box > li {
   display: flex;
+  position: relative;
   padding: 0.35rem 0.25rem 0.5rem 0.35rem;
   min-height: 3.5rem;
   flex-grow: 0;
@@ -612,20 +643,6 @@ table.permission-editor td.checkbox {
   font-weight: lighter;
 }
 
-/* The down arrow head - trigger for context menu in contacts list */
-.contact-box li .menuTrigger {
-  position: relative;
-  margin-left: auto;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.contact-box li .menuTrigger a {
-  color: transparent;
-}
-.contact-box li:hover .menuTrigger a {
-  color: #757575;
-}
-
 /* Avatar and online-offline indicator */
 .contact-box .avatar-box {
   margin-right: 0.35rem;
@@ -1011,6 +1028,7 @@ table.permission-editor td.checkbox {
 }
 
 .chat-box .bubble {
+  display: flex;
   position: relative;
 	max-width: 40rem;
   min-width: 12rem;

index.html

@@ -274,9 +274,9 @@
 
     // Construct a user discovery tag
     function to_tags(tagsObj) {
-      if(tagsObj && Object.keys(tagsObj).length > 0) {
+      if (tagsObj && Object.keys(tagsObj).length > 0) {
         var tags = [];
-        for(var key in tagsObj) {
+        for (var key in tagsObj) {
           tags.push(key + ":" + tagsObj[key]);
         }
         return tags;
@@ -286,7 +286,7 @@
 
     // Convert a number of bytes to human-readable format.
     function bytesToHumanSize(bytes) {
-      if(!bytes || bytes == 0) {
+      if (!bytes || bytes == 0) {
         return '0 Bytes';
       }
 
@@ -2457,6 +2457,13 @@
           type: e.target.dataset.mime
         });
       },
+
+      handleContextClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.showContextMenu(this.props.seq, e.pageY, e.pageX);
+      },
+
       render: function() {
         var elementKey = 0;
 
@@ -2515,6 +2522,11 @@
                 <Message.ReceivedMarker response={this.props.response}
                   timestamp={this.props.timestamp} received={this.props.received} />
                 </p>
+                <span className="menuTrigger">
+                  <a href="#" onClick={this.handleContextClick}>
+                    <i className="material-icons">expand_more</i>
+                  </a>
+                </span>
               </div>
               {fullDisplay ? <div className="author">{this.props.userName}</div> : null}
             </div>
@@ -2635,7 +2647,9 @@
 
           this.handleDescChange(topic);
           topic.messages(function(msg) {
-            msgs = msgs.concat(msg);
+            if (!msg.deleted) {
+              msgs = msgs.concat(msg);
+            }
           });
 
           this.setState({
@@ -2735,11 +2749,13 @@
         var topic = Tinode.getTopic(this.state.topic);
         var newState = {messages: []};
         topic.messages(function(m) {
-          newState.messages = newState.messages.concat(m);
+          if (!m.deleted) {
+            newState.messages = newState.messages.concat(m);
+          }
         });
 
         // msg could be null if one or more messages were deleted.
-        if (msg) {
+        if (msg && !msg.deleted) {
           // If the message is added to the end of the message list,
           // scroll to the bottom.
           if (topic.msgPosition(msg.seq) <= 1) {
@@ -2791,6 +2807,10 @@
         this.props.showContextMenu(this.state.topic, e.pageY, e.pageX);
       },
 
+      handleMessageContextMenu: function(seq, y, x) {
+        console.log("Message cklicked", seq, x, y);
+      },
+
       handleBackNavigation: function() {
         this.props.onHideMessagesView();
       },
@@ -2843,10 +2863,11 @@
 
             messageNodes.push(
               <Message content={msg.content} mimeType={msg.head ? msg.head.mime : null}
-                timestamp={msg.ts} response={isReply}
+                timestamp={msg.ts} response={isReply} seq={msg.seq}
                 userFrom={userFrom} userName={userName} userAvatar={userAvatar}
                 sequence={sequence} received={msgReceived}
                 viewportWidth={this.props.viewportWidth}
+                showContextMenu={this.handleMessageContextMenu}
                 onImagePreview={this.handleImagePreview} key={msg.seq} />
             );
           }