Apply new design to files page

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

12 files changed, 87 insertions, 88 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 8f0bbb12d7b..8b3df158a04 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -47,6 +47,7 @@ v 8.1.0 (unreleased)
   - Persist filters when sorting on admin user page (Jerry Lukins)
   - Add spellcheck=false to certain input fields
   - Invalidate stored service password if the endpoint URL is changed
+  - Apply new design for Files page
 
 v 8.0.4
   - Fix Message-ID header to be RFC 2111-compliant to prevent e-mails being dropped (Stan Hu)
diff --git a/app/assets/javascripts/line_highlighter.js.coffee b/app/assets/javascripts/line_highlighter.js.coffee
index e604e6025c2..2254a3f91ae 100644
--- a/app/assets/javascripts/line_highlighter.js.coffee
+++ b/app/assets/javascripts/line_highlighter.js.coffee
@@ -6,7 +6,7 @@
 #
 # ### Example Markup
 #
-#   <div id="tree-content-holder">
+#   <div id="blob-content-holder">
 #     <div class="file-content">
 #       <div class="line-numbers">
 #         <a href="#L1" id="L1" data-line-number="1">1</a>
@@ -53,7 +53,7 @@ class @LineHighlighter
         $.scrollTo("#L#{range[0]}", offset: -150)
 
   bindEvents: ->
-    $('#tree-content-holder').on 'mousedown', 'a[data-line-number]', @clickHandler
+    $('#blob-content-holder').on 'mousedown', 'a[data-line-number]', @clickHandler
 
     # While it may seem odd to bind to the mousedown event and then throw away
     # the click event, there is a method to our madness.
@@ -62,7 +62,7 @@ class @LineHighlighter
     # active state even when the event is cancelled, resulting in an ugly border
     # around the link and/or a persisted underline text decoration.
 
-    $('#tree-content-holder').on 'click', 'a[data-line-number]', (event) ->
+    $('#blob-content-holder').on 'click', 'a[data-line-number]', (event) ->
       event.preventDefault()
 
   clickHandler: (event) =>
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 76163b3a05e..789b34020c1 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -28,7 +28,7 @@ table {
         border-bottom: 1px solid $border-color !important;
       }
       td {
-        border-color: #F1F1F1 !important;
+        border-color: $table-border-color !important;
         border-bottom: 1px solid;
       }
     }
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 18632da4f2a..63868a34e2a 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -156,3 +156,5 @@ $nav-link-padding: 13px $gl-padding;
 $pre-bg:           #f8fafc !default;
 $pre-color:        $gl-gray !default;
 $pre-border-color: #e7e9ed;
+
+$table-bg-accent: $background-color;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index eb9a2966389..91954683c3e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -16,6 +16,7 @@ $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
 $border-color: #dce0e6;
