From 8607f16212c9537751030c717dbfb3454e66ca23 Mon Sep 17 00:00:00 2001 From: r Date: Sat, 11 Jan 2020 10:51:33 +0000 Subject: 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}}
{{if .InReplyToID}} - reply to - reply to {{.Pleroma.InReplyToAccountAcct}} + {{if index .ReplyMap .ID}} - {{end}} {{end}} {{if .ShowReplies}} {{if index .ReplyMap .ID}} replies: {{end}} {{range index .ReplyMap .ID}} - #{{.Number}} + {{end}} {{end}}
-- cgit v1.2.3