From b3ae1d8fa6000925389b6ad0b65191dea2e12e2c Mon Sep 17 00:00:00 2001
From: Luka Murn <luka.murn@biosistemika.com>
Date: Sun, 27 May 2018 16:24:47 +0200
Subject: [PATCH] Remove some dead code, make sidebar toggle animated

---
 app/assets/javascripts/projects/canvas.js.erb |  2 +-
 app/assets/javascripts/sidebar_toggle.js.erb  |  4 --
 app/assets/stylesheets/partials/_sidebar.scss | 68 -------------------
 app/assets/stylesheets/themes/menu_bar.scss   | 12 ++++
 app/helpers/left_menu_bar_helper.rb           |  6 ++
 app/views/shared/_left_menu_bar.html.erb      | 10 +--
 6 files changed, 21 insertions(+), 81 deletions(-)

diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb
index fe8110869..4409f48cc 100644
--- a/app/assets/javascripts/projects/canvas.js.erb
+++ b/app/assets/javascripts/projects/canvas.js.erb
@@ -170,7 +170,7 @@ function initializeEdit() {
 
   // Hide sidebar & also its toggle button
   $("#wrapper").addClass("hidden2");
-  $("#wrapper").find(".sidebar-header-toggle").hide();
+  $("#sideBarButton").addClass("hidden2");
   $(".navbar-secondary").addClass("navbar-without-sidebar");
 
   // Also, hide zoom levels button group
diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb
index 757c5978b..076520c12 100644
--- a/app/assets/javascripts/sidebar_toggle.js.erb
+++ b/app/assets/javascripts/sidebar_toggle.js.erb
@@ -3,8 +3,6 @@
   global.SideBarToggle = (function() {
 
     function show() {
-      $('#sideBarLeft').show();
-      $('#sideBarRight').hide();
       $('#sidebar-wrapper').show(
         'slide', { direction: 'right', easing: 'linear' }, 400
       );
@@ -16,8 +14,6 @@
     }
 
     function hide() {
-      $('#sideBarLeft').hide();
-      $('#sideBarRight').show();
       $('#sidebar-wrapper').hide(
         'slide', { direction: 'left', easing: 'linear'}, 400
       );
diff --git a/app/assets/stylesheets/partials/_sidebar.scss b/app/assets/stylesheets/partials/_sidebar.scss
index 581d257aa..08eefdd3c 100644
--- a/app/assets/stylesheets/partials/_sidebar.scss
+++ b/app/assets/stylesheets/partials/_sidebar.scss
@@ -37,51 +37,6 @@ $toggle-btn-size: 50px;
     #slide-panel {
       height: 100%;
 
-      .sidebar-header {
-        height: $toggle-btn-size;
-        background: $brand-primary;
-        border-bottom: 2px solid darken($brand-primary, 10%);
-
-        .sidebar-header-title {
-          width: inherit;
-          color: $color-white;
-          display: inline-block;
-          margin-left: 15px;
-          margin-top: 6px;
-          text-transform: uppercase;
-          max-width: ($wrapper-width - $toggle-btn-size);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          opacity: 1;
-
-          // Animations
-          @include transition(opacity 0.5s ease);
-        }
-      }
-
-      .sidebar-header-toggle {
-        height: $toggle-btn-size;
-        width: $toggle-btn-size;
-        margin-left: ($wrapper-width - $toggle-btn-size);
-        margin-top: -$toggle-btn-size;
-        font-size: $font-size-h3;
-        background: $brand-primary;
-        border-left: 2px solid darken($brand-primary, 10%);
-        border-bottom: 2px solid darken($brand-primary, 10%);
-
-        // Animations
-        @include transition(margin-left 0.5s ease);
-
-        span {
-          margin: 10px;
-          color: $color-white;
-
-          // Animations
-          @include rotate-animation(0.5s, 180deg);
-          @include transition(color 0.5s ease);
-        }
-      }
-
       .tree {
         margin-bottom: 0;
         opacity: 1;
@@ -103,29 +58,6 @@ $toggle-btn-size: 50px;
     width: 0;
 
     #slide-panel {
-      .sidebar-header .sidebar-header-title {
-        width: 0;
-        opacity: 0;
-
-        @include transition(width 0.5s ease);
-        @include transition(opacity 0.5s ease);
-      }
-
-      .sidebar-header-toggle {
-        margin-left: 0;
-        background: none;
-        border: none;
-
-        @include transition(margin-left 0.5s ease);
-
-        span {
-          color: darken($brand-primary, 10%);
-
-          @include rotate-animation(0.5s, 0deg);
-          @include transition(color 0.5s ease);
-        }
-      }
-
       .tree {
         opacity: 0;
 
diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss
index 0440ad3bb..8b140a341 100644
--- a/app/assets/stylesheets/themes/menu_bar.scss
+++ b/app/assets/stylesheets/themes/menu_bar.scss
@@ -65,10 +65,22 @@
     }
   }
 
+  #sideBarButton > span {
+    @include rotate-animation(0.5s, 0deg);
+  }
+
+  #sideBarButton[data-shown] > span {
+    @include rotate-animation(0.5s, 180deg);
+  }
+
   #sideBarButton:hover {
     background-color: $color-concrete;
     cursor: pointer;
   }
+
+  #sideBarButton.hidden2 {
+    visibility: hidden;
+  }
 }
 
 @media(max-height:510px) {
diff --git a/app/helpers/left_menu_bar_helper.rb b/app/helpers/left_menu_bar_helper.rb
index e5a599bed..91f49c429 100644
--- a/app/helpers/left_menu_bar_helper.rb
+++ b/app/helpers/left_menu_bar_helper.rb
@@ -24,4 +24,10 @@ module LeftMenuBarHelper
   def activities_are_selected?
     controller_name == 'activities'
   end
+
+  def navigation_sidebar_shown?
+    projects_are_selected? ||
+      repositories_are_selected? ||
+      settings_are_selected?
+  end
 end
diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb
index dfe7f04ad..73fd84de2 100644
--- a/app/views/shared/_left_menu_bar.html.erb
+++ b/app/views/shared/_left_menu_bar.html.erb
@@ -65,21 +65,15 @@
         <% end %>
       </li>
       <!-- arrow for opening/closing -->
-      <li class="text-center"
+      <li class="text-center <%= navigation_sidebar_shown? ? '' : 'hidden2' %>"
           style="padding: 5px;"
           id="sideBarButton"
           data-shown=""
           onclick="SideBarToggle.toggle()"
           >
-        <span id="sideBarLeft"
-              class="fas fa-chevron-left"
+        <span class="fas fa-chevron-right"
               aria-hidden="false"
               ></span>
-        <span id="sideBarRight"
-              class="fas fa-chevron-right"
-              aria-hidden="true"
-              style="display:none;"
-              ></span>
       </li>
     </ul>
   </div>