From edd88c095dbd2eeed1016a16e8cfb320a8e57a9b Mon Sep 17 00:00:00 2001
From: nekobit <nekobit@noemail.net>
Date: Wed, 25 May 2022 06:50:55 +0000
Subject: [PATCH] Javascript quick reply

FossilOrigin-Name: 0137005c73da03add30c4bf2011d44faafdbb9e7e6821580e9dca72dc1c8fde9
---
 dist/treebird20.css             | 10 +++++++
 static/index.html               |  3 ++
 static/interaction_buttons.html |  8 +++---
 static/likeboost.html           |  2 +-
 static/reactions_btn.html       |  2 +-
 static/status.html              | 50 +++++++++++++++++----------------
 6 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/dist/treebird20.css b/dist/treebird20.css
index e8b5314..878535c 100644
--- a/dist/treebird20.css
+++ b/dist/treebird20.css
@@ -1170,6 +1170,16 @@ p}
     float: right;
 }
 
+.statusbox-ani
+{
+    animation: expand-reply .3s 1;
+}
+
+@keyframes expand-reply
+{
+    0% { padding-top: 0px; height: 0px; overflow: hidden; }
+    100% { padding-top: 10px; height: 150px; overflow: hidden; }
+}
 
 .status-interact .statbtn
 {
diff --git a/static/index.html b/static/index.html
index f980cf8..dc5ff22 100644
--- a/static/index.html
+++ b/static/index.html
@@ -58,5 +58,8 @@
         </table>
       </div>
     </div>
+
+    <!-- Source -->
+    <script src="/js/main.js"></script>
   </body>
 </html>
diff --git a/static/interaction_buttons.html b/static/interaction_buttons.html
index e94b507..cbf62b3 100644
--- a/static/interaction_buttons.html
+++ b/static/interaction_buttons.html
@@ -2,7 +2,7 @@
   <table class="ui-table">
     <tr>
       <td>
-        <a target="_parent" href="%s/status/%s/reply#id-%s" class="pointer statbtn">
+        <a target="_parent" href="%s/status/%s/reply#%s" class="pointer statbtn reply-btn">
           <svg class="reply" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9l6 6-6 6"/><path d="M4 4v7a4 4 0 0 0 4 4h11"/></svg>
             <span class="count">%s</span>
           </label>
@@ -11,7 +11,7 @@
       <td>
         <form action="%s/status/%s/interact" method="post">
           <input type="hidden" name="itype" value="%srepeat">
-          <label class="pointer statbtn">
+          <label class="repeat-btn pointer statbtn">
             <svg class="repeat %s" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 2.1l4 4-4 4"/><path d="M3 12.2v-2a4 4 0 0 1 4-4h12.8M7 21.9l-4-4 4-4"/><path d="M21 11.8v2a4 4 0 0 1-4 4H4.2"/></svg>
             <span class="count">%s</span>
             <input class="hidden" type="submit" value="Repeat">
@@ -21,7 +21,7 @@
       <td>
         <form action="%s/status/%s/interact" method="post">
           <input type="hidden" name="itype" value="%slike">
-          <label class="pointer statbtn">
+          <label class="pointer statbtn like-btn">
             <svg class="like %s" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
             <span class="count">%s</span>
             <input class="hidden" type="submit" value="Like">
@@ -31,7 +31,7 @@
       %s
       %s
       <td>
-        <a target="_parent" href="%s/status/%s#id-%s" class="pointer statbtn">
+        <a target="_parent" href="%s/status/%s#%s" class="pointer statbtn view-btn">
           <svg class="expand" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1"/></svg>
         </a>
       </td>
diff --git a/static/likeboost.html b/static/likeboost.html
index 1f58114..691c90f 100644
--- a/static/likeboost.html
+++ b/static/likeboost.html
@@ -1,7 +1,7 @@
 <td>
   <form action="%s/status/%s/interact" method="post">
     <input type="hidden" name="itype" value="likeboost">
-    <label class="pointer statbtn">
+    <label class="pointer statbtn likeboost-btn">
       <svg class="one-click-software" width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><g stroke-width="1.98"><path d="m19.15 8.5061 2.7598 2.7598-2.7598 2.7598"/><path d="m14.756 11.325s2.5484-0.05032 6.3258 0.01026m-15.639 10.807-2.7598-2.7598 2.7598-2.7598"/><path d="m22.4 15.327v1.2259c0 1.156-1.2356 2.7598-2.7598 2.7598h-16.664"/></g><polygon transform="matrix(.60736 0 0 .60736 .60106 .63577)" points="18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2 15.09 8.26 22 9.27 17 14.14" stroke-width="2.9656"/></g></svg>
       <input class="hidden" type="submit" value="L+R">
     </label>
diff --git a/static/reactions_btn.html b/static/reactions_btn.html
index e625876..77c168b 100644
--- a/static/reactions_btn.html
+++ b/static/reactions_btn.html
@@ -1,5 +1,5 @@
 <td>
-  <a target="_parent" href="%s/status/%s/react#id-%s" class="pointer statbtn">
+  <a target="_parent" href="%s/status/%s/react#id-%s" class="pointer statbtn react-btn">
     <svg class="emoji-btn" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>
     %s
   </form>
diff --git a/static/status.html b/static/status.html
index cdc219b..0935a55 100644
--- a/static/status.html
+++ b/static/status.html
@@ -1,4 +1,4 @@
-<table id="id-%s" class="status %s ui-table">
+<table id="%s" class="status %s ui-table">
   %s
   <tr>
     <td class="pfp-td">
@@ -8,29 +8,31 @@
       <div class="poster-stats">
         <span class="username">%s</span>
         <a class="instance-info" href="%s/@%s">%s</a>
-        <span class="alignend status-visibility menu-container">
-          %s
-          <div class="menu">
-            <ul>
-              <li>
-                <form action="%s/status/%s/interact" method="post">
-                  <input type="hidden" name="itype" value="%smute">
-                  <input type="submit" class="btn-menu" value="%s">
-                </form>
-              </li>
-              <li>
-                <form action="%s/status/%s/interact" method="post">
-                  <input type="hidden" name="itype" value="%spin">
-                  <input type="submit" class="btn-menu" value="%s">
-                </form>
-              </li>
-              <li>
-                <form action="%s/status/%s/interact" method="post">
-                  <input type="hidden" name="itype" value="%sbookmark">
-                  <input type="submit" class="btn-menu" value="%s">
-                </form>
-              </li>
-            </ul>
+        <span class="alignend">
+          <div class="menu-container status-visibility">
+            %s
+            <div class="menu">
+              <ul>
+                <li>
+                  <form action="%s/status/%s/interact" method="post">
+                    <input type="hidden" name="itype" value="%smute">
+                    <input type="submit" class="btn-menu" value="%s">
+                  </form>
+                </li>
+                <li>
+                  <form action="%s/status/%s/interact" method="post">
+                    <input type="hidden" name="itype" value="%spin">
+                    <input type="submit" class="btn-menu" value="%s">
+                  </form>
+                </li>
+                <li>
+                  <form action="%s/status/%s/interact" method="post">
+                    <input type="hidden" name="itype" value="%sbookmark">
+                    <input type="submit" class="btn-menu" value="%s">
+                  </form>
+                </li>
+              </ul>
+            </div>
           </div>
         </span>
       </div>