From f3791f6478ac91d311a1fbe53802881257c9e7c2 Mon Sep 17 00:00:00 2001
From: veselcraft <veselcraft@icloud.com>
Date: Sat, 27 Nov 2021 16:31:00 +0300
Subject: [PATCH] Wall: Redesign like and repost buttons

---
 .../components/post/microblogpost.xml         |  9 +++---
 .../templates/components/post/oldpost.xml     |  4 +--
 Web/static/css/microblog.css                  | 31 +++++++++++++++++--
 Web/static/css/style.css                      |  5 +++
 Web/static/js/al_wall.js                      |  9 ++++--
 5 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/Web/Presenters/templates/components/post/microblogpost.xml b/Web/Presenters/templates/components/post/microblogpost.xml
index 1c893512..8d8e1e00 100644
--- a/Web/Presenters/templates/components/post/microblogpost.xml
+++ b/Web/Presenters/templates/components/post/microblogpost.xml
@@ -87,10 +87,9 @@
                         
 
                         <div class="like_wrap">
-                            <a class="post-share-button" href="javascript:repostPost('{$post->getPrettyId()}', '{rawurlencode($csrfToken)}')"
-                            class="post-like-button">
+                            <a class="post-share-button" href="javascript:repostPost('{$post->getPrettyId()}', '{rawurlencode($csrfToken)}')">
                                 <div class="repost-icon" style="opacity: 0.4;"></div>
-                                <span class="likeCnt">{$post->getRepostCount()}</span>
+                                <span class="likeCnt">{if $post->getRepostCount() > 0}{$post->getRepostCount()}{/if}</span>
                             </a>
 
                             {var liked = $post->hasLikeFrom($thisUser)}
@@ -98,8 +97,8 @@
                             class="post-like-button"
                                     data-liked="{(int) $liked}"
                                     data-likes="{$post->getLikesCount()}">
-                                <div class="heart" style="{if $liked}opacity: 1;{else}opacity: 0.4;{/if}"></div>
-                                <span class="likeCnt">{$post->getLikesCount()}</span>
+                                <div class="heart" id="{if $liked}liked{/if}"></div>
+                                <span class="likeCnt">{if $post->getLikesCount() > 0}{$post->getLikesCount()}{/if}</span>
                             </a>
                         </div>
                     {/if}
diff --git a/Web/Presenters/templates/components/post/oldpost.xml b/Web/Presenters/templates/components/post/oldpost.xml
index 36f01936..9bd9c484 100644
--- a/Web/Presenters/templates/components/post/oldpost.xml
+++ b/Web/Presenters/templates/components/post/oldpost.xml
@@ -112,8 +112,8 @@
                         class="post-like-button"
                                 data-liked="{(int) $liked}"
                                 data-likes="{$post->getLikesCount()}">
-                            <div class="heart" style="{if $liked}opacity: 1;{else}opacity: 0.4;{/if}"></div>
-                            <span class="likeCnt">{$post->getLikesCount()}</span>
+                            <div class="heart" id="{if $liked}liked{/if}"></div>
+                            <span class="likeCnt">{if $post->getLikesCount() > 0}{$post->getLikesCount()}{/if}</span>
                         </a>
                     </div>
                 </div>
diff --git a/Web/static/css/microblog.css b/Web/static/css/microblog.css
index b96c558b..7a091c10 100644
--- a/Web/static/css/microblog.css
+++ b/Web/static/css/microblog.css
@@ -36,18 +36,45 @@
     color: grey;
 }
 
+.like_wrap {
+    display: flex;
+}
+
 .repost-icon {
     background: url('/assets/packages/static/openvk/img/published.gif') no-repeat 0px 0px;
     height: 12px;
     margin: 2px 3px 0px;
     width: 11px;
-    float: left;
 }
 
-.repost-icon:hover {
+.heart {
+    background: url('/assets/packages/static/openvk/img/like.gif') no-repeat 1px 0px;
+    height: 10px;
+    margin: 2px 3px 0px;
+    width: 11px;
+    float: none;
+    opacity: 0.4;
+}
+
+#liked {
     opacity: 1 !important;
 }
 
+.heart:hover {
+    opacity: 0.4 !important;
+}
+
+.post-share-button, .post-like-button {
+    display: flex;
+    padding: 2px;
+    border-radius: 2px;
+    transition-duration: 0.2s;
+}
+
+.post-share-button:hover, .post-like-button:hover {
+    background-color: rgb(240, 240, 240);
+}
+
 .post-author .delete {
     float: right;
     display: inline-block;
diff --git a/Web/static/css/style.css b/Web/static/css/style.css
index b5b36472..68c6d2e8 100644
--- a/Web/static/css/style.css
+++ b/Web/static/css/style.css
@@ -1230,6 +1230,7 @@ body.scrolled .toTop:hover {
     margin: 2px 3px 0px;
     width: 11px;
     float: left;
+    opacity: 0.4;
 }
 
 .likeCnt {
@@ -1242,6 +1243,10 @@ body.scrolled .toTop:hover {
     opacity: 1 !important;
 }
 
+#liked {
+    opacity: 1 !important;
+}
+
 .content_title_expanded {
     margin-top: 5px;
 }
diff --git a/Web/static/js/al_wall.js b/Web/static/js/al_wall.js
index 552d9c92..aa66974c 100644
--- a/Web/static/js/al_wall.js
+++ b/Web/static/js/al_wall.js
@@ -89,12 +89,15 @@ u(".post-like-button").on("click", function(e) {
     var link    = u(this).attr("href");
     var heart   = u(".heart", thisBtn);
     var counter = u(".likeCnt", thisBtn);
-    var likes   = counter.text();
-    var isLiked = heart.attr("style") === 'opacity: 1;';
+    var likes   = counter.text() === "" ? 0 : counter.text();
+    var isLiked = heart.attr("id") === 'liked';
     
     ky(link);
-    heart.attr("style", isLiked ? 'opacity: 0.4;' : 'opacity: 1;');
+    heart.attr("id", isLiked ? '' : 'liked');
     counter.text(parseInt(likes) + (isLiked ? -1 : 1));
+    if (counter.text() === "0") {
+        counter.text("");
+    }
     
     return false;
 });