Make tree, blob and blame pages more consistent

app/assets/stylesheets/framework/files.scss

@@ -4,13 +4,14 @@
  */
 .file-holder {
   border: 1px solid $border-color;
+  border-radius: $border-radius-default;
 
   &.file-holder-no-border {
     border: 0;
   }
 
   &.readme-holder {
-    margin: $gl-padding-top 0;
+    margin: $gl-padding 0;
   }
 
   table {
@@ -25,7 +26,7 @@
     text-align: left;
     padding: 10px $gl-padding;
     word-wrap: break-word;
-    border-radius: 3px 3px 0 0;
+    border-radius: $border-radius-default $border-radius-default 0 0;
 
     &.file-title-clear {
       padding-left: 0;
@@ -94,9 +95,16 @@
 
       tr {
         border-bottom: 1px solid $blame-border;
+
+        &:last-child {
+          border-bottom: none;
+        }
       }
 
       td {
+        border-top: none;
+        border-bottom: none;
+
         &:first-child {
           border-left: none;
         }
@@ -107,7 +115,7 @@
       }
 
       td.blame-commit {
-        padding: 0 10px;
+        padding: 5px 10px;
         min-width: 400px;
         background: $gray-light;
       }
@@ -246,7 +254,7 @@ span.idiff {
   border-bottom: 1px solid $border-color;
   padding: 5px $gl-padding;
   margin: 0;
-  border-radius: 3px 3px 0 0;
+  border-radius: $border-radius-default $border-radius-default 0 0;
 
   .file-header-content {
     white-space: nowrap;

app/assets/stylesheets/framework/variables.scss

@@ -163,7 +163,7 @@ $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: $red-500;
-$border-radius-default: 2px;
+$border-radius-default: 3px;
 $settings-icon-size: 18px;
 $provider-btn-not-active-color: $blue-500;
 $link-underline-blue: $blue-500;

app/assets/stylesheets/pages/commits.scss

@@ -163,7 +163,6 @@
 
 .avatar-cell {
   width: 46px;
-  padding-left: 10px;
 
   img {
     margin-right: 0;
@@ -175,7 +174,6 @@
   justify-content: space-between;
   align-items: flex-start;
   flex-grow: 1;
-  padding-left: 10px;
 
   .merge-request-branches & {
     flex-direction: column;

app/assets/stylesheets/pages/diff.scss

@@ -1,8 +1,6 @@
 // Common
 .diff-file {
-  border: 1px solid $border-color;
   margin-bottom: $gl-padding;
-  border-radius: 3px;
 
   .commit-short-id {
     font-family: $regular_font;

app/assets/stylesheets/pages/tree.scss

@@ -138,11 +138,12 @@
 
 .blob-commit-info {
   list-style: none;
-  background: $gray-light;
-  padding: 16px 16px 16px 6px;
-  border: 1px solid $border-color;
-  border-bottom: none;
   margin: 0;
+  padding: 0;
+}
+
+.blob-content-holder {
+  margin-top: $gl-padding;
 }
 
 .blob-upload-dropzone-previews {

app/helpers/blob_helper.rb

@@ -18,7 +18,7 @@ module BlobHelper
     blob = options.delete(:blob)
     blob ||= project.repository.blob_at(ref, path) rescue nil
 
-    return unless blob
+    return unless blob && blob.readable_text?
 
     common_classes = "btn js-edit-blob #{options[:extra_class]}"
 

app/helpers/commits_helper.rb

@@ -100,17 +100,15 @@ module CommitsHelper
   end
 
   def link_to_browse_code(project, commit)
+    return unless current_controller?(:projects, :commits)
+
     if @path.blank?
       return link_to(
         "Browse Files",
         namespace_project_tree_path(project.namespace, project, commit),
         class: "btn btn-default"
       )
-    end
-
-    return unless current_controller?(:projects, :commits)
-
-    if @repo.blob_at(commit.id, @path)
+    elsif @repo.blob_at(commit.id, @path)
       return link_to(
         "Browse File",
         namespace_project_blob_path(project.namespace, project,

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

@@ -3,9 +3,9 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  %h3.page-title Blame view
-
   #blob-content-holder.tree-holder
+    = render "projects/blob/breadcrumb", blob: @blob, blame: true
+
     .file-holder
       = render "projects/blob/header", blob: @blob, blame: true
 

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

@@ -1,21 +1,8 @@
-.nav-block
-  .tree-ref-holder
-    = render 'shared/ref_switcher', destination: 'blob', path: @path
+= render "projects/blob/breadcrumb", blob: blob
 
-  %ul.breadcrumb.repo-breadcrumb
-    %li
-      = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
-        = @project.path
-    - path_breadcrumbs do |title, path|
-      - title = truncate(title, length: 40)
-      %li
-        - if path == @path
-          = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, path)) do
-            %strong= title
-        - else
-          = link_to title, namespace_project_tree_path(@project.namespace, @project, tree_join(@ref, path))
-
-%ul.blob-commit-info.hidden-xs
+.info-well.hidden-xs
+  .well-segment
+    %ul.blob-commit-info
       - blob_commit = @repository.last_commit_for_path(@commit.id, blob.path)
       = render blob_commit, project: @project, ref: @ref
 

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

@@ -0,0 +1,36 @@
+- blame = local_assigns.fetch(:blame, false)
+.nav-block
+  .tree-controls
+    = render 'projects/find_file_link'
+
+    .btn-group.prepend-left-10{ role: "group" }<
+      -# only show normal/blame view links for text files
+      - if blob.readable_text?
+        - if blame
+          = link_to 'Normal view', namespace_project_blob_path(@project.namespace, @project, @id),
+              class: 'btn'
+        - else
+          = link_to 'Blame', namespace_project_blame_path(@project.namespace, @project, @id),
+              class: 'btn js-blob-blame-link' unless blob.empty?
+
+      = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
+          class: 'btn'
+
+      = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,
+          tree_join(@commit.sha, @path)), class: 'btn js-data-file-blob-permalink-url'
+
+  .tree-ref-holder
+    = render 'shared/ref_switcher', destination: 'blob', path: @path
+
+  %ul.breadcrumb.repo-breadcrumb
+    %li
+      = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
+        = @project.path
+    - path_breadcrumbs do |title, path|
+      - title = truncate(title, length: 40)
+      %li
+        - if path == @path
+          = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, path)) do
+            %strong= title
+        - else
+          = link_to title, namespace_project_tree_path(@project.namespace, @project, tree_join(@ref, path))

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

@@ -11,23 +11,7 @@
       = view_on_environment_button(@commit.sha, @path, @environment) if @environment
 
     .btn-group{ role: "group" }<
-      -# only show normal/blame view links for text files
-      - if blob.readable_text?
-        - if blame
-          = link_to 'Normal view', namespace_project_blob_path(@project.namespace, @project, @id),
-              class: 'btn btn-sm'
-        - else
-          = link_to 'Blame', namespace_project_blame_path(@project.namespace, @project, @id),
-              class: 'btn btn-sm js-blob-blame-link' unless blob.empty?
-
-      = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
-          class: 'btn btn-sm'
-
-      = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,
-          tree_join(@commit.sha, @path)), class: 'btn btn-sm js-data-file-blob-permalink-url'
-
-    .btn-group{ role: "group" }<
-      = edit_blob_link if blob.readable_text?
+      = edit_blob_link
       - if current_user
         = replace_blob_link
         = delete_blob_link

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

@@ -1,4 +1,4 @@
-.diff-file
+.diff-file.file-holder
   .diff-content
     - if markup?(@blob.name)
       .file-content.wiki

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

@@ -6,16 +6,6 @@
           %th Name
           %th.hidden-xs
             .pull-left Last commit
-            .last-commit.hidden-sm.pull-left
-              %i.fa.fa-angle-right
-              %small.light
-                = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
-                = clipboard_button(text: @commit.id, title: "Copy commit SHA to clipboard")
-                = time_ago_with_tooltip(@commit.committed_date)
-                \-
-                = @commit.full_title
-            %small.commit-history-link-spacer |
-            = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'commit-history-link'
           %th.text-right Last Update
       - if @path.present?
         %tr.tree-item

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

@@ -1,5 +1,8 @@
 .tree-controls
   = render 'projects/find_file_link'
+
+  = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'btn btn-grouped'
+
   = render 'projects/buttons/download', project: @project, ref: @ref
 
 .tree-ref-holder

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

@@ -7,4 +7,13 @@
 = render 'projects/last_push'
 
 %div{ class: container_class }
-  = render 'projects/files'
+  #tree-holder.tree-holder.clearfix
+    .nav-block
+      = render 'projects/tree/tree_header', tree: @tree
+
+    .info-well.hidden-xs.append-bottom-default
+      .well-segment
+        %ul.blob-commit-info
+          = render 'projects/commits/commit', commit: @commit, project: @project, ref: @ref
+
+    = render 'projects/tree/tree_content', tree: @tree