UI allows deleting messages first steps for #16

cryptag · Dec 5, 2016 · 2e90e2c · 2e90e2c
1 parent c4469e4
commit 2e90e2c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/app/components/chat/Message.js b/app/components/chat/Message.js
@@ -1,12 +1,26 @@
 import React, { Component } from 'react';
 
 class Message extends Component {
+  constructor(props){
+    super(props);
+    this.onMessageDelete = this.onMessageDelete.bind(this);
+  }
+
+  onMessageDelete(){
+    if (confirm('delete this message?')){
+      alert('deleted message');
+    } else {
+      // no-op
+    }
+  }
+
   render(){
     let { message, username } = this.props;
     let fromMe = message.from === username;
     let messageClass = fromMe ? 'chat-outgoing' : 'chat-incoming'
     return (
       <li className={messageClass} key={message.key}>
+        <a href="#" onClick={this.onMessageDelete} className="delete-message"><i className="fa fa-window-close"></i></a>
         <span className="username">{message.from}</span>
         {message.msg}
       </li>

diff --git a/static/css/styles.css b/static/css/styles.css
@@ -72,7 +72,14 @@ main {
     border-radius: 10px;
     padding: 5px 15px;
     margin-bottom: 5px;
-    width: 80%; }
+    width: 80%;
+    position: relative; }
+    .message-box ul li .delete-message {
+      position: absolute;
+      top: -10px;
+      right: -6px;
+      color: #333;
+      visibility: hidden; }
   .message-box ul li.chat-outgoing {
     float: right;
     color: white;
@@ -85,6 +92,8 @@ main {
     .message-box ul li.chat-incoming .username {
       display: block;
       font-style: italic; }
+  .message-box ul li:hover .delete-message {
+    visibility: visible; }
 
 .message-form {
   flex-direction: column;

diff --git a/static/sass/layout.scss b/static/sass/layout.scss
@@ -102,6 +102,15 @@ main {
       padding: 5px 15px;
       margin-bottom: 5px;
       width: 80%;
+      position: relative;
+
+      .delete-message {
+        position: absolute;
+        top: -10px;
+        right: -6px;
+        color: #333;
+        visibility: hidden;
+      }
     }
     li.chat-outgoing {
       float: right;
@@ -121,6 +130,12 @@ main {
         font-style: italic;
       }
     }
+
+    li:hover {
+      .delete-message {
+        visibility: visible;
+      }
+    }
   }
 }