Fix #442: Improve chat controls UI

less/chats.less

@@ -395,6 +395,7 @@
 		padding: 0;
 
 		li.chat-message {
+			position: relative;
 			list-style-type: none;
 			font-weight: 300;
 			padding: 0 1.428rem;
@@ -406,7 +407,7 @@
 			}
 
 			&:last-child {
-				padding-bottom: 1.428rem;
+				margin-bottom: 1.428rem;
 			}
 
 			&[data-break="true"] {
@@ -421,9 +422,7 @@
 			}
 
 			&.deleted {
-				opacity: 0.3;
-
-				.controls {
+				.message-body-wrapper .controls {
 					[data-action] {
 						display: none;
 					}
@@ -432,6 +431,10 @@
 						display: inline;
 					}
 				}
+
+				.message-body {
+					opacity: 0.3;
+				}
 			}
 
 			.chat-user-image {
@@ -456,21 +459,11 @@
 				.user-select(none);
 			}
 
-			.chat-ip, .chat-edited {
+			.chat-edited {
 				margin-left: 5px;
 				margin-top: 2px;
 			}
 
-			.message-body {
-				margin-left: 45px;
-				overflow-y: hidden;
-
-				p {
-					margin: 7px 0 0 0;
-					line-height: 2rem;
-				}
-			}
-
 			&[data-self="0"] + [data-self="0"], &[data-self="1"] + [data-self="1"] {
 				&[data-break="false"] {
 					.message-header {
@@ -479,17 +472,45 @@
 				}
 			}
 
-			.controls {
-				display: none;
+			.message-body-wrapper {
+				margin-left: 45px;
 
-				[data-action="restore"] {
-					display: none;
+				.message-body {
+					padding: 7px 10px;
+					overflow-y: hidden;
+
+					p {
+						margin: 7px 0 0 0;
+						line-height: 2rem;
+					}
+
+					p:first-child {
+						margin: 0;
+					}
 				}
-			}
 
-			&:hover {
 				.controls {
-					display: block;
+					display: none;
+
+					position: absolute;
+					bottom: 5px;
+					right: 30px;
+					border: 1px solid @dropdown-border;
+					.box-shadow(0 6px 12px rgba(0,0,0,.175));
+
+					[data-action="restore"] {
+						display: none;
+					}
+				}
+
+				&:hover {
+					.message-body {
+						background: @dropdown-link-hover-bg;
+					}
+
+					.controls {
+						display: block;
+					}
 				}
 			}
 		}

templates/partials/chats/message.tpl

@@ -15,23 +15,26 @@
 		<span class="label label-danger">[[user:deleted]]</span>
 		<!-- END -->
 		<span class="chat-timestamp timeago" title="{messages.timestampISO}"></span>
-		<!-- IF isAdminOrGlobalMod -->
-		<div class="chat-ip pull-right" title="[[modules:chat.show-ip]]"><i class="fa fa-info-circle chat-ip-button"></i></div>
-		<!-- ENDIF isAdminOrGlobalMod -->
 		<!-- IF messages.edited -->
 		<div class="text-muted pull-right" title="[[global:edited]] {messages.editedISO}"><i class="fa fa-edit"></i></span></div>
 		<!-- ENDIF messages.edited -->
+	</div>
+	<div class="message-body-wrapper">
+		<div component="chat/message/body" class="message-body">
+			{messages.content}
+		</div>
+
 		<!-- IF !config.disableChatMessageEditing -->
 		<!-- IF messages.self -->
-		<div class="pull-right btn-group controls">
+		<div class="btn-group controls">
 			<button class="btn btn-xs btn-link" data-action="edit"><i class="fa fa-pencil"></i></button>
 			<button class="btn btn-xs btn-link" data-action="delete"><i class="fa fa-times"></i></button>
 			<button class="btn btn-xs btn-link" data-action="restore"><i class="fa fa-repeat"></i></button>
+			<!-- IF isAdminOrGlobalMod -->
+			<button class="btn btn-xs btn-link chat-ip" title="[[modules:chat.show-ip]]"><i class="fa fa-info-circle chat-ip-button"></i></button>
+			<!-- ENDIF isAdminOrGlobalMod -->
 		</div>
 		<!-- ENDIF messages.self -->
 		<!-- ENDIF !config.disableChatMessageEditing -->
 	</div>
-	<div component="chat/message/body" class="message-body">
-		{messages.content}
-	</div>
 </li>