Merge branch 'project-home-redesign' into 'master'

Project home redesign

* more focus for description and stars/forks
* rename activity -> to project tab
* put activity under tab: prepare place for README tab

Fixes #1534.

See merge request !1047

app/assets/javascripts/project.js.coffee

@@ -47,7 +47,7 @@ $ ->
     $(@).parents('.no-ssh-key-message').hide()
     e.preventDefault()
 
-  $('.project-side .star').on 'ajax:success', (e, data, status, xhr) ->
+  $('.project-home-panel .star').on 'ajax:success', (e, data, status, xhr) ->
     $(@).toggleClass('on').find('.count').html(data.star_count)
   .on 'ajax:error', (e, xhr, status, error) ->
     new Flash('Star toggle failed. Try again later.', 'alert')

app/assets/stylesheets/sections/nav.scss

@@ -35,39 +35,31 @@
       width: 1%;
       &.active {
         a {
-          color: #333;
+          color: $link_color;
           font-weight: bold;
           &:after {
             content: '';
             display: block;
             position: relative;
-            bottom: 8px;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-color: transparent transparent #333 transparent;
+            bottom: -1px;
+            border-color: $link_color;
             border-style: solid;
-            border-width: 6px;
-            margin-left: -6px;
+            border-width: 2px;
           }
         }
       }
 
       &:hover {
         a {
-          color: $link_color;
+          color: $link_hover_color;
           &:after {
             content: '';
             display: block;
             position: relative;
-            bottom: 8px;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-color: transparent transparent $link_color transparent;
+            bottom: -1px;
+            border-color: $link_hover_color;
             border-style: solid;
-            border-width: 6px;
-            margin-left: -6px;
+            border-width: 2px;
           }
         }
       }
@@ -90,7 +82,6 @@
       line-height: 34px;
       color: #777;
       text-shadow: 0 1px 1px white;
-      padding: 0 10px;
       text-decoration: none;
       padding-top: 2px;
     }

app/assets/stylesheets/sections/projects.scss

