improved compare page design ・ 3739add ・ Gitprep

+94 -51

templates/main/compare.html.ep

@@ -36,8 +36,6 @@
   my $end_commit = $git->parse_commit($rep, $rev2)
     or $api->croak('Unknown commit object');
   
-  use D;d [$start_commit->{id}, $end_commit->{id}];
-  
   # Diff tree
   my $difftrees = $git->difftree($rep,
     ,$end_commit->{id}, $start_commit->{id}, []);
@@ -163,6 +161,48 @@
     .commits .cid a {
       color:#4183C4;
     }
+    
+    /* Files changed */
+    .files_changed_panel {
+      display:none;
+    }
+  % end
+  
+  %= javascript begin
+    $(document).ready(function () {
+      $('.compare_tabs .ccommits').click(function () {
+        $('.commits_panel').css('display', 'block');
+        $('.files_changed_panel').css('display', 'none');
+        $('.compare_tabs .ccommits')
+          .css('border', '1px solid #E5E5E5')
+          .css('border-bottom', 'none')
+          .css('background-color', 'white')
+          .css('font-weight', 'bold');
+        $('.compare_tabs .cchanged')
+          .css('border', 'none')
+          .css('border-bottom', '1px solid #E5E5E5')
+          .css('background-color', 'transparent')
+          .css('font-weight', 'normal');
+        
+        return false;
+      });
+      $('.compare_tabs .cchanged').click(function () {
+        $('.commits_panel').css('display', 'none');
+        $('.files_changed_panel').css('display', 'block');
+        $('.compare_tabs .ccommits')
+          .css('border', 'none')
+          .css('border-bottom', '1px solid #E5E5E5')
+          .css('background-color', 'transparent')
+          .css('font-weight', 'normal');
+        $('.compare_tabs .cchanged')
+          .css('border', '1px solid #E5E5E5')
+          .css('border-bottom', 'none')
+          .css('background-color', 'white')
+          .css('font-weight', 'bold');
+        
+        return false;
+      });
+    });
   % end
 
   %= include '/include/header';
@@ -179,61 +219,64 @@
 
     <div class="compare_tabs">
       <ul class="ctop">
-        <li class="ccommits"><a href="<%= url_for %>">Commits</a></li>
-        <li class="cchanged"><a href="<%= url_for . "#files_bucket" %>">Files Changed</a></li>
+        <li class="ccommits"><a href="#">Commits</a></li>
+        <li class="cchanged"><a href="#files_bucket">Files Changed</a></li>
       </ul>
       <div class="cbottom"></div>
     </div>
-      
-    <div class="commits_number">
-      Showing <%= @$commits %> commits by <%= $authors_count %> author.
-    </div>
-
-    % for my $date (reverse sort keys %$commits_date) {
-      <div class="commits">
-        % my $commits = $commits_date->{$date};
-        
-        <div class="cdate"><%= $date %></div>
-        % for my $commit (sort {$a->{author_epoch} <=> $b->{author_epoch}} @$commits) {
-          <table class="cbody">
-            <tr class="crecord">
-              <td class="cauthor">
-                <%= $commit->{author_name} %>
-              </td>
-              <td class="ccomment">
-                <a class="ubar" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
-                  <%= $commit->{title_short} %>
-                </a>
-              </td>
-              <td class="cid">
-                <a class="ubar" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
-                  <%= substr($commit->{id}, 0, 7) %>
-                </a>
-              </td>
-            </tr>
-          </table>
-        % }
+    
+    <div class="commits_panel">
+      <div class="commits_number">
+        Showing <%= @$commits %> commits by <%= $authors_count %> author.
       </div>
-    % }
 
-    <div style="margin-top:10px;margin-bottom:10px;">
-      <%= include '/include/difftree', id => $end_commit->{id}, from_id => $start_commit->{id},
-        difftrees => $difftrees, parents => [], project_ns => $project %>
+      % for my $date (reverse sort keys %$commits_date) {
+        <div class="commits">
+          % my $commits = $commits_date->{$date};
+          
+          <div class="cdate"><%= $date %></div>
+          % for my $commit (sort {$a->{author_epoch} <=> $b->{author_epoch}} @$commits) {
+            <table class="cbody">
+              <tr class="crecord">
+                <td class="cauthor">
+                  <%= $commit->{author_name} %>
+                </td>
+                <td class="ccomment">
+                  <a class="ubar" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
+                    <%= $commit->{title_short} %>
+                  </a>
+                </td>
+                <td class="cid">
+                  <a class="ubar" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
+                    <%= substr($commit->{id}, 0, 7) %>
+                  </a>
+                </td>
+              </tr>
+            </table>
+          % }
+        </div>
+      % }
     </div>
