Left-side navigation for group layout

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

8 files changed, 86 insertions, 80 deletions

diff --git a/app/views/groups/_settings_nav.html.haml b/app/views/groups/_settings_nav.html.haml
index ec1fb4a2c00..82d760f7c41 100644
--- a/app/views/groups/_settings_nav.html.haml
+++ b/app/views/groups/_settings_nav.html.haml
@@ -1,4 +1,4 @@
-%ul.nav.nav-pills.nav-stacked.nav-stacked-menu
+%ul.sidebar-subnav
   = nav_link(path: 'groups#edit') do
     = link_to edit_group_path(@group) do
       %i.fa.fa-pencil-square-o
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index eb24fd65d9e..a963c59586e 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -1,41 +1,37 @@
-.row
-  .col-md-2
-    = render 'settings_nav'
-  .col-md-10
-    .panel.panel-default
-      .panel-heading
-        %strong= @group.name
-        group settings:
-      .panel-body
-        = form_for @group, html: { multipart: true, class: "form-horizontal" }, authenticity_token: true do |f|
-          - if @group.errors.any?
-            .alert.alert-danger
-              %span= @group.errors.full_messages.first
-          = render 'shared/group_form', f: f
+.panel.panel-default
+  .panel-heading
+    %strong= @group.name
+    group settings:
+  .panel-body
+    = form_for @group, html: { multipart: true, class: "form-horizontal" }, authenticity_token: true do |f|
+      - if @group.errors.any?
+        .alert.alert-danger
+          %span= @group.errors.full_messages.first
+      = render 'shared/group_form', f: f
 
