Merge branch 'refactor-header' into 'master'

UI: refactor header css

See merge request !1591

app/assets/stylesheets/sections/header.scss

@@ -86,7 +86,7 @@ header {
 
   .container {
     width: 100% !important;
-    padding-left: 0px;
+    padding: 0px;
   }
 
   /**
@@ -100,18 +100,14 @@ header {
 
     a {
       float: left;
-      padding: 0px;
-      margin: 0 6px;
-
-      h1 {
-        margin: 0;
-        background: image-url('logo-black.png') no-repeat center center;
-        background-size: 32px;
-        float: left;
-        height: 46px;
-        width: 40px;
-        @include header-font;
-        text-indent: -9999px;
+      padding: 5px 0;
+      height: 46px;
+      width: 52px;
+      text-align: center;
+
+      img {
+        width: 36px;
+        height: 36px;
       }
     }
     &:hover {
@@ -134,14 +130,13 @@ header {
   }
 
   .profile-pic {
-    position: relative;
-    top: -1px;
-    padding-right: 0px !important;
+    padding: 0px !important;
+    width: 46px;
+    height: 46px;
+    margin-left: 5px;
     img {
-      width: 50px;
-      height: 50px;
-      margin: -15px;
-      margin-left: 5px;
+      width: 46px;
+      height: 46px;
     }
   }
 
@@ -174,68 +169,6 @@ header {
       @include transition(all 0.15s ease-in 0s);
     }
   }
-
-
-  /*
-   * Dark header
-   *
-   */
-  &.header-dark {
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #708090;
-        border-bottom: 1px solid #AAA;
-
-        .navbar-toggle { color: #fff; }
-
-        .nav > li > a {
-          color: #AAA;
-
-          &:hover, &:focus, &:active {
-            background: none;
-            color: #FFF;
-          }
-        }
-      }
-    }
-
-    .turbolink-spinner {
-      color: #FFF;
-    }
-
-    .search {
-      .search-input {
-        background-color: #D2D5DA;
-        background-color: rgba(255, 255, 255, 0.5);
-        border: 1px solid #AAA;
-
-        &:focus {
-          background-color: white;
-        }
-      }
-    }
-    .search-input::-webkit-input-placeholder {
-      color: #666;
-    }
-    .app_logo {
-      a {
-        h1 {
-          background: image-url('logo-white.png') no-repeat center center;
-          background-size: 32px;
-          color: #fff;
-        }
-      }
-    }
-    .title {
-      a {
-        color: #FFF;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      color: #fff;
-    }
-  }
 }
 
 .search .search-input {

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/ui_basic.scss

@@ -10,8 +10,15 @@
         background: #F1F1F1;
         border-bottom: 1px solid #DDD;
 
-        .app_logo {
-          background-color: #DDD;
+        .title {
+          color: #555;
+
+          a {
+            color: #555;
+            &:hover {
+              text-decoration: underline;
+            }
+          }
         }
 
         .nav > li > a {

app/assets/stylesheets/themes/ui_color.scss

 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Violet GitLab UI theme
  */
 .ui_color {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #548;
-        border-bottom: 1px solid #436;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #436;
-          }
-        }
-        .app_logo {
-          background-color: #325;
-        }
-        .nav > li > a {
-          color: #98C;
-        }
-        .search-input {
-          border-color: #98C;
-        }
-      }
-    }
-  }
-
-  .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-    background: #659;
-  }
+  @include dark-theme(#98C, #548, #436, #325);
 }

app/assets/stylesheets/themes/ui_gray.scss

 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Gray GitLab UI theme
  */
 .ui_gray {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #373737;
-        border-bottom: 1px solid #272727;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #272727;
-          }
-        }
-        .app_logo {
-          background-color: #222;
-        }
-      }
-    }
-  }
+  @include dark-theme(#979797, #373737, #272727, #222222);
 }

app/assets/stylesheets/themes/ui_mars.scss

 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Classic GitLab UI theme
  */
 .ui_mars {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #474D57;
-        border-bottom: 1px solid #373D47;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #373D47;
-          }
-        }
-        .app_logo {
-          background-color: #24272D;
-        }
-        .nav > li > a {
-          color: #979DA7;
-        }
-        .search-input {
-          border-color: #979DA7;
-        }
-      }
-    }
-  }
+  @include dark-theme(#979DA7, #474D57, #373D47, #24272D);
 }

