Merge branch 'projects'

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/base/mixins.scss

@@ -117,12 +117,12 @@
     margin: 24px 0 12px 0;
     font-size: 1.1em;
   }
-  
+
   h5 {
     margin: 24px 0 12px 0;
     font-size: 1em;
   }
-  
+
   h6 {
     margin: 24px 0 12px 0;
     font-size: 0.90em;
@@ -133,18 +133,18 @@
     margin: 12px 0 12px;
     border-left: 3px solid #e7e9ed;
   }
-  
+
   blockquote p {
     color: #7f8fa4 !important;
     font-size: 15px;
     line-height: 1.5;
   }
-  
+
   p {
     color:#5c5d5e;
     margin:6px 0 0 0;
   }
-  
+
   table {
     @extend .table;
     @extend .table-bordered;
@@ -152,15 +152,16 @@
     color: #5c5d5e;
     th {
       background: #f8fafc;
-    } 
+    }
   }
-  
+
   pre {
     margin: 12px 0 12px 0 !important;
     background-color: #f8fafc !important;
     font-size: 13px !important;
     color: #5b6169 !important;
     line-height: 1.6em !important;
+    @include border-radius(2px);
   }
 
   p > code {
@@ -171,7 +172,7 @@
   ul {
     color: #5c5d5e;
   }
-  
+
   li {
     line-height: 1.6em;
   }
@@ -293,3 +294,8 @@
     }
   }
 }
+
+.fa-align {
+  top: 20px;
+  position: relative;
+}

app/assets/stylesheets/base/variables.scss

@@ -12,8 +12,8 @@ $sidebar_width: 230px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
-$border-color: #E7E9ED;
-$background-color: #F8FAFC;
+$border-color: #dce0e6;
+$background-color: #F7F8FA;
 $header-height: 58px;
 $fixed-layout-width: 1200px;
 $gl-gray: #7f8fa4;

app/assets/stylesheets/generic/avatar.scss

@@ -28,6 +28,7 @@
   &.s48 { width: 48px; height: 48px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }
   &.s90 { width: 90px; height: 90px; margin-right: 15px; }
+  &.s110 { width: 110px; height: 110px; margin-right: 15px; }
   &.s140 { width: 140px; height: 140px; margin-right: 20px; }
   &.s160 { width: 160px; height: 160px; margin-right: 20px; }
 }
@@ -42,6 +43,7 @@
   &.s32 { font-size: 22px; line-height: 32px; }
   &.s60 { font-size: 32px; line-height: 60px; }
   &.s90 { font-size: 36px; line-height: 90px; }
+  &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; }
   &.s140 { font-size: 72px; line-height: 140px; }
   &.s160 { font-size: 96px; line-height: 160px; }
 }

app/assets/stylesheets/generic/buttons.scss

+body {
+    text-rendering: geometricPrecision;
+}
 .btn {
   @extend .btn-default;
 
@@ -88,3 +91,138 @@
     }
   }
 }
+
+@mixin btn-info {
+  @include border-radius(2px);
+  
+  border-width: 1px;
+  border-style: solid;
+  text-transform: uppercase;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  padding: 11px 16px;
+  letter-spacing: .4px;
+  
+  &:hover {
+    border-width: 1px;
+    border-style: solid;
+  }
+  
+  &:focus {
+    border-width: 1px;
+    border-style: solid;
+  }
+  
+  &:active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    border-width: 1px;
+    border-style: solid;
+  }
+}
+
+@mixin btn-middle {
+  @include border-radius(2px);
+  
+  border-width: 1px;
+  border-style: solid;
+  text-transform: uppercase;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  padding: 11px 24px;
+  letter-spacing: .4px;
+  
+  &:hover {
+    border-width: 1px;
+    border-style: solid;
+  }
+  
+  &:focus {
+    border-width: 1px;
+    border-style: solid;
+  }
+  
+  &:active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    border-width: 1px;
+    border-style: solid;
+    }
+}
+
+
+@mixin btn-green {
+  background-color: #28b061;
+  border: 1px solid #26a65c;
+  color: #fff;
+    
+     &:hover {
+       background-color: #26ab5d;
+       border: 1px solid #229954;
+       color: #fff;
+     }
+     
+     &:focus {
+       background-color: #26ab5d;
+       border: 1px solid #229954;
+       color: #fff;
+     }
+     
+     &:active {
+       @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
+        
+       background-color: #23a158 !important;
+       border: 1px solid #229954 !important;
+       color: #fff !important;
+     } 
+}
+
+/*Butons*/
+
+@mixin bnt-project {
+  background-color: #f0f2f5;
+  border-color: #dce0e5;
+  color: #313236;
+  
+  &:hover {
+    border-color:#dce0e5;
+    background-color: #ebeef2;
+    color: #313236;
+  }
+   
+  &:focus {
+    border-color: #dce0e5;
+    background-color: #ebeef2;
+    color: #313236;
+  }
+  
+  &:active {
+   @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+   
+      color: #313236 !important;
+      border-color: #c6cacf !important;
+      background-color: #e4e7ed !important;
+  }
+}
+
+@mixin btn-remove {
+  background-color: #f72e60;
+  border-color: #ee295a;
+  
+  &:hover {
+    background-color: #e82757;
+    border-color: #e32555;
+  }
+  
+  &:focus {
+    background-color: #e82757;
+    border-color: #e32555;
+  }
+  
+  &:active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    background-color: #d42450 !important;
+    border-color: #e12554 !important;
+  }
+  
+}
\ No newline at end of file

