Merge pull request #3324 from consul/backport-sorting_icons

Add sorting icons to sortable tables

app/assets/stylesheets/admin.scss

@@ -372,6 +372,44 @@ $sidebar-active: #f4fcd0;
   color: $text-medium;
 }
 
+.icon-sortable {
+  font-family: "icons";
+  font-size: $small-font-size;
+  padding-right: $line-height / 2;
+  position: relative;
+
+  &::before,
+  &::after {
+    left: 6px;
+    opacity: 0.25;
+    position: absolute;
+  }
+
+  &::before {
+    content: "\57";
+    top: -2px;
+  }
+
+  &::after {
+    content: "\52";
+    bottom: -10px;
+  }
+
+  &.asc {
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &.desc {
+
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
 // 02. Sidebar
 // -----------
 

app/helpers/budget_investments_helper.rb

@@ -1,6 +1,6 @@
 module BudgetInvestmentsHelper
   def budget_investments_advanced_filters(params)
-    params.map { |af| t("admin.budget_investments.index.filters.#{af}") }.join(', ')
+    params.map { |af| t("admin.budget_investments.index.filters.#{af}") }.join(", ")
   end
 
   def link_to_investments_sorted_by(column)
@@ -10,7 +10,7 @@ module BudgetInvestmentsHelper
     translation = t("admin.budget_investments.index.list.#{column}")
 
     link_to(
-      "#{translation} <span class='#{icon}'></span>".html_safe,
+      "#{translation} <span class='icon-sortable #{icon}'></span>".html_safe,
       admin_budget_budget_investments_path(sort_by: column, direction: direction)
     )
   end
@@ -18,9 +18,9 @@ module BudgetInvestmentsHelper
   def set_sorting_icon(direction, sort_by)
     if sort_by.to_s == params[:sort_by]
       if direction == "desc"
-        "icon-arrow-top"
+        "desc"
       else
-        "icon-arrow-down"
+        "asc"
       end
     else
       ""

spec/helpers/budget_investments_helper_spec.rb

@@ -1,4 +1,4 @@
-require 'rails_helper'
+require "rails_helper"
 
 RSpec.describe BudgetInvestmentsHelper, type: :helper do
 
@@ -22,15 +22,15 @@ RSpec.describe BudgetInvestmentsHelper, type: :helper do
     let(:params)  { { sort_by: sort_by } }
 
     it "returns arrow down if current direction is ASC" do
-      expect(set_sorting_icon("asc", sort_by)).to eq "icon-arrow-down"
+      expect(set_sorting_icon("asc", sort_by)).to eq "asc"
     end
 
     it "returns arrow top if current direction is DESC" do
-      expect(set_sorting_icon("desc", sort_by)).to eq "icon-arrow-top"
+      expect(set_sorting_icon("desc", sort_by)).to eq "desc"
     end
 
     it "returns arrow down if sort_by present, but no direction" do
-      expect(set_sorting_icon(nil, sort_by)).to eq "icon-arrow-down"
+      expect(set_sorting_icon(nil, sort_by)).to eq "asc"
     end
 
     it "returns no icon if sort_by and direction is missing" do