From d36a3553e23b3798b8978864f73faf059d1d3ee0 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Jul 10 2018 07:38:27 +0000
Subject: Re-style the compare commits page


This restyles the compare commits page, removing the tabbed
interface, and general style updates.

Signed-off-by: Ryan Lerch <rlerch@redhat.com>

---

diff --git a/pagure/templates/repo_comparecommits.html b/pagure/templates/repo_comparecommits.html
index d8d835b..16764a3 100644
--- a/pagure/templates/repo_comparecommits.html
+++ b/pagure/templates/repo_comparecommits.html
@@ -17,123 +17,117 @@
 {% endblock %}
 
 {% block repo %}
-<h2>Diff
-    (<a href="{{ url_for('ui_ns.view_tree',
-          repo=repo.name,
-          username=username,
-          namespace=repo.namespace,
-          identifier=commitid) }}"
-    >tree</a>)</h2>
-    <h5 class="text-muted">{{ commit1 }} .. {{ commit2 }}</h5>
-
-
-
-<div class="row" id="pr-wrapper">
-  <div class="col-md-12">
-
-<ul class="nav nav-tabs nav-small" role="tablist" id="pr-tabs">
-  <li class="nav-item">
-    <a class="nav-link {% if not pull_request %}active{%
-        endif %}" data-toggle="tab" role="tab" href="#request_diff">
-      <span>Files Changed&nbsp;</span>
-      <span class="badge badge-secondary badge-pill">
-        {{ diff|length if diff else 0}}
-      </span>
-    </a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" role="tab" href="#commit_list">
-      <span>Commits&nbsp;</span>
-      <span class="badge badge-secondary badge-pill">
-        {{ diff_commits|length }}
-      </span>
-    </a>
-  </li>
-</ul>
-
-<div class="tab-content">
-
-  <div class="tab-pane" role="tabpanel" id="commit_list">
-    <div class="list-group">
-        {% for commit in diff_commits %}
-
-            {% if pull_request and pull_request.status and pull_request.project_from.is_fork %}
-              {% set commit_link = url_for(
-                'ui_ns.view_commit',
-                repo=pull_request.project_from.name,
-                username=pull_request.project_from.user.user,
-                namespace=repo.namespace,
-                commitid=commit.oid.hex)%}
-              {% set tree_link = url_for(
-                'ui_ns.view_tree', username=pull_request.project_from.user.user, namespace=repo.namespace,
-                repo=repo.name, identifier=commit.hex) %}
-            {% elif pull_request and pull_request.remote %}
-              {% set commit_link = None %}
-            {% else %}
-              {% set commit_link = url_for('ui_ns.view_commit',
-                        repo=repo.name,
-                        username=username,
-                        namespace=repo.namespace,
-                        commitid=commit.oid.hex) %}
-              {% set tree_link = url_for(
-                'ui_ns.view_tree', username=username, namespace=repo.namespace,
-                repo=repo.name, identifier=commit.hex) %}
-            {% endif %}
-            <div class="list-group-item">
-            <div class="row align-items-center">
-              <div class="col">
-                {% if commit_link %}
-                  <a class="notblue" href="{{commit_link}}">
-                {% endif %}
-                <strong>{{ commit.message.strip().split('\n')[0] }}</strong>
-                {% if commit_link %}
-                  </a>
-                {% endif %}
-                <div>
-                    {{commit.author|author2user_commits(
-                      link=url_for('ui_ns.view_commits',
-                          repo=repo.name,
-                          branchname=branchname,
-                          username=username,
-                          namespace=repo.namespace,
-                          author=commit.author.email),
-                      cssclass="notblue")|safe}}
-                      <span class="commitdate"
-                      title="{{ commit.commit_time|format_ts }}"> &bull;
-                    {{ commit.commit_time|humanize }}</span>&nbsp;&nbsp;
-                </div>
-              </div>
-              <div class="col-xs-auto pr-3 text-right">
-                  <div class="btn-group">
-                    <a href="{{ commit_link }}"
-                      class="btn btn-outline-primary font-weight-bold {{'disabled' if not commit_link}}">
-                      <code>{{ commit.hex|short }}</code>
-                    </a>
-                    <a class="btn btn-outline-primary font-weight-bold {{'disabled' if not commit_link}}" href="{{tree_link}}"><span class="fa fa-file-code-o fa-fw"></span></a>
-                  </div>
-                </div>
+<div class="row">
+  <div class="col">
+    {% block overviewtabs %}{{ super() }}{% endblock %}
+  </div>
+  <div class="col-10">
+    <h4 class="font-weight-bold mb-4">
+      <div class="d-flex align-items-center">
+        <div>
+          Commit Diff
+        </div>
+        <div class="ml-auto">
+          <div class="btn btn-outline-secondary border-0 disabled opacity-100 font-weight-bold">
+            {{diff.stats.files_changed}} file{{'s' if diff.stats.files_changed > 1 }} changed
           </div>
