Merge branch 'new-navigation-prototype' into 'master'

Two level hierarchy  in navigation sidebar
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

See merge request !3494

app/assets/javascripts/sidebar.js.coffee

@@ -4,7 +4,6 @@ expanded = 'page-sidebar-expanded'
 toggleSidebar = ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
-  $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
   $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
 
   setTimeout ( ->

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -33,10 +33,15 @@
       background: $color;
     }
 
+    .complex-sidebar .nav-primary {
+      border-right: 1px solid lighten($color, 3%);
+    }
+
     .sidebar-wrapper {
       background: $color-darker;
 
       .sidebar-user {
+        border-top: 1px solid lighten($color, 3%);
         background: $color-darker;
         color: $color-light;
 
@@ -62,7 +67,6 @@
 
         .count {
           color: $color-light;
-          background: $color-dark;
         }
       }
 

app/assets/stylesheets/framework/header.scss

@@ -123,11 +123,11 @@ header {
 }
 
 @mixin collapsed-header {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 40px;
 }
 
 .header-collapsed {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 40px;
 
   @media (min-width: $screen-md-min) {
     @include collapsed-header;

app/assets/stylesheets/framework/sidebar.scss

@@ -144,7 +144,7 @@
     }
 
     a {
-      padding: 7px 15px;
+      padding: 7px 12px;
       font-size: $gl-font-size;
       line-height: 24px;
       color: $gray;
@@ -169,10 +169,12 @@
       }
 
       .count {
-        float: right;
-        background: #eee;
-        padding: 0 8px;
-        @include border-radius(6px);
+        &:before {
+          content: '(';
+        }
+        &:after {
+          content: ')';
+        }
       }
 
       &.back-link i {
@@ -191,6 +193,27 @@
   }
 }
 
+.expand-nav a {
+  color: $gl-icon-color;
+  width: 60px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 20px;
+  background: transparent;
+  height: 59px;
+  text-align: center;
+  line-height: 59px;
+  border-bottom: 1px solid #eee;
+  transition-duration: .3s;
+  outline: none;
+  z-index: 100;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
 .collapse-nav a {
   width: $sidebar_width;
   position: fixed;
@@ -210,55 +233,12 @@
 }
 
 .page-sidebar-collapsed {
-  padding-left: $sidebar_collapsed_width;
-
   .sidebar-wrapper {
-    width: $sidebar_collapsed_width;
-
-    .header-logo {
-      width: $sidebar_collapsed_width;
-
-      a {
-        padding-left: ($sidebar_collapsed_width - 36) / 2;
-
-        .gitlab-text-container {
-          display: none;
-        }
-      }
-    }
-
-    .nav-sidebar {
-      width: $sidebar_collapsed_width;
-
-      li {
-        width: auto;
-
-        a {
-          span {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .collapse-nav a {
-      width: $sidebar_collapsed_width;
-    }
-
-    .sidebar-user {
-      padding-left: ($sidebar_collapsed_width - 36) / 2;
-      width: $sidebar_collapsed_width;
-
-      .username {
     display: none;
   }
-    }
-  }
 }
 
 .page-sidebar-expanded {
-  padding-left: $sidebar_collapsed_width;
-
   @media (min-width: $screen-md-min) {
     padding-left: $sidebar_width;
   }
@@ -309,3 +289,48 @@
     padding-right: $sidebar_collapsed_width;
   }
 }
+
+.complex-sidebar {
+  display: inline-block;
+
+  .nav-primary {
+    width: 61px;
+    float: left;
+    height: 100vh;
+
+    .nav-sidebar {
+      width: 60px;
+
+      li a {
+        width: 60px;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .nav-secondary {
+    $nav-secondary-width: 168px;
+
+    float: left;
+    width: $nav-secondary-width;
+
+    .nav-sidebar {
+      width: $nav-secondary-width;
+
+      li {
+        width: $nav-secondary-width;
+
+        a {
+          width: $nav-secondary-width;
+
+          i {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

app/views/layouts/_collapse_button.html.haml

-- if nav_menu_collapsed?
-  = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
-- else
-  = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close"

app/views/layouts/_page.html.haml

 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   = render "layouts/broadcast"
+  .expand-nav
+    = link_to icon('bars'), '#', class: 'toggle-nav-collapse', title: "Open sidebar"
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo
       %a#logo
@@ -8,15 +10,19 @@
         .gitlab-text-container
           %h3 GitLab
 
-    - if defined?(sidebar) && sidebar
+    - primary_sidebar = current_user ? 'dashboard' : 'explore'
+
+    - if defined?(sidebar) && sidebar && sidebar != primary_sidebar
+      .complex-sidebar
+        .nav-primary
+          = render "layouts/nav/#{primary_sidebar}"
+        .nav-secondary
           = render "layouts/nav/#{sidebar}"
-    - elsif current_user
-      = render 'layouts/nav/dashboard'
     - else
-      = render 'layouts/nav/explore'
+      = render "layouts/nav/#{primary_sidebar}"
 
     .collapse-nav
-      = render partial: 'layouts/collapse_button'
+      = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Hide sidebar"
     - if current_user
       = link_to current_user, class: 'sidebar-user', title: "Profile" do
         = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'

app/views/layouts/nav/_admin.html.haml

@@ -95,7 +95,7 @@
           Spam Logs
           %span.count= number_with_delimiter(SpamLog.count(:all))
 
-  = nav_link(controller: :application_settings, html_options: { class: 'separate-item'}) do
+  = nav_link(controller: :application_settings) do
     = link_to admin_application_settings_path, title: 'Settings' do
       = icon('cogs fw')
       %span

app/views/layouts/nav/_dashboard.html.haml

@@ -15,12 +15,12 @@
       = icon('dashboard fw')
       %span
         Activity
-  = nav_link(controller: :groups) do
+  = nav_link(path: ['dashboard/groups#index', 'explore/groups#index']) do
     = link_to dashboard_groups_path, title: 'Groups' do
       = icon('group fw')
       %span
         Groups
-  = nav_link(controller: :milestones) do
+  = nav_link(path: 'dashboard#milestones') do
     = link_to dashboard_milestones_path, title: 'Milestones' do
       = icon('clock-o fw')
       %span
@@ -48,7 +48,6 @@
       %span
         Help
 
-  %li.separate-item
   = nav_link(controller: :profile) do
     = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
       = icon('user fw')

app/views/layouts/nav/_group.html.haml

 %ul.nav.nav-sidebar
-  = nav_link do
-    = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
-      = icon('caret-square-o-left fw')
-      %span
-        Go to dashboard
-
-  %li.separate-item
-
   = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
     = link_to group_path(@group), title: 'Home' do
       = icon('group fw')
@@ -42,7 +34,7 @@
       %span
         Members
   - if can?(current_user, :admin_group, @group)
-    = nav_link(html_options: { class: "separate-item" }) do
+    = nav_link do
       = link_to edit_group_path(@group), title: 'Settings' do
         = icon ('cogs fw')
         %span

app/views/layouts/nav/_profile.html.haml

 %ul.nav.nav-sidebar
-  = nav_link do
-    = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
-      = icon('caret-square-o-left fw')
-      %span
-        Go to dashboard
-
-  %li.separate-item
-
   = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
     = link_to profile_path, title: 'Profile Settings' do
       = icon('user fw')

app/views/layouts/nav/_project.html.haml

 %ul.nav.nav-sidebar
-  - if @project.group
-    = nav_link do
-      = link_to group_path(@project.group), title: 'Go to group', class: 'back-link' do
-        = icon('caret-square-o-left fw')
-        %span
-          Go to group
-  - else
-    = nav_link do
-      = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
-        = icon('caret-square-o-left fw')
-        %span
-          Go to dashboard
-
-  %li.separate-item
-
   = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
     = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
       = icon('bookmark fw')
@@ -113,7 +98,7 @@
           Snippets
 
   - if project_nav_tab? :settings
-    = nav_link(html_options: {class: "#{project_tab_class} separate-item"}) do
+    = nav_link(html_options: {class: "#{project_tab_class}"}) do
       = link_to edit_project_path(@project), title: 'Settings' do
         = icon('cogs fw')
         %span

features/groups.feature

@@ -7,10 +7,6 @@ Feature: Groups
     When I visit group "NonExistentGroup" page
     Then page status code should be 404
 
-  Scenario: I should have back to group button
-    When I visit group "Owned" page
-    Then I should see back to dashboard button
-
   @javascript
   Scenario: I should see group "Owned" dashboard list
     When I visit group "Owned" page

features/project/project.feature

@@ -18,15 +18,6 @@ Feature: Project
     Then I should see the default project avatar
     And I should not see the "Remove avatar" button
 
-  Scenario: I should have back to group button
-    And project "Shop" belongs to group
-    And I visit project "Shop" page
-    Then I should see back to group button
-
-  Scenario: I should have back to group button
-    And I visit project "Shop" page
-    Then I should see back to dashboard button
-
   Scenario: I should have readme on page
     And I visit project "Shop" page
     Then I should see project "Shop" README

features/steps/group/milestones.rb

@@ -5,7 +5,9 @@ class Spinach::Features::GroupMilestones < Spinach::FeatureSteps
   include SharedUser
 
   step 'I click on group milestones' do
-    click_link 'Milestones'
+    page.within '.nav-secondary' do
+      click_link("Milestones")
+    end
   end
 
   step 'I should see group milestones index page has no milestones' do

features/steps/groups.rb

@@ -4,10 +4,6 @@ class Spinach::Features::Groups < Spinach::FeatureSteps
   include SharedGroup
   include SharedUser
 
-  step 'I should see back to dashboard button' do
-    expect(page).to have_content 'Go to dashboard'
-  end
-
   step 'I should see group "Owned"' do
     expect(page).to have_content '@owned'
   end

features/steps/project/active_tab.rb

@@ -82,8 +82,10 @@ class Spinach::Features::ProjectActiveTab < Spinach::FeatureSteps
   # Sub Tabs: Issues
 
   step 'I click the "Milestones" tab' do
+    page.within '.nav-secondary' do
       click_link('Milestones')
     end
+  end
 
   step 'I click the "Labels" tab' do
     click_link('Labels')

features/steps/project/fork.rb

@@ -36,7 +36,7 @@ class Spinach::Features::ProjectFork < Spinach::FeatureSteps
   end
 
   step 'I goto the Merge Requests page' do
-    page.within '.page-sidebar-expanded' do
+    page.within '.nav-secondary' do
       click_link "Merge Requests"
     end
   end

features/steps/project/project.rb

@@ -114,8 +114,10 @@ class Spinach::Features::Project < Spinach::FeatureSteps
   end
 
   step 'I should not see "Snippets" button' do
+    page.within '.nav-secondary' do
       expect(page).not_to have_link 'Snippets'
     end
+  end
 
   step 'project "Shop" belongs to group' do
     group = create(:group)
@@ -123,14 +125,6 @@ class Spinach::Features::Project < Spinach::FeatureSteps
     @project.save!
   end
 
-  step 'I should see back to dashboard button' do
-    expect(page).to have_content 'Go to dashboard'
-  end
-
-  step 'I should see back to group button' do
-    expect(page).to have_content 'Go to group'
-  end
-
   step 'I click notifications drop down button' do
     click_link 'notifications-button'
   end

features/steps/shared/project_tab.rb

@@ -41,7 +41,7 @@ module SharedProjectTab
   end
 
   step 'the active main tab should be Settings' do
-    page.within '.nav-sidebar' do
+    page.within '.nav-secondary' do
       expect(page).to have_content('Go to project')
     end
   end