From 7c1390ece2d81219cb0a9c9359e59bafbcf8f3f9 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Wed, 28 Mar 2018 14:12:11 +0200
Subject: [PATCH] implement sidebar toggle [fixes SCI-2232]

---
 app/assets/javascripts/application.js.erb    |  1 +
 app/assets/javascripts/sidebar_toggle.js.erb | 35 ++++++++++++++++++++
 app/controllers/repositories_controller.rb   |  2 +-
 app/views/repositories/_sidebar.html.erb     | 29 ++++++++++------
 app/views/shared/_left_menu_bar.html.erb     | 19 +++++++++--
 app/views/shared/_sidebar.html.erb           |  1 -
 config/initializers/assets.rb                |  1 +
 7 files changed, 73 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/javascripts/sidebar_toggle.js.erb

diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index 167546640..10d795c56 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -12,6 +12,7 @@
 //= require jquery-ui/widgets/draggable
 //= require jquery-ui/widgets/droppable
 //= require jquery.ui.touch-punch.min
+//= require jquery-ui/effects/effect-slide
 //= require jquery.caret.min
 //= require jquery.atwho.min
 //= require hammer
diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb
new file mode 100644
index 000000000..6084d4c3d
--- /dev/null
+++ b/app/assets/javascripts/sidebar_toggle.js.erb
@@ -0,0 +1,35 @@
+(function(global) {
+  'use strict';
+  global.SideBarToggle = (function() {
+
+    function show() {
+      $('#sideBarLeft').show();
+      $('#sideBarRight').hide();
+      $('#sidebar-wrapper').show(
+        'slide', { direction: 'right', easing: 'linear' }, 400
+      );
+      $('#wrapper').css('paddingLeft', '280px');
+      $('.navbar-secondary').css(
+        { 'margin-left': '-280px', 'padding-left': '280px' }
+      );
+    }
+
+    function hide() {
+      $('#sideBarLeft').hide();
+      $('#sideBarRight').show();
+      $('#sidebar-wrapper').hide(
+        'slide', { direction: 'left', easing: 'linear'}, 400
+      );
+      $('#wrapper').css('paddingLeft', '0');
+      $('.navbar-secondary').css({
+        'margin-left': '0',
+        'padding-left': '0'
+      });
+    }
+
+    return Object.freeze({
+      show: show,
+      hide: hide
+    })
+  })();
+})(window);
diff --git a/app/controllers/repositories_controller.rb b/app/controllers/repositories_controller.rb
index d0351a324..cb8bd4d09 100644
--- a/app/controllers/repositories_controller.rb
+++ b/app/controllers/repositories_controller.rb
@@ -11,7 +11,7 @@ class RepositoriesController < ApplicationController
   before_action :check_create_permissions, only:
     %i(create_new_modal create copy_modal copy)
 
-  # layout 'fluid'
+  layout 'fluid'
 
   def index
     unless @repositories.length.zero? && current_team
diff --git a/app/views/repositories/_sidebar.html.erb b/app/views/repositories/_sidebar.html.erb
index 273fd0f17..e5fa31153 100644
--- a/app/views/repositories/_sidebar.html.erb
+++ b/app/views/repositories/_sidebar.html.erb
@@ -1,23 +1,30 @@
  <%= content_for :sidebar do %>
   <div id="slide-panel" class="visible">
-    <div class="sidebar-header">
-      <div class="sidebar-header-title">
-        <h5><%=t "libraries.sidebar.title" %></h5>
-      </div>
-    </div>
-    <div class="sidebar-header-toggle">
-      <a href="" id="toggle-sidebar-link">
-        <span class="glyphicon glyphicon-play-circle"></span>
-      </a>
-    </div>
     <div class="tree">
       <ul>
+        <li>
+          <span class="tree-link line-wrap no-indent">
+            <strong title="<%= t('libraries.sidebar.title') %>"><%= t('libraries.sidebar.title') %></strong>
+          </span>
+        </li>
         <% repositories.each do |repository| %>
           <% cache repository do %>
-            <li><%= link_to repository.name, repository_path(repository) %></li>
+            <li class="<%= 'active' if current_page?(repository_path(repository)) %>" >
+              <span class="tree-link line-wrap no-indent">
+                <%= link_to repository.name,
+                            repository_path(repository),
+                            data: { 'no-turbolink' => 'true' } %>
+              </span>
+            </li>
           <% end %>
         <% end %>
       </ul>
     </div>
   </div>
 <% end %>
+
+<script>
+  $(document).ready(function() {
+    $('#wrapper').show();
+  })
+</script>
diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb
index b65ac952e..457acf415 100644
--- a/app/views/shared/_left_menu_bar.html.erb
+++ b/app/views/shared/_left_menu_bar.html.erb
@@ -1,13 +1,26 @@
 <div id="left-menu-bar" class="menu-bar">
   <ul class="nav">
+    <li class="text-center">
+      <span id="sideBarLeft"
+            class="glyphicon glyphicon-chevron-left"
+            aria-hidden="true"
+            onclick="SideBarToggle.hide()"
+            ></span>
+      <span id="sideBarRight"
+            class="glyphicon glyphicon-chevron-right"
+            aria-hidden="true"
+            onclick="SideBarToggle.show()"
+            style="display:none;"
+            ></span>
+    </li>
     <li class="<%= "active" if projects_are_selected? %>">
-      <%= link_to projects_path, id: "projects-link", class: "toggle-sidebar-link", title: t('left_menu_bar.projects') do %>
+      <%= link_to projects_path, id: "projects-link", title: t('left_menu_bar.projects') do %>
         <span class="glyphicon glyphicon-home"></span>
         <span><%= t('left_menu_bar.projects') %></span>
       <% end %>
     </li>
     <li class="<%= "active" if repositories_are_selected? %>">
-      <%= link_to team_repositories_path(current_team), id: "repositories-link", title: t('left_menu_bar.repositories') do %>
+      <%= link_to repositories_path, id: "repositories-link", title: t('left_menu_bar.repositories') do %>
         <span class="fa fa-cubes" aria-hidden="true"></span>
         <span><%= t('left_menu_bar.repositories') %></span>
       <% end %>
@@ -65,3 +78,5 @@
     </li>
   </ul>
 </div>
+
+<%= javascript_include_tag("sidebar_toggle") %>
diff --git a/app/views/shared/_sidebar.html.erb b/app/views/shared/_sidebar.html.erb
index 6069cdf2f..d1f177c5e 100644
--- a/app/views/shared/_sidebar.html.erb
+++ b/app/views/shared/_sidebar.html.erb
@@ -1,6 +1,5 @@
 <%= content_for :sidebar do %>
   <div id="slide-panel" class="visible">
-
     <div class="tree">
       <ul>
         <% if project_page? && action_name == 'index' ||
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 38f4189e9..537dbec35 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -84,6 +84,7 @@ Rails.application.config.assets.precompile +=
   %w(repositories/my_module_repository.js)
 Rails.application.config.assets.precompile += %w(activities/index.js)
 Rails.application.config.assets.precompile += %w(repositories/show.js)
+Rails.application.config.assets.precompile += %w(sidebar_toggle.js)
 
 # Libraries needed for Handsontable formulas
 Rails.application.config.assets.precompile += %w(lodash.js)