-    
-    <div>
-      <div class="patchset">
-        % for (my $i = 0; $i < @$blobdiffs; $i++) {
-          % my $blobdiff = $blobdiffs->[$i];
-          <div class="patch" id="<%= $i + 1 %>">
-            % my $lines = $blobdiff->{lines};
-            % my $file = $blobdiff->{file};
-            % my $from_file = $blobdiff->{from_file};
-            % $from_file = $file unless defined $from_file;
-            % my $status = $blobdiff->{status};
-            %= include '/include/blobdiff_body', file => $file, from_file => $from_file, status => $status, lines => $blobdiff->{lines}, project_ns => $project, from_id => $start_commit->{id}, id => $end_commit->{id};
-          </div>
-        % }
+
+    <div class="files_changed_panel">
+      <div style="margin-top:10px;margin-bottom:10px;">
+        <%= include '/include/difftree', id => $end_commit->{id}, from_id => $start_commit->{id},
+          difftrees => $difftrees, parents => [], project_ns => $project %>
+      </div>
+      <div>
+        <div class="patchset">
+          % for (my $i = 0; $i < @$blobdiffs; $i++) {
+            % my $blobdiff = $blobdiffs->[$i];
+            <div class="patch" id="<%= $i + 1 %>">
+              % my $lines = $blobdiff->{lines};
+              % my $file = $blobdiff->{file};
+              % my $from_file = $blobdiff->{from_file};
+              % $from_file = $file unless defined $from_file;
+              % my $status = $blobdiff->{status};
+              %= include '/include/blobdiff_body', file => $file, from_file => $from_file, status => $status, lines => $blobdiff->{lines}, project_ns => $project, from_id => $start_commit->{id}, id => $end_commit->{id};
+            </div>
+          % }
+        </div>
       </div>
     </div>
   </div>

...	...	@@ -36,8 +36,6 @@
36	36	my $end_commit = $git->parse_commit($rep, $rev2)
37	37	or $api->croak('Unknown commit object');
38	38
39		- use D;d [$start_commit->{id}, $end_commit->{id}];
40		-
41	39	# Diff tree
42	40	my $difftrees = $git->difftree($rep,
43	41	,$end_commit->{id}, $start_commit->{id}, []);
...	...	@@ -163,6 +161,48 @@
163	161	.commits .cid a {
164	162	color:#4183C4;
165	163	}
	164	+
	165	+ /* Files changed */
	166	+ .files_changed_panel {
	167	+ display:none;
	168	+ }
	169	+ % end
	170	+
	171	+ %= javascript begin
	172	+ $(document).ready(function () {
	173	+ $('.compare_tabs .ccommits').click(function () {
	174	+ $('.commits_panel').css('display', 'block');
	175	+ $('.files_changed_panel').css('display', 'none');
	176	+ $('.compare_tabs .ccommits')
	177	+ .css('border', '1px solid #E5E5E5')
	178	+ .css('border-bottom', 'none')
	179	+ .css('background-color', 'white')
	180	+ .css('font-weight', 'bold');
	181	+ $('.compare_tabs .cchanged')
	182	+ .css('border', 'none')
	183	+ .css('border-bottom', '1px solid #E5E5E5')
	184	+ .css('background-color', 'transparent')
	185	+ .css('font-weight', 'normal');
	186	+
	187	+ return false;
	188	+ });
	189	+ $('.compare_tabs .cchanged').click(function () {
	190	+ $('.commits_panel').css('display', 'none');
	191	+ $('.files_changed_panel').css('display', 'block');
	192	+ $('.compare_tabs .ccommits')
	193	+ .css('border', 'none')
	194	+ .css('border-bottom', '1px solid #E5E5E5')
	195	+ .css('background-color', 'transparent')
	196	+ .css('font-weight', 'normal');
	197	+ $('.compare_tabs .cchanged')
	198	+ .css('border', '1px solid #E5E5E5')
	199	+ .css('border-bottom', 'none')
	200	+ .css('background-color', 'white')
	201	+ .css('font-weight', 'bold');
	202	+
	203	+ return false;
	204	+ });
	205	+ });
166	206	% end
167	207
168	208	%= include '/include/header';
...	...	@@ -179,61 +219,64 @@
179	219
180	220	<div class="compare_tabs">
181	221	<ul class="ctop">
182		- <li class="ccommits"><a href="<%= url_for %>">Commits</a></li>
183		- <li class="cchanged"><a href="<%= url_for . "#files_bucket" %>">Files Changed</a></li>
	222	+ <li class="ccommits"><a href="#">Commits</a></li>
	223	+ <li class="cchanged"><a href="#files_bucket">Files Changed</a></li>
