From 2c391a5e410e22881595fc8a6019accc626b20ca Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Tue, 29 Dec 2020 16:18:15 -0500
Subject: [PATCH] feat: make metadata, post tools, and moderator tools
 invisible by default, fade in on post hover

---
 less/mixins.less                  |  5 +++++
 less/topic.less                   | 14 ++++++++++++++
 templates/partials/topic/post.tpl |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/less/mixins.less b/less/mixins.less
index fa9e0e0..8d5a982 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -46,4 +46,9 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+}
+
+.fadeInStart {
+	.transition(250ms ease-in-out opacity);
+	opacity: 0;
 }
\ No newline at end of file
diff --git a/less/topic.less b/less/topic.less
index 4fd5a0a..a7bcefc 100644
--- a/less/topic.less
+++ b/less/topic.less
@@ -277,7 +277,13 @@
 		min-height: 60px;
 	}
 
+	[component="post/metadata"] {
+		.fadeInStart;
+	}
+
 	.post-tools {
+		.fadeInStart;
+
 		a {
 			padding-right: 10px;
 			.pointer;
@@ -285,6 +291,8 @@
 	}
 
 	.moderator-tools {
+		.fadeInStart;
+
 		margin-left: 10px;
 		font-size: 14px;
 
@@ -434,6 +442,12 @@
 
 			.transition(0.75s ease-in-out border-color);
 
+			&:hover {
+				.moderator-tools, .post-tools, [component="post/metadata"] {
+					opacity: 1;
+				}
+			}
+
 			.edit-icon {
 				vertical-align: -2%;
 			}
diff --git a/templates/partials/topic/post.tpl b/templates/partials/topic/post.tpl
index 2d744ff..1d0d173 100644
--- a/templates/partials/topic/post.tpl
+++ b/templates/partials/topic/post.tpl
@@ -36,7 +36,7 @@
 	<small class="pull-right">
 		<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>
 	</small>
-	<small class="pull-right">
+	<small class="pull-right" component="post/metadata">
 		<i component="post/edit-indicator" class="fa fa-pencil-square<!-- IF privileges.posts:history --> pointer<!-- END --> edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
 
 		<small data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></small>