moon
/
bloat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add status reply preview in fluoride mode

This commit is contained in:
r 2020-01-11 10:51:33 +00:00
parent 2a77700102
commit 8607f16212
3 changed files with 85 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
static/fluoride.js
View File

@ -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);
});
});

26
static/main.css
View File

@ -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;
}

11
templates/status.tmpl
View File

@ -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>