Merge branch 'new-sidebar' into 'master'

New sidebar design

I want to make separation between sidebar and content

- [x] change sidebar and header colors
- [x] change colors for old light theme so it matches dark style too
- [x] rename theme names to something more reasonable
- [x] fix header logo collapse with JS
- [x] fix navless layouts (explore page, login page, snippets, user page)
- [x] fix tests

See merge request !558

app/assets/javascripts/sidebar.js.coffee

@@ -4,6 +4,7 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
   expanded = 'page-sidebar-expanded'
 
   $('.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: '/' })
 )

app/assets/stylesheets/base/mixins.scss

@@ -50,13 +50,6 @@
   @include box-shadow(0 0 0 3px #f1f1f1);
 }
 
-@mixin header-font {
-  color: $style_color;
-  font-size: 16px;
-  line-height: 44px;
-  font-weight: normal;
-}
-
 @mixin md-typography {
   font-size: 15px;
   line-height: 1.5;

app/assets/stylesheets/pages/header.scss → app/assets/stylesheets/generic/header.scss

@@ -11,9 +11,55 @@ header {
     width: 100%;
 
     .navbar-inner {
+      background: #FFF;
+      border-bottom: 1px solid #DDD;
       filter: none;
 
+      .title {
+        position: relative;
+        float: left;
+        margin: 0;
+        margin-left: 25px;
+        font-size: 18px;
+        line-height: 44px;
+        font-weight: normal;
+        color: #555;
+
+        @include str-truncated(37%);
+
+        a {
+          color: #555;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .app_logo {
+        border-bottom: 1px solid transparent;
+        margin-bottom: -1px;
+
+        a {
+          padding: 5px 8px;
+
+          img {
+            float: left;
+          }
+
+          h3 {
+            width: 158px;
+            float: left;
+            margin: 0;
+            margin-left: 20px;
+            font-size: 18px;
+            line-height: 34px;
+            font-weight: normal;
+          }
+        }
+      }
+
       .nav > li > a {
+        color: #666;
         font-size: 14px;
         line-height: 32px;
         padding: 6px 10px;
@@ -100,10 +146,8 @@ header {
 
     a {
       float: left;
-      padding: 5px 0;
       height: 46px;
-      width: 52px;
-      text-align: center;
+      width: 100%;
 
       img {
         width: 36px;
@@ -115,20 +159,6 @@ header {
     }
   }
 
-  /**
-   *
-   * Project / Area name
-   *
-   */
-  .title {
-    position: relative;
-    float: left;
-    margin: 0;
-    margin-left: 5px;
-    @include header-font;
-    @include str-truncated(37%);
-  }
-
   .profile-pic {
     padding: 0px !important;
     width: 46px;
@@ -164,9 +194,10 @@ header {
       padding-left: 25px;
       font-size: 13px;
       @include border-radius(3px);
-      border: 1px solid #c6c6c6;
+      border: 1px solid #DDD;
       box-shadow: none;
       @include transition(all 0.15s ease-in 0s);
+      background-color: #f5f5f5;
     }
   }
 }
@@ -192,3 +223,26 @@ header {
     right: 35px !important;
   }
 }
+
+@media (max-width: $screen-md-max) {
+  .header-collapsed, .header-expanded {
+    width: 52px;
+
+    h3 {
+      display: none;
+    }
+  }
+}
+
+@media(min-width: $screen-md-max) {
+  .header-collapsed {
+    width: 52px;
+
+    h3 {
+      display: none;
+    }
+  }
+
+  .header-expanded {
+  }
+}

app/assets/stylesheets/generic/nav_sidebar.scss → app/assets/stylesheets/generic/sidebar.scss

@@ -6,7 +6,6 @@
     top: 0;
     left: 0;
     height: 100%;
-    border-right: 1px solid $border-color;
   }
 }
 
@@ -38,28 +37,10 @@
 }
 
 .nav-sidebar li {
-  &.active a {
-    color: $text-color;
-    background: #FFF !important;
-    font-weight: bold;
-    border: 1px solid #EEE;
-    border-right: 1px solid transparent;
-    border-left: 3px solid $style_color;
-
-    &.no-highlight {
-      background: none !important;
-      border: none;
-    }
-
-    i {
-      color: $text-color;
-    }
-  }
 }
 
 .nav-sidebar li {
   &.separate-item {
-    border-top: 1px solid $border-color;
     padding-top: 10px;
     margin-top: 10px;
   }
@@ -75,8 +56,6 @@
 
     &:hover {
       text-decoration: none;
-      color: $text-color;
-      background: $border-color;
     }
 
     &:active, &:focus {
@@ -158,9 +137,6 @@
   left: 198px;
   font-size: 13px;
   background: transparent;
-  color: black;
-  border-left: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
 }
 
 .collapse-nav a:hover {

app/assets/stylesheets/pages/profile.scss

@@ -37,7 +37,7 @@
       }
 
       &.default {
-        background: #f1f1f1;
+        background: #888888;
       }
 
       &.modern {

app/assets/stylesheets/themes/dark-theme.scss

-@mixin dark-theme($color-light, $color, $color-darker, $color-dark) {
-  header {
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: $color;
-
-        .navbar-toggle {
-          color: #FFF;
-        }
-
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: $color-darker;
-          }
-        }
-
-        .app_logo {
-          background-color: $color-dark;
-        }
-
-        .title {
-          color: #FFF;
-
-          a {
-            color: #FFF;
-            &:hover {
-              text-decoration: underline;
-            }
-          }
-        }
-
-        .search {
-          .search-input {
-            background-color: $color-light;
-            background-color: rgba(255, 255, 255, 0.5);
-            border: 1px solid $color-light;
-
-            &:focus {
-              background-color: white;
-            }
-          }
-        }
-
-        .search-input::-webkit-input-placeholder {
-          color: #666;
-        }
-
-        .nav > li > a {
-          color: $color-light;
-
-          &:hover, &:focus, &:active {
-            background: none;
-            color: #FFF;
-          }
-        }
-
-        .search-input {
-          border-color: $color-light;
-        }
-      }
-    }
-  }
-}

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

