Added dropdown for message options

client/stylesheets/base.less

@@ -2375,15 +2375,56 @@ a.github-fork {
 		cursor: pointer;
 	}
 	&:hover:not(.system) .edit-message {
-		display: inline-block;
+		display: block;
 	}
 	.delete-message {
 		display: none;
 		cursor: pointer;
 	}
 	&:hover:not(.system) .delete-message {
+		display: block;
+	}
+	.message-cog {
+		display: none;
+		cursor: pointer;
+	}
+	&:hover:not(.system) .message-cog {
 		display: inline-block;
 	}
+
+	.message-dropdown {
+		position: absolute;
+		top: 65%;
+		left: 85px;
+		z-index: 1000;
+		float: left;
+		min-width: 110px;
+		display: none;
+		padding: 5px 0;
+		margin: 2px 0 0;
+		font-size: 14px;
+		text-align: left;
+		list-style: none;
+		background-color: #fff;
+		-webkit-background-clip: padding-box;
+		background-clip: padding-box;
+		border: 1px solid #ccc;
+		border: 1px solid rgba(0,0,0,.15);
+		border-radius: 4px;
+		-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+		box-shadow: 0 6px 12px rgba(0,0,0,.175);
+
+		li {
+			display: block;
+			padding: 3px 20px;
+			clear: both;
+			font-weight: 400;
+			line-height: 1.42857143;
+			color: #333;
+			white-space: nowrap;
+		}
+	}
+
 	.user {
 		display: inline-block;
 		font-weight: 600;
@@ -2437,6 +2478,12 @@ a.github-fork {
 				float: left;
 			}
 		}
+
+		.message-dropdown {
+			top: 100%;
+			left: 0;
+		}
+
 		&:hover {
 			.time {
 				display: inline-block;

client/views/app/message.html

@@ -11,13 +11,18 @@
 			<span class="private">{{_ "Only_you_can_see_this_message"}}</span>
 		{{/if}}
 
-		{{#if canEdit}}
-			<i class="icon-pencil edit-message"></i>
-		{{/if}}
-		{{#if canDelete}}
-			<i class="icon-trash-1 delete-message"></i>
-		{{/if}}
+			<i class="icon-cog message-cog"></i>
 		</span>
+
+		<ul class="message-dropdown">
+			{{#if canEdit}}
+				<li class="edit-message"><i class="icon-pencil"></i>Edit</li>
+			{{/if}}
+			{{#if canDelete}}
+				<li class="delete-message"><i class="icon-trash-1"></i>Delete</li>
+			{{/if}}
+		</ul>
+
 		<div class="body" dir="auto">
 			{{{body}}}
 		</div>

client/views/app/room.coffee

@@ -406,12 +406,21 @@ Template.room.events
 		instance.showUsersOffline.set(!instance.showUsersOffline.get())
 
 	"click .edit-message": (e) ->
-		Template.instance().chatMessages.edit(e.currentTarget.parentNode.parentNode)
+		message = e.currentTarget.parentNode.parentNode
+		Template.instance().chatMessages.edit(message)
+
+		$("\##{message.id} .message-dropdown").hide()
+
 		input = Template.instance().find('.input-message')
 		Meteor.setTimeout ->
 			input.focus()
 		, 200
 
+	'click .message-cog': (e) ->
+		message_id = e.currentTarget.parentNode.parentNode.id
+
+		$("\##{message_id} .message-dropdown").toggle()
+
 	"click .editing-commands-cancel > a": (e) ->
 		Template.instance().chatMessages.clearEditing()
 
@@ -434,6 +443,9 @@ Template.room.events
 	'click .delete-message': (event) ->
 		message = @_arguments[1]
 		msg = event.currentTarget.parentNode.parentNode
+
+		$("\##{msg.id} .message-dropdown").hide()
+
 		instance = Template.instance()
 		return if msg.classList.contains("system")
 		swal {