app/assets/stylesheets/themes/ui_modern.scss

 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Modern GitLab UI theme
  */
 .ui_modern {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #019875;
-        border-bottom: 1px solid #019875;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #018865;
-          }
-        }
-        .app_logo {
-          background-color: #017855;
-        }
-        .nav > li > a {
-          color: #ADC;
-        }
-        .search-input {
-          border-color: #8ba;
-        }
-      }
-    }
-  }
-
-  .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-    background: #019875;
-  }
+  @include dark-theme(#ADC, #019875, #018865, #017855);
 }

app/helpers/appearances_helper.rb

@@ -14,4 +14,8 @@ module AppearancesHelper
   def brand_text
     nil
   end
+
+  def brand_header_logo
+    image_tag 'logo-white.png'
+  end
 end

app/views/layouts/_head_panel.html.haml

@@ -3,7 +3,7 @@
     .container
       %div.app_logo
         = link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
-          %h1 GITLAB
+          = brand_header_logo
       %h1.title= title
 
       %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}

app/views/layouts/_public_head_panel.html.haml

@@ -2,10 +2,8 @@
   .navbar-inner
     .container
       %div.app_logo
-        %span.separator
         = link_to explore_root_path, class: "home" do
-          %h1 GITLAB
-        %span.separator
+          = brand_header_logo
       %h1.title= title
 
       %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}

app/views/layouts/admin.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Admin area"
-  %body{class: "#{app_theme} #{theme_type} admin", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  admin", :'data-page' => body_data_page}
     = render "layouts/head_panel", title: link_to("Admin area", admin_root_path)
     = render 'layouts/page', sidebar: 'layouts/nav/admin'

app/views/layouts/application.html.haml

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

app/views/layouts/errors.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Error"
-  %body{class: "#{app_theme} #{theme_type} application"}
+  %body{class: "#{app_theme}  application"}
     = render "layouts/head_panel", title: "" if current_user
     .container.navless-container
       = render "layouts/flash"

app/views/layouts/explore.html.haml

@@ -2,7 +2,7 @@
 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: page_title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/broadcast"
     - if current_user
       = render "layouts/head_panel", title: link_to(page_title, explore_root_path)

app/views/layouts/group.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: group_head_title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/head_panel", title: link_to(@group.name, group_path(@group))
     = render 'layouts/page', sidebar: 'layouts/nav/group'

app/views/layouts/navless.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %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

app/views/layouts/profile.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Profile"
-  %body{class: "#{app_theme} #{theme_type} profile", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  profile", :'data-page' => body_data_page}
     = render "layouts/head_panel", title: link_to("Profile", profile_path)
     = render 'layouts/page', sidebar: 'layouts/nav/profile'

app/views/layouts/project_settings.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @project.name_with_namespace
-  %body{class: "#{app_theme} #{theme_type} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
+  %body{class: "#{app_theme}  project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
     = render "layouts/head_panel", title: project_title(@project)
     = render "layouts/init_auto_complete"
     - @project_settings_nav = true

app/views/layouts/projects.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: project_head_title
-  %body{class: "#{app_theme} #{theme_type} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
+  %body{class: "#{app_theme}  project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
     = render "layouts/head_panel", title: project_title(@project)
     = render "layouts/init_auto_complete"
     = render 'layouts/page', sidebar: 'layouts/nav/project'

app/views/layouts/public_group.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: group_head_title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/public_head_panel", title: link_to(@group.name, group_path(@group))
     = render 'layouts/page', sidebar: 'layouts/nav/group'

app/views/layouts/public_projects.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @project.name_with_namespace
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/public_head_panel", title: project_title(@project)
     = render 'layouts/page', sidebar: 'layouts/nav/project'

app/views/layouts/public_users.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: @title
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/public_head_panel", title: defined?(@title_url) ? link_to(@title, @title_url) : @title
     = render 'layouts/page'

app/views/layouts/search.html.haml

 !!! 5
 %html{ lang: "en"}
   = render "layouts/head", title: "Search"
-  %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+  %body{class: "#{app_theme}  application", :'data-page' => body_data_page}
     = render "layouts/broadcast"
     = render "layouts/head_panel", title: link_to("Search", search_path)
     .container.navless-container