805b5a153985

web: get diffs looking nice (and add kick)
[view raw] [browse files]
author Steve Losh <steve@stevelosh.com>
date Sun, 13 Jun 2010 01:53:09 -0400
parents 191d8a0d6190
children 7521b06e6b18
branches/tags (none)
files kick review/static/style.css review/static/style.less review/static/ui.js review/templates/changeset.html review/templates/diff.html

Changes

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/kick	Sun Jun 13 01:53:09 2010 -0400
@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+kicker -qs -l 0.1 -e reload_safari \
+review/**.py \
+review/**/*.html \
+review/**/*.less
--- a/review/static/style.css	Sun Jun 13 00:23:16 2010 -0400
+++ b/review/static/style.css	Sun Jun 13 01:53:09 2010 -0400
@@ -445,3 +445,53 @@
 #changeset .content .file .add-file-comment {
   margin-bottom: 24px;
 }
+#changeset .content .diff table {
+  width: 100%;
+  border: 1px solid #ddd;
+  background-color: #f9f9f9;
+}
+#changeset .content .diff table td.code:after {
+  color: #ccc;
+  content: "↩";
+  vertical-align: -1px;
+  line-height: 1;
+}
+#changeset .content .diff table td {
+  border: none;
+  line-height: 1;
+  padding: 3px 5px;
+}
+#changeset .content .diff table td.linenumber {
+  width: 25px;
+  text-align: right;
+  font-family: Monaco, Consolas, "Courier New", monospace;
+  color: #888888;
+}
+#changeset .content .diff table td.skip {
+  text-align: right;
+  color: #888888;
+}
+#changeset .content .diff table td.code {
+  white-space: pre;
+}
+#changeset .content .diff table td.comment {
+  line-height: 15px;
+  padding: 10px 10px 10px 36px;
+  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  background-color: #f4f4f4;
+}
+#changeset .content .diff table td.comment .avatar {
+  float: right;
+}
+#changeset .content .diff table td.comment .avatar img {
+  height: 30px;
+  width: 30px;
+}
+#changeset .content .diff table td.comment .message {
+  white-space: pre;
+  font-family: Monaco, Consolas, "Courier New", monospace;
+}
+#changeset .content .diff table td.comment .author {
+  padding-bottom: 3px;
+}
--- a/review/static/style.less	Sun Jun 13 00:23:16 2010 -0400
+++ b/review/static/style.less	Sun Jun 13 01:53:09 2010 -0400
@@ -396,4 +396,60 @@
             margin-bottom: 24px;
         }
     }
+    .diff {
+        table{
+            width: 100%;
+            border: 1px solid #ddd;
+            background-color: #f9f9f9;
+
+            td.code:after {
+                color: #ccc;
+                content: "↩";
+                vertical-align: -1px;
+                line-height: 1;
+            }
+            td {
+                border: none;
+                line-height: 1;
+                padding: 3px 5px;
+
+                &.linenumber {
+                    width: 25px;
+                    text-align: right;
+                    font-family: @font-mono;
+                    color: @c-light;
+                }
+                &.skip {
+                    text-align: right;
+                    color: @c-light;
+                }
+                &.code {
+                    white-space: pre;
+                }
+                &.comment {
+                    line-height: 15px;
+                    padding: 10px 10px 10px 36px;
+                    border-bottom: 1px solid #eee;
+                    border-top: 1px solid #eee;
+                    background-color: #f4f4f4;
+
+                    .avatar {
+                        float: right;
+
+                        img {
+                            height: 30px;
+                            width: 30px;
+                        }
+                    }
+                    .message {
+                        white-space: pre;
+                        font-family: @font-mono;
+                    }
+                    .author {
+                        padding-bottom: 3px;
+                    }
+                }
+            }
+        }
+    }
 }
--- a/review/static/ui.js	Sun Jun 13 00:23:16 2010 -0400
+++ b/review/static/ui.js	Sun Jun 13 01:53:09 2010 -0400
@@ -1,5 +1,4 @@
 $(function() {
-    
     $("a.fold").toggle(function(event) {
         $(event.target).closest(".file").find(".file-review-contents").slideDown("fast", function() {
             $(event.target).closest("h3").find(".status").html("&darr;");
@@ -14,5 +13,4 @@
         });
         return false;
     });
-
 });
--- a/review/templates/changeset.html	Sun Jun 13 00:23:16 2010 -0400
+++ b/review/templates/changeset.html	Sun Jun 13 01:53:09 2010 -0400
@@ -108,7 +108,7 @@
                 <h3><a class="fold" href="#">{{ filename }}</a> <span class="status">&rarr;</span> </h3>
             </div>
 