+        </div>
+        <div class="btn-group">
+          <span class="font-weight-bold btn btn-sm btn-success disabled opacity-100">+{{diff.stats.insertions}}</span>
+          <span class="font-weight-bold btn btn-sm btn-danger disabled opacity-100">-{{diff.stats.deletions}}</span>
+        </div>
+      </div>
+      <div>
+        <span class="badge-light border border-secondary badge">{{ commit1 }}</span>
+        ..
+        <span class="badge-light border border-secondary badge">{{ commit2 }}</span>
+      </div>
+    </h4>
+    <div class="list-group mb-5">
+    {% for commit in diff_commits %}
+      {% if pull_request and pull_request.status and pull_request.project_from.is_fork %}
+        {% set commit_link = url_for(
+          'ui_ns.view_commit',
+          repo=pull_request.project_from.name,
+          username=pull_request.project_from.user.user,
+          namespace=repo.namespace,
+          commitid=commit.oid.hex)%}
+        {% set tree_link = url_for(
+          'ui_ns.view_tree', username=pull_request.project_from.user.user, namespace=repo.namespace,
+          repo=repo.name, identifier=commit.hex) %}
+      {% elif pull_request and pull_request.remote %}
+        {% set commit_link = None %}
+      {% else %}
+        {% set commit_link = url_for('ui_ns.view_commit',
+                  repo=repo.name,
+                  username=username,
+                  namespace=repo.namespace,
+                  commitid=commit.oid.hex) %}
+        {% set tree_link = url_for(
+          'ui_ns.view_tree', username=username, namespace=repo.namespace,
+          repo=repo.name, identifier=commit.hex) %}
+      {% endif %}
+      {% if not loop.last and loop.index == 2 %}
+        <div class="list-group-item text-center bg-light" id="show_hidden_commits">
+          <a href="javascript:void(0)">{{diff_commits|length - 2}} more commits...</a>
+        </div>
+      {% endif %}
+      {% if loop.first or loop.last%}
+        <div class="list-group-item">
+      {% else %}
+        <div class="list-group-item hidden commitline">
+      {%endif%}
+      <div class="row align-items-center">
+        <div class="col">
+        {% if commit_link %}
+          <a class="notblue" href="{{commit_link}}">
+        {% endif %}
+          <strong>{{ commit.message.strip().split('\n')[0] }}</strong>
+        {% if commit_link %}
+          </a>
+        {% endif %}
+        <div>
+                {{commit.author|author2user_commits(
+                  link=url_for('ui_ns.view_commits',
+                      repo=repo.name,
+                      branchname=branchname,
+                      username=username,
+                      namespace=repo.namespace,
+                      author=commit.author.email),
+                  cssclass="notblue")|safe}}
+                  <span class="commitdate"
+                  title="{{ commit.commit_time|format_ts }}"> &bull;
+                {{ commit.commit_time|humanize }}</span>&nbsp;&nbsp;
+            </div>
           </div>
-        {% else %}
-        <p class="error"> No commits found </p>
-        {% endfor %}
+          <div class="col-xs-auto pr-3 text-right">
+              <div class="btn-group">
+                <a href="{{ commit_link }}"
+                  class="btn btn-outline-primary font-weight-bold {{'disabled' if not commit_link}}">
+                  <code>{{ commit.hex|short }}</code>
+                </a>
+                <a class="btn btn-outline-primary font-weight-bold {{'disabled' if not commit_link}}" href="{{tree_link}}"><span class="fa fa-file-code-o fa-fw"></span></a>
+              </div>
+            </div>
       </div>
+      </div>
+      {% endfor %}
+      </div>
+      <div class="row" id="pr-wrapper">
+        <div class="col-md-12">
+        <div>
+
+          {{repo_renderdiff(diff=diff,
+                            diff_commits=diff_commits,
+                            pull_request=None,
+                            repo=repo,
+                            username=username,
+                            namespace=namespace)}}
+
+        </div>
+      </div>
+    </div>
   </div>
-
-  <div class="tab-pane {%
-      if not pull_request %}active{%
-      endif %}" role="tabpanel" id="request_diff">
-
-    {{repo_renderdiff(diff=diff,
-                       diff_commits=diff_commits,
-                       pull_request=None,
-                       repo=repo,
-                       username=username,
-                       namespace=namespace)}}
-
-  </div>
-</div> <!-- tab content-->
-</div>
 </div>
 {% endblock %}
 
@@ -141,9 +135,12 @@
 {{ super() }}
 <script type="text/javascript">
 
-function showTab(){
-  $('#pr-tabs a[href="#request_diff"]').tab('show')
-}
+$(document).ready(function () {
+  $('#show_hidden_commits a').click(function(e){
+    $(".commitline.hidden").show();
+    $('#show_hidden_commits').hide();
+  });
+});
 
 </script>
 
