Merge branch 'group-navigation-redesign' into 'master'

Redesign navigation for group pages

Part of #14838. This MR targets on desktop version. Mobile version improvements will be in separate merge request 

See merge request !3980

app/assets/stylesheets/framework/avatar.scss

@@ -28,6 +28,7 @@
   &.s46 { width: 46px; height: 46px; margin-right: 15px; }
   &.s48 { width: 48px; height: 48px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }
+  &.s70 { width: 70px; height: 70px; margin-right: 14px; }
   &.s90 { width: 90px; height: 90px; margin-right: 15px; }
   &.s110 { width: 110px; height: 110px; margin-right: 15px; }
   &.s140 { width: 140px; height: 140px; margin-right: 20px; }

app/assets/stylesheets/framework/blocks.scss

@@ -155,6 +155,41 @@
       right: auto;
     }
   }
+
+  &.groups-cover-block {
+    background: $white-light;
+    border-bottom: 1px solid $border-color;
+    text-align: left;
+    padding: 24px 0;
+
+    .group-info {
+      .cover-title {
+        margin-top: 9px;
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      text-align: center;
+
+      .avatar {
+        float: none;
+      }
+    }
+  }
+
+  .group-info {
+
+    h1 {
+      display: inline;
+      font-weight: normal;
+      font-size: 24px;
+      color: $gl-title-color;
+    }
+  }
 }
 
 .block-connector {

app/assets/stylesheets/framework/header.scss

@@ -30,6 +30,10 @@ header {
     border: none;
     border-bottom: 1px solid $border-color;
 
+    &.with-horizontal-nav {
+      border-bottom: none;
+    }
+
     .container-fluid {
       width: 100% !important;
       filter: none;

app/assets/stylesheets/framework/mobile.scss

@@ -30,7 +30,7 @@
   }
 
   .rss-btn {
-    display: none !important;
+    display: none;
   }
 
   .project-home-links {

app/assets/stylesheets/framework/nav.scss

@@ -26,8 +26,8 @@
     }
 
     &.active a {
-      color: #000;
-      border-bottom: 2px solid #4688f1;
+      border-bottom: 2px solid $link-underline-blue;
+      color: $black;
     }
 
     .badge {
@@ -140,6 +140,12 @@
       }
     }
 
+    .project-filter-form {
+      input {
+        background-color: $background-color;
+      }
+    }
+
     @media (max-width: $screen-xs-max) {
       padding-bottom: 0;
 
@@ -187,13 +193,31 @@
 }
 
 .layout-nav {
+  position: fixed;
+  top: $header-height;
+  width: 100%;
+  z-index: 1;
   background: $background-color;
   border-bottom: 1px solid $border-color;
+  transition-duration: .3s;
 
   .controls {
     float: right;
-    position: relative;
-    top: 10px;
+    padding: 7px 5px 0 0;
+
+    i {
+      color: $layout-link-gray;
+    }
+
+    .fa-rss,
+    .fa-cog {
+      font-size: 16px;
+    }
+
+    .fa-caret-down {
+      margin-left: 5px;
+      color: $gl-icon-color;
+    }
 
     .dropdown {
       margin-left: 7px;
@@ -202,5 +226,34 @@
 
   .nav-links {
     border-bottom: none;
+    height: 51px;
+    white-space: nowrap;
+    overflow-x: auto;
+
+    li {
+
+      a {
+        padding-top: 10px;
+      }
+
+      a, i {
+        color: $layout-link-gray;
+      }
+
+      &.active {
+        a, i {
+          color: $black;
+        }
+      }
+
+      .badge {
+        color: $gl-icon-color;
+      }
+    }
   }
+
+}
+
+.page-with-layout-nav {
+  margin-top: 50px;
 }

app/assets/stylesheets/framework/sidebar.scss

@@ -3,6 +3,7 @@
   position: absolute;
   width: 58px;
   cursor: pointer;
+  margin-top: 8px;
 }
 
 .page-with-sidebar {
@@ -62,7 +63,7 @@
       float: left;
       height: $header-height;
       width: 100%;
-      padding: 11px 0 11px 22px;
+      padding-left: 22px;
       overflow: hidden;
       outline: none;
       transition-duration: .3s;
@@ -85,7 +86,7 @@
           margin: 0;
           margin-left: 50px;
           font-size: 19px;
-          line-height: 41px;
+          line-height: 50px;
           font-weight: normal;
         }
       }
@@ -254,6 +255,10 @@
       }
     }
   }
