UX: better like button

Co-authored-by: jjaffeux <j.jaffeux@gmail.com>

app/assets/javascripts/discourse/widgets/post-menu.js.es6

@@ -285,15 +285,18 @@ export default createWidget('post-menu', {
       replaceButton(orderedButtons, 'reply', 'wiki-edit');
     }
 
-    orderedButtons.forEach(i => {
+    orderedButtons
-      const button = this.attachButton(i, attrs);
+      .filter(x => x !== "like-count" && x !== "like")
-      if (button) {
+      .forEach(i => {
-        allButtons.push(button);
+        const button = this.attachButton(i, attrs);
 
-        if ((attrs.yours && button.attrs.alwaysShowYours) || (hiddenButtons.indexOf(i) === -1)) {
+        if (button) {
-          visibleButtons.push(button);
+          allButtons.push(button);
+
+          if ((attrs.yours && button.attrs.alwaysShowYours) || (hiddenButtons.indexOf(i) === -1)) {
+            visibleButtons.push(button);
+          }
         }
-      }
     });
 
     if (!this.settings.collapseButtons) {
@@ -350,6 +353,11 @@ export default createWidget('post-menu', {
       }
     });
 
+    visibleButtons.unshift(h('div.like-button', [
+      this.attachButton("like-count", attrs),
+      this.attachButton("like", attrs)
+    ]));
+
     const postControls = [];
 
     const repliesButton = this.attachButton('replies', attrs);

app/assets/stylesheets/desktop/topic-post.scss

@@ -54,17 +54,50 @@ nav.post-controls {
 
   padding: 0;
 
-  .like-count {
+  .like-button {
-    font-size: $font-up-1;
+    display: inline-block;
-    i.fa-heart {
+
-      padding-left: 5px;
+    .widget-button {
-      color: dark-light-choose($primary-low-mid, $secondary-high);
+      background: none;
     }
-    &.my-likes {
+
-      margin-right: -2px;
+    &:hover {
+      background: $primary-low;
+
+      .d-hover {
+        background: none;
+      }
     }
-    &.regular-likes {
+    &:active {
-      margin-right: -15px;
+      box-shadow: inset 0 1px 3px rgba(0,0,0, .4);
+
+      .widget-button {
+        box-shadow: none;
+      }
+    }
+
+    .like {
+      &:focus {
+        background: none;
+      }
+    }
+
+    .like-count {
+      font-size: $font-up-1;
+      i.fa-heart {
+        padding-left: 5px;
+        color: dark-light-choose($primary-low-mid, $secondary-high);
+      }
+      &.my-likes {
+        margin-right: -2px;
+      }
+      &.regular-likes {
+        margin-right: -12px;
+      }
+    }
+
+    .toggle-like {
+      padding: 8px 8px;
     }
   }
 

app/assets/stylesheets/mobile/topic-post.scss

@@ -72,7 +72,7 @@ span.badge-posts {
         margin-right: 5px;
       }
       &.regular-likes {
-        margin-right: -8px;
+        margin-right: -5px;
       }
     }
   }