From 3e0fc9a590adc9b1d50e72b1df1c917a35728c31 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 15 Mar 2020 15:25:43 -0700
Subject: [PATCH] Redesign of interaction panel

---
 fedireads/static/format.css                   | 35 ++++++++++++++-
 fedireads/templates/snippets/interaction.html | 43 +++++++++++--------
 fedireads/templatetags/fr_display.py          |  9 ++++
 3 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index 43ad99691..1d83af332 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -364,10 +364,39 @@ blockquote {
 .interaction {
     background-color: #B2DBBF;
     border-radius: 0 0 0.5em 0.5em;
+    display: flex;
+    flex-direction: row;
+    padding: 0.5em;
+}
+.interaction > * {
+    margin-right: 0.5em;
+}
+.interaction button:hover {
+    box-shadow: #247BA0 0em 0em 1em 0em;
+    color: #247BA0;
+}
+.interaction button.active:hover .icon {
+    color: #888;
+}
+.interaction button {
+    background: white;
+    height: 2em;
+    min-width: 3em;
+    padding: 0;
+    color: #888;
+}
+.interaction button.active .icon {
+    color: #FF1654;
 }
-
 .interaction textarea {
     height: 2em;
+    width: 23em;
+    float: left;
+    padding: 0.25em;
+    margin-right: 0.5em;
+}
+.interaction textarea:valid, .interaction textarea:focus {
+    height: 4em;
 }
 
 table {
@@ -408,6 +437,10 @@ th, td {
     position: relative;
     right: 2em;
 }
+.post .time-ago {
+    position: relative;
+    left: 2em;
+}
 .post .user-pic, .compose-suggestion .user-pic {
     right: 0.25em;
 }
diff --git a/fedireads/templates/snippets/interaction.html b/fedireads/templates/snippets/interaction.html
index 2c44068df..8d5301098 100644
--- a/fedireads/templates/snippets/interaction.html
+++ b/fedireads/templates/snippets/interaction.html
@@ -1,26 +1,33 @@
 {% load fr_display %}
 <div class="interaction">
-    {% if activity.favorites.all %}
-    <span>
-        {{ activity.favorites.count }} like{{activity.favorites.count|pluralize }}
-    </span>
-    {% endif %}
-    {% if activity|reply_count %}
-    <span>
-        <a href="{{ activity.absolute_id }}">
-            {{ activity|reply_count }} repl{{ activity|reply_count|pluralize:'y,ies' }}
-        </a>
-    </span>
-    {% endif %}
-    <form name="favorite" action="/favorite/{{ activity.id }}" method="post">
-        {% csrf_token %}
-        <button>⭐️ Like</button>
-    </form>
+
     <form name="comment" action="/comment" method="post">
         {% csrf_token %}
         <input type="hidden" name="parent" value="{{ activity.id }}"></input>
-        <textarea name="content" cols="40" rows="10" id="id_content"></textarea>
-        <button type="submit">Comment</button>
+        <textarea name="content" placeholder="Leave a comment..." id="id_content" required="true"></textarea>
+        <button type="submit" class="comment">
+            <span class="icon icon-comment">
+                <span class="hidden-text">Comment</span>
+            </span>
+        </button>
+    </form>
+
+    <form name="boost" action="/boost/{{ activity.id }}" method="post">
+        {% csrf_token %}
+        <button type="submit" class="{% if False %}active{% endif %}">
+            <span class="icon icon-boost">
+                <span class="hidden-text">Boost status</span>
+            </span>
+        </button>
+    </form>
+
+    <form name="favorite" action="/favorite/{{ activity.id }}" method="post">
+        {% csrf_token %}
+        <button type="submit" class="{% if request.user|liked:status %}active{% endif %}">
+            <span class="icon icon-heart">
+                <span class="hidden-text">Like status</span>
+            </span>
+        </button>
     </form>
 </div>
 
diff --git a/fedireads/templatetags/fr_display.py b/fedireads/templatetags/fr_display.py
index b8b390106..b34fc9f64 100644
--- a/fedireads/templatetags/fr_display.py
+++ b/fedireads/templatetags/fr_display.py
@@ -70,6 +70,15 @@ def get_parent(status):
     return models.Status.objects.filter(id=status.reply_parent_id).select_subclasses().get()
 
 
+@register.filter(name='liked')
+def get_user_liked(user, status):
+    try:
+        models.Favorite.objects.get(user=user, status=status)
+        return True
+    except models.Favorite.DoesNotExist:
+        return False
+
+
 @register.simple_tag(takes_context=True)
 def shelve_button_identifier(context, book):
     ''' check what shelf a user has a book on, if any '''