From b148bd20576643be43526c1ed7ad6f50f6f6f0c4 Mon Sep 17 00:00:00 2001
From: Oleksii Kriuchykhin <okriuchykhin@biosistemika.com>
Date: Fri, 22 Apr 2022 12:24:14 +0200
Subject: [PATCH] Add results counter to secnd navigation [SCI-6722]

---
 app/assets/stylesheets/my_modules.scss                    | 8 ++++++++
 .../stylesheets/shared_styles/constants/borders.scss      | 1 +
 app/views/shared/_secondary_navigation.html.erb           | 3 +++
 3 files changed, 12 insertions(+)

diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss
index dbb0a3209..26ef7b8af 100644
--- a/app/assets/stylesheets/my_modules.scss
+++ b/app/assets/stylesheets/my_modules.scss
@@ -34,6 +34,14 @@
   margin-top: 20px;
 }
 
+.navigation-results-counter {
+  background-color: $color-concrete;
+  border-radius: $border-radius-circle;
+  color: $color-volcano;
+  font-weight: bold;
+  padding: .1em .5em;
+}
+
 .btn-colorselector{
   background-color: transparent;
 }
diff --git a/app/assets/stylesheets/shared_styles/constants/borders.scss b/app/assets/stylesheets/shared_styles/constants/borders.scss
index 299aa2da7..d1e9b8899 100644
--- a/app/assets/stylesheets/shared_styles/constants/borders.scss
+++ b/app/assets/stylesheets/shared_styles/constants/borders.scss
@@ -3,6 +3,7 @@
 $border-radius-default: 4px;
 $border-radius-modal: 6px;
 $border-radius-tag: 2px;
+$border-radius-circle: 100px;
 
 $border-default: 1px solid $color-alto;
 $border-secondary: 1px solid $color-silver-chalice;
diff --git a/app/views/shared/_secondary_navigation.html.erb b/app/views/shared/_secondary_navigation.html.erb
index 207ec447c..87193c2f1 100644
--- a/app/views/shared/_secondary_navigation.html.erb
+++ b/app/views/shared/_secondary_navigation.html.erb
@@ -71,6 +71,9 @@
             <li id="results-nav-tab" class="<%= "active" if is_module_results? %>">
               <a href="<%= results_my_module_url(@my_module) %>" title="<%=t "nav2.modules.results" %>">
                 <span class="hidden-xs"><%=t "nav2.modules.results" %></span>
+                <% if @my_module.results.size.positive? %>
+                  <sup class="navigation-results-counter"><%= @my_module.results.size %></sup>
+                <% end %>
                 <span class="hidden-xs hidden-lg fas fa-columns"></span>
               </a>
             </li>