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