Add status reply preview in fluoride mode

static/fluoride.js

@@ -92,6 +92,51 @@ function handleRetweetForm(id, f) {
 	}
 }
 
+function handleReplyToLink(link) {
+	if (!link) {
+		return;
+	}
+	var id = link.firstElementChild.getAttribute('href');
+	if (!id || id[0] != '#') {
+		return;
+	}
+	link.onmouseenter = function(event) {
+		var id = event.target.firstElementChild.getAttribute('href');
+		var status = document.querySelector(id);
+		if (!status) {
+			return;
+		}
+		var copy = status.cloneNode(true);
+		copy.id = "reply-to-popup";
+		link.appendChild(copy);
+	}
+	link.onmouseleave = function(event) {
+		var popup = document.getElementById("reply-to-popup");
+		if (popup) {
+			event.target.removeChild(popup);    
+		}
+	}
+}
+
+function handleReplyLink(link) {
+	link.onmouseenter = function(event) {
+		var id = event.target.firstElementChild.getAttribute('href');
+		var status = document.querySelector(id);
+		if (!status) {
+			return;
+		}
+		var copy = status.cloneNode(true);
+		copy.id = "reply-popup";
+		link.appendChild(copy);
+	}
+	link.onmouseleave = function(event) {
+		var popup = document.getElementById("reply-popup");
+		if (popup) {
+			event.target.removeChild(popup);    
+		}
+	}
+}
+
 document.addEventListener("DOMContentLoaded", function() { 
 	var statuses = document.querySelectorAll(".status-container");
 	statuses.forEach(function(s) {
@@ -102,5 +147,11 @@ document.addEventListener("DOMContentLoaded", function() {
 
 		var retweetForm = s.querySelector(".status-retweet");
 		handleRetweetForm(id, retweetForm);
+
+		var replyToLink = s.querySelector(".status-reply-to");
+		handleReplyToLink(replyToLink);
+
+		var replyLinks = s.querySelectorAll(".status-reply");
+		replyLinks.forEach(handleReplyLink);
 	});
 });

static/main.css

@@ -187,7 +187,11 @@
 }
 
 .status-reply-to {
+	display: inline-block;
 	vertical-align: center;
+}
+
+.status-reply-to-link {
 	font-size: 10pt
 }
 
@@ -202,6 +206,10 @@
 }
 
 .status-reply {
+	display: inline-block;
+}
+
+.status-reply-link {
 	font-size: 10pt;
 }
 
@@ -416,3 +424,21 @@
 .icon.post-emoji {
 	height: 20px;
 }
+
+#reply-popup {
+	position: absolute;
+	background: #ffffff;
+	border: 1px solid #aaaaaa;
+	padding: 4px 8px;
+	z-index: 3;
+	margin: 0 8px 0 8px;
+}
+
+#reply-to-popup {
+	position: absolute;
+	background: #ffffff;
+	border: 1px solid #aaaaaa;
+	padding: 4px 8px;
+	z-index: 3;
+	margin: 0 8px 0 8px;
+}

templates/status.tmpl

@@ -44,14 +44,19 @@
 			{{end}}
 			<div class="status-reply-container">
 				{{if .InReplyToID}}
-				<img class="icon" src="/static/icons/mail-forward.png" alt="reply to" />
+				<div class="status-reply-to">
-				<a class="status-reply-to" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> reply to {{.Pleroma.InReplyToAccountAcct}} </a>
+					<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> 
+						<img class="icon" src="/static/icons/mail-forward.png" alt="reply to" /> reply to {{.Pleroma.InReplyToAccountAcct}} 
+					</a>
+				</div>
 				{{if index .ReplyMap .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
 				{{end}}
 				{{if .ShowReplies}}
 				{{if index .ReplyMap .ID}} <span class="status-reply-text"> replies: </span> {{end}}
 				{{range index .ReplyMap .ID}}
-				<a class="status-reply" href="#status-{{.ID}}">#{{.Number}}</a>
+				<div class="status-reply">
+					<a class="status-reply-link" href="#status-{{.ID}}">#{{.Number}}</a>
+				</div>
 				{{end}}
 				{{end}}
 			</div>