Merge pull request #1187 from mlorb/ml-sci-2452

Reposition the arrow for opening/closing of Navigation [SCI-2452]

app/assets/javascripts/projects/canvas.js.erb

@@ -170,8 +170,8 @@ function initializeEdit() {
 
   // Hide sidebar & also its toggle button
   $("#wrapper").addClass("hidden2");
-  $("#toggle-sidebar-btn").addClass("hidden2");
   $(".navbar-secondary").addClass("navbar-without-sidebar");
+  $("#sidebar-arrow").addClass("invisible");
 
   // Also, hide zoom levels button group
   $("#diagram-buttons").hide();

app/assets/javascripts/sidebar_toggle.js.erb

@@ -9,7 +9,7 @@
       $('.navbar-secondary').css(
         { 'margin-left': '-280px', 'padding-left': '294px' }
       );
-      $('#toggle-sidebar-btn').attr('data-shown', '');
+      $('#sidebar-arrow').attr('data-shown', '');
       sessionStorage.setItem(STORAGE_TOGGLE_KEY, "un-toggled");
     }
 
@@ -20,12 +20,12 @@
         'margin-left': '0',
         'padding-left': '14px'
       });
-      $('#toggle-sidebar-btn').removeAttr('data-shown');
+      $('#sidebar-arrow').removeAttr('data-shown');
       sessionStorage.setItem(STORAGE_TOGGLE_KEY, "toggled");
     }
 
     function toggle() {
-      var btn = $('#toggle-sidebar-btn');
+      var btn = $('#sidebar-arrow');
       if (btn.is('[data-shown]')) {
         hide();
       } else {
@@ -34,7 +34,7 @@
     }
 
     function isShown() {
-      var btn = $('#toggle-sidebar-btn');
+      var btn = $('#sidebar-arrow');
       return btn.is('[data-shown]');
     }
 

app/assets/stylesheets/partials/_sidebar.scss

@@ -21,6 +21,37 @@ $toggle-btn-size: 50px;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 
+  #sidebar-arrow {
+    background-color: $brand-default;
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 10px;
+    bottom: 50%;
+    box-shadow: 2px 0 4px $color-alto;
+    display: block;
+    position: absolute;
+    right: -18px;
+
+    span {
+      padding: 9px 5px;
+    }
+  }
+
+  #sidebar-arrow:hover {
+    background-color: $color-concrete;
+    cursor: pointer;
+  }
+
+  #sidebar-arrow > span {
+    transform: rotateY(0deg);
+    transition: .6s;  }
+
+  #sidebar-arrow[data-shown] > span {
+    padding-left: 7px;
+    padding-right: 3px;
+    transform: rotateY(180deg);
+    transition: .6s;
+  }
+
   #sidebar-wrapper {
     background-color: $color-white;
     box-shadow: 1px 3px 6px $color-alto;

app/assets/stylesheets/themes/menu_bar.scss

@@ -65,23 +65,6 @@
       color: $color-emperor;
     }
   }
-
-  #toggle-sidebar-btn > span {
-    @include rotate-animation(.5s, 0deg);
-  }
-
-  #toggle-sidebar-btn[data-shown] > span {
-    @include rotate-animation(.5s, 180deg);
-  }
-
-  #toggle-sidebar-btn:hover {
-    background-color: $color-concrete;
-    cursor: pointer;
-  }
-
-  #toggle-sidebar-btn.hidden2 {
-    visibility: hidden;
-  }
 }
 
 @media(max-height:510px) {

app/helpers/left_menu_bar_helper.rb

@@ -24,10 +24,4 @@ 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

app/views/layouts/fluid.html.erb

@@ -4,6 +4,11 @@
                  locals: { flash: flash, notice: notice, alert: alert } %>
       <div id="sidebar-wrapper" class="<%= yield :sidebar_wrapper_class %>">
         <%= yield :sidebar %>
+        <div id="sidebar-arrow"
+             onclick="SideBarToggle.toggle()"
+             data-shown="">
+          <span class="fas fa-chevron-right"></span>
+        </div>
       </div>
       <%= yield :secondary_navigation %>
       <div class="container-fluid <%= yield :container_class %>" id="fluid-content">

app/views/shared/_left_menu_bar.html.erb

@@ -64,17 +64,6 @@
           <span><%= t('left_menu_bar.settings') %></span>
         <% end %>
       </li>
-      <!-- arrow for opening/closing -->
-      <li class="text-center <%= navigation_sidebar_shown? ? '' : 'hidden2' %>"
-          style="padding: 5px;"
-          id="toggle-sidebar-btn"
-          data-shown=""
-          onclick="SideBarToggle.toggle()"
-          >
-        <span class="fas fa-chevron-right"
-              aria-hidden="false"
-              ></span>
-      </li>
     </ul>
   </div>
 </div>