+$table-border-color: #eef0f2;
 $background-color: #F7F8FA;
 $header-height: 58px;
 $fixed-layout-width: 1200px;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 271cc547e2b..dadd86e88cc 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,7 +1,7 @@
 .tree-holder {
-  .tree-content-holder {
-    float: left;
-    width: 100%;
+  .tree-table-holder {
+    margin-left: -$gl-padding;
+    margin-right: -$gl-padding;
   }
 
   .tree_progress {
@@ -13,10 +13,15 @@
   }
 
   .tree-table {
-    @extend .table;
-    @include border-radius(0);
+    margin-bottom: 0;
 
     tr {
+      > td, > th {
+        padding: 10px $gl-padding;
+        line-height: 32px;
+        border-color: $table-border-color !important;
+      }
+
       &:hover {
         td {
           background: $hover;
@@ -27,9 +32,9 @@
       }
       &.selected {
         td {
-          background: $background-color;
-          border-top: 1px solid #EEE;
-          border-bottom: 1px solid #EEE;
+          background: $gray-dark;
+          border-top: 1px solid $border-gray-dark;
+          border-bottom: 1px solid $border-gray-dark;
         }
       }
     }
@@ -85,19 +90,6 @@
   margin-right: 15px;
 }
 
-.readme-holder {
-  margin: 0 auto;
-
-  .readme-file-title {
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 20px;
-    color: #777;
-    border-bottom: 1px solid #DDD;
-    padding: 10px 0;
-  }
-}
-
 .blob-commit-info {
   list-style: none;
   margin: 0;
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index b4c7d8b9b71..a1ae1397584 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -19,7 +19,7 @@
   - blob_commit = @repository.last_commit_for_path(@commit.id, blob.path)
   = render blob_commit, project: @project
 
-%div#tree-content-holder.tree-content-holder
+%div#blob-content-holder.blob-content-holder
   %article.file-holder
     .file-title
       = blob_icon blob.mode, blob.name
diff --git a/app/views/projects/repositories/_download_archive.html.haml b/app/views/projects/repositories/_download_archive.html.haml
index b9486a9b492..07c24950ee2 100644
--- a/app/views/projects/repositories/_download_archive.html.haml
+++ b/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 col-xs-10', rel: 'nofollow' do
+    = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: ref, format: 'zip'), class: 'btn btn-success col-xs-10', rel: 'nofollow' do
       %i.fa.fa-download
       %span Download zip
-    %a.col-xs-2.btn.dropdown-toggle{ 'data-toggle' => 'dropdown' }
+    %a.col-xs-2.btn.btn-success.dropdown-toggle{ 'data-toggle' => 'dropdown' }
       %span.caret
       %span.sr-only
         Select Archive Format
diff --git a/app/views/projects/tree/_readme.html.haml b/app/views/projects/tree/_readme.html.haml
index f082d711865..7e9af19c8ba 100644
--- a/app/views/projects/tree/_readme.html.haml
+++ b/app/views/projects/tree/_readme.html.haml
@@ -1,7 +1,8 @@
-%article.readme-holder#README
-  = link_to '#README' do
-    %h4.readme-file-title
-      %i.fa.fa-file
-      = readme.name
-  .wiki
+%article.file-holder.readme-holder#README
+  .file-title
+    = link_to '#README' do
+      %strong
+        %i.fa.fa-file
+        = readme.name
+  .file-content.wiki
     = render_readme(readme)
diff --git a/app/views/projects/tree/_tree.html.haml b/app/views/projects/tree/_tree.html.haml
index 457f8a4a585..7ff48e32e60 100644
--- a/app/views/projects/tree/_tree.html.haml
+++ b/app/views/projects/tree/_tree.html.haml
@@ -1,59 +1,61 @@
-%ul.breadcrumb.repo-breadcrumb
-  %li
-    = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
-      = @project.path
-  - tree_breadcrumbs(tree, 6) do |title, path|
+.gray-content-block
+  %ul.breadcrumb.repo-breadcrumb
     %li
-      - if path
-        = link_to truncate(title, length: 40), namespace_project_tree_path(@project.namespace, @project, path)
-      - else
-        = link_to title, '#'
-  - if allowed_tree_edit?
-    %li
-      %span.dropdown
-        %a.dropdown-toggle.btn.btn-xs.add-to-tree{href: '#', "data-toggle" => "dropdown"}
-          = icon('plus')
-        %ul.dropdown-menu
-          %li
-            = link_to namespace_project_new_blob_path(@project.namespace, @project, @id), title: 'Create file', id: 'new-file-link' do
-              = icon('pencil fw')
-              Create file
-          %li
-            = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'} do
-              = icon('file fw')
-              Upload file
-          %li.divider
-          %li
-            = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal'} do
-              = icon('folder fw')
-              New directory
+      = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
+        = @project.path
+    - tree_breadcrumbs(tree, 6) do |title, path|
+      %li
+        - if path
+          = link_to truncate(title, length: 40), namespace_project_tree_path(@project.namespace, @project, path)
+        - else
+          = link_to title, '#'
+    - if allowed_tree_edit?
+      %li
+        %span.dropdown
+          %a.dropdown-toggle.btn.add-to-tree{href: '#', "data-toggle" => "dropdown"}
+            = icon('plus')
+          %ul.dropdown-menu
+            %li
+              = link_to namespace_project_new_blob_path(@project.namespace, @project, @id), title: 'Create file', id: 'new-file-link' do
+                = icon('pencil fw')
+                Create file
+            %li
+              = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'} do
+                = icon('file fw')
+                Upload file
+            %li.divider
+            %li
+              = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal'} do
+                = icon('folder fw')
+                New directory
 
-%div#tree-content-holder.tree-content-holder.prepend-top-20
-  %table#tree-slider{class: "table_#{@hex_path} tree-table" }
-    %thead
-      %tr
-        %th Name
-        %th Last Update
-        %th.hidden-xs
-          .pull-left Last Commit
-          .last-commit.hidden-sm.pull-left
-            &nbsp;
-            %i.fa.fa-angle-right
-            &nbsp;
-            %small.light
-              = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit)
-              &ndash;
-              = truncate(@commit.title, length: 50)
-          = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'pull-right'
+%div#tree-content-holder.tree-content-holder
+  .tree-table-holder
+    %table.table#tree-slider{class: "table_#{@hex_path} tree-table table-striped" }
+      %thead
+        %tr
+          %th Name
+          %th Last Update
+          %th.hidden-xs
+            .pull-left Last Commit
+            .last-commit.hidden-sm.pull-left
+              &nbsp;
+              %i.fa.fa-angle-right
+              &nbsp;
+              %small.light
+                = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit)
+                &ndash;
+                = truncate(@commit.title, length: 50)
+            = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'pull-right'
 
-    - if @path.present?
-      %tr.tree-item
-        %td.tree-item-file-name
-          = link_to "..", namespace_project_tree_path(@project.namespace, @project, up_dir_path), class: 'prepend-left-10'
-        %td
-        %td.hidden-xs
+      - if @path.present?
+        %tr.tree-item
+          %td.tree-item-file-name
+            = link_to "..", namespace_project_tree_path(@project.namespace, @project, up_dir_path), class: 'prepend-left-10'
+          %td
+          %td.hidden-xs
 
-    = render_tree(tree)
+      = render_tree(tree)
 
   - if tree.readme
     = render "projects/tree/readme", readme: tree.readme
diff --git a/spec/javascripts/fixtures/line_highlighter.html.haml b/spec/javascripts/fixtures/line_highlighter.html.haml
index da1ebcdb23c..514877340e4 100644
--- a/spec/javascripts/fixtures/line_highlighter.html.haml
+++ b/spec/javascripts/fixtures/line_highlighter.html.haml
@@ -1,4 +1,4 @@
-#tree-content-holder
+#blob-content-holder
   .file-content
     .line-numbers
       - 1.upto(25) do |i|
diff --git a/spec/javascripts/line_highlighter_spec.js.coffee b/spec/javascripts/line_highlighter_spec.js.coffee
index 57453c716a5..a073f21e7bc 100644
--- a/spec/javascripts/line_highlighter_spec.js.coffee
+++ b/spec/javascripts/line_highlighter_spec.js.coffee
@@ -39,7 +39,7 @@ describe 'LineHighlighter', ->
       expect(spy).toHaveBeenPrevented()
 
     it 'handles garbage input from the hash', ->
-      func = -> new LineHighlighter('#tree-content-holder')
+      func = -> new LineHighlighter('#blob-content-holder')
       expect(func).not.toThrow()
 
   describe '#clickHandler', ->