Use GitLab UI when render CI

app/assets/javascripts/ci/application.js.coffee

@@ -10,20 +10,10 @@
 # WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 # GO AFTER THE REQUIRES BELOW.
 #
-#= require jquery
-#= require bootstrap
-#= require jquery_ujs
-#= require turbolinks
-#= require jquery.turbolinks
-#= require jquery.endless-scroll
 #= require pager
-#= require nprogress
-#= require nprogress-turbolinks
 #= require jquery_nested_form
 #= require_tree .
 #
-#
-
 $(document).on 'click', '.edit-runner-link', (event) ->
   event.preventDefault()
 

app/assets/stylesheets/application.scss

@@ -61,3 +61,9 @@
  * Styles for JS behaviors.
  */
 @import "behaviors.scss";
+
+/**
+ * CI specific styles:
+ */
+@import "ci/**/*";
+

app/assets/stylesheets/ci/application.scss

-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- *= require_self
- */
-
-@import "../base/fonts";
-@import "../base/variables";
-@import "../base/mixins";
-@import "../base/layout";
-@import "../base/gl_variables";
-@import "../base/gl_bootstrap";
-
-/**
- * Customized Twitter bootstrap
- */
-@import '../base/gl_variables';
-@import '../base/gl_bootstrap';
-
-
-/**
- * Font icons
- *
- */
-@import "font-awesome";
-
-/**
- * Generic css (forms, nav etc):
- */
-@import "../generic/**/*";
-
-/**
- * Page specific styles (issues, projects etc):
- */
-
-@import "xterm";
-@import "sections/*";
-
-/*
- * NProgress
- */
-$nprogress-color: #9BC;
-@import 'nprogress';
-@import 'nprogress-bootstrap';
-
-body {
-  padding-top: 0 !important;
-
-  a {
-    color: #3084bb;
-  }
-}

app/assets/stylesheets/ci/builds.scss