app/assets/stylesheets/generic/common.scss

@@ -313,7 +313,7 @@ table {
 }
 
 .wiki .highlight, .note-body .highlight {
-  margin-bottom: 9px;
+  margin: 12px 0 12px 0;
 }
 
 .wiki .code {

app/assets/stylesheets/generic/header.scss

@@ -26,7 +26,6 @@ header {
     min-height: $header-height;
     background-color: #fff;
     border: none;
-    border-bottom: 1px solid #EEE;
 
     .container-fluid {
       width: 100% !important;

app/assets/stylesheets/generic/sidebar.scss

@@ -21,12 +21,11 @@
   min-height: 100vh;
   width: 100%;
   padding: 20px;
-  background: #f1f4f8;
+  background: #EAEBEC;
 
   .container-fluid {
     background: #FFF;
     padding: $gl-padding;
-    border: 1px solid #e7e9ed;
     min-height: 90vh;
 
     &.container-blank {

app/assets/stylesheets/generic/typography.scss

@@ -2,11 +2,17 @@
  * Headers
  *
  */
+body {
+  text-rendering:optimizeLegibility;
+  -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
+}
+ 
 .page-title {
   margin-top: 0px;
-  line-height: 1.5;
-  font-weight: normal;
-  margin-bottom: 5px;
+  line-height: 1.3;
+  font-size: 1.25em;
+  font-weight: 600;
+  margin: 12px 7px 12px 7px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -114,4 +120,4 @@ textarea.js-gfm-input {
 
 .strikethrough {
   text-decoration: line-through;
-}
+}
\ No newline at end of file

app/assets/stylesheets/highlight/white.scss

 /* https://github.com/aahan/pygments-github-style */
 pre.code.highlight.white,
 .code.white {
-
-  background-color: #fff;
-  color: #333;
+  background-color: #f8fafc;
+  font-size: 13px;
+  color: #5b6169;
+  line-height: 1.6em;
 
   .line-numbers,
   .line-numbers a {

app/assets/stylesheets/pages/groups.scss

@@ -10,3 +10,9 @@
 .milestone-row {
   @include str-truncated(90%);
 }
+
+.dashboard .side .panel .panel-heading .input-group {
+  .form-control {
+    height: 42px;
+  }
+}
\ No newline at end of file

app/assets/stylesheets/pages/projects.scss

+.alert_holder {
+  margin: -16px;
+  
+  .alert-link {
+    font-weight: normal;
+  }
+}
+.no-ssh-key-message {
+  background-color: #f28d35;
+  margin-bottom: 16px;
+}
 .new_project,
 .edit_project {
   fieldset.features {
@@ -19,44 +30,47 @@
   background: #f7f8fa;
   margin: -$gl-padding;
   padding: $gl-padding;
-  padding-top: 40px;
-
+  padding: 44px 0 17px 0;
+  
   .project-identicon-holder {
-    margin-bottom: 15px;
-
+    margin-bottom: 16px;
+    
     .avatar, .identicon {
       margin: 0 auto;
       float: none;
     }
-
+    
     .identicon {
       @include border-radius(50%);
     }
   }
-
+  
   .project-home-dropdown {
     margin: 11px 3px 0;
   }
 
   .project-home-desc {
     h1 {
+      color: #313236;
       margin: 0;
-      margin-bottom: 10px;
+      margin-bottom: 6px;
       font-size: 23px;
       font-weight: normal;
     }
 
     p {
-      color: #7f8fa4;
+      color: #5c5d5e;
     }
   }
 
   .git-clone-holder {
-    max-width: 600px;
-    margin: 20px auto;
+    max-width: 498px;
 
     .form-control {
       background: #FFF;
+      font-size: 14px;
+      height: 42px;
+      margin-left: -1px;
     }
   }
 
@@ -66,30 +80,37 @@
       color: inherit;
     }
   }
-
+  .input-group {
+    display: inline-table;
+    position: relative;
+    top: 17px;
+    margin-bottom: 44px;
+  }
+  
   .project-repo-buttons {
-    margin-top: $gl-padding;
-    margin-bottom: 25px;
-
+    margin-top: 12px;
+    margin-bottom: 0px;
+    
     .btn {
-      @extend .btn-info;
-
-      text-transform: uppercase;
-      font-size: 15px;
-      line-height: 20px;
-      padding: 8px 14px;
-      border-radius: 3px;
-      margin-left: 10px;
-
+      @include bnt-project;
+      @include btn-info;
+      
       .count {
-        padding-left: 7px;
         display: inline-block;
-        margin-left: 7px;
       }
     }
   }
 }
 
+.split-one {
+  display: inline-table;
+  margin-right: 12px;
+  
+  a {
+    margin: -1px !important;
+  }
+}
+
 .git-clone-holder {
   .project-home-dropdown + & {
     margin-right: 45px;
@@ -99,23 +120,132 @@
     cursor: auto;
     @extend .monospace;
     background: #FAFAFA;
-    width: 100%;
+    width: 101%;
   }
 
   .input-group-addon {
-    background: #FAFAFA;
+    background: #f7f8fa;
 
     &.git-protocols {
       padding: 0;
       border: none;
-
+      
       .input-group-btn:last-child > .btn {
         @include border-radius-right(0);
+        
+        border-left: 1px solid #c6cacf;
+        margin-left: -2px !important;
       }
     }
   }
 }
 
+.projects-search-form {
+  
+  .input-group .form-control {
+    height: 42px;
+  }
+}
+
+.input-group-btn {
+  .btn {    
+    @include bnt-project;
+    @include btn-middle;
+    
+    &:hover {
+      outline: none;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:active {
+      outline: none;
+    }
+  }
+  
+  .active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    
+    border: 1px solid #c6cacf !important;
+    background-color: #e4e7ed !important;
+  }
+  
+  .btn-green {
+    @include btn-green
+  }
+  
+}
+
+.split-repo-buttons {
+  display: inline-table;
+  margin: 0 12px 0 12px;
+  
+  .btn{
+    @include bnt-project;
+    @include btn-info;
+  }
+  
+  .dropdown-toggle  {
+    margin: -5px;
+  }  
+}
+
+#notification-form {
+  margin-left: 5px;
+}
+
+.dropdown-new {
+  margin-left: -5px;
+}
+
+.open > .dropdown-new.btn {
+  @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+ 
+  border: 1px solid #c6cacf !important;
+  background-color: #e4e7ed !important;
+  text-transform: uppercase;
+  color: #313236 !important;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dropdown-menu {
+  @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
+  @include border-radius (0px);
+  
+  border: none;
+  padding: 16px 0;
+  font-size: 14px;
+  font-weight: 100;
+  
+  li a {
+    color: #5f697a;
+    line-height: 30px;
+    
+    &:hover {
+      background-color: #3084bb !important; 
+    }
+  }
+  
+  .fa-fw {
+    margin-right: 8px;
+  }
+}
+
+.fa-bell {
+  margin-right: 6px;
+}
+
+.fa-angle-down {
+  margin-left: 6px;
+}
+
+.project-home-panel .project-home-dropdown {
+  margin: 13px 0px 0;
+}
+
 .project-visibility-level-holder {
   .radio {
     margin-bottom: 10px;
@@ -232,15 +362,28 @@ table.table.protected-branches-list tr.no-border {
 
 .project-stats {
   text-align: center;
-  margin-top: 0;
+  margin-top: 15px;
   margin-bottom: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
+  padding-top: 10px;
+  padding-bottom: 4px;
 
   ul.nav-pills {
     display:inline-block;
   }
+  
+  .nav-pills li {
+    display:inline;
+  }
 
+  .nav > li > a {
+    @include btn-info;
+    @include bnt-project;
+    
+    background-color: transparent;
+    border: 1px solid #f7f8fa;
+    margin-left: 12px;
+  }
+  
   li {
     display:inline;
   }
@@ -251,11 +394,11 @@ table.table.protected-branches-list tr.no-border {
   }
 
   li.missing a {
-    color: #bbb;
-    border: 1px dashed #ccc;
+    color: #5a6069;
+    border: 1px dashed #dce0e5;
 
     &:hover {
-      background-color: #FAFAFA;
+      background-color: #f0f2f5;
     }
   }
 }
@@ -273,9 +416,37 @@ pre.light-well {
   border-bottom: 1px solid #e7e9ed;
 }
 
+.git-empty {
+  margin: 0 7px 0 7px;
+  
+  h5 {
+    color: #5c5d5e;
+  }
+  
+  .light-well {
+    @include border-radius (2px);
+    
+    color: #5b6169;
+    font-size: 13px; 
+    line-height: 1.6em; 
+  }
+}
+
+.prepend-top-20 {
+  margin-top: 20px;
+  
+  .btn-remove {
+    @include btn-middle;
+    @include btn-remove;
+    
+    float: left !important;
+  }
+}
+
 /*
  * Projects list rendered on dashboard and user page
  */
+ 
 .projects-list {
   @include basic-list;
 
@@ -339,3 +510,4 @@ pre.light-well {
 .inline-form {
   display: inline-block;
 }
+

app/views/dashboard/projects/_projects.html.haml

@@ -4,7 +4,7 @@
       = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control'
       - if current_user.can_create_project?
         %span.input-group-btn
-          = link_to new_project_path, class: 'btn btn-success' do
+          = link_to new_project_path, class: 'btn btn-green' do
             New project
 
   = render 'shared/projects/list', projects: @projects, ci: true

app/views/groups/_projects.html.haml

@@ -4,7 +4,7 @@
       = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control'
       - if can? current_user, :create_projects, @group
         %span.input-group-btn
-          = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-success' do
+          = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-green' do
             New project
 
   = render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false

app/views/projects/_home_panel.html.haml

@@ -16,18 +16,19 @@
 
 
   .project-repo-buttons
-    = render 'projects/buttons/star'
-
-    - unless empty_repo
-      = render 'projects/buttons/fork'
-
-      - if can? current_user, :download_code, @project
-        = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: @ref, format: 'zip'), class: 'btn', rel: 'nofollow' do
-          = icon('download fw')
-          Download
-
+    .split-one
+      = render 'projects/buttons/star'
+
+      - unless empty_repo
+        = render 'projects/buttons/fork'
+    
+    = render "shared/clone_panel"
+    .split-repo-buttons 
+      - unless empty_repo
+        - if can? current_user, :download_code, @project
+          = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: @ref, format: 'zip'), class: 'btn', rel: 'nofollow' do
+            = icon('download fw')
+            
+      = render 'projects/buttons/dropdown'
     = render 'projects/buttons/notifications'
-
-    = render 'projects/buttons/dropdown'
-
-  = render "shared/clone_panel"
+    

app/views/projects/_readme.html.haml

@@ -5,7 +5,7 @@
          
         - if can?(current_user, :push_code, @project)
           = link_to namespace_project_edit_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)), class: 'light' do
-            %i.fa.fa-pencil
+            %i.fa-align.fa.fa-pencil
     .wiki
       = cache(readme_cache_key) do
         = render_readme(readme)

app/views/projects/buttons/_dropdown.html.haml

 - if current_user
   %span.dropdown
-    %a.dropdown-toggle.btn.btn-new{href: '#', "data-toggle" => "dropdown"}
+    %a.dropdown-new.btn.btn-new{href: '#', "data-toggle" => "dropdown"}
       = icon('plus')
     %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown
       - if can?(current_user, :create_issue, @project)

app/views/projects/buttons/_fork.html.haml

@@ -8,6 +8,5 @@
   - else
     = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn' do
       = icon('code-fork fw')
-      Fork
       %span.count
         = @project.forks_count

app/views/projects/buttons/_notifications.html.haml

@@ -5,7 +5,7 @@
   = hidden_field_tag :notification_id, @membership.id
   = hidden_field_tag :notification_level
   %span.dropdown
-    %a.dropdown-toggle.btn.btn-new#notifications-button{href: '#', "data-toggle" => "dropdown"}
+    %a.dropdown-new.btn.btn-new#notifications-button{href: '#', "data-toggle" => "dropdown"}
       = icon('bell')
       = notification_label(@membership)
       = icon('angle-down')

app/views/projects/buttons/_star.html.haml

 - if current_user
   = link_to toggle_star_namespace_project_path(@project.namespace, @project), class: 'btn star-btn toggle-star', method: :post, remote: true do
     = icon('star fw')
-    - if current_user.starred?(@project)
-      Unstar
-    - else
-      Star
     %span.count
       = @project.star_count
 
@@ -17,6 +13,5 @@
 - else
   = link_to new_user_session_path, class: 'btn has_tooltip star-btn', title: 'You must sign in to star a project' do
     = icon('star fw')
-    Star
     %span.count
       = @project.star_count

app/views/projects/empty.html.haml

-- if current_user && can?(current_user, :download_code, @project)
-  = render 'shared/no_ssh'
-  = render 'shared/no_password'
-
+.alert_holder
+  - if current_user && can?(current_user, :download_code, @project)
+    = render 'shared/no_ssh'
+    = render 'shared/no_password'
+    
 = render "home_panel"
 
 .gray-content-block.center
@@ -15,38 +16,39 @@
     file to this project.
 
 .prepend-top-20
-%h3.page-title
-  Command line instructions
-%div.git-empty
-  %fieldset
-    %h5 Git global setup
-    %pre.light-well
-      :preserve
-        git config --global user.name "#{h git_user_name}"
-        git config --global user.email "#{h git_user_email}"
+.empty_wrapper
+  %h3.page-title
+    Command line instructions
+  %div.git-empty
+    %fieldset
+      %h5 Git global setup
+      %pre.light-well
+        :preserve
+          git config --global user.name "#{h git_user_name}"
+          git config --global user.email "#{h git_user_email}"
 
-  %fieldset
-    %h5 Create a new repository
-    %pre.light-well
-      :preserve
-        git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')}
-        cd #{h @project.path}
-        touch README.md
-        git add README.md
-        git commit -m "add README"
-        git push -u origin master
+    %fieldset
+      %h5 Create a new repository
+      %pre.light-well
+        :preserve
+          git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')}
+          cd #{h @project.path}
+          touch README.md
+          git add README.md
+          git commit -m "add README"
+          git push -u origin master
 
-  %fieldset
-    %h5 Existing folder or Git repository
-    %pre.light-well
-      :preserve
-        cd existing_folder
-        git init
-        git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
-        git add .
-        git commit
-        git push -u origin master
+    %fieldset
+      %h5 Existing folder or Git repository
+      %pre.light-well
+        :preserve
+          cd existing_folder
+          git init
+          git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
+          git add .
+          git commit
+          git push -u origin master
 
-- if can? current_user, :remove_project, @project
-  .prepend-top-20
-    = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right"
+      - if can? current_user, :remove_project, @project
+        .prepend-top-20
+          = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right"

app/views/shared/_clone_panel.html.haml

@@ -24,4 +24,4 @@
     .input-group-addon
       .visibility-level-label.has_tooltip{'data-title' => "#{visibility_level_label(project.visibility_level)} project" }
         = visibility_level_icon(project.visibility_level)
-        = visibility_level_label(project.visibility_level).downcase
+   

features/steps/project/fork.rb

@@ -5,8 +5,7 @@ class Spinach::Features::ProjectFork < Spinach::FeatureSteps
 
   step 'I click link "Fork"' do
     expect(page).to have_content "Shop"
-    expect(page).to have_content "Fork"
-    click_link "Fork"
+    click_link "Fork project"
   end
 
   step 'I am a member of project "Shop"' do