-          .form-group
-            .col-sm-2
-            .col-sm-10
-              = image_tag group_icon(@group.to_param), alt: '', class: 'avatar s160'
-              %p.light
-                - if @group.avatar?
-                  You can change your group avatar here
-                - else
-                  You can upload a group avatar here
-              = render 'shared/choose_group_avatar_button', f: f
-              - if @group.avatar?
-                %hr
-                = link_to 'Remove avatar', group_avatar_path(@group.to_param), data: { confirm: "Group avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-avatar"
+      .form-group
+        .col-sm-2
+        .col-sm-10
+          = image_tag group_icon(@group.to_param), alt: '', class: 'avatar s160'
+          %p.light
+            - if @group.avatar?
+              You can change your group avatar here
+            - else
+              You can upload a group avatar here
+          = render 'shared/choose_group_avatar_button', f: f
+          - if @group.avatar?
+            %hr
+            = link_to 'Remove avatar', group_avatar_path(@group.to_param), data: { confirm: "Group avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-avatar"
 
-          .form-actions
-            = f.submit 'Save group', class: "btn btn-save"
+      .form-actions
+        = f.submit 'Save group', class: "btn btn-save"
 
-    .panel.panel-danger
-      .panel-heading Remove group
-      .panel-body
-        %p
-          Removing group will cause all child projects and resources to be removed.
-          %br
-          %strong Removed group can not be restored!
+.panel.panel-danger
+  .panel-heading Remove group
+  .panel-body
+    %p
+      Removing group will cause all child projects and resources to be removed.
+      %br
+      %strong Removed group can not be restored!
 
-        = link_to 'Remove Group', @group, data: {confirm: 'Removed group can not be restored! Are you sure?'}, method: :delete, class: "btn btn-remove"
+    = link_to 'Remove Group', @group, data: {confirm: 'Removed group can not be restored! Are you sure?'}, method: :delete, class: "btn btn-remove"
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index 65a66355c56..40c81e8cd5b 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -1,29 +1,25 @@
-.row
-  .col-md-2
-    = render 'settings_nav'
-  .col-md-10
-    .panel.panel-default
-      .panel-heading
-        %strong= @group.name
-        projects:
-        - if can? current_user, :manage_group, @group
-          .panel-head-actions
-            = link_to new_project_path(namespace_id: @group.id), class: "btn btn-new" do
-              %i.fa.fa-plus
-              New Project
-      %ul.well-list
-        - @projects.each do |project|
-          %li
-            .list-item-name
-              = visibility_level_icon(project.visibility_level)
-              %strong= link_to project.name_with_namespace, project
-              %span.label.label-gray
-                = repository_size(project)
-            .pull-right
-              = link_to 'Members', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
-              = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
-              = link_to 'Remove', project, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-small btn-remove"
-        - if @projects.blank?
-          .nothing-here-block This group has no projects yet
+.panel.panel-default
+  .panel-heading
+    %strong= @group.name
+    projects:
+    - if can? current_user, :manage_group, @group
+      .panel-head-actions
+        = link_to new_project_path(namespace_id: @group.id), class: "btn btn-new" do
+          %i.fa.fa-plus
+          New Project
+  %ul.well-list
+    - @projects.each do |project|
+      %li
+        .list-item-name
+          = visibility_level_icon(project.visibility_level)
+          %strong= link_to project.name_with_namespace, project
+          %span.label.label-gray
+            = repository_size(project)
+        .pull-right
+          = link_to 'Members', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
+          = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
+          = link_to 'Remove', project, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-small btn-remove"
+    - if @projects.blank?
+      .nothing-here-block This group has no projects yet
 
-    = paginate @projects, theme: "gitlab"
+= paginate @projects, theme: "gitlab"
diff --git a/app/views/layouts/group.html.haml b/app/views/layouts/group.html.haml
index f22fb236cb5..86ce398e09c 100644
--- a/app/views/layouts/group.html.haml
+++ b/app/views/layouts/group.html.haml
@@ -1,12 +1,16 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: group_head_title
-  %body{class: "#{app_theme} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme} application sidenav", :'data-page' => body_data_page}
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: "group: #{@group.name}"
-    %nav.main-nav.navbar-collapse.collapse
-      .container= render 'layouts/nav/group'
-    .container
-      .content
-        = render "layouts/flash"
-        = yield
+    .page-with-sidebar
+      .sidebar-wrapper
+        = render 'layouts/nav/group'
+      .content-wrapper
+        .container-fluid
+          .content
+            = render "layouts/flash"
+            .clearfix
+              = yield
+    = yield :embedded_scripts
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index 9095a843c9f..686280c9ec7 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -1,25 +1,35 @@
-%ul
+%ul.nav.nav-sidebar.navbar-collapse.collapse
   = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
     = link_to group_path(@group), title: "Home" do
+      %i.fa.fa-dashboard
       Activity
   = nav_link(controller: [:group, :milestones]) do
     = link_to group_milestones_path(@group) do
+      %i.fa.fa-clock-o
       Milestones
   = nav_link(path: 'groups#issues') do
     = link_to issues_group_path(@group) do
+      %i.fa.fa-exclamation-circle
       Issues
       - if current_user
         %span.count= current_user.assigned_issues.opened.of_group(@group).count
   = nav_link(path: 'groups#merge_requests') do
     = link_to merge_requests_group_path(@group) do
+      %i.fa.fa-tasks
       Merge Requests
       - if current_user
         %span.count= current_user.cared_merge_requests.opened.of_group(@group).count
   = nav_link(path: 'groups#members') do
-    = link_to "Members", members_group_path(@group)
+    = link_to members_group_path(@group) do
+      %i.fa.fa-users
+      Members
 
   - if can?(current_user, :manage_group, @group)
-    = nav_link(path: 'groups#edit') do
-      = link_to edit_group_path(@group), class: "tab " do
+    = nav_link(html_options: { class: "#{"active" if group_settings_page?} separate-item" }) do
+      = link_to edit_group_path(@group), class: "tab no-highlight" do
+        %i.fa.fa-cogs
         Settings
+        %i.fa.fa-angle-down
 
+  - if group_settings_page?
+    = render 'groups/settings_nav'
diff --git a/app/views/layouts/project_settings.html.haml b/app/views/layouts/project_settings.html.haml
index 0dcadc2d9c6..47bc007fc6a 100644
--- a/app/views/layouts/project_settings.html.haml
+++ b/app/views/layouts/project_settings.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @project.name_with_namespace
-  %body{class: "#{app_theme} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
+  %body{class: "#{app_theme} sidenav project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: project_title(@project)
     = render "layouts/init_auto_complete"
diff --git a/app/views/layouts/projects.html.haml b/app/views/layouts/projects.html.haml
index 834f078330c..644187b0998 100644
--- a/app/views/layouts/projects.html.haml
+++ b/app/views/layouts/projects.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: project_head_title
-  %body{class: "#{app_theme} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
+  %body{class: "#{app_theme} sidenav project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: project_title(@project)
     = render "layouts/init_auto_complete"
diff --git a/app/views/projects/_settings_nav.html.haml b/app/views/projects/_settings_nav.html.haml
index 821bc237779..591b5b0e160 100644
--- a/app/views/projects/_settings_nav.html.haml
+++ b/app/views/projects/_settings_nav.html.haml
@@ -1,4 +1,4 @@
-%ul.project-settings-nav
+%ul.project-settings-nav.sidebar-subnav
   = nav_link(path: 'projects#edit') do
     = link_to edit_project_path(@project), class: "stat-tab tab " do
       %i.fa.fa-pencil-square-o