Use CSS to display icons in the admin menu

This way we simplify the HTML and generating similar menus will be
easier. We also improve the experience for screen reader users, who
might have been hearing the icons as text because we weren't using the
`aria-hidden` attribute.

We're still keeping the "icon-" classes for compatibility with CONSUL
installations which might have changed this code.

app/assets/stylesheets/admin/menu.scss

@@ -8,6 +8,20 @@
     margin-bottom: 0;
     margin-left: 0;
     padding: 0;
+  }
+
+  > ul > li a {
+    font-weight: bold;
+
+    @mixin icon($name, $style) {
+      @include has-fa-icon($name, $style);
+
+      &::before {
+        font-size: rem-calc(20);
+        margin-left: rem-calc(8);
+        margin-right: rem-calc(10);
+      }
+    }
 
     [class^="icon-"] {
       color: #fff;
@@ -18,10 +32,81 @@
       vertical-align: middle;
       width: $line-height * 1.5;
     }
-  }
 
-  > ul > li a {
+    &.booths-link {
-    font-weight: bold;
+      @include icon(archive, solid);
+    }
+
+    &.budgets-link,
+    &.investments-link {
+      @include icon(chart-pie, solid);
+    }
+
+    &.comments-link {
+      @include icon(comments, regular);
+    }
+
+    &.dashboard-link {
+      @include icon(check, solid);
+    }
+
+    &.debates-link {
+      @include icon(comment-alt, solid);
+    }
+
+    &.invitations-link {
+      @include icon(envelope, regular);
+    }
+
+    &.legislation-link {
+      @include icon(file-alt, solid);
+    }
+
+    &.messages-link {
+      @include icon(file-archive, regular);
+    }
+
+    &.moderated-content-link {
+      @include icon(eye, regular);
+    }
+
+    &.polls-link {
+      @include icon(check-circle, regular);
+    }
+
+    &.print-proposals-link,
+    &.print-investments-link {
+      @include icon(print, solid);
+    }
+
+    &.profiles-link {
+      @include icon(users, solid);
+    }
+
+    &.proposals-link,
+    &.proposal-notifications-link {
+      @include icon(lightbulb, solid);
+    }
+
+    &.settings-link {
+      @include icon(cog, solid);
+    }
+
+    &.signature-sheets-link {
+      @include icon(file-alt, regular);
+    }
+
+    &.site-customization-link {
+      @include icon(pencil-alt, solid);
+    }
+
+    &.stats-link {
+      @include icon(chart-line, solid);
+    }
+
+    &.users-link {
+      @include icon(user, solid);
+    }
   }
 
   li {

app/components/admin/menu_component.html.erb

@@ -1,61 +1,40 @@
 <ul id="admin_menu" data-accordion-menu data-multi-open="true">
   <% if feature?(:proposals) %>
     <li>
-      <%= link_to admin_proposals_path do %>
+      <%= link_to t("admin.menu.proposals"), admin_proposals_path, class: "proposals-link" %>
-        <span class="icon-proposals"></span>
-        <%= t("admin.menu.proposals") %>
-      <% end %>
     </li>
   <% end %>
 
   <% if feature?(:debates) %>
     <li class="<%= "is-active" if controller_name == "debates" %>">
-      <%= link_to admin_debates_path do %>
+      <%= link_to t("admin.menu.debates"), admin_debates_path, class: "debates-link" %>
-        <span class="icon-debates"></span>
-        <%= t("admin.menu.debates") %>
-      <% end %>
     </li>
   <% end %>
 
   <li class="<%= "is-active" if controller_name == "comments" %>">
-    <%= link_to admin_comments_path do %>
+    <%= link_to t("admin.menu.comments"), admin_comments_path, class: "comments-link" %>
-      <span class="icon-comments"></span>
-      <%= t("admin.menu.comments") %>
-    <% end %>
   </li>
 
   <% if feature?(:polls) %>
     <li class="<%= "is-active" if polls? %>">
-      <%= link_to admin_polls_path do %>
+      <%= link_to t("admin.menu.polls"), admin_polls_path, class: "polls-link" %>
-        <span class="icon-checkmark-circle"></span>
-        <%= t("admin.menu.polls") %>
-      <% end %>
     </li>
   <% end %>
 
   <% if feature?(:legislation) %>
     <li class="<%= "is-active" if controller.class.parent == Admin::Legislation %>">
-      <%= link_to admin_legislation_processes_path do %>
+      <%= link_to t("admin.menu.legislation"), admin_legislation_processes_path, class: "legislation-link" %>
-        <span class="icon-file-text"></span>
-        <%= t("admin.menu.legislation") %>
-      <% end %>
     </li>
   <% end %>
 
   <% if feature?(:budgets) %>
     <li class="<%= "is-active" if budgets? %>">
-      <%= link_to admin_budgets_path do %>
+      <%= link_to t("admin.menu.budgets"), admin_budgets_path, class: "budgets-link" %>
-        <span class="icon-budget"></span>
-        <%= t("admin.menu.budgets") %>
-      <% end %>
     </li>
   <% end %>
 
   <li>
-    <a href="#">
+    <a href="#" class="booths-link"><%= t("admin.menu.title_booths") %></a>
-      <span class="icon-box"></span>
-      <%= t("admin.menu.title_booths") %>
-    </a>
     <ul id="booths_menu" <%= "class=is-active" if booths? %>>
       <li <%= "class=is-active" if %w[officers officer_assignments].include?(controller_name) %>>
         <%= link_to t("admin.menu.poll_officers"), admin_officers_path %>
@@ -82,18 +61,12 @@
 
   <% if feature?(:signature_sheets) %>
     <li class="<%= "is-active" if controller_name == "signature_sheets" %>">
-      <%= link_to admin_signature_sheets_path do %>
+      <%= link_to t("admin.menu.signature_sheets"), admin_signature_sheets_path, class: "signature-sheets-link" %>
-        <span class="icon-file-text-o"></span>
-        <%= t("admin.menu.signature_sheets") %>
-      <% end %>
     </li>
   <% end %>
 
   <li>
-    <a href="#">
+    <a href="#" class="messages-link"><%= t("admin.menu.messaging_users") %></a>
-      <span class="icon-zip"></span>
-      <%= t("admin.menu.messaging_users") %>
-    </a>
     <ul id="messaging_users_menu" <%= "class=is-active" if messages_menu_active? %>>
       <li <%= "class=is-active" if controller_name == "newsletters" %>>
         <%= link_to t("admin.menu.newsletters"), admin_newsletters_path %>
@@ -111,10 +84,7 @@
   </li>
 
   <li>
-    <a href="#">
+    <a href="#" class="site-customization-link"><%= t("admin.menu.title_site_customization") %></a>
-      <span class="icon-edit"></span>
-      <%= t("admin.menu.title_site_customization") %>
-    </a>
     <ul <%= "class=is-active" if customization? &&
                                  controller.class.parent != Admin::Poll::Questions::Answers %>>
 
@@ -142,10 +112,7 @@
   </li>
 
   <li>
-    <a href="#">
+    <a href="#" class="moderated-content-link"><%= t("admin.menu.title_moderated_content") %></a>
-      <span class="icon-eye"></span>
-      <%= t("admin.menu.title_moderated_content") %>
-    </a>
     <ul <%= "class=is-active" if moderated_content? %>>
       <% if feature?(:proposals) %>
         <li <%= "class=is-active" if controller_name == "hidden_proposals" %>>
@@ -184,10 +151,7 @@
   </li>
 
   <li>
-    <a href="#">
+    <a href="#" class="profiles-link"><%= t("admin.menu.title_profiles") %></a>
-      <span class="icon-organizations"></span>
-      <%= t("admin.menu.title_profiles") %>
-    </a>
     <ul <%= "class=is-active" if profiles? %>>
       <li <%= "class=is-active" if controller_name == "administrators" %>>
         <%= link_to t("admin.menu.administrators"), admin_administrators_path %>
@@ -220,16 +184,11 @@
   </li>
 
   <li class="<%= "is-active" if controller_name == "stats" %>">
-    <%= link_to admin_stats_path do %>
+    <%= link_to t("admin.menu.stats"), admin_stats_path, class: "stats-link" %>
-      <span class="icon-stats"></span><%= t("admin.menu.stats") %>
-    <% end %>
   </li>
 
   <li>
-    <a href="#">
+    <a href="#" class="settings-link"><%= t("admin.menu.title_settings") %></a>
-      <span class="icon-settings"></span>
-      <%= t("admin.menu.title_settings") %>
-    </a>
     <ul <%= "class=is-active" if settings? %>>
       <li <%= "class=is-active" if controller_name == "settings" %>>
         <%= link_to t("admin.menu.settings"), admin_settings_path %>
@@ -258,10 +217,7 @@
     </ul>
   </li>
   <li>
-    <a href="#">
+    <a href="#" class="dashboard-link"><%= t("admin.menu.dashboard") %></a>
-      <span class="icon-check"></span>
-      <%= t("admin.menu.dashboard") %>
-    </a>
     <ul <%= "class=is-active" if dashboard? %>>
       <li <%= "class=is-active" if controller_name == "actions" %>>
         <%= link_to t("admin.menu.dashboard_actions"), admin_dashboard_actions_path %>

app/views/management/_menu.html.erb

@@ -1,9 +1,6 @@
 <ul id="admin_menu" data-accordion-menu>
   <li class="section-title">
-    <a href="#">
+    <a href="#" class="users-link"><%= t("management.menu.users") %></a>
-      <span class="icon-user"></span>
-      <%= t("management.menu.users") %>
-    </a>
     <ul class="is-active">
 
       <li <%= "class=is-active" if menu_users? %>>
@@ -43,24 +40,15 @@
 
   <% if Setting["process.budgets"] %>
     <li <%= "class=is-active" if menu_print_investments? %>>
-      <%= link_to print_investments_management_budgets_path do %>
+      <%= link_to t("management.menu.print_budget_investments"), print_investments_management_budgets_path, class: "print-investments-link" %>
-          <span class="icon-print"></span>
-          <%= t("management.menu.print_budget_investments") %>
-      <% end %>
     </li>
   <% end %>
 
   <li <%= "class=is-active" if menu_print_proposals? %>>
-    <%= link_to print_management_proposals_path do %>
+    <%= link_to t("management.menu.print_proposals"), print_management_proposals_path, class: "print-proposals-link" %>
-      <span class="icon-print"></span>
-      <%= t("management.menu.print_proposals") %>
-    <% end %>
   </li>
 
   <li <%= "class=is-active" if menu_user_invites? %>>
-    <%= link_to new_management_user_invite_path do %>
+    <%= link_to t("management.menu.user_invites"), new_management_user_invite_path, class: "invitations-link" %>
-      <span class="icon-letter"></span>
-      <%= t("management.menu.user_invites") %>
-    <% end %>
   </li>
 </ul>

app/views/moderation/_menu.html.erb

@@ -5,49 +5,31 @@
 
   <% if feature?(:proposals) %>
     <li <%= "class=is-active" if controller_name == "proposals" %>>
-      <%= link_to moderation_proposals_path do %>
+      <%= link_to t("moderation.menu.proposals"), moderation_proposals_path, class: "proposals-link" %>
-        <span class="icon-proposals"></span>
-        <%= t("moderation.menu.proposals") %>
-      <% end %>
     </li>
 
     <li <%= "class=is-active" if controller_name == "proposal_notifications" %>>
-      <%= link_to moderation_proposal_notifications_path do %>
+      <%= link_to t("moderation.menu.proposal_notifications"), moderation_proposal_notifications_path, class: "proposal-notifications-link" %>
-        <span class="icon-proposals"></span>
-        <%= t("moderation.menu.proposal_notifications") %>
-      <% end %>
     </li>
   <% end %>
 
   <% if feature?(:debates) %>
     <li <%= "class=is-active" if controller_name == "debates" %>>
-      <%= link_to moderation_debates_path do %>
+      <%= link_to t("moderation.menu.flagged_debates"), moderation_debates_path, class: "debates-link" %>
-        <span class="icon-debates"></span>
-        <%= t("moderation.menu.flagged_debates") %>
-      <% end %>
     </li>
   <% end %>
 
   <% if feature?(:budgets) %>
     <li <%= "class=is-active" if controller_name == "investments" %>>
-      <%= link_to moderation_budget_investments_path do %>
+      <%= link_to t("moderation.menu.flagged_investments"), moderation_budget_investments_path, class: "investments-link" %>
-        <span class="icon-budget"></span>
-        <%= t("moderation.menu.flagged_investments") %>
-      <% end %>
     </li>
   <% end %>
 
   <li <%= "class=is-active" if controller_name == "comments" %>>
-    <%= link_to moderation_comments_path do %>
+    <%= link_to t("moderation.menu.flagged_comments"), moderation_comments_path, class: "comments-link" %>
-      <span class="icon-comments"></span>
-      <%= t("moderation.menu.flagged_comments") %>
-    <% end %>
   </li>
 
   <li <%= "class=is-active" if controller_name == "users" %>>
-    <%= link_to moderation_users_path do %>
+    <%= link_to t("moderation.menu.users"), moderation_users_path, class: "users-link" %>
-      <span class="icon-user"></span>
-      <%= t("moderation.menu.users") %>
-    <% end %>
   </li>
 </ul>

app/views/officing/_menu.html.erb

@@ -4,19 +4,13 @@
       <li class="<%= "js-vote-collection" %>
                  <%= " is-active" if controller_name == "voters" %>
                  <%= " is-hidden" if controller_name == "voters" && Poll.votable_by(@user).any? %>">
-        <%= link_to new_officing_residence_path do %>
+        <%= link_to t("officing.menu.voters"), new_officing_residence_path, class: "users-link" %>
-          <span class="icon-user"></span>
-          <%= t("officing.menu.voters") %>
-        <% end %>
       </li>
     <% end %>
 
     <% if final_recount_shift? %>
       <li <%= "class=is-active" if ["results", "ballot_sheets"].include?(controller_name) || (controller_name == "polls" && action_name == "final") %>>
-        <%= link_to final_officing_polls_path do %>
+        <%= link_to t("officing.menu.total_recounts"), final_officing_polls_path, class: "users-link" %>
-          <span class="icon-user"></span>
-          <%= t("officing.menu.total_recounts") %>
-        <% end %>
       </li>
     <% end %>
   </ul>

app/views/valuation/_menu.html.erb

@@ -6,12 +6,8 @@
 
     <% if feature?(:budgets) %>
       <li <%= "class=is-active" if controller_name == "budget_investments" %>>
-        <%= link_to valuation_budgets_path do %>
+        <%= link_to t("valuation.menu.budgets"), valuation_budgets_path, class: "budgets-link" %>
-          <span class="icon-budget"></span>
-          <%= t("valuation.menu.budgets") %>
-        <% end %>
       </li>
     <% end %>
-
   </ul>
 </nav>