Merge branch 'collapse-sidebar-bugs' into 'master'

Remove JS flicker on page load; UI tweaks

See merge request !13347

8 files changed, 15 insertions, 7 deletions

diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
index 3a3e6b14ec4..930218dd1f5 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/new_sidebar.js
@@ -45,8 +45,10 @@ export default class NewNavSidebar {
 
   toggleCollapsedSidebar(collapsed) {
     this.$sidebar.toggleClass('sidebar-icons-only', collapsed);
-    this.$page.toggleClass('page-with-new-sidebar', !collapsed);
-    this.$page.toggleClass('page-with-icon-sidebar', collapsed);
+    if (this.$sidebar.length) {
+      this.$page.toggleClass('page-with-new-sidebar', !collapsed);
+      this.$page.toggleClass('page-with-icon-sidebar', collapsed);
+    }
     NewNavSidebar.setCollapsedCookie(collapsed);
   }
 
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 0b09fa8888c..76dccd2df56 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -383,6 +383,7 @@ $new-sidebar-collapsed-width: 50px;
 
   .toggle-sidebar-button {
     width: $new-sidebar-collapsed-width - 2px;
+    padding: 16px 18px;
 
     .collapse-text,
     .fa-angle-double-left {
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 14dc9bd9d62..0cfd7822d05 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -305,4 +305,8 @@ module ApplicationHelper
   def show_new_nav?
     cookies["new_nav"] == "true"
   end
+
+  def collapsed_sidebar?
+    cookies["sidebar_collapsed"] == "true"
+  end
 end
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index b1205b8529b..b63b3b70903 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -2,6 +2,7 @@ module NavHelper
   def page_with_sidebar_class
     class_name = page_gutter_class
     class_name << 'page-with-new-sidebar' if defined?(@new_sidebar) && @new_sidebar
+    class_name << 'page-with-icon-sidebar' if collapsed_sidebar? && @new_sidebar
 
     class_name
   end
diff --git a/app/views/layouts/nav/_new_admin_sidebar.html.haml b/app/views/layouts/nav/_new_admin_sidebar.html.haml
index afa35b877ff..0b4a9d92bea 100644
--- a/app/views/layouts/nav/_new_admin_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_admin_sidebar.html.haml
@@ -1,4 +1,4 @@
-.nav-sidebar
+.nav-sidebar{ class: ("sidebar-icons-only" if collapsed_sidebar?) }
   .context-header
     = link_to admin_root_path, title: 'Admin Overview' do
       .avatar-container.s40.settings-avatar
diff --git a/app/views/layouts/nav/_new_group_sidebar.html.haml b/app/views/layouts/nav/_new_group_sidebar.html.haml
index d0224cf8714..c7dabbd8237 100644
--- a/app/views/layouts/nav/_new_group_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_group_sidebar.html.haml
@@ -1,4 +1,4 @@
-.nav-sidebar
+.nav-sidebar{ class: ("sidebar-icons-only" if collapsed_sidebar?) }
   .context-header
     = link_to group_path(@group), title: @group.name do
       .avatar-container.s40.group-avatar
diff --git a/app/views/layouts/nav/_new_profile_sidebar.html.haml b/app/views/layouts/nav/_new_profile_sidebar.html.haml
index c39db9a906b..edae009a28e 100644
--- a/app/views/layouts/nav/_new_profile_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_profile_sidebar.html.haml
@@ -1,4 +1,4 @@
-.nav-sidebar
+.nav-sidebar{ class: ("sidebar-icons-only" if collapsed_sidebar?) }
   .context-header
     = link_to profile_path, title: 'Profile Settings' do
       .avatar-container.s40.settings-avatar
diff --git a/app/views/layouts/nav/_new_project_sidebar.html.haml b/app/views/layouts/nav/_new_project_sidebar.html.haml
index cdbc79e8adc..e0477c29ebe 100644
--- a/app/views/layouts/nav/_new_project_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_project_sidebar.html.haml
@@ -1,4 +1,4 @@
-.nav-sidebar
+.nav-sidebar{ class: ("sidebar-icons-only" if collapsed_sidebar?) }
   - can_edit = can?(current_user, :admin_project, @project)
   .context-header
     = link_to project_path(@project), title: @project.name do
@@ -216,7 +216,7 @@
         = link_to project_settings_members_path(@project), title: 'Members', class: 'shortcuts-tree' do
           .nav-icon-container
             = custom_icon('members')
-          %span
+          %span.nav-item-name
             Members
 
     = render 'shared/sidebar_toggle_button'