theme changes for nodebb/nodebb#6181

less/chats.less

@@ -208,6 +208,7 @@
 			font-weight: 300;
 			padding: 0 1.428rem;
 			margin-right: 1.428rem;
+			transition: opacity .5s ease;
 
 			&:first-child {
 				padding-top: 1.428rem;
@@ -228,6 +229,20 @@
 				margin-top: -1.5px;
 			}
 
+			&.deleted {
+				opacity: 0.3;
+
+				.controls {
+					[data-action] {
+						display: none;
+					}
+
+					[data-action="restore"] {
+						display: inline;
+					}
+				}
+			}
+
 			.chat-user-image {
 				.user-icon-style(32px, 1.6rem, 50%);
 				float: left;
@@ -269,6 +284,10 @@
 
 			.controls {
 				display: none;
+
+				[data-action="restore"] {
+					display: none;
+				}
 			}
 
 			&:hover {

templates/partials/chats/message.tpl

@@ -1,4 +1,4 @@
-<li component="chat/message" class="chat-message clear" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
+<li component="chat/message" class="chat-message clear<!-- IF ../deleted --> deleted<!-- END -->" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
 	<div class="message-header">
 		<a href="{config.relative_path}/user/{messages.fromUser.userslug}">
 			<!-- IF messages.fromUser.picture -->
@@ -25,6 +25,7 @@
 		<div class="pull-right 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>
 		</div>
 		<!-- ENDIF messages.self -->
 		<!-- ENDIF !config.disableChatMessageEditing -->