c5debb475273 webui

Add file folding.
[view raw] [browse files]
author Steve Losh <steve@stevelosh.com>
date Thu, 22 Oct 2009 19:54:20 -0400
parents a3ad66636756
children f3002e91ff73
branches/tags webui
files review/web_media/style.css review/web_media/ui.js review/web_templates/base.html review/web_templates/review.html

Changes

--- a/review/web_media/style.css	Thu Oct 22 19:22:34 2009 -0400
+++ b/review/web_media/style.css	Thu Oct 22 19:54:20 2009 -0400
@@ -64,6 +64,11 @@
 div.filename-header h3 {
     margin: 0em;
 }
+div.filename-header a.fold-file, div.filename-header a.unfold-file {
+    float: right;
+    font-weight: bold;
+    font-size: 1.5em;
+}
 
 /* Comments. */
 .comment {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/review/web_media/ui.js	Thu Oct 22 19:54:20 2009 -0400
@@ -0,0 +1,14 @@
+$(function() {
+    
+    $("a.fold-file").toggle(function(event) {
+        $(event.target).closest("div.file-review").find("div.file-review-contents").slideUp("fast");
+        $(event.target).html("&nbsp;&nbsp;&nbsp;&larr;").addClass("unfold-file").removeClass("fold-file");
+        return false;
+    },
+    function(event) {
+        $(event.target).closest("div.file-review").find("div.file-review-contents").slideDown("fast");
+        $(event.target).html("&nbsp;&nbsp;&nbsp;&darr;").addClass("fold-file").removeClass("unfold-file");
+        return false;
+    });
+
+});
\ No newline at end of file
--- a/review/web_templates/base.html	Thu Oct 22 19:22:34 2009 -0400
+++ b/review/web_templates/base.html	Thu Oct 22 19:54:20 2009 -0400
@@ -9,6 +9,7 @@
         <link rel="stylesheet" href="/media/style.css" type="text/css" media="screen" />
         
         <script type="text/javascript" src="/media/jquery-1.3.2.min.js"></script>
+        <script type="text/javascript" src="/media/ui.js"></script>
         <script type="text/javascript" src="/media/comments.js"></script>
     </head>
     
--- a/review/web_templates/review.html	Thu Oct 22 19:22:34 2009 -0400
+++ b/review/web_templates/review.html	Thu Oct 22 19:54:20 2009 -0400
@@ -27,90 +27,98 @@
 </div>
     
 $for filename, diff in rcset.diffs().iteritems():
-    <div class="filename-header">
-        <h3>${ filename }</h3>
-    </div>
-    
-    $ file_level_comments = filter(lambda c: c.filename == filename and not c.lines, rcset.comments)
-    $for comment in file_level_comments:
-        <div class="comment">
-            <div class="avatar"><img height="52" width="52" src="http://www.gravatar.com/avatar/${ md5(email(comment.author)).hexdigest() }?s=52"/></div>
-            <div>
-                <div class="author"><a href="mailto:${ email(comment.author) }">${ templatefilters.person(comment.author) }</a> said:</div>
-                <div class="message">${ comment.message }</div>
+    <div class="file-review">
+        <div class="filename-header">
+            <a class="fold-file" href="">&nbsp;&nbsp;&nbsp;&darr;</a>
+            <h3>${ filename }</h3>
+        </div>
+        
+        <div class="file-review-contents">
+            $ file_level_comments = filter(lambda c: c.filename == filename and not c.lines, rcset.comments)
+            $for comment in file_level_comments:
+                <div class="comment">
+                    <div class="avatar">
+                        <img height="52" width="52" src="http://www.gravatar.com/avatar/${ md5(email(comment.author)).hexdigest() }?s=52"/>
+                    </div>
+                    <div>
+                        <div class="author"><a href="mailto:${ email(comment.author) }">${ templatefilters.person(comment.author) }</a> said:</div>
+                        <div class="message">${ comment.message }</div>
+                    </div>
+                </div>
+                
+            
+            <div id="comment-file">
+                <p class="comment-activate"><a href="">Add a comment on this file</a></p>
+                <form id="comment-file-form" method="post" action="">
+                    <div class="field">
+                        <label for="body">Add a comment on this file:</label>
+                        <textarea cols="60" rows="6" name="body"></textarea>
+                    </div>
+                    <div class="buttons">
+                        <input type="submit" class="button" value="Submit" />
+                    </div>
+                    <input type="hidden" name="filename" value="${ filename }" />
+                </form>
+            </div>
+            
+            <div class="diff">
+                <table>
+                    $ max_line = diff['max']
+                    $ content = diff['content']
+                    $ line_level_comments = filter(lambda c: c.filename == filename and c.lines, rcset.comments)
+                    $ previous_n = -1
+                    $for n, line in content:
+                        $if n - 1 > previous_n:
+                            $ skipped_count = n - previous_n
+                            $if previous_n == -1:
+                                $ skipped_count -= 1
+                            <tr class="skipped">
+                                <td><code>&hellip; skipped ${ skipped_count } lines &hellip;</code></td>
+                            </tr>
+                        $ skipped_comments = filter(lambda c: max(c.lines) in range(previous_n + 1, n), line_level_comments)
+                        $for comment in skipped_comments:
+                            <tr><td class="comment">
+                                <div class="avatar"><img height="52" width="52" src="http://www.gravatar.com/avatar/${ md5(email(comment.author)).hexdigest() }?s=52"/></div>
+                                <div>
+                                    <div class="author"><a href="mailto:${ email(comment.author) }">${ templatefilters.person(comment.author) }</a> said (on a skipped line):</div>
+                                    <div class="message">${ comment.message }</div>
+                                </div>
+                            </td></tr>
+                        $ kind = 'rem' if line[0] == '-' else 'add' if line[0] == '+' else 'con'
+                        <tr class="${ kind }">
+                            <td class="diff-line"><code>${ line[1:] or ' ' }</code></td>
+                        </tr>
+                        $ line_comments = filter(lambda c: max(c.lines) == n, line_level_comments)
+                        $for comment in line_comments:
+                            <tr><td class="comment">
+                                <div class="avatar"><img height="52" width="52" src="http://www.gravatar.com/avatar/${ md5(email(comment.author)).hexdigest() }?s=52"/></div>
+                                <div>
+                                    <div class="author"><a href="mailto:${ email(comment.author) }">${ templatefilters.person(comment.author) }</a> said:</div>
+                                    <div class="message">${ comment.message }</div>
+                                </div>
+                            </td></tr>
+                        <tr class="comment-line">
+                            <td>
+                                <form id="comment-line-form" method="post" action="">
+                                    <div class="field">
+                                        <label for="body">Add a comment on this line:</label>
+                                        <textarea cols="60" rows="6" name="body"></textarea>
+                                    </div>
+                                    <div class="buttons">
+                                        <input type="submit" class="button" value="Submit" />
+                                    </div>
+                                    <input type="hidden" name="filename" value="${ filename }" />
+                                    <input type="hidden" name="lines" value="${ n }" />
+                                </form>
+                            </td>
+                        </tr>
+                        $ previous_n = n
+                    $if previous_n < max_line:
+                        $ skipped_count = max_line - previous_n
+                        <tr class="skipped">
+                            <td><code>&hellip; skipped ${ skipped_count } lines &hellip;</code></td>
+                        </tr>
+                </table>
             </div>
         </div>
-    
-    <div id="comment-file">
-        <p class="comment-activate"><a href="">Add a comment on this file</a></p>
-        <form id="comment-file-form" method="post" action="">
-            <div class="field">
-                <label for="body">Add a comment on this file:</label>
-                <textarea cols="60" rows="6" name="body"></textarea>
-            </div>
-             <div class="buttons">
-                <input type="submit" class="button" value="Submit" />
-             </div>
-             <input type="hidden" name="filename" value="${ filename }" />
-        </form>
-    </div>
-    
-    <div class="diff">
-        <table>
-            $ max_line = diff['max']
-            $ content = diff['content']
-            $ line_level_comments = filter(lambda c: c.filename == filename and c.lines, rcset.comments)
-            $ previous_n = -1
-            $for n, line in content:
-                $if n - 1 > previous_n:
-                    $ skipped_count = n - previous_n
-                    $if previous_n == -1:
-                        $ skipped_count -= 1
-                    <tr class="skipped">
-                        <td><code>&hellip; skipped ${ skipped_count } lines &hellip;</code></td>
-                    </tr>
-                $ skipped_comments = filter(lambda c: max(c.lines) in range(previous_n + 1, n), line_level_comments)
-                $for comment in skipped_comments:
-                    <tr><td class="comment">
-                        <div class="avatar"><img height="52" width="52" src="http://www.gravatar.com/avatar/${ md5(email(comment.author)).hexdigest() }?s=52"/></div>
-                        <div>
-                            <div class="author"><a href="mailto:${ email(comment.author) }">${ templatefilters.person(comment.author) }</a> said (on a skipped line):</div>
-                            <div class="message">${ comment.message }</div>
-                        </div>
-                    </td></tr>
-                $ kind = 'rem' if line[0] == '-' else 'add' if line[0] == '+' else 'con'
-                <tr class="${ kind }">
-                    <td class="diff-line"><code>${ line[1:] or ' ' }</code></td>
-                </tr>
-                $ line_comments = filter(lambda c: max(c.lines) == n, line_level_comments)
-                $for comment in line_comments:
-                    <tr><td class="comment">
-                        <div class="avatar"><img height="52" width="52" src="http://www.gravatar.com/avatar/${ md5(email(comment.author)).hexdigest() }?s=52"/></div>
-                        <div>
-                            <div class="author"><a href="mailto:${ email(comment.author) }">${ templatefilters.person(comment.author) }</a> said:</div>
-                            <div class="message">${ comment.message }</div>
-                        </div>
-                    </td></tr>
-                <tr class="comment-line">
-                    <td>
-                        <form id="comment-line-form" method="post" action="">
-                            <div class="field">
-                                <label for="body">Add a comment on this line:</label>
-                                <textarea cols="60" rows="6" name="body"></textarea>
-                            </div>
-                            <div class="buttons">
-                                <input type="submit" class="button" value="Submit" />
-                            </div>
-                            <input type="hidden" name="filename" value="${ filename }" />
-                            <input type="hidden" name="lines" value="${ n }" />
-                        </form>
-                    </td>
-                </tr>
-                $ previous_n = n
-            $if previous_n < max_line:
-                $ skipped_count = max_line - previous_n
-                <tr class="skipped">
-                    <td><code>&hellip; skipped ${ skipped_count } lines &hellip;</code></td>
-                </tr>
-        </table>
     </div>
\ No newline at end of file