From a8a79fe97f6807e669153dce4c4a35098f083ad4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 3 Jul 2020 23:42:29 +0200
Subject: [PATCH] Extract mixin to add font awesome icons

This way we can simplify the HTML and easily apply font awesome icons to
any element.

Note the mixin uses `extend`, which we generally try to avoid. It's OK
in this case, since `fa-` classes only have one rule, affecting the
content of its `::before` pseudo-element. Unfortunately we can't use
`include fa-content($fa-var-#{$icon})` because it's not valid SCSS. We
could make the mixin accept an icon instead of an icon name, and call it
using `has-fa-icon(r, $fa-var-plus-square)`. However, IMHO that would
make the code a bit more complex with no real benefit.
---
 app/assets/stylesheets/layout.scss           | 27 ++++++++------------
 app/assets/stylesheets/mixins.scss           | 15 +++++++++++
 app/views/comments/_responses_count.html.erb |  3 +--
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index c089d3b3d..25c769a2a 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2045,10 +2045,6 @@ table {
     padding: $line-height / 4;
     position: relative;
 
-    .relative {
-      padding-left: rem-calc(18);
-    }
-
     .divider {
       color: $text-light;
       display: inline-block;
@@ -2060,23 +2056,22 @@ table {
   }
 
   .responses-count {
-    .far {
-      @extend .fa-minus-square;
-      font-size: $small-font-size;
-      left: 0;
-      position: absolute;
-      text-decoration: none;
-      top: 2px;
-    }
-
     .show-children {
+      @include has-fa-icon(plus-square, r);
       display: none;
     }
 
+    .collapse-children {
+      @include has-fa-icon(minus-square, r);
+    }
+
+    .show-children::before,
+    .collapse-children::before {
+      margin-right: rem-calc(6);
+      transform: translateY(1px);
+    }
+
     &.collapsed {
-      .far {
-        @extend .fa-plus-square;
-      }
 
       .collapse-children {
         display: none;
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index b5fb4b9f3..289eb83a6 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -148,3 +148,18 @@
     transition: none;
   }
 }
+
+@mixin has-fa-icon($icon, $style) {
+  @extend .fa-#{$icon};
+
+  &::before {
+    @extend %fa-icon;
+    font-family: "Font Awesome 5 Free";
+
+    @if $style == "r" {
+      font-weight: normal;
+    } @else {
+      font-weight: bold;
+    }
+  }
+}
diff --git a/app/views/comments/_responses_count.html.erb b/app/views/comments/_responses_count.html.erb
index 3915b5495..d9ac9fdf0 100644
--- a/app/views/comments/_responses_count.html.erb
+++ b/app/views/comments/_responses_count.html.erb
@@ -1,6 +1,5 @@
 <% if count > 0 %>
-  <%= link_to "", class: "js-toggle-children relative" do %>
-    <span class="far"></span>
+  <%= link_to "", class: "js-toggle-children" do %>
     <span class="show-children"><%= t("comments.comment.responses_show", count: count) %></span>
     <span class="collapse-children"><%= t("comments.comment.responses_collapse", count: count) %></span>
   <% end %>