+
+  .layout-nav {
+    padding-right: $sidebar_collapsed_width;
+  }
 }
 
 .page-sidebar-expanded {
@@ -280,6 +285,10 @@
       }
     }
   }
+
+  .layout-nav {
+    padding-right: $sidebar_width;
+  }
 }
 
 .right-sidebar-collapsed {

app/assets/stylesheets/framework/variables.scss

@@ -66,7 +66,7 @@ $gl-padding-top: 10px;
 $row-hover: #f4f8fe;
 $progress-color: #c0392b;
 $avatar_radius: 50%;
-$header-height: 58px;
+$header-height: 50px;
 $fixed-layout-width: 1280px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
@@ -75,6 +75,8 @@ $btn-transparent-color: #8f8f8f;
 $settings-icon-size: 18px;
 $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
+$link-underline-blue: #4a8bee;
+$layout-link-gray: #7e7c7c;
 
 /*
  * Color schema
@@ -109,6 +111,7 @@ $red-light: #e52c5a;
 $red-normal: #d22852;
 $red-dark: darken($red-normal, 5%);
 
+$black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 
 $border-white-light: #f1f2f4;

app/assets/stylesheets/pages/profile.scss

@@ -205,3 +205,21 @@
     text-align: center;
   }
 }
+
+.user-profile {
+  @media (max-width: $screen-xs-max) {
+    .cover-block {
+      padding-top: 20px;
+    }
+
+    .cover-controls {
+      position: static;
+      margin-bottom: 20px;
+
+      .btn {
+        display: inline-block;
+        width: 48%;
+      }
+    }
+  }
+}

app/helpers/nav_helper.rb

@@ -34,10 +34,13 @@ module NavHelper
   end
 
   def nav_header_class
+    class_name =
       if nav_menu_collapsed?
         "header-collapsed"
       else
         "header-expanded"
       end
+    class_name += " with-horizontal-nav" if defined?(nav) && nav
+    class_name
   end
 end

app/views/groups/activity.html.haml

@@ -3,7 +3,6 @@
     = auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
 
 - page_title    "Activity"
-- header_title  group_title(@group, "Activity", activity_group_path(@group))
 
 %section.activities
   = render 'activities'

app/views/groups/edit.html.haml

-- header_title group_title(@group, "Settings", edit_group_path(@group))
-
 .panel.panel-default.prepend-top-default
   .panel-heading
     Group settings

app/views/groups/group_members/index.html.haml

 - page_title "Members"
-- header_title group_title(@group, "Members", group_group_members_path(@group))
 
 .group-members-page.prepend-top-default
   - if current_user && current_user.can?(:admin_group_member, @group)

app/views/groups/issues.html.haml

 - page_title "Issues"
-- header_title group_title(@group, "Issues", issues_group_path(@group))
 = content_for :meta_tags do
   - if current_user
     = auto_discovery_link_tag(:atom, issues_group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} issues")

app/views/groups/merge_requests.html.haml

 - page_title "Merge Requests"
-- header_title group_title(@group, "Merge Requests", merge_requests_group_path(@group))
 
 .top-area
   = render 'shared/issuable/nav', type: :merge_requests

app/views/groups/milestones/index.html.haml

 - page_title "Milestones"
-- header_title group_title(@group, "Milestones", group_milestones_path(@group))
 
 .top-area
   = render 'shared/milestones_filter'

app/views/groups/projects.html.haml

 - page_title "Projects"
-- header_title group_title(@group, "Projects", projects_group_path(@group))
 
 .panel.panel-default.prepend-top-default
   .panel-heading

app/views/groups/show.html.haml

@@ -4,25 +4,17 @@
   - if current_user
     = auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
 
-.cover-block
-  .cover-controls
-    - if @group && can?(current_user, :admin_group, @group)
-      = link_to icon('pencil'), edit_group_path(@group), class: 'btn'
-    - if current_user
-      = link_to icon('rss'), group_path(@group, { format: :atom, private_token: current_user.private_token }), title: "Feed", class: 'btn rss-btn'
-
-  .avatar-holder
+.cover-block.groups-cover-block
+  .container-fluid.container-limited
     = link_to group_icon(@group), target: '_blank' do
-      = image_tag group_icon(@group), class: "avatar group-avatar s90"
+      = image_tag group_icon(@group), class: "avatar group-avatar s70"
+    .group-info
       .cover-title
         %h1
-      = @group.name
+          @#{@group.path}
           %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
             = visibility_level_icon(@group.visibility_level, fw: false)
 
-  .cover-desc.username
-    @#{@group.path}
-
       - if @group.description.present?
         .cover-desc.description
           = markdown(@group.description, pipeline: :description)

app/views/layouts/_page.html.haml

@@ -26,7 +26,7 @@
     .layout-nav
       .container-fluid
         = render "layouts/nav/#{nav}"
-  .content-wrapper
+  .content-wrapper{ class: ('page-with-layout-nav' if defined?(nav) && nav) }
     = render "layouts/flash"
     = yield :flash_message
     %div{ class: (container_class unless @no_container) }

app/views/layouts/group.html.haml

 - page_title       @group.name
 - page_description @group.description  unless page_description
 - header_title     group_title(@group) unless header_title
-- sidebar          "group"             unless sidebar
+- nav              "group"
 
 = render template: "layouts/application"

app/views/layouts/group_settings.html.haml

 - page_title    "Settings"
-- header_title group_title(@group, "Settings", edit_group_path(@group))
-- sidebar       "group_settings"
+- nav           "group"
 
 = render template: "layouts/group"

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

@@ -15,12 +15,12 @@
       = icon('dashboard fw')
       %span
         Activity
-  = nav_link(controller: :groups) do
+  = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to dashboard_groups_path, title: 'Groups' do
       = icon('group fw')
       %span
         Groups
-  = nav_link(controller: :milestones) do
+  = nav_link(controller: 'dashboard/milestones') do
     = link_to dashboard_milestones_path, title: 'Milestones' do
       = icon('clock-o fw')
       %span

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

@@ -4,7 +4,7 @@
       = icon('bookmark fw')
       %span
         Projects
-  = nav_link(controller: :groups) do
+  = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to explore_groups_path, title: 'Groups' do
       = icon('group fw')
       %span

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
+- if current_user
+  - if access = @group.users.find_by(id: current_user.id)
+    .controls
+      %span.dropdown.group-settings-dropdown
+        %a.dropdown-new.btn.btn-gray#group-settings-button{href: '#', 'data-toggle' => 'dropdown'}
+          = icon('cog')
+          = icon('caret-down')
+        %ul.dropdown-menu.dropdown-menu-align-right
+          - if can?(current_user, :admin_group, @group)
+            = nav_link(path: 'groups#projects') do
+              = link_to projects_group_path(@group), title: 'Projects' do
+                Projects
+            %li.divider
+            %li
+              = link_to edit_group_path(@group) do
+                Edit Group
+          %li
+            = link_to leave_group_group_members_path(@group),
+              data: { confirm: leave_group_message(@group.name) }, method: :delete, title: 'Leave group' do
+              Leave Group
 
+%ul.nav-links
   = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
     = link_to group_path(@group), title: 'Home' do
       = icon('group fw')
@@ -28,22 +41,16 @@
       %span
         Issues
         - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-        %span.count= number_with_delimiter(issues.count)
+        %span.badge.count= number_with_delimiter(issues.count)
   = nav_link(path: 'groups#merge_requests') do
     = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
       = icon('tasks fw')
       %span
         Merge Requests
         - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-        %span.count= number_with_delimiter(merge_requests.count)
+        %span.badge.count= number_with_delimiter(merge_requests.count)
   = nav_link(controller: [:group_members]) do
     = link_to group_group_members_path(@group), title: 'Members' do
       = icon('users fw')
       %span
         Members
-  - if can?(current_user, :admin_group, @group)
-    = nav_link(html_options: { class: "separate-item" }) do
-      = link_to edit_group_path(@group), title: 'Settings' do
-        = icon ('cogs fw')
-        %span
-          Settings

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/steps/group/milestones.rb

@@ -5,8 +5,10 @@ class Spinach::Features::GroupMilestones < Spinach::FeatureSteps
   include SharedUser
 
   step 'I click on group milestones' do
+    page.within('.layout-nav') do
       click_link 'Milestones'
     end
+  end
 
   step 'I should see group milestones index page has no milestones' do
     expect(page).to have_content('No milestones to show')
@@ -84,7 +86,7 @@ class Spinach::Features::GroupMilestones < Spinach::FeatureSteps
   end
 
   step 'I click on the "Labels" tab' do
-    page.within('.nav-links') do
+    page.within('.content .nav-links') do
       page.find(:xpath, "//a[@href='#tab-labels']").click
     end
   end

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