Merge branch 'ui/consistency' into 'master'

UI: Improve consistency across the board

Depends on !1953

See the commits for more details, the messages mostly speak for themselves.

Fixes https://dev.gitlab.org/gitlab/gitlabhq/issues/2577

See merge request !1954

app/assets/stylesheets/pages/commit.scss

@@ -2,10 +2,6 @@
   display: block;
 }
 
-.commit-title{
-  margin-bottom: 10px;
-}
-
 .commit-author, .commit-committer{
   display: block;
   color: #999;
@@ -41,6 +37,8 @@
 .commit-box {
   .commit-title {
     margin: 0;
+    font-size: 23px;
+    color: #313236;
   }
 
   .commit-description {

app/helpers/blob_helper.rb

@@ -60,7 +60,7 @@ module BlobHelper
     if Gitlab::MarkupHelper.previewable?(filename)
       'Preview'
     else
-      'Preview changes'
+      'Preview Changes'
     end
   end
 

app/helpers/commits_helper.rb

@@ -109,7 +109,7 @@ module CommitsHelper
         )
       elsif @path.present?
         return link_to(
-          "Browse Dir »",
+          "Browse Directory »",
           namespace_project_tree_path(project.namespace, project,
                                       tree_join(commit.id, @path)),
           class: "pull-right"
@@ -117,7 +117,7 @@ module CommitsHelper
       end
     end
     link_to(
-      "Browse Code »",
+      "Browse Files »",
       namespace_project_tree_path(project.namespace, project, commit),
       class: "pull-right"
     )

app/helpers/diff_helper.rb

@@ -146,9 +146,9 @@ module DiffHelper
   def submodule_link(blob, ref, repository = @repository)
     tree, commit = submodule_links(blob, ref, repository)
     commit_id = if commit.nil?
-                  blob.id[0..10]
+                  Commit.truncate_sha(blob.id)
                 else
-                  link_to "#{blob.id[0..10]}", commit
+                  link_to Commit.truncate_sha(blob.id), commit
                 end
 
     [

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

@@ -3,7 +3,7 @@
     .form-group
       = search_field_tag :search, params[:search], placeholder: "Filter by name", class: "form-control search-text-input", id: "projects_search", spellcheck: false
     .form-group
-      = button_tag 'Search', class: "btn btn-success"
+      = button_tag 'Search', class: "btn"
 
 .pull-right.hidden-sm.hidden-xs
   - if current_user

app/views/import/bitbucket/status.html.haml

 - page_title "Bitbucket import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-bitbucket
   Import projects from Bitbucket

app/views/import/fogbugz/new.html.haml

 - page_title "FogBugz Import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-bug
   Import projects from FogBugz

app/views/import/fogbugz/new_user_map.html.haml

 - page_title 'User map', 'FogBugz import'
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-bug
   Import projects from FogBugz

app/views/import/fogbugz/status.html.haml

 - page_title "FogBugz import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-bug
   Import projects from FogBugz

app/views/import/github/status.html.haml

 - page_title "GitHub import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-github
   Import projects from GitHub

app/views/import/gitlab/status.html.haml

 - page_title "GitLab.com import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-heart
   Import projects from GitLab.com

app/views/import/gitorious/status.html.haml

 - page_title "Gitorious import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.icon-gitorious.icon-gitorious-big
   Import projects from Gitorious.org

app/views/import/google_code/new.html.haml

 - page_title "Google Code import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-google
   Import projects from Google Code
@@ -6,7 +7,7 @@
 
 = form_tag callback_import_google_code_path, class: 'form-horizontal', multipart: true do
   %p
-    Follow the steps below to export your Google Code project data. 
+    Follow the steps below to export your Google Code project data.
     In the next step, you'll be able to select the projects you want to import.
   %ol
     %li

app/views/import/google_code/new_user_map.html.haml

 - page_title "User map", "Google Code import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-google
   Import projects from Google Code
@@ -8,31 +9,31 @@
   %p
     Customize how Google Code email addresses and usernames are imported into GitLab.
     In the next step, you'll be able to select the projects you want to import.
-  %p 
+  %p
     The user map is a JSON document mapping the Google Code users that participated on your projects to the way their email addresses and usernames will be imported into GitLab. You can change this by changing the value on the right hand side of <code>:</code>. Be sure to preserve the surrounding double quotes, other punctuation and the email address or username on the left hand side.
   %ul
     %li
       %strong Default: Directly import the Google Code email address or username
       %p
-        <code>"johnsmith@example.com": "johnsm...@example.com"</code> 
-        will add "By johnsm...@example.com" to all issues and comments originally created by johnsmith@example.com. 
+        <code>"johnsmith@example.com": "johnsm...@example.com"</code>
+        will add "By johnsm...@example.com" to all issues and comments originally created by johnsmith@example.com.
         The email address or username is masked to ensure the user's privacy.
     %li
       %strong Map a Google Code user to a GitLab user
       %p
-        <code>"johnsmith@example.com": "@johnsmith"</code> 
-        will add "By <a href="#">@johnsmith</a>" to all issues and comments originally created by johnsmith@example.com, 
+        <code>"johnsmith@example.com": "@johnsmith"</code>
+        will add "By <a href="#">@johnsmith</a>" to all issues and comments originally created by johnsmith@example.com,
         and will set <a href="#">@johnsmith</a> as the assignee on all issues originally assigned to johnsmith@example.com.
     %li
       %strong Map a Google Code user to a full name
       %p
-        <code>"johnsmith@example.com": "John Smith"</code> 
+        <code>"johnsmith@example.com": "John Smith"</code>
         will add "By John Smith" to all issues and comments originally created by johnsmith@example.com.
     %li
       %strong Map a Google Code user to a full email address
       %p
-        <code>"johnsmith@example.com": "johnsmith@example.com"</code> 
-        will add "By <a href="#">johnsmith@example.com</a>" to all issues and comments originally created by johnsmith@example.com. 
+        <code>"johnsmith@example.com": "johnsmith@example.com"</code>
+        will add "By <a href="#">johnsmith@example.com</a>" to all issues and comments originally created by johnsmith@example.com.
         By default, the email address or username is masked to ensure the user's privacy. Use this option if you want to show the full email address.
 
   .form-group

app/views/import/google_code/status.html.haml

 - page_title "Google Code import"
+- header_title "Projects", root_path
 %h3.page-title
   %i.fa.fa-google
   Import projects from Google Code

app/views/profiles/keys/index.html.haml

@@ -3,7 +3,9 @@
 
 .gray-content-block.top-block
   .pull-right
-    = link_to "Add SSH Key", new_profile_key_path, class: "btn btn-new"
+    = link_to new_profile_key_path, class: "btn btn-new" do
+      = icon('plus')
+      Add SSH Key
   .oneline
     Before you can add an SSH key you need to
     = link_to "generate it.", help_page_path("ssh", "README")

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

@@ -6,7 +6,7 @@
 #tree-holder.tree-holder
   .file-holder
     .file-title
-      %i.fa.fa-file
+      = blob_icon @blob.mode, @blob.name
       %strong
         = @path
       %small= number_to_human_size @blob.size
@@ -43,4 +43,3 @@
                   - blame_group[:lines].each do |line|
                     :erb
                       <%= highlight(@blob.name, line, nowrap: true, continue: true).html_safe %>
-

app/views/projects/blob/edit.html.haml

@@ -5,12 +5,12 @@
   %ul.center-top-menu.no-bottom.js-edit-mode
     %li.active
       = link_to '#editor' do
-        %i.fa.fa-edit
-        Edit file
+        = icon('edit')
+        Edit File
 
     %li
       = link_to '#preview', 'data-preview-url' => namespace_project_preview_blob_path(@project.namespace, @project, @id) do
-        %i.fa.fa-eye
+        = icon('eye')
         = editing_preview_title(@blob.name)
 
   = form_tag(namespace_project_update_blob_path(@project.namespace, @project, @id), method: :put, class: 'form-horizontal js-requires-input js-edit-blob-form') do

app/views/projects/branches/_commit.html.haml

 .branch-commit
-  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-id"
+  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-id monospace"
   ·
   %span.str-truncated
     = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"

app/views/projects/branches/index.html.haml

@@ -5,7 +5,7 @@
   .pull-right
     - if can? current_user, :push_code, @project
       = link_to new_namespace_project_branch_path(@project.namespace, @project), class: 'btn btn-create' do
-        %i.fa.fa-add-sign
+        = icon('plus')
         New branch
        
     .dropdown.inline

app/views/projects/commit/_commit_box.html.haml

@@ -13,8 +13,9 @@
         - unless @commit.parents.length > 1
           %li= link_to "Email Patches", namespace_project_commit_path(@project.namespace, @project, @commit, format: :patch)
         %li= link_to "Plain Diff",    namespace_project_commit_path(@project.namespace, @project, @commit, format: :diff)
-    = link_to namespace_project_tree_path(@project.namespace, @project, @commit), class: "btn btn-primary btn-grouped" do
-      %span Browse Code »
+    = link_to namespace_project_tree_path(@project.namespace, @project, @commit), class: "btn btn-grouped" do
+      = icon('files-o')
+      Browse Files
   %div
 
 %p

app/views/projects/diffs/_file.html.haml

@@ -2,19 +2,27 @@
   .diff-header{id: "file-path-#{hexdigest(diff_file.file_path)}"}
     - if diff_file.diff.submodule?
       %span
+        = icon('archive fw')
         - submodule_item = project.repository.blob_at(@commit.id, diff_file.file_path)
-        = submodule_link(submodule_item, @commit.id, project.repository)
+        %strong
+          = submodule_link(submodule_item, @commit.id, project.repository)
     - else
       %span
+        = blob_icon blob.mode, blob.name
+        = link_to "#diff-#{i}" do
+          %strong
+            = diff_file.new_path
+
         - if diff_file.deleted_file
-          = "#{diff_file.old_path} deleted"
+          deleted
         - elsif diff_file.renamed_file
-          = "#{diff_file.old_path} renamed to #{diff_file.new_path}"
-        - else
-          = diff_file.new_path
+          renamed from
+          %strong
+            = diff_file.old_path
 
         - if diff_file.mode_changed?
-          %span.file-mode= "#{diff_file.diff.a_mode} → #{diff_file.diff.b_mode}"
+          %small
+            = "#{diff_file.diff.a_mode} → #{diff_file.diff.b_mode}"
 
       .diff-controls
         - if blob.text?

app/views/projects/labels/_label.html.haml

@@ -7,4 +7,4 @@
 
     - if can? current_user, :admin_label, @project
       = link_to 'Edit', edit_namespace_project_label_path(@project.namespace, @project, label), class: 'btn btn-sm'
-      = link_to 'Remove', namespace_project_label_path(@project.namespace, @project, label), class: 'btn btn-sm btn-remove remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?"}
+      = link_to 'Delete', namespace_project_label_path(@project.namespace, @project, label), class: 'btn btn-sm btn-remove remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?"}

app/views/projects/labels/index.html.haml

@@ -4,6 +4,7 @@
 .gray-content-block.top-block
   - if can? current_user, :admin_label, @project
     = link_to new_namespace_project_label_path(@project.namespace, @project), class: "pull-right btn btn-new" do
+      = icon('plus')
       New label
   .oneline
     Labels can be applied to issues and merge requests.

app/views/projects/milestones/_milestone.html.haml

@@ -31,4 +31,4 @@
         = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close"
         = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove" do
           %i.fa.fa-trash-o
-          Remove
+          Delete

app/views/projects/repositories/_download_archive.html.haml

@@ -3,10 +3,10 @@
 - split_button = split_button || false
 - if split_button == true
   %span.btn-group{class: btn_class}
-    = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: ref, format: 'zip'), class: 'btn btn-success col-xs-10', rel: 'nofollow' do
+    = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: ref, format: 'zip'), class: 'btn col-xs-10', rel: 'nofollow' do
       %i.fa.fa-download
       %span Download zip
-    %a.col-xs-2.btn.btn-success.dropdown-toggle{ 'data-toggle' => 'dropdown' }
+    %a.col-xs-2.btn.dropdown-toggle{ 'data-toggle' => 'dropdown' }
       %span.caret
       %span.sr-only
         Select Archive Format

app/views/projects/tags/index.html.haml

@@ -6,7 +6,7 @@
   - if can? current_user, :push_code, @project
     .pull-right
       = link_to new_namespace_project_tag_path(@project.namespace, @project), class: 'btn btn-create new-tag-btn' do
-        %i.fa.fa-add-sign
+        = icon('plus')
         New tag
   .oneline
     Tags give the ability to mark specific points in history as being important

app/views/projects/tree/_tree_content.html.haml

@@ -12,7 +12,7 @@
               %i.fa.fa-angle-right
                
               %small.light
-                = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit)
+                = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
                 –
                 = truncate(@commit.title, length: 50)
             = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'pull-right'

features/steps/admin/labels.rb

@@ -17,7 +17,7 @@ class Spinach::Features::AdminIssuesLabels < Spinach::FeatureSteps
 
   step 'I remove label \'bug\'' do
     page.within "#label_#{bug_label.id}" do
-      click_link 'Remove'
+      click_link 'Delete'
     end
   end
 

features/steps/project/issues/labels.rb

@@ -9,7 +9,7 @@ class Spinach::Features::ProjectIssuesLabels < Spinach::FeatureSteps
 
   step 'I remove label \'bug\'' do
     page.within "#label_#{bug_label.id}" do
-      click_link 'Remove'
+      click_link 'Delete'
     end
   end
 

features/steps/project/issues/milestones.rb

@@ -63,7 +63,7 @@ class Spinach::Features::ProjectIssuesMilestones < Spinach::FeatureSteps
   end
 
   step 'I click link to remove milestone' do
-    click_link 'Remove'
+    click_link 'Delete'
   end
 
   step 'I should see no milestones' do

features/steps/project/source/browse_files.rb

@@ -87,7 +87,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   end
 
   step 'I click link "Diff"' do
-    click_link 'Preview changes'
+    click_link 'Preview Changes'
   end
 
   step 'I click on "Commit Changes"' do
@@ -192,7 +192,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   end
 
   step 'I see Browse dir link' do
-    expect(page).to have_link 'Browse Dir »'
+    expect(page).to have_link 'Browse Directory »'
     expect(page).not_to have_link 'Browse Code »'
   end
 
@@ -204,13 +204,13 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
 
   step 'I see Browse file link' do
     expect(page).to have_link 'Browse File »'
-    expect(page).not_to have_link 'Browse Code »'
+    expect(page).not_to have_link 'Browse Files »'
   end
 
   step 'I see Browse code link' do
-    expect(page).to have_link 'Browse Code »'
+    expect(page).to have_link 'Browse Files »'
     expect(page).not_to have_link 'Browse File »'
-    expect(page).not_to have_link 'Browse Dir »'
+    expect(page).not_to have_link 'Browse Directory »'
   end
 
   step 'I click on Permalink' do