Cleanup diff stats UI

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

2 files changed, 28 insertions, 16 deletions

diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss
index 9b148390115..684e8377a7b 100644
--- a/app/assets/stylesheets/sections/commits.scss
+++ b/app/assets/stylesheets/sections/commits.scss
@@ -112,7 +112,9 @@
 
 .commit-stat-summary {
   color: #666;
-  line-height: 2;
+  font-size: 14px;
+  font-weight: normal;
+  padding: 10px 0;
 }
 
 .commit-info-row {
diff --git a/app/views/projects/commits/_diffs.html.haml b/app/views/projects/commits/_diffs.html.haml
index fcdb40468d9..e062e9b8d54 100644
--- a/app/views/projects/commits/_diffs.html.haml
+++ b/app/views/projects/commits/_diffs.html.haml
@@ -23,21 +23,31 @@
         If you still want to see the diff
         = link_to "click this link", url_for(force_show_diff: true), class: "underlined-link"
 
-%p.commit-stat-summary
-  Showing
-  %strong.cdark #{pluralize(diffs.count, "changed file")}
-  - if current_controller?(:commit)
-    - unless @commit.has_zero_stats?
-      with
-      %strong.cgreen #{@commit.stats.additions} additions
-      and
-      %strong.cred #{@commit.stats.deletions} deletions
-  - if params[:view] == 'parallel'
-    = link_to "Inline Diff", url_for(view: 'inline'), {id: "commit-diff-viewtype", class: 'btn btn-tiny pull-right'}
-  - else
-    = link_to "Side-by-side Diff", url_for(view: 'parallel'), {id: "commit-diff-viewtype", class: 'btn btn-tiny pull-right'}
-.file-stats
-  = render "projects/commits/diff_head", diffs: diffs
+
+.row
+  .col-md-8
+    .js-toggle-container
+      .commit-stat-summary
+        Showing
+        %strong.cdark #{pluralize(diffs.count, "changed file")}
+        - if current_controller?(:commit)
+          - unless @commit.has_zero_stats?
+            with
+            %strong.cgreen #{@commit.stats.additions} additions
+            and
+            %strong.cred #{@commit.stats.deletions} deletions
+         
+        = link_to '#', class: 'btn btn-small js-toggle-button' do
+          Show diff stats
+          %i.icon-chevron-down
+      .file-stats.js-toggle-content.hide
+        = render "projects/commits/diff_head", diffs: diffs
+  .col-md-4
+    %ul.nav.nav-tabs
+      %li.pull-right{class: params[:view] == 'parallel' ? 'active' : ''}
+        = link_to "Side-by-side Diff", url_for(view: 'parallel'), {id: "commit-diff-viewtype"}
+      %li.pull-right{class: params[:view] != 'parallel' ? 'active' : ''}
+        = link_to "Inline Diff", url_for(view: 'inline'), {id: "commit-diff-viewtype"}
 
 .files
   - unless @suppress_diff