184	224	</ul>
185	225	<div class="cbottom"></div>
186	226	</div>
187		-
188		- <div class="commits_number">
189		- Showing <%= @$commits %> commits by <%= $authors_count %> author.
190		- </div>
191		-
192		- % for my $date (reverse sort keys %$commits_date) {
193		- <div class="commits">
194		- % my $commits = $commits_date->{$date};
195		-
196		- <div class="cdate"><%= $date %></div>
197		- % for my $commit (sort {$a->{author_epoch} <=> $b->{author_epoch}} @$commits) {
198		- <table class="cbody">
199		- <tr class="crecord">
200		- <td class="cauthor">
201		- <%= $commit->{author_name} %>
202		- </td>
203		- <td class="ccomment">
204		- <a class="ubar" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
205		- <%= $commit->{title_short} %>
206		- </a>
207		- </td>
208		- <td class="cid">
209		- <a class="ubar" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
210		- <%= substr($commit->{id}, 0, 7) %>
211		- </a>
212		- </td>
213		- </tr>
214		- </table>
215		- % }
	227	+
	228	+ <div class="commits_panel">
	229	+ <div class="commits_number">
	230	+ Showing <%= @$commits %> commits by <%= $authors_count %> author.
216	231	</div>
217		- % }
218	232
219		- <div style="margin-top:10px;margin-bottom:10px;">
220		- <%= include '/include/difftree', id => $end_commit->{id}, from_id => $start_commit->{id},
221		- difftrees => $difftrees, parents => [], project_ns => $project %>
	233	+ % for my $date (reverse sort keys %$commits_date) {
	234	+ <div class="commits">
	235	+ % my $commits = $commits_date->{$date};
	236	+
	237	+ <div class="cdate"><%= $date %></div>
	238	+ % for my $commit (sort {$a->{author_epoch} <=> $b->{author_epoch}} @$commits) {
	239	+ <table class="cbody">
	240	+ <tr class="crecord">
	241	+ <td class="cauthor">
	242	+ <%= $commit->{author_name} %>
	243	+ </td>
	244	+ <td class="ccomment">
	245	+ <a class="ubar" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
	246	+ <%= $commit->{title_short} %>
	247	+ </a>
	248	+ </td>
	249	+ <td class="cid">
	250	+ <a class="ubar" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>">
	251	+ <%= substr($commit->{id}, 0, 7) %>
	252	+ </a>
	253	+ </td>
	254	+ </tr>
	255	+ </table>
	256	+ % }
	257	+ </div>
	258	+ % }
222	259	</div>
223		-
224		- <div>
225		- <div class="patchset">
226		- % for (my $i = 0; $i < @$blobdiffs; $i++) {
227		- % my $blobdiff = $blobdiffs->[$i];
228		- <div class="patch" id="<%= $i + 1 %>">
229		- % my $lines = $blobdiff->{lines};
230		- % my $file = $blobdiff->{file};
231		- % my $from_file = $blobdiff->{from_file};
232		- % $from_file = $file unless defined $from_file;
233		- % my $status = $blobdiff->{status};
234		- %= include '/include/blobdiff_body', file => $file, from_file => $from_file, status => $status, lines => $blobdiff->{lines}, project_ns => $project, from_id => $start_commit->{id}, id => $end_commit->{id};
235		- </div>
236		- % }
	260	+
	261	+ <div class="files_changed_panel">
	262	+ <div style="margin-top:10px;margin-bottom:10px;">
	263	+ <%= include '/include/difftree', id => $end_commit->{id}, from_id => $start_commit->{id},
	264	+ difftrees => $difftrees, parents => [], project_ns => $project %>
	265	+ </div>
	266	+ <div>
	267	+ <div class="patchset">
	268	+ % for (my $i = 0; $i < @$blobdiffs; $i++) {
	269	+ % my $blobdiff = $blobdiffs->[$i];
	270	+ <div class="patch" id="<%= $i + 1 %>">
	271	+ % my $lines = $blobdiff->{lines};
	272	+ % my $file = $blobdiff->{file};
	273	+ % my $from_file = $blobdiff->{from_file};
	274	+ % $from_file = $file unless defined $from_file;
	275	+ % my $status = $blobdiff->{status};
	276	+ %= include '/include/blobdiff_body', file => $file, from_file => $from_file, status => $status, lines => $blobdiff->{lines}, project_ns => $project, from_id => $start_commit->{id}, id => $end_commit->{id};
	277	+ </div>
	278	+ % }
	279	+ </div>
237	280	</div>
238	281	</div>
239	282	</div>