@@ -15,62 +15,64 @@
 }
 
 .project-home-panel {
-  border-bottom: 1px solid #DDD;
-  padding-bottom: 15px;
-  margin-bottom: 30px;
+  margin-bottom: 15px;
 
   &.empty-project {
-      border-bottom: 0px;
-      padding-bottom: 15px;
-      margin-bottom: 0px;
+    border-bottom: 0px;
+    padding-bottom: 15px;
+    margin-bottom: 0px;
   }
 
-  .project-home-title {
-    font-size: 18px;
-    color: #444;
-    margin: 0;
-    line-height: 32px;
-  }
   .project-home-dropdown {
     margin-left: 10px;
     float: right;
   }
-  .project-home-extra {
-    margin-top: 15px;
+
+  .project-home-row {
+    @extend .clearfix;
+    margin-bottom: 15px;
 
     .project-home-desc {
       float: left;
-      color: #777;
-      margin-bottom: 10px;
+      color: #666;
+      font-size: 16px;
     }
 
-    .project-home-links {
+    .star-fork-buttons {
       float: right;
-      a {
-        margin-left: 10px;
-        font-weight: 500;
+      width: 200px;
+      font-size: 14px;
+      font-weight: bold;
+
+      .star-buttons, .fork-buttons {
+        float: right;
+        margin-left: 20px;
+
+        .count {
+          margin-left: 5px;
+        }
       }
     }
   }
 
   .visibility-level-label {
-    font-size: 17px;
-    background: #f1f1f1;
-    border-radius: 4px;
-    color: #444;
-    position: absolute;
-    margin-left: -55px;
-    text-shadow: 0 1px 1px #FFF;
-    width: 40px;
-    text-align: center;
-    padding: 6px;
-
+    color: #555;
+    font-weight: bold;
     i {
       color: inherit;
     }
   }
 }
 
+.project-home-links {
+  padding: 10px 0px;
+  float: right;
+  a {
+    margin-left: 10px;
+    font-weight: 500;
+  }
+}
+
 .git-clone-holder {
   .project-home-dropdown + & {
     margin-right: 45px;
@@ -195,8 +197,8 @@ ul.nav.nav-projects-tabs {
       white-space: normal;
       text-align: left;
       padding: 10px 15px;
-      background-color: #F1f1f1;
-      border-color: #EEE;
+      background-color: #F9F9F9;
+      border-color: #DDD;
 
       &:hover {
         background-color: #eee;

app/helpers/projects_helper.rb

@@ -123,7 +123,7 @@ module ProjectsHelper
   end
 
   def link_to_toggle_star(title, starred, signed_in)
-    cls = 'btn btn-block'
+    cls = 'star-btn'
     cls += ' disabled' unless signed_in
 
     toggle_html = content_tag('span', class: 'toggle') do
@@ -151,7 +151,7 @@ module ProjectsHelper
 
     content_tag 'span', class: starred ? 'turn-on' : 'turn-off' do
       link_to toggle_star_project_path(@project), link_opts do
-        toggle_html + count_html
+        toggle_html + ' ' + count_html
       end
     end
   end

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

 %ul
   = nav_link(path: 'projects#show', html_options: {class: "home"}) do
     = link_to project_path(@project), title: "Project" do
-      Activity
+      Project
 
   - if project_nav_tab? :files
     = nav_link(controller: %w(tree blob blame edit_tree new_tree)) do

app/views/projects/_home_panel.html.haml

 - empty_repo = @project.empty_repo?
 .project-home-panel{:class => ("empty-project" if empty_repo)}
-  .visibility-level-label.has_tooltip{'data-title' => "#{visibility_level_label(@project.visibility_level)} project" }
-    = visibility_level_icon(@project.visibility_level)
-  .row
-    .col-sm-6
-      %h4.project-home-title
-        = @project.name_with_namespace
+  .project-home-row
+    .project-home-desc
+      - if @project.description.present?
+        = auto_link ERB::Util.html_escape(@project.description), link: :urls
+      - if can?(current_user, :admin_project, @project)
+        –
+        = link_to 'Edit', edit_project_path
+      - elsif !@project.empty_repo? && @repository.readme
+        - readme = @repository.readme
+        –
+        = link_to project_blob_path(@project, tree_join(@repository.root_ref, readme.name)) do
+          = readme.name
+    .star-fork-buttons
+      - unless @project.empty_repo?
+        .fork-buttons
+          - if current_user && can?(current_user, :fork_project, @project) && @project.namespace != current_user.namespace
+            - if current_user.already_forked?(@project)
+              = link_to project_path(current_user.fork_of(@project)) do
+                %i.icon-code-fork
+                Fork
+                %span.count
+                  = @project.forks_count
+            - else
+              = link_to fork_project_path(@project), title: "Fork", class: "btn btn-block", method: "POST" do
+                %i.icon-code-fork
+                Fork
+                %span.count
+                  = @project.forks_count
 
-    .col-sm-6
-      - if current_user && !empty_repo
-        .project-home-dropdown
-          = render "dropdown"
-      = render "shared/clone_panel"
+      .star-buttons
+        %span.star.js-toggler-container{class: @show_star ? 'on' : ''}
+          - if current_user
+            = link_to_toggle_star('Star this project.', false, true)
+            = link_to_toggle_star('Unstar this project.', true, true)
+          - else
+            = link_to_toggle_star('You must sign in to star a project.', false, false)
 
-  .project-home-extra.row
-    .col-md-7
-      .project-home-desc
-        - if @project.description.present?
-          = auto_link ERB::Util.html_escape(@project.description), link: :urls
-        - if can?(current_user, :admin_project, @project)
-          –
-          %strong= link_to 'Edit', edit_project_path
-        - elsif !@project.empty_repo? && @repository.readme
-          - readme = @repository.readme
-          –
-          = link_to project_blob_path(@project, tree_join(@repository.root_ref, readme.name)) do
-            = readme.name
-
-    .col-md-5
-      .project-home-links
-        - unless empty_repo
-          = link_to pluralize(number_with_delimiter(@repository.commit_count), 'commit'), project_commits_path(@project, @ref || @repository.root_ref)
-          = link_to pluralize(number_with_delimiter(@repository.branch_names.count), 'branch'), project_branches_path(@project)
-          = link_to pluralize(number_with_delimiter(@repository.tag_names.count), 'tag'), project_tags_path(@project)
-          %span.light.prepend-left-20= repository_size
+  .project-home-row
+    - if current_user && !empty_repo
+      .project-home-dropdown
+        = render "dropdown"
+    - unless @project.empty_repo?
+      - if can? current_user, :download_code, @project
+        .pull-right.prepend-left-10
+          = render 'projects/repositories/download_archive', split_button: true
+    = render "shared/clone_panel"

app/views/projects/show.html.haml

 = render "home_panel"
 
+%ul.nav.nav-tabs
+  %li.active
+    = link_to project_path(@project) do
+      Activity
+  .project-home-links
+    - unless @project.empty_repo?
+      = link_to pluralize(number_with_delimiter(@repository.commit_count), 'commit'), project_commits_path(@project, @ref || @repository.root_ref)
+      = link_to pluralize(number_with_delimiter(@repository.branch_names.count), 'branch'), project_branches_path(@project)
+      = link_to pluralize(number_with_delimiter(@repository.tag_names.count), 'tag'), project_tags_path(@project)
+      %span.light.prepend-left-20= repository_size
+
 .row
   %section.col-md-9
     = render "events/event_last_push", event: @last_push
@@ -22,33 +33,7 @@
           %br
           = link_to @project.forked_from_project.name_with_namespace, project_path(@project.forked_from_project)
 
-      .star-buttons
-        %span.star.js-toggler-container{class: @show_star ? 'on' : ''}
-          - if current_user
-            = link_to_toggle_star('Star this project.', false, true)
-            = link_to_toggle_star('Unstar this project.', true, true)
-          - else
-            = link_to_toggle_star('You must sign in to star a project.', false, false)
-
       - unless @project.empty_repo?
-        .fork-buttons
-          - if current_user && can?(current_user, :fork_project, @project) && @project.namespace != current_user.namespace
-            - if current_user.already_forked?(@project)
-              = link_to project_path(current_user.fork_of(@project)), class: 'btn btn-block' do
-                %i.icon-compass
-                Go to fork
-                %span.count
-                  = @project.forks_count
-            - else
-              = link_to fork_project_path(@project), title: "Fork", class: "btn btn-block", method: "POST" do
-                %i.icon-code-fork
-                Fork repository
-                %span.count
-                  = @project.forks_count
-      - unless @project.empty_repo?
-        - if can? current_user, :download_code, @project
-          = render 'projects/repositories/download_archive', btn_class: 'btn-block btn-group-justified', split_button: true
-
         = link_to project_compare_index_path(@project, from: @repository.root_ref, to: @ref || @repository.root_ref), class: 'btn btn-block' do
           Compare code
 

app/views/shared/_clone_panel.html.haml

@@ -4,3 +4,7 @@
     %button{class: "btn #{ 'active' if default_clone_protocol == 'ssh' }", :"data-clone" => project.ssh_url_to_repo} SSH
     %button{class: "btn #{ 'active' if default_clone_protocol == 'http' }", :"data-clone" => project.http_url_to_repo}= gitlab_config.protocol.upcase
   = text_field_tag :project_clone, default_url_to_repo(project), class: "one_click_select form-control", readonly: true
+  .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/explore/projects.rb

@@ -35,13 +35,13 @@ class Spinach::Features::ExploreProjectsFeature < Spinach::FeatureSteps
   end
 
   step 'I should see project "Community" home page' do
-    within '.project-home-title' do
+    within '.navbar-gitlab .title' do
       page.should have_content 'Community'
     end
   end
 
   step 'I should see project "Internal" home page' do
-    within '.project-home-title' do
+    within '.navbar-gitlab .title' do
       page.should have_content 'Internal'
     end
   end

features/steps/project/active_tab.rb

@@ -7,7 +7,7 @@ class ProjectActiveTab < Spinach::FeatureSteps
   # Main Tabs
 
   Then 'the active main tab should be Home' do
-    ensure_active_main_tab('Activity')
+    ensure_active_main_tab('Project')
   end
 
   Then 'the active main tab should be Settings' do

features/steps/project/redirects.rb

@@ -18,7 +18,7 @@ class Spinach::Features::ProjectRedirects < Spinach::FeatureSteps
 
   step 'I should see project "Community" home page' do
     Gitlab.config.gitlab.stub(:host).and_return("www.example.com")
-    within '.project-home-title' do
+    within '.navbar-gitlab .title' do
       page.should have_content 'Community'
     end
   end
@@ -34,9 +34,7 @@ class Spinach::Features::ProjectRedirects < Spinach::FeatureSteps
   end
 
   step 'I click on "Sign In"' do
-    within '.pull-right' do
-      click_link "Sign in"
-    end
+    first(:link, "Sign in").click
   end
 
   step 'Authenticate' do