--- a/review/static/colorbox/jquery.colorbox.js Fri Jun 18 20:08:01 2010 -0400
+++ b/review/static/colorbox/jquery.colorbox.js Fri Jun 18 20:57:12 2010 -0400
@@ -78,7 +78,7 @@
rel: FALSE,
opacity: 0.9,
preloading: TRUE,
- current: "image {current} of {total}",
+ current: "{current} of {total}",
previous: "previous",
next: "next",
close: "close",
--- a/review/static/style.css Fri Jun 18 20:08:01 2010 -0400
+++ b/review/static/style.css Fri Jun 18 20:57:12 2010 -0400
@@ -461,10 +461,11 @@
margin-bottom: 14px;
}
#changeset .content .item-listing .comment, #changeset .content .item-listing .signoff {
- padding: 8px 10px;
+ padding: 8px 12px 8px 10px;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
position: relative;
+ min-height: 41px;
}
#changeset .content .item-listing .comment:first-child, #changeset .content .item-listing .signoff:first-child {
border-top: none;
@@ -487,14 +488,23 @@
height: 30px;
width: 30px;
margin-top: 5px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
#changeset .content .item-listing .comment .expand, #changeset .content .item-listing .signoff .expand {
position: absolute;
- top: -4px;
- right: 1px;
- font-size: 16px;
+ top: 17px;
+ right: -18px;
+ font-size: 14px;
font-weight: bold;
}
+#changeset .content .item-listing .comment .expand:hover, #changeset .content .item-listing .signoff .expand:hover {
+ text-decoration: none;
+}
+#changeset .content .item-listing .comment .colorboxed, #changeset .content .item-listing .signoff .colorboxed {
+ display: none;
+}
#changeset .content .item-listing .signoff .signoff-opinion {
float: right;
font: bold 30px/1 "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
@@ -627,6 +637,9 @@
#changeset .content .diff table td.comment .avatar img {
height: 30px;
width: 30px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
#changeset .content .diff table td.comment .message {
white-space: pre;
@@ -635,11 +648,32 @@
#changeset .content .diff table td.comment .author {
padding-bottom: 3px;
}
-#colorbox .expand {
+#changeset .content .diff table td.comment .comment-content {
+ position: relative;
+}
+#changeset .content .diff table td.comment .expand {
+ position: absolute;
+ top: -13px;
+ right: -8px;
+ font-size: 14px;
+ font-weight: bold;
+}
+#changeset .content .diff table td.comment .expand:hover {
+ text-decoration: none;
+}
+#changeset .content .diff table td.comment .colorboxed {
display: none;
}
+#colorbox #cboxLoadedContent {
+ padding: 10px;
+}
+#colorbox #cboxContent {
+ position: relative;
+}
#colorbox .avatar {
- float: right;
+ position: absolute;
+ top: 0px;
+ right: 0px;
}
#colorbox .author {
font-size: 20px;
--- a/review/static/style.less Fri Jun 18 20:08:01 2010 -0400
+++ b/review/static/style.less Fri Jun 18 20:57:12 2010 -0400
@@ -405,10 +405,11 @@
margin-bottom: 14px;
.comment, .signoff {
- padding: 8px 10px;
+ padding: 8px 12px 8px 10px;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
position: relative;
+ min-height: 41px;
&:first-child {
border-top: none;
@@ -431,13 +432,21 @@
height: 30px;
width: 30px;
margin-top: 5px;
+ .border-radius(3px);
}
.expand {
position: absolute;
- top: -4px;
- right: 1px;
- font-size: 16px;
+ top: 17px;
+ right: -18px;
+ font-size: 14px;
font-weight: bold;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ .colorboxed {
+ display: none;
}
}
.signoff {
@@ -589,6 +598,7 @@
img {
height: 30px;
width: 30px;
+ .border-radius(3px);
}
}
.message {
@@ -598,6 +608,23 @@
.author {
padding-bottom: 3px;
}
+ .comment-content {
+ position: relative;
+ }
+ .expand {
+ position: absolute;
+ top: -13px;
+ right: -8px;
+ font-size: 14px;
+ font-weight: bold;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ .colorboxed {
+ display: none;
+ }
}
}
}
@@ -605,11 +632,17 @@
}
#colorbox {
- .expand {
- display: none;
+ #cboxLoadedContent {
+ padding: 10px;
+ }
+ #cboxContent {
+ position: relative;
}
.avatar {
- float: right;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+
}
.author {
font-size: 20px;
--- a/review/templates/pieces/comment.html Fri Jun 18 20:08:01 2010 -0400
+++ b/review/templates/pieces/comment.html Fri Jun 18 20:57:12 2010 -0400
@@ -1,10 +1,11 @@
<div class="comment group" id="comment-{{ comment.identifier }}">
- <a href="#comment-{{ comment.identifier }}" class="expand" id="comment-expand-{{ comment.identifier }}">+</a>
+ <a href="#comment-{{ comment.identifier }}" rel="comments" class="expand" id="comment-expand-{{ comment.identifier }}">→</a>
<script type="text/javascript">
$(function() {
- $("#comment-expand-{{ comment.identifier }}").colorbox({inline: true, href: "#comment-{{ comment.identifier }}"});
+ $("#comment-expand-{{ comment.identifier }}").colorbox({inline: true, href: "#comment-{{ comment.identifier }}-colorboxed"});
});
</script>
+
<div class="avatar">
<img src="{{ utils['item_gravatar'](comment, 30) }}" />
</div>
@@ -15,4 +16,17 @@
</div>
<div class="message">{{ comment.message }}</div>
</div>
+
+ <div id="comment-{{ comment.identifier }}-colorboxed" class="colorboxed">
+ <div class="avatar">
+ <img src="{{ utils['item_gravatar'](comment, 30) }}" />
+ </div>
+ <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>
+ </div>
</div>
--- a/review/templates/pieces/diff.html Fri Jun 18 20:08:01 2010 -0400
+++ b/review/templates/pieces/diff.html Fri Jun 18 20:57:12 2010 -0400
@@ -47,24 +47,7 @@
{% set comments = line['comments'] %}
{% for comment in comments %}
- <tr class="comment">
- <td class="comment group" colspan="3">
- <span class="commentlines disabled">{{ ','.join(utils['map'](utils['str'], comment.lines)) }}</span>
- <div class="avatar">
- <img src="{{ utils['item_gravatar'](comment, 30) }}" />
- </div>
-
- <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>
+ {% include "pieces/linecomment.html" %}
{% endfor %}
{% endwith %}
{% endif %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/review/templates/pieces/linecomment.html Fri Jun 18 20:57:12 2010 -0400
@@ -0,0 +1,38 @@
+<tr class="comment">
+ <td class="comment group" colspan="3" id="comment-{{ comment.identifier }}">
+ <div class="comment-content">
+ <span class="commentlines disabled">{{ ','.join(utils['map'](utils['str'], comment.lines)) }}</span>
+ <a href="#comment-{{ comment.identifier }}" rel="comments" class="expand" id="comment-expand-{{ comment.identifier }}">→</a>
+ <script type="text/javascript">
+ $(function() {
+ $("#comment-expand-{{ comment.identifier }}").colorbox({inline: true, href: "#comment-{{ comment.identifier }}-colorboxed"});
+ });
+ </script>
+ <div class="avatar">
+ <img src="{{ utils['item_gravatar'](comment, 30) }}" />
+ </div>
+
+ <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>
+ </div>
+ <div id="comment-{{ comment.identifier }}-colorboxed" class="colorboxed">
+ <div class="avatar">
+ <img src="{{ utils['item_gravatar'](comment, 30) }}" />
+ </div>
+ <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>
+ </div>
+ </td>
+</tr>