From 8607f16212c9537751030c717dbfb3454e66ca23 Mon Sep 17 00:00:00 2001
From: r <r@freesoftwareextremist.com>
Date: Sat, 11 Jan 2020 10:51:33 +0000
Subject: [PATCH] Add status reply preview in fluoride mode

---
 static/fluoride.js    | 51 +++++++++++++++++++++++++++++++++++++++++++
 static/main.css       | 26 ++++++++++++++++++++++
 templates/status.tmpl | 11 +++++++---
 3 files changed, 85 insertions(+), 3 deletions(-)

diff --git a/static/fluoride.js b/static/fluoride.js
index 3020da0..25ab4a3 100644
--- a/static/fluoride.js
+++ b/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);
 	});
 });
diff --git a/static/main.css b/static/main.css
index 2b067ae..553c9a2 100644
--- a/static/main.css
+++ b/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;
+}
diff --git a/templates/status.tmpl b/templates/status.tmpl
index d996eec..9c9d55d 100644
--- a/templates/status.tmpl
+++ b/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" />
-				<a class="status-reply-to" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> reply to {{.Pleroma.InReplyToAccountAcct}} </a>
+				<div class="status-reply-to">
+					<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>