Add status reply preview in fluoride mode
authorr <r@freesoftwareextremist.com>
Sat, 11 Jan 2020 10:51:33 +0000 (10:51 +0000)
committerr <r@freesoftwareextremist.com>
Sat, 11 Jan 2020 10:51:33 +0000 (10:51 +0000)
static/fluoride.js
static/main.css
templates/status.tmpl

index 3020da05e75a701834feac55382442b1a1cc4efe..25ab4a328b56d5ef36e7715c7f58fc941cd790f1 100644 (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);
        });
 });
index 2b067aef464d97d7627a3b0dcd603406d3732018..553c9a21cfd10bdf1ef52024dd5a5723a3de67f3 100644 (file)
 }
 
 .status-reply-to {
+       display: inline-block;
        vertical-align: center;
+}
+
+.status-reply-to-link {
        font-size: 10pt
 }
 
 }
 
 .status-reply {
+       display: inline-block;
+}
+
+.status-reply-link {
        font-size: 10pt;
 }
 
 .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;
+}
index d996eec7c6f83bcc42911f5b75c1f3fa7ba99e07..9c9d55dad01b40ab6c7666895f5be6f141d63c2a 100644 (file)
                        {{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>