+@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
+  header {
+    &.navbar-gitlab {
+      .navbar-inner {
+        .navbar-toggle {
+          color: #FFF;
+        }
+
+        .app_logo, .navbar-toggle {
+          a {
+            color: $color-light;
+          }
+          background-color: $color-darker;
+
+          &:hover {
+            background-color: $color-dark;
+            a {
+              color: #FFF;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .page-with-sidebar {
+    background: $color-darker;
+
+    .collapse-nav a {
+      color: #FFF;
+      background: $color;
+    }
+
+    .sidebar-wrapper {
+      background: $color-darker;
+      border-right: 1px solid $color-darker;
+    }
+
+    .nav-sidebar li {
+      a {
+        color: $color-light;
+
+        &:hover, &:focus, &:active {
+          background: $color-dark;
+        }
+
+        i {
+          color: $color-light;
+        }
+
+        .count {
+          color: $color-light;
+          background: $color-dark;
+        }
+      }
+
+      &.separate-item {
+        border-top: 1px solid $color;
+      }
+
+      &.active a {
+        color: #FFF;
+        font-weight: bold;
+
+        &.no-highlight {
+          border: none;
+        }
+
+        i {
+          color: #FFF
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/ui_basic.scss

@@ -4,27 +4,5 @@
  *
  */
 .ui_basic {
-  header {
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #F1F1F1;
-        border-bottom: 1px solid #DDD;
-
-        .title {
-          color: #555;
-
-          a {
-            color: #555;
-            &:hover {
-              text-decoration: underline;
-            }
-          }
-        }
-
-        .nav > li > a {
-          color: $style_color;
-        }
-      }
-    }
-  }
+  @include gitlab-theme(#CCCCCC, #888888, #777777, #666666);
 }

app/assets/stylesheets/themes/ui_blue.scss

@@ -2,5 +2,5 @@
  * Blue GitLab UI theme
  */
 .ui_blue {
-  @include dark-theme(#BECDE9, #2980b9, #1970a9, #096099);
+  @include gitlab-theme(#BECDE9, #2980b9, #1970a9, #096099);
 }

app/assets/stylesheets/themes/ui_color.scss

@@ -2,5 +2,5 @@
  * Violet GitLab UI theme
  */
 .ui_color {
-  @include dark-theme(#98C, #548, #436, #325);
+  @include gitlab-theme(#98C, #548, #436, #325);
 }

app/assets/stylesheets/themes/ui_gray.scss

@@ -2,5 +2,5 @@
  * Gray GitLab UI theme
  */
 .ui_gray {
-  @include dark-theme(#979797, #373737, #272727, #222222);
+  @include gitlab-theme(#979797, #373737, #272727, #222222);
 }

app/assets/stylesheets/themes/ui_mars.scss

@@ -2,5 +2,5 @@
  * Classic GitLab UI theme
  */
 .ui_mars {
-  @include dark-theme(#979DA7, #474D57, #373D47, #24272D);
+  @include gitlab-theme(#979DA7, #474D57, #373D47, #24272D);
 }

app/assets/stylesheets/themes/ui_modern.scss

@@ -2,5 +2,5 @@
  * Modern GitLab UI theme
  */
 .ui_modern {
-  @include dark-theme(#ADC, #019875, #018865, #017855);
+  @include gitlab-theme(#ADC, #019875, #018865, #017855);
 }

app/controllers/snippets_controller.rb

@@ -16,10 +16,7 @@ class SnippetsController < ApplicationController
   layout :determine_layout
 
   def index
-    @snippets = SnippetsFinder.new.execute(current_user, filter: :all).page(params[:page]).per(PER_PAGE)
-  end
-
-  def user_index
+    if params[:username].present?
       @user = User.find_by(username: params[:username])
 
       render_404 and return unless @user
@@ -35,6 +32,9 @@ class SnippetsController < ApplicationController
       else
         render 'user_index'
       end
+    else
+      @snippets = SnippetsFinder.new.execute(current_user, filter: :all).page(params[:page]).per(PER_PAGE)
+    end
   end
 
   def new
@@ -108,6 +108,6 @@ class SnippetsController < ApplicationController
   end
 
   def determine_layout
-    current_user ? 'navless' : 'public_users'
+    current_user ? 'snippets' : 'public_users'
   end
 end

app/helpers/application_helper.rb

@@ -318,12 +318,4 @@ module ApplicationHelper
       profile_key_path(key)
     end
   end
-
-  def nav_sidebar_class
-    if nav_menu_collapsed?
-      "page-sidebar-collapsed"
-    else
-      "page-sidebar-expanded"
-    end
-  end
 end

app/helpers/nav_helper.rb

@@ -2,4 +2,20 @@ module NavHelper
   def nav_menu_collapsed?
     cookies[:collapsed_nav] == 'true'
   end
+
+  def nav_sidebar_class
+    if nav_menu_collapsed?
+      "page-sidebar-collapsed"
+    else
+      "page-sidebar-expanded"
+    end
+  end
+
+  def nav_header_class
+    if nav_menu_collapsed?
+      "header-collapsed"
+    else
+      "header-expanded"
+    end
+  end
 end

app/views/explore/projects/trending.html.haml

+.explore-title
+  %h3
+    Explore GitLab
+  %p.lead
+    Discover projects and groups. Share your projects with others
+%hr
 .explore-trending-block
   %p.lead
     %i.fa.fa-comments-o
@@ -7,5 +13,5 @@
     %ul.bordered-list
       = render @trending_projects
 
-  .center
+  .center.append-bottom-20
     = link_to 'Show all projects', explore_projects_path, class: 'btn btn-primary'

app/views/layouts/_empty_head_panel.html.haml

+%header.navbar.navbar-fixed-top.navbar-gitlab
+  .navbar-inner
+    .container
+      %h4.center
+        = image_tag 'logo-white.png', width: 32, height: 32

app/views/layouts/_head_panel.html.haml

-%header.navbar.navbar-fixed-top.navbar-gitlab
+%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
   .navbar-inner
     .container
       %div.app_logo
         = link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
           = brand_header_logo
+          %h3 GitLab
       %h1.title= title
 
       %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}

app/views/layouts/_page.html.haml

-- if defined?(sidebar)
-  .page-with-sidebar{ class: nav_sidebar_class }
+.page-with-sidebar{ class: nav_sidebar_class }
   = render "layouts/broadcast"
   .sidebar-wrapper
+    - if defined?(sidebar)
       = render(sidebar)
+    - elsif current_user
+      = render 'layouts/nav/dashboard'
     .collapse-nav
       = render partial: 'layouts/collapse_button'
   .content-wrapper
@@ -11,10 +13,6 @@
         = render "layouts/flash"
         .clearfix
           = yield
-- else
-  .container.navless-container
-    .content
-      = yield
 
 = yield :embedded_scripts
 

app/views/layouts/_public_head_panel.html.haml

-%header.navbar.navbar-fixed-top.navbar-gitlab
+%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
   .navbar-inner
     .container
       %div.app_logo
         = link_to explore_root_path, class: "home" do
           = brand_header_logo
+          %h3 GitLab
       %h1.title= title
 
       %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}

app/views/layouts/devise.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: "en"}
   = render "layouts/head"
   %body.ui_mars.login-page.application
+    = render "layouts/empty_head_panel"
     = render "layouts/broadcast"
-    = render "layouts/public_head_panel", title: ''
     .container.navless-container
       .content
         = render "layouts/flash"

app/views/layouts/explore.html.haml

-- page_title = 'Explore'
+- page_title = 'Explore GitLab'
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: page_title
@@ -8,23 +8,5 @@
       = render "layouts/head_panel", title: link_to(page_title, explore_root_path)
     - else
       = render "layouts/public_head_panel", title: link_to(page_title, explore_root_path)
-    .container.navless-container
-      .content
-        .explore-title
-          %h3
-            Explore GitLab
-          %p.lead
-            Discover projects and groups. Share your projects with others
 
-
-        %ul.nav.nav-tabs
-          = nav_link(path: 'projects#trending') do
-            = link_to 'Trending Projects', explore_root_path
-          = nav_link(path: 'projects#starred') do
-            = link_to 'Most Starred Projects', starred_explore_projects_path
-          = nav_link(path: 'projects#index') do
-            = link_to 'All Projects', explore_projects_path
-          = nav_link(controller: :groups) do
-            = link_to 'All Groups', explore_groups_path
-
-        = yield
+    = render 'layouts/page', sidebar: 'layouts/nav/explore'

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

+%ul.nav.nav-sidebar
+  = nav_link(path: 'projects#trending') do
+    = link_to explore_root_path do
+      %i.fa.fa-comments
+      %span Trending Projects
+  = nav_link(path: 'projects#starred') do
+    = link_to starred_explore_projects_path do
+      %i.fa.fa-star
+      %span Most Starred Projects
+  = nav_link(path: 'projects#index') do
+    = link_to explore_projects_path do
+      %i.fa.fa-bookmark
+      %span All Projects
+  = nav_link(controller: :groups) do
+    = link_to explore_groups_path do
+      %i.fa.fa-group
+      %span All Groups
+

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

+%ul.nav.nav-sidebar
+  = nav_link(path: user_snippets_path(current_user), html_options: {class: 'home'}) do
+    = link_to user_snippets_path(current_user), title: 'Your snippets' do
+      %i.fa.fa-dashboard
+      %span
+        Your Snippets
+  = nav_link(path: snippets_path) do
+    = link_to snippets_path, title: 'Discover snippets' do
+      %i.fa.fa-globe
+      %span
+        Discover Snippets

app/views/layouts/navless.html.haml

@@ -4,7 +4,4 @@
   %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: defined?(@title_url) ? link_to(@title, @title_url) : @title
-    .container.navless-container
-      .content
-        = render "layouts/flash"
-        = yield
+    = render 'layouts/page'

app/views/layouts/snippets.html.haml

+!!! 5
+%html{ lang: "en"}
+  = render "layouts/head", title: "Dashboard"
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page }
+    = render "layouts/head_panel", title: link_to("Snippets", snippets_path)
+    = render 'layouts/page', sidebar: 'layouts/nav/snippets'

app/views/profiles/design.html.haml

@@ -12,17 +12,17 @@
       = label_tag do
         .prev.default
         = f.radio_button :theme_id, 1
-        Default
+        Graphite
 
       = label_tag do
         .prev.classic
         = f.radio_button :theme_id, 2
-        Classic
+        Charcoal
 
       = label_tag do
         .prev.modern
         = f.radio_button :theme_id, 3
-        Modern
+        Green
 
       = label_tag do
         .prev.gray

app/views/snippets/current_user_index.html.haml

@@ -3,37 +3,32 @@
   .pull-right
     = link_to new_snippet_path, class: "btn btn-new btn-grouped", title: "New Snippet" do
       Add new snippet
-    = link_to snippets_path, class: "btn btn-grouped"  do
-      Discover snippets
 
 %p.light
   Share code pastes with others out of git repository
-%hr
 
-.row
-  .col-md-3
-    %ul.nav.nav-pills.nav-stacked
+%ul.nav.nav-tabs
   = nav_tab :scope, nil do
     = link_to user_snippets_path(@user) do
       All
-          %span.pull-right
+      %span.badge
         = @user.snippets.count
   = nav_tab :scope, 'are_private' do
     = link_to user_snippets_path(@user, scope: 'are_private') do
       Private
-          %span.pull-right
+      %span.badge
         = @user.snippets.are_private.count
   = nav_tab :scope, 'are_internal' do
     = link_to user_snippets_path(@user, scope: 'are_internal') do
       Internal
-          %span.pull-right
+      %span.badge
         = @user.snippets.are_internal.count
   = nav_tab :scope, 'are_public' do
     = link_to user_snippets_path(@user, scope: 'are_public') do
       Public
-          %span.pull-right
+      %span.badge
         = @user.snippets.are_public.count
 
-  .col-md-9.my-snippets
+.my-snippets
   = render 'snippets'
 

app/views/snippets/index.html.haml

@@ -2,7 +2,6 @@
   Public snippets
 
   .pull-right
-
     - if current_user
       = link_to new_snippet_path, class: "btn btn-new btn-grouped", title: "New Snippet" do
         Add new snippet

config/routes.rb

@@ -52,7 +52,8 @@ Gitlab::Application.routes.draw do
       get 'raw'
     end
   end
-  get '/s/:username' => 'snippets#user_index', as: :user_snippets, constraints: { username: /.*/ }
+
+  get '/s/:username' => 'snippets#index', as: :user_snippets, constraints: { username: /.*/ }
 
   #
   # Invites

features/steps/snippets/user.rb

@@ -32,19 +32,19 @@ class Spinach::Features::SnippetsUser < Spinach::FeatureSteps
   end
 
   step 'I click "Internal" filter' do
-    within('.nav-stacked') do
+    within('.nav-tabs') do
       click_link "Internal"
     end
   end
 
   step 'I click "Private" filter' do
-    within('.nav-stacked') do
+    within('.nav-tabs') do
       click_link "Private"
     end
   end
 
   step 'I click "Public" filter' do
-    within('.nav-stacked') do
+    within('.nav-tabs') do
       click_link "Public"
     end
   end

spec/routing/routing_spec.rb

@@ -28,7 +28,7 @@ end
 #          DELETE /snippets/:id(.:format)      snippets#destroy
 describe SnippetsController, "routing" do
   it "to #user_index" do
-    expect(get("/s/User")).to route_to('snippets#user_index', username: 'User')
+    expect(get("/s/User")).to route_to('snippets#index', username: 'User')
   end
 
   it "to #raw" do