+.ci-body {
+  pre.trace {
+    background: #111111;
+    color: #fff;
+    font-family: $monospace_font;
+    white-space: pre;
+    white-space: pre-wrap;       /* css-3 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+    overflow: auto;
+    overflow-y: hidden;
+    font-size: 12px;
+
+    .fa-refresh {
+      font-size: 24px;
+      margin-left: 20px;
+    }
+  }
+
+  .autoscroll-container {
+    position: fixed;
+    bottom: 10px;
+    right: 20px;
+    z-index: 100;
+  }
+
+  .scroll-controls {
+    position: fixed;
+    bottom: 10px;
+    left: 250px;
+    z-index: 100;
+
+    a {
+      display: block;
+      margin-bottom: 5px;
+    }
+  }
+
+  .page-sidebar-collapsed {
+    .scroll-controls {
+      left: 70px;
+    }
+  }
+
+  .build-widget {
+    padding: 10px;
+    background: $background-color;
+    margin-bottom: 20px;
+    border-radius: 4px;
+
+    .title {
+      margin-top: 0;
+      color: #666;
+      line-height: 1.5;
+    }
+    .attr-name {
+      color: #777;
+    }
+  }
+
+  .alert-disabled {
+    background: $background-color;
+
+    a {
+      color: #3084bb !important;
+    }
+  }
+}

app/assets/stylesheets/ci/lint.scss

+.ci-body {
+  .incorrect-syntax{
+    font-size: 19px;
+    color: red;
+  }
+  .correct-syntax{
+    font-size: 19px;
+    color: #47a447;
+  }
+}

app/assets/stylesheets/ci/projects.scss

+.ci-body {
+  .project-title {
+    margin: 0;
+    color: #444;
+    font-size: 20px;
+    line-height: 1.5;
+  }
+
+  .builds {
+    @extend .table;
+
+    .build {
+      &.alert{
+        margin-bottom: 6px;
+      }
+    }
+  }
+
+  .projects-table {
+    td {
+      vertical-align: middle !important;
+    }
+  }
+
+  .commit-info {
+    font-size: 14px;
+
+    .attr-name {
+      font-weight: 300;
+      color: #666;
+      margin-right: 5px;
+    }
+
+    pre.commit-message {
+      font-size: 14px;
+      background: none;
+      padding: 0;
+      margin: 0;
+      border: none;
+      margin: 20px 0;
+      border-bottom: 1px solid #EEE;
+      padding-bottom: 20px;
+      border-radius: 0;
+    }
+  }
+
+  .loading{
+    font-size: 20px;
+  }
+}

app/assets/stylesheets/ci/runners.scss

+.ci-body {
+  .runner-state {
+    padding: 6px 12px;
+    margin-right: 10px;
+    color: #FFF;
+
+    &.runner-state-shared {
+      background: #32b186;
+    }
+    &.runner-state-specific {
+      background: #3498db;
+    }
+  }
+
+  .runner-status-online {
+    color: green;
+  }
+
+  .runner-status-offline {
+    color: gray;
+  }
+
+  .runner-status-paused {
+    color: red;
+  }
+
+  .runner {
+    .btn {
+      padding: 1px 6px;
+    }
+
+    h4 {
+      font-weight: normal;
+    }
+  }
+}

app/assets/stylesheets/ci/sections/builds.scss

-pre.trace {
-  background: #111111;
-  color: #fff;
-  font-family: $monospace_font;
-  white-space: pre;
-  white-space: pre-wrap;       /* css-3 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
-  overflow: auto;
-  overflow-y: hidden;
-  font-size: 12px;
-
-  .fa-refresh {
-    font-size: 24px;
-    margin-left: 20px;
-  }
-}
-
-.autoscroll-container {
-  position: fixed;
-  bottom: 10px;
-  right: 20px;
-  z-index: 100;
-}
-
-.scroll-controls {
-  position: fixed;
-  bottom: 10px;
-  left: 20px;
-  z-index: 100;
-
-  a {
-    display: block;
-    margin-bottom: 5px;
-  }
-}
-
-.build-widget {
-  padding: 10px;
-  background: #f4f4f4;
-  margin-bottom: 20px;
-  border-radius: 4px;
-
-  .title {
-    margin-top: 0;
-    color: #666;
-    line-height: 1.5;
-  }
-  .attr-name {
-    color: #777;
-  }
-}
-
-.alert-disabled {
-  background: #EEE;
-
-  a {
-    color: #3084bb !important;
-  }
-}

app/assets/stylesheets/ci/sections/lint.scss

-.incorrect-syntax{
-  font-size: 19px;
-  color: red;
-}
-.correct-syntax{
-  font-size: 19px;
-  color: #47a447;
-}
\ No newline at end of file

app/assets/stylesheets/ci/sections/login.scss

-.login-block {
-  padding: 15px;
-  margin: 0 auto;
-  text-align: center;
-
-  p {
-    font-size: 15px;
-  }
-
-  .btn-login {
-    padding: 18px 32px;
-  }
-}

app/assets/stylesheets/ci/sections/navbar.scss

-.navbar-static-top {
-  margin-bottom: 20px;
-}
-
-.navbar-ci {
-  background: #224466;
-
-  .navbar-brand {
-    color: #fff;
-
-    &:hover {
-      color: #fff;
-    }
-  }
-  .brand,
-  .nav > li > a {
-    color: #fff;
-
-    &:hover, &:focus, &:active {
-      background: none;
-    }
-  }
-
-  .profile-holder {
-    position: relative;
-
-    img {
-      position: absolute;
-      top: -8px;
-      width: 32px;
-      @include border-radius(32px);
-    }
-
-    span {
-      margin-left: 42px;
-    }
-  }
-
-  .btn-login {
-    padding: 7px 22px;
-    margin-top: 7px;
-    &:hover, &:active, &:focus {
-      background: #018865 !important;
-    }
-  }
-}
-
-.turbolink-spinner {
-  position: absolute;
-  top: 11px;
-  left: 50%;
-  color: #FFF;
-  font-size: 20px;
-}

app/assets/stylesheets/ci/sections/projects.scss

-.project-title {
-  margin: 0;
-  color: #444;
-  font-size: 20px;
-  line-height: 1.5;
-}
-
-.builds {
-  @extend .table;
-
-  .build {
-    &.alert{
-      margin-bottom: 6px;
-    }
-  }
-}
-
-.projects-table {
-  td {
-    vertical-align: middle !important;
-  }
-}
-
-.commit-info {
-  font-size: 14px;
-
-  .attr-name {
-    font-weight: 300;
-    color: #666;
-    margin-right: 5px;
-  }
-
-  pre.commit-message {
-    font-size: 14px;
-    background: none;
-    padding: 0;
-    margin: 0;
-    border: none;
-    margin: 20px 0;
-    border-bottom: 1px solid #EEE;
-    padding-bottom: 20px;
-    border-radius: 0;
-  }
-}
-
-.search{
-  width: 300px;
-
-  .search-input{
-    height: 35px;
-  }
-
-  form{
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-.loading{
-  font-size: 20px;
-}

app/assets/stylesheets/ci/sections/runners.scss

-.runner-state {
-  padding: 6px 12px;
-  margin-right: 10px;
-  color: #FFF;
-
-  &.runner-state-shared {
-    background: #32b186;
-  }
-  &.runner-state-specific {
-    background: #3498db;
-  }
-}
-
-.runner-status-online {
-  color: green;
-}
-
-.runner-status-offline {
-  color: gray;
-}
-
-.runner-status-paused {
-  color: red;
-}
-
-.runner {
-  .btn {
-    padding: 1px 6px;
-  }
-
-  h4 {
-    font-weight: normal;
-  }
-}

app/assets/stylesheets/ci/sections/setup.scss

-.welcome-block {
-  margin-top: 50px;
-  color: #555;
-  font-size: 16px;
-  line-height: 1.5;
-
-  h1, h2, h3 {
-    font-weight: bold;
-    margin-bottom: 20px;
-  }
-}

app/controllers/ci/builds_controller.rb

@@ -7,6 +7,7 @@ module Ci
     before_filter :authorize_manage_project!, except: [:status, :show, :retry, :cancel]
     before_filter :authorize_manage_builds!, only: [:retry, :cancel]
     before_filter :build, except: [:show]
+    layout 'ci/project'
 
     def show
       if params[:id] =~ /\A\d+\Z/

app/controllers/ci/commits_controller.rb

@@ -6,6 +6,7 @@ module Ci
     before_filter :authorize_access_project!, except: [:status, :show, :cancel]
     before_filter :authorize_manage_builds!, only: [:cancel]
     before_filter :commit, only: :show
+    layout 'ci/project'
 
     def show
       @builds = @commit.builds

app/views/ci/builds/show.html.haml

 %h4.page-title
-  = link_to ci_project_path(@project)
+  = link_to @project.name, ci_project_path(@project)
   @
   = @commit.short_sha
 

app/views/ci/commits/show.html.haml

@@ -63,7 +63,7 @@
       %i.fa.fa-time
       #{time_interval_in_words @commit.duration}
 
-%table.builds
+%table.table.builds
   %thead
     %tr
       %th Status
@@ -81,7 +81,7 @@
   %h3
     Retried builds
 
-  %table.builds
+  %table.table.builds
     %thead
       %tr
         %th Status

app/views/ci/projects/show.html.haml

@@ -16,7 +16,8 @@
     %li{class: 'active'}
       = link_to @ref, ci_project_path(@project, ref: @ref)
 
-
+  %li.pull-right
+    = link_to 'View on GitLab', @project.gitlab_url, no_turbolink.merge( class: 'btn btn-sm' )
 
 - if @ref
   %p
@@ -37,7 +38,7 @@
 
 
 
-%table.builds
+%table.table.builds
   %thead
     %tr
       %th Status

app/views/layouts/ci/_head.html.haml

-%head
-  %meta{charset: "utf-8"}
-  %meta{content: "GitLab Continuous Integration", name: "description"}
-  %title GitLab CI
-  = stylesheet_link_tag    "ci/application", :media => "all"
-  = javascript_include_tag "ci/application"
-  = csrf_meta_tags
-  = favicon_link_tag 'ci/favicon.ico'
-  :erb
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-

app/views/layouts/ci/_nav.html.haml

-.navbar.navbar-static-top.navbar-ci
-  .container
-    .navbar-header
-      %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
-        %span.sr-only Toggle navigation
-        %i.fa.fa-reorder
-
-      = link_to 'GitLab CI', ci_root_path, class: "navbar-brand"
-
-    .collapse.navbar-collapse
-      %ul.nav.navbar-nav
-        - if current_user && current_user.is_admin?
-          %li
-            = link_to ci_admin_projects_path do
-              Admin
-        %li
-          = link_to 'Help', ci_help_path
-
-      %ul.nav.navbar-nav.pull-right
-        - if current_user
-          %li
-            = link_to "/profile", no_turbolink do
-              .profile-holder
-                = image_tag user_avatar_url(current_user, 64), class: 'avatar s32', alt: ''
-                %span= current_user.name
-          %li
-            = link_to destroy_user_session_path, class: "logout", method: :delete do
-              %i.fa.fa-signout
-              Logout
-        - else
-          %li
-            = link_to "Login with GitLab", auth_ci_user_sessions_path, no_turbolink.merge(class: 'btn btn-success btn-login')

app/views/layouts/ci/_nav_admin.html.haml

-%ul.nav.nav-pills.nav-stacked.admin-menu
+%ul.nav.nav-sidebar
+  = nav_link do
+    = link_to ci_root_path, title: 'Back to dashboard', data: {placement: 'right'}, class: 'back-link' do
+      = icon('caret-square-o-left fw')
+      %span
+        Back to Dashboard
+
+  %li.separate-item
   = nav_link path: 'projects#index' do
     = link_to ci_admin_projects_path do
       %i.fa.fa-list-alt
@@ -19,8 +26,6 @@
       Builds
       %small.pull-right
         = Ci::Build.count(:all)
-  %li
-    %hr
   = nav_link(controller: :application_settings, html_options: { class: 'separate-item'}) do
     = link_to ci_admin_application_settings_path do
       %i.fa.fa-cogs

app/views/layouts/ci/_nav_dashboard.html.haml

+%ul.nav.nav-sidebar
+  = nav_link do
+    = link_to root_path, title: 'Back to dashboard', data: {placement: 'right'}, class: 'back-link' do
+      = icon('caret-square-o-left fw')
+      %span
+        Back to GitLab
+  %li.separate-item
+  = nav_link path: 'projects#show' do
+    = link_to ci_root_path do
+      %i.fa.fa-home
+      %span
+        Projects
+  - if current_user && current_user.is_admin?
+    %li
+      = link_to ci_admin_projects_path do
+        %i.fa.fa-cogs
+        %span
+          Admin
+  %li
+    = link_to ci_help_path do
+      %i.fa.fa-info
+      %span
+        Help
+

app/views/layouts/ci/_nav_project.html.haml

-%ul.nav.nav-pills.nav-stacked.project-menu
+%ul.nav.nav-sidebar
   = nav_link path: 'projects#show' do
     = link_to ci_project_path(@project) do
       %i.fa.fa-list-alt
-      Commits
-      %small.pull-right= @project.commits.count
+      %span
+        Commits
+        %small.pull-right= @project.commits.count
   = nav_link path: 'charts#show' do
     = link_to ci_project_charts_path(@project) do
       %i.fa.fa-bar-chart
-      Charts
+      %span
+        Charts
   = nav_link path: ['runners#index', 'runners#show'] do
     = link_to ci_project_runners_path(@project) do
       %i.fa.fa-cog
-      Runners
+      %span
+        Runners
   = nav_link path: 'variables#show' do
     = link_to ci_project_variables_path(@project) do
       %i.fa.fa-code
-      Variables
+      %span
+        Variables
   = nav_link path: 'web_hooks#index' do
     = link_to ci_project_web_hooks_path(@project) do
       %i.fa.fa-link
-      Web Hooks
+      %span
+        Web Hooks
   = nav_link path: 'triggers#index' do
     = link_to ci_project_triggers_path(@project) do
       %i.fa.fa-retweet
-      Triggers
+      %span
+        Triggers
   = nav_link path: 'services#index' do
     = link_to ci_project_services_path(@project) do
       %i.fa.fa-share
-      Services
+      %span
+        Services
   = nav_link path: 'events#index' do
     = link_to ci_project_events_path(@project) do
       %i.fa.fa-book
-      Events
-  %li
-    %hr
+      %span
+        Events
+  %li.separate-item
   = nav_link path: 'projects#edit' do
     = link_to edit_ci_project_path(@project) do
       %i.fa.fa-cogs
-      Settings
+      %span
+        Settings

app/views/layouts/ci/_page.html.haml

+.page-with-sidebar{ class: nav_sidebar_class }
+  = render "layouts/broadcast"
+  .sidebar-wrapper.nicescroll
+    .header-logo
+      = link_to ci_root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
+        = brand_header_logo
+        .gitlab-text-container
+          %h3 GitLab CI
+    - if defined?(sidebar) && sidebar
+      = render "layouts/ci/#{sidebar}"
+    - elsif current_user
+      = render 'layouts/nav/dashboard'
+    .collapse-nav
+      = render partial: 'layouts/collapse_button'
+    - if current_user
+      = link_to current_user, class: 'sidebar-user' do
+        = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s36'
+        .username
+          = current_user.username
+  .content-wrapper
+    = render "layouts/flash"
+    = render 'layouts/ci/info'
+    %div{ class: container_class }
+      .content
+        .clearfix
+          = yield

app/views/layouts/ci/admin.html.haml

 !!! 5
 %html{ lang: "en"}
-  = render 'layouts/ci/head'
-  %body{ :'data-page' => body_data_page }
-    = render 'layouts/ci/nav'
-    = render 'layouts/ci/info'
-    - if content_for?(:title)
-      .container.container-title
-        = yield(:title)
-      %hr
+  = render 'layouts/head'
+  %body{class: "ci-body #{user_application_theme}", 'data-page' => body_data_page}
+    - header_title = "Admin area"
+    - if current_user
+      = render "layouts/header/default", title: header_title
+    - else
+      = render "layouts/header/public", title: header_title
 
-    .container.container-body
-      .content
-        .row
-          .col-md-2.append-bottom-20
-            = render 'layouts/ci/nav_admin'
-          .col-md-10
-            = yield
+    = render 'layouts/ci/page', sidebar: 'nav_admin'

app/views/layouts/ci/application.html.haml

 !!! 5
 %html{ lang: "en"}
-  = render 'layouts/ci/head'
-  %body{ :'data-page' => body_data_page }
-    = render 'layouts/ci/nav'
-    = render 'layouts/ci/info'
-    - if content_for?(:title)
-      .container.container-title
-        = yield(:title)
-      %hr
+  = render 'layouts/head'
+  %body{class: "ci-body #{user_application_theme}", 'data-page' => body_data_page}
+    - header_title = "Projects"
+    - if current_user
+      = render "layouts/header/default", title: header_title
+    - else
+      = render "layouts/header/public", title: header_title
 
-    .container.container-body
-      .content
-        = yield
+    = render 'layouts/ci/page', sidebar: 'nav_dashboard'

app/views/layouts/ci/empty.html.haml

-!!! 5
-%html{ lang: "en"}
-  = render 'layouts/ci/head'
-  %body{ :'data-page' => body_data_page }
-    = render 'layouts/ci/info'
-    - if content_for?(:title)
-      .container.container-title
-        = yield(:title)
-      %hr
-
-    .container.container-body
-      .content
-        = yield
-

app/views/layouts/ci/project.html.haml

 !!! 5
 %html{ lang: "en"}
-  = render 'layouts/ci/head'
-  %body{ :'data-page' => body_data_page }
-    = render 'layouts/ci/nav'
-    = render 'layouts/ci/info'
-    .container
-      %h3.project-title
-        = @project.name
-        - if @project.public
-          %small
-            %i.fa.fa-globe
-            Public
+  = render 'layouts/head'
+  %body{class: "ci-body #{user_application_theme}", 'data-page' => body_data_page}
+    - header_title = @project.name
+    - if current_user
+      = render "layouts/header/default", title: header_title
+    - else
+      = render "layouts/header/public", title: header_title
 
-        .pull-right
-          = link_to 'View on GitLab', @project.gitlab_url, no_turbolink.merge( class: 'btn btn-sm' )
-    %hr
-    .container.container-body
-      .content
-        - if current_user && can?(current_user, :admin_project, gl_project)
-          .row
-            .col-md-2.append-bottom-20
-              = render 'layouts/ci/nav_project'
-            .col-md-10
-              = yield
-        - else
-          = yield
+    = render 'layouts/ci/page', sidebar: 'nav_project'