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

Merge branch '18013-compact-sidebar' into 'master'

Browse source 
Implement compact side nav

## What does this MR do?
Implements new compact nav design   
Note- new navbar icons are in a separate MR (https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/4268)

## What are the relevant issue numbers?
Closes #18013 

## Screenshots (if relevant)
![Screen_Shot_2016-06-02_at_3.20.37_PM](/uploads/d31bd17ae47743f1a20d7429b4396e84/Screen_Shot_2016-06-02_at_3.20.37_PM.png)   
![Screen_Shot_2016-06-02_at_3.20.43_PM](/uploads/d03a080a57707b6a2161127f3904fcd5/Screen_Shot_2016-06-02_at_3.20.43_PM.png)

cc @dzaporozhets 

See merge request !4447
This commit is contained in:
Jacob Schatz 2016-06-07 17:00:44 +00:00
commit 7d315aecfb
8 changed files with 61 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/stylesheets/framework/gitlab-theme.scss
View file

@ -89,8 +89,11 @@
}
}
$theme-blue: #2980b9;
$theme-charcoal: #3d454d;
$theme-charcoal-dark: #383f45;
$theme-charcoal-text: #b9bbbe;
$theme-blue: #2980b9;
$theme-graphite: #666;
$theme-gray: #373737;
$theme-green: #019875;
@ -102,7 +105,7 @@ body {
}
&.ui_charcoal {
@include gitlab-theme(#d6d7d9, #485157, $theme-charcoal, #353b41);
@include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
}
&.ui_graphite {

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

@ -79,6 +79,10 @@ header {
&.header-collapsed {
padding: 0 16px;
.side-nav-toggle {
display: block;
}
}
.side-nav-toggle {
@ -86,6 +90,7 @@ header {
position: absolute;
left: -10px;
margin: 6px 0;
font-size: 18px;
padding: 6px 10px;
border: none;
background-color: $background-color;
@ -97,10 +102,6 @@ header {
&:focus {
outline: none;
}
@media (max-width: $screen-xs-min) {
display: block;
}
}
}
@ -171,31 +172,21 @@ header {
}
}
@mixin collapsed-header {
margin-left: $sidebar_collapsed_width;
}
.header-collapsed {
margin-left: $sidebar_collapsed_width;
margin-left: 0;
@media (min-width: $screen-md-min) {
@include collapsed-header;
}
@media (max-width: $screen-xs-min) {
margin-left: 0;
.header-content {
padding-left: 30px;
transition-duration: .3s;
}
}
.header-expanded {
margin-left: $sidebar_collapsed_width;
margin-left: 0;
@media (min-width: $screen-md-min) {
margin-left: $sidebar_width;
}
@media (max-width: $screen-xs-min) {
margin-left: 0;
.header-content {
padding-left: $sidebar_width;
transition-duration: .3s;
}
}

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

@ -1,11 +1,3 @@
#logo {
z-index: 2;
position: absolute;
width: 58px;
cursor: pointer;
margin-top: 8px;
}
.page-with-sidebar {
padding-top: $header-height;
transition-duration: .3s;
@ -20,12 +12,6 @@
height: 100%;
transition-duration: .3s;
}
.gitlab-text-container-link {
z-index: 1;
position: absolute;
left: 0;
}
}
.sidebar-wrapper {
@ -50,47 +36,8 @@
.sidebar-wrapper {
.header-logo {
border-bottom: 1px solid transparent;
float: left;
height: $header-height;
width: $sidebar_width;
position: fixed;
z-index: 999;
overflow: hidden;
transition-duration: .3s;
a {
float: left;
height: $header-height;
width: 100%;
padding-left: 22px;
overflow: hidden;
outline: none;
transition-duration: .3s;
img {
width: 36px;
height: 36px;
}
#tanuki-logo, img {
float: left;
}
.gitlab-text-container {
width: 230px;
h3 {
width: 158px;
float: left;
margin: 0;
margin-left: 50px;
font-size: 19px;
line-height: 50px;
font-weight: normal;
}
}
}
padding: 8px 26px;
&:hover {
background-color: #eee;
@ -98,7 +45,7 @@
}
.sidebar-user {
padding: 7px 22px;
padding: 15px 22px;
position: fixed;
bottom: 40px;
width: $sidebar_width;
@ -126,8 +73,7 @@
.nav-sidebar {
margin-top: 14 + $header-height;
margin-bottom: 100px;
margin: 22px 0;
transition-duration: .3s;
list-style: none;
overflow: hidden;
@ -145,13 +91,12 @@
}
a {
padding: 7px 15px;
text-align: center;
padding: 8px;
font-size: $gl-font-size;
line-height: 24px;
color: $gray;
display: block;
text-decoration: none;
padding-left: 23px;
font-weight: normal;
outline: none;
@ -166,14 +111,12 @@
i {
width: 16px;
color: $gray-light;
margin-right: 13px;
}
.count {
float: right;
background: #eee;
padding: 0 8px;
@include border-radius(6px);
.nav-link-text {
margin-top: 3px;
font-size: 13px;
line-height: 18px;
}
&.back-link i {
@ -217,25 +160,13 @@
}
.page-sidebar-collapsed {
padding-left: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
padding-left: 0;
}
padding-left: 0;
.sidebar-wrapper {
width: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
width: 0;
}
width: 0;
.header-logo {
width: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
width: 0;
}
width: 0;
a {
padding-left: ($sidebar_collapsed_width - 36) / 2;
@ -246,6 +177,10 @@
}
}
#logo {
display: none;
}
.nav-sidebar {
width: $sidebar_collapsed_width;
@ -261,44 +196,23 @@
}
.collapse-nav a {
width: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
width: 0;
}
width: 0;
}
.sidebar-user {
padding-left: ($sidebar_collapsed_width - 36) / 2;
width: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
width: 0;
padding-left: 0;
padding-right: 0;
}
width: 0;
padding-left: 0;
padding-right: 0;
.username {
display: none;
}
}
}
.layout-nav {
padding-right: $sidebar_collapsed_width;
@media (max-width: $screen-xs-min) {
padding-right: 0;;
}
}
}
.page-sidebar-expanded {
padding-left: $sidebar_collapsed_width;
@media (min-width: $screen-md-min) {
padding-left: $sidebar_width;
}
padding-left: $sidebar_width;
@media (max-width: $screen-xs-min) {
padding-left: 0;
@ -328,7 +242,7 @@
}
@media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
padding-right: 62px;
padding-right: 90px;
}
@media (min-width: $screen-md-min) {

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

@ -2,7 +2,7 @@
* Layout
*/
$sidebar_collapsed_width: 62px;
$sidebar_width: 220px;
$sidebar_width: 90px;
$gutter_collapsed_width: 62px;
$gutter_width: 290px;
$gutter_inner_width: 258px;

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

@ -1,11 +1,9 @@
.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
.sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
.header-logo
%a#logo
= brand_header_logo
= link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
.gitlab-text-container
%h3 GitLab
= link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
.header-logo
#logo
= brand_header_logo
- if defined?(sidebar) && sidebar
= render "layouts/nav/#{sidebar}"
@ -17,10 +15,8 @@
.collapse-nav
= render partial: 'layouts/collapse_button'
- 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'
.username
= current_user.username
= link_to current_user, class: 'sidebar-user', title: "Profile", data: {user: current_user.username} do
= image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s46'
- if defined?(nav) && nav
.layout-nav
.container-fluid

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

@ -2,54 +2,50 @@
= nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do
= link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
= icon('bookmark fw')
%span
.nav-link-text
Projects
= nav_link(controller: :todos) do
= link_to dashboard_todos_path, title: 'Todos' do
= icon('bell fw')
%span
.nav-link-text
Todos
%span.count.todos-pending-count= number_with_delimiter(todos_pending_count)
= nav_link(path: 'dashboard#activity') do
= link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
= icon('dashboard fw')
%span
.nav-link-text
Activity
= nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
= link_to dashboard_groups_path, title: 'Groups' do
= icon('group fw')
%span
.nav-link-text
Groups
= nav_link(controller: 'dashboard/milestones') do
= link_to dashboard_milestones_path, title: 'Milestones' do
= icon('clock-o fw')
%span
.nav-link-text
Milestones
= nav_link(path: 'dashboard#issues') do
= link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
= icon('exclamation-circle fw')
%span
.nav-link-text
Issues
%span.count= number_with_delimiter(current_user.assigned_open_issues_count)
= nav_link(path: 'dashboard#merge_requests') do
= link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
= icon('tasks fw')
%span
.nav-link-text
Merge Requests
%span.count= number_with_delimiter(current_user.assigned_open_merge_request_count)
= nav_link(controller: :snippets) do
= link_to dashboard_snippets_path, title: 'Snippets' do
= icon('clipboard fw')
%span
.nav-link-text
Snippets
= nav_link(controller: :help) do
= link_to help_path, title: 'Help' do
= icon('question-circle fw')
%span
.nav-link-text
Help
= nav_link(html_options: {class: profile_tab_class}) do
= link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
= icon('user fw')
%span
.nav-link-text
Profile Settings

2
features/steps/dashboard/todos.rb
View file

@ -26,7 +26,6 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
end
step 'I should see todos assigned to me' do
page.within('.nav-sidebar') { expect(page).to have_content 'Todos 4' }
expect(page).to have_content 'To do 4'
expect(page).to have_content 'Done 0'
@ -42,7 +41,6 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
click_link 'Done'
end
page.within('.nav-sidebar') { expect(page).to have_content 'Todos 3' }
expect(page).to have_content 'To do 3'
expect(page).to have_content 'Done 1'
should_not_see_todo "John Doe assigned you merge request #{merge_request.to_reference}"

8
spec/features/admin/admin_users_spec.rb
View file

@ -144,8 +144,8 @@ describe "Admin::Users", feature: true do
before { click_link 'Impersonate' }
it 'logs in as the user when impersonate is clicked' do
page.within '.sidebar-user .username' do
expect(page).to have_content(another_user.username)
page.within '.sidebar-wrapper' do
expect(page.find('.sidebar-user')['data-user']).to eql(another_user.username)
end
end
@ -158,8 +158,8 @@ describe "Admin::Users", feature: true do
it 'can log out of impersonated user back to original user' do
find(:css, 'li.impersonation a').click
page.within '.sidebar-user .username' do
expect(page).to have_content(@user.username)
page.within '.sidebar-wrapper' do
expect(page.find('.sidebar-user')['data-user']).to eql(@user.username)
end
end