-            <div class="file-review-contents disabled">
+            <div class="file-review-contents">
                 {% with %}
                     {% set comments = rcset.file_level_comments(filename) %}
 
@@ -148,57 +148,7 @@
                     </div>
                 {% endif %}
 
-                <div class="diff">
-                    <table>
-                        <tbody>
-                            {% set annotated_diff = rcset.annotated_diff(filename) %}
-                            {# We need to ignore the first item from this generator, because
-                               we don't care about providing a line-number prefix (for now!). #}
-                            {% set ignore_this_variable = annotated_diff.next() %}
-
-                            {% for line in annotated_diff %}
-                                {% if line['skipped'] %}
-                                    <tr class="skipped">
-                                        <td><code>&hellip; skipped {{ line['skipped'] }} lines &hellip;</code></td>
-                                    </tr>
-                                    {% for comment in line['comments'] %}
-                                        <tr><td class="comment">
-                                            {{ macros.gravatar(comment, utils) }}
-                                            <div>
-                                                <div class="author">
-                                                    <a href="mailto:{{ utils['email'](comment.author) }}">
-                                                        {{ utils['templatefilters'].person(comment.author) }}
-                                                    </a>
-                                                    said (on a skipped line):
-                                                </div>
-                                                <div class="message">{{ comment.message|escape }}</div>
-                                            </div>
-                                        </td></tr>
-                                    {% endfor %}
-                                {% else %}
-                                    <tr class="{{ utils['line_type'](line['content']) }}{% if not read_only %} commentable {% endif %}">
-                                        <td class="diff-line"><div class="line-data"><span class="linenumber">{{ line['number'] }}</span><span class="filename">{{ filename }}</span></div><code>{{ line['number'] }}: {{ line['content'][1:]|escape }}</code></td>
-                                    </tr>
-
-                                    {% for comment in line['comments'] %}
-                                        <tr><td class="comment">
-                                            {{ macros.gravatar(comment, utils) }}
-                                            <div>
-                                                <div class="author">
-                                                    <a href="mailto:{{ utils['email'](comment.author) }}">
-                                                        {{ utils['templatefilters'].person(comment.author) }}
-                                                    </a>
-                                                    said:
-                                                </div>
-                                                <div class="message">{{ comment.message }}</div>
-                                            </div>
-                                        </td></tr>
-                                    {% endfor %}
-                                {% endif %}
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
+                {% include "diff.html" %}
             </div>
         </div>
     {% endfor %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/review/templates/diff.html	Sun Jun 13 01:53:09 2010 -0400
@@ -0,0 +1,63 @@
+<div class="diff">
+
+<table>
+    <tbody>
+        {% set annotated_diff = rcset.annotated_diff(filename) %}
+        {# We need to ignore the first item from this generator, because
+           we don't care about providing a line-number prefix (for now!). #}
+        {% set ignore_this_variable = annotated_diff.next() %}
+
+        {% for line in annotated_diff %}
+            {% if line['skipped'] %}
+                <tr class="skipped">
+                    <td colspan="2" class="skip">
+                        &hellip; skipped {{ line['skipped'] }} lines &hellip;
+                    </td>
+                </tr>
+
+                {% for comment in line['comments'] %}
+                    <tr><td class="comment">
+                        {{ macros.gravatar(comment, utils) }}
+                        <div>
+                            <div class="author">
+                                <a href="mailto:{{ utils['email'](comment.author) }}">
+                                    {{ utils['templatefilters'].person(comment.author) }}
+                                </a>
+                                said (on a skipped line):
+                            </div>
+                            <div class="message">{{ comment.message|escape }}</div>
+                        </div>
+                    </td></tr>
+                {% endfor %}
+            {% else %}
+                <tr class="{{ utils['line_type'](line['content']) }}{% if not read_only %} commentable {% endif %}">
+                    <td class="linenumber">{{ line['number'] }}</td>
+                    <td class="code"><code>{{ line['content'][1:]|escape }}</code></td>
+                </tr>
+
+                {% with %}
+                    {% set comments = line['comments'] %}
+
+                    {% for comment in comments %}
+                        <tr class="comment">
+                            <td class="comment group" colspan="2">
+                                {{ macros.gravatar(comment, utils) }}
+                                <div>
+                                    <div class="author">
+                                        <a href="mailto:{{ utils['email'](comment.author) }}">
+                                            {{ utils['templatefilters'].person(comment.author) }}
+                                        </a>
+                                        said:
+                                    </div>
+                                    <div class="message">{{ comment.message }}</div>
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                {% endwith %}
+            {% endif %}
+        {% endfor %}
+    </tbody>
+</table>
+
+</div>