kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

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

Browse source 
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
This commit is contained in:
Dmitriy Zaporozhets 2016-05-06 14:06:02 +00:00
commit b1230bbda6
26 changed files with 184 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/framework/avatar.scss
View file

@ -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; }

35
app/assets/stylesheets/framework/blocks.scss
View file

@ -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 {

4
app/assets/stylesheets/framework/header.scss
View file

@ -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;

2
app/assets/stylesheets/framework/mobile.scss
View file

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

61
app/assets/stylesheets/framework/nav.scss
View file

@ -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;
}

13
app/assets/stylesheets/framework/sidebar.scss
View file

@ -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 {

5
app/assets/stylesheets/framework/variables.scss
View file

@ -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;

18
app/assets/stylesheets/pages/profile.scss
View file

@ -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%;
}
}
}
}

13
app/helpers/nav_helper.rb
View file

@ -34,10 +34,13 @@ module NavHelper
end
def nav_header_class
if nav_menu_collapsed?
"header-collapsed"
else
"header-expanded"
end
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

1
app/views/groups/activity.html.haml
View file

@ -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'

2
app/views/groups/edit.html.haml
View file

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

1
app/views/groups/group_members/index.html.haml
View file

@ -1,5 +1,4 @@
- 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)

1
app/views/groups/issues.html.haml
View file

@ -1,5 +1,4 @@
- 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")

1
app/views/groups/merge_requests.html.haml
View file

@ -1,5 +1,4 @@
- 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

1
app/views/groups/milestones/index.html.haml
View file

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

1
app/views/groups/projects.html.haml
View file

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

32
app/views/groups/show.html.haml
View file

@ -4,28 +4,20 @@
- 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"
.cover-title
%h1
= @group.name
%span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
= visibility_level_icon(@group.visibility_level, fw: false)
= image_tag group_icon(@group), class: "avatar group-avatar s70"
.group-info
.cover-title
%h1
@#{@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)
- if @group.description.present?
.cover-desc.description
= markdown(@group.description, pipeline: :description)
%div{ class: container_class }
.top-area

2
app/views/layouts/_page.html.haml
View file

@ -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) }

2
app/views/layouts/group.html.haml
View file

@ -1,6 +1,6 @@
- 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"

3
app/views/layouts/group_settings.html.haml
View file

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

4
app/views/layouts/nav/_dashboard.html.haml
View file

@ -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

2
app/views/layouts/nav/_explore.html.haml
View file

@ -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

39
app/views/layouts/nav/_group.html.haml
View file

@ -1,12 +1,25 @@
%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

4
features/groups.feature
View file

@ -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

6
features/steps/group/milestones.rb
View file

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

4
features/steps/groups.rb
View file

@ -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