diff --git a/pagure/ui/repo.py b/pagure/ui/repo.py
index bce65c5..19d22d9 100644
--- a/pagure/ui/repo.py
+++ b/pagure/ui/repo.py
@@ -460,7 +460,7 @@ def compare_commits(repo, commit1, commit2, username=None, namespace=None):
 
     return flask.render_template(
         'repo_comparecommits.html',
-        select='logs',
+        select='commits',
         origin='compare_commits',
         repo=repo,
         username=username,
diff --git a/tests/test_pagure_flask_ui_repo.py b/tests/test_pagure_flask_ui_repo.py
index 8ab08cd..69413f1 100644
--- a/tests/test_pagure_flask_ui_repo.py
+++ b/tests/test_pagure_flask_ui_repo.py
@@ -2049,14 +2049,11 @@ class PagureFlaskRepotests(tests.Modeltests):
                 % (c2.oid.hex, c1.oid.hex),
                 output_text)
             self.assertIn(
-                '<h5 class="text-muted">%s .. %s</h5>'
-                % (c2.oid.hex, c1.oid.hex),
+                '        <span class="badge-light border border-secondary badge">%s</span>\n        ..\n        <span class="badge-light border border-secondary badge">%s</span>\n' %
+                (c2.oid.hex, c1.oid.hex),
                 output_text)
-            self.assertIn(
-                '<span>Commits&nbsp;</span>\n      ' +
-                '<span ' +
-                'class="badge badge-secondary badge-pill">' +
-                '\n        2\n      </span>',
+            self.assertNotIn(
+                'id="show_hidden_commits"',
                 output_text)
             self.assertIn(
                 '<span style="color: #a40000; background-color: #ffdddd">- ' +
@@ -2069,14 +2066,11 @@ class PagureFlaskRepotests(tests.Modeltests):
                 '<title>Diff from %s to %s - test\n - Pagure</title>' %
                 (c1.oid.hex, c2.oid.hex),
                 output_text)
-            self.assertIn(
-                '<span>Commits&nbsp;</span>\n      ' +
-                '<span ' +
-                'class="badge badge-secondary badge-pill">' +
-                '\n        2\n      </span>',
+            self.assertNotIn(
+                'id="show_hidden_commits"',
                 output_text)
             self.assertIn(
-                '<h5 class="text-muted">%s .. %s</h5>' %
+                '        <span class="badge-light border border-secondary badge">%s</span>\n        ..\n        <span class="badge-light border border-secondary badge">%s</span>\n' %
                 (c1.oid.hex, c2.oid.hex),
                 output_text)
             self.assertIn(
@@ -2092,7 +2086,7 @@ class PagureFlaskRepotests(tests.Modeltests):
                 '<title>Diff from %s to %s - test\n - Pagure</title>' %
                 (c1.oid.hex, c3.oid.hex), output_text)
             self.assertIn(
-                '<h5 class="text-muted">%s .. %s</h5>' %
+                '        <span class="badge-light border border-secondary badge">%s</span>\n        ..\n        <span class="badge-light border border-secondary badge">%s</span>\n' %
                 (c1.oid.hex, c3.oid.hex),
                 output_text)
             self.assertIn(
@@ -2103,10 +2097,7 @@ class PagureFlaskRepotests(tests.Modeltests):
                 '<span style="color: #00A000; background-color: ' +
                 '#ddffdd">+ Row 0'), 2)
             self.assertIn(
-                '<span>Commits&nbsp;</span>\n      ' +
-                '<span ' +
-                'class="badge badge-secondary badge-pill">' +
-                '\n        3\n      </span>',
+                '<a href="javascript:void(0)">1 more commits...',
                 output_text)
             self.assertIn(
                 'title="View file as of 4829cf">Šource</a>',
@@ -2125,7 +2116,7 @@ class PagureFlaskRepotests(tests.Modeltests):
                 '<title>Diff from %s to %s - test\n - Pagure</title>' %
                 (c3.oid.hex, c1.oid.hex), output_text)
             self.assertIn(
-                '<h5 class="text-muted">%s .. %s</h5>' %
+                '        <span class="badge-light border border-secondary badge">%s</span>\n        ..\n        <span class="badge-light border border-secondary badge">%s</span>\n' %
                 (c3.oid.hex, c1.oid.hex),
                 output_text)
             self.assertIn(
@@ -2135,10 +2126,7 @@ class PagureFlaskRepotests(tests.Modeltests):
                 '<span style="color: #a40000; background-color: #ffdddd">- ' +
                 'Row 0</span>', output_text)
             self.assertIn(
-                '<span>Commits&nbsp;</span>\n      ' +
-                '<span ' +
-                'class="badge badge-secondary badge-pill">' +
-                '\n        3\n      </span>',
+                '<a href="javascript:void(0)">1 more commits...',
                 output_text)
             self.assertIn(
                 'title="View file as of 000000">Šource</a>',