--- a/review/static/comments.js Sat Jun 12 14:53:06 2010 -0400
+++ b/review/static/comments.js Sat Jun 12 18:13:37 2010 -0400
@@ -1,53 +1,53 @@
-$(function() {
+//$(function() {
- $("div > form").hide();
- $("tr:has(form)").hide();
+ //$("div > form").hide();
+ //$("tr:has(form)").hide();
- $("span.cancel a").click(function(event) {
- $(event.target).closest("div.input").children(".activate").children("a").show();
- $(event.target).parents("form").hide();
- return false;
- });
+ //$("span.cancel a").click(function(event) {
+ //$(event.target).closest("div.input").children(".activate").children("a").show();
+ //$(event.target).parents("form").hide();
+ //return false;
+ //});
- $("span.cancel-line a").live("click", function(event) {
- $(event.target).closest("tr").prev().removeClass("comment-line-selected").addClass("commentable");
- $(event.target).closest("tr").remove();
- return false;
- });
+ //$("span.cancel-line a").live("click", function(event) {
+ //$(event.target).closest("tr").prev().removeClass("comment-line-selected").addClass("commentable");
+ //$(event.target).closest("tr").remove();
+ //return false;
+ //});
- $(".input .activate a").click(function(event) {
- $(event.target).hide();
- $(event.target).closest("div").children("form").fadeIn("fast");
- return false;
- });
+ //$(".input .activate a").click(function(event) {
+ //$(event.target).hide();
+ //$(event.target).closest("div").children("form").fadeIn("fast");
+ //return false;
+ //});
- $("tr.rem.commentable,tr.add.commentable,tr.con.commentable").live("click", function(event) {
- $(event.target).closest("tr").addClass("comment-line-selected").removeClass("commentable");
- var filename = $(event.target).closest("tr").find(".line-data").children(".filename").first().text();
- var linenumber = $(event.target).closest("tr").find(".line-data").children(".linenumber").first().html();
+ //$("tr.rem.commentable,tr.add.commentable,tr.con.commentable").live("click", function(event) {
+ //$(event.target).closest("tr").addClass("comment-line-selected").removeClass("commentable");
+ //var filename = $(event.target).closest("tr").find(".line-data").children(".filename").first().text();
+ //var linenumber = $(event.target).closest("tr").find(".line-data").children(".linenumber").first().html();
- var comment_form = '<tr class="comment-line">\n\
- <td>\n\
- <form id="comment-line-form" method="post" action="">\n\
- <div class="field">\n\
- <label for="body">Add a comment on this line:</label>\n\
- <textarea cols="60" rows="6" name="new-comment-body"></textarea>\n\
- </div>\n\
- <div class="buttons">\n\
- <input type="submit" class="button" value="Submit" />\n\
- <span class="cancel-line"><a href="">Cancel</a></span>\n\
- </div>\n\
- <input type="hidden" name="filename" value="<<<FILENAME>>>" />\n\
- <input type="hidden" name="lines" value="<<<LINENUMBER>>>" />\n\
- </form>\n\
- </td>\n\
- </tr>';
- comment_form = comment_form.replace('<<<FILENAME>>>', filename);
- comment_form = comment_form.replace('<<<LINENUMBER>>>', linenumber);
+ //var comment_form = '<tr class="comment-line">\n\
+ //<td>\n\
+ //<form id="comment-line-form" method="post" action="">\n\
+ //<div class="field">\n\
+ //<label for="body">Add a comment on this line:</label>\n\
+ //<textarea cols="60" rows="6" name="new-comment-body"></textarea>\n\
+ //</div>\n\
+ //<div class="buttons">\n\
+ //<input type="submit" class="button" value="Submit" />\n\
+ //<span class="cancel-line"><a href="">Cancel</a></span>\n\
+ //</div>\n\
+ //<input type="hidden" name="filename" value="<<<FILENAME>>>" />\n\
+ //<input type="hidden" name="lines" value="<<<LINENUMBER>>>" />\n\
+ //</form>\n\
+ //</td>\n\
+ //</tr>';
+ //comment_form = comment_form.replace('<<<FILENAME>>>', filename);
+ //comment_form = comment_form.replace('<<<LINENUMBER>>>', linenumber);
- $(event.target).closest("tr").after(comment_form);
- return false;
- });
+ //$(event.target).closest("tr").after(comment_form);
+ //return false;
+ //});
-});
\ No newline at end of file
+//});
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/review/static/extra.css Sat Jun 12 18:13:37 2010 -0400
@@ -0,0 +1,14 @@
+a.button span, a.button {
+ background: -webkit-gradient(
+ linear,
+ left bottom,
+ left top,
+ color-stop(0.00, rgba(0, 0, 0, 0.15)),
+ color-stop(1, rgba(255, 255, 255, 0.0))
+ );
+ background: -moz-linear-gradient(
+ center bottom,
+ rgba(0, 0, 0, 0.15) 0%,
+ rgba(255, 255, 255, 0.0) 100%
+ );
+}
--- a/review/static/style.css Sat Jun 12 14:53:06 2010 -0400
+++ b/review/static/style.css Sat Jun 12 18:13:37 2010 -0400
@@ -1,178 +1,115 @@
-body {
- background: #999;
-}
-body div#content-wrap {
- background-color: #fafafa;
-}
-body div#main-wrap {
- width: 75em;
- margin: 0em auto;
- padding: 3em;
+.group:after {
+ clear: both;
+ content: ' ';
+ display: block;
+ font-size: 0;
+ line-height: 0;
+ visibility: hidden;
+ width: 0;
+ height: 0;
}
-body div#head-wrap {
- text-align: center;
- padding: 1.5em 0em .5em;
- color: #fff;
- background-color: #111;
- border-bottom: 6px solid #3C659A;
+* html .group, *:first-child + html .group {
+ zoom: 1;
+}
+html, body {
+ background-color: #edecc7;
}
-body div#head-wrap h1, body div#head-wrap h1 a {
- font-weight: normal;
+body {
+ color: #292620;
+ font-family: "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
}
-body div#head-wrap a {
- color: inherit;
+body .hr {
+ height: 0;
+ width: 100%;
+ border-top: 1px solid #fcfcfc;
}
-body div#remote-wrap {
- text-align: center;
- padding-top: 1.5em;
- margin-bottom: -1.5em;
+body .wrap {
+ width: 800px;
+ margin: 0 auto;
}
-body div#remote-wrap span.remote-section {
- margin: 0em 1em;
+body .header {
+ background-color: #648239;
+ padding-bottom: 1px;
+ border-bottom: 1px solid #5a7533;
}
-body div#remote-wrap span.remote-section h3 {
- display: inline;
+body .header .hr.one {
+ border-top: none;
+ height: 3px;
+ background-color: #87b04d;
+ border-bottom: 1px solid #648239;
}
-body div#remote-wrap form {
- display: inline;
+body .header .hr.two {
+ border-top: none;
+ border-bottom: 1px solid #94b95f;
}
-body div#footer {
- border-top: 6px solid #666;
- color: #fff;
- text-align: center;
- font-style: italic;
- padding-top: 1.5em;
+body .header h1 {
+ color: #292620;
+ text-shadow: 0px 1px 1px #94b95f;
+ margin-top: 16px;
+ float: right;
}
-body div#footer a {
- color: #fff;
+body .header h1 a {
+ color: black;
+ text-decoration: none;
}
-body div#footer a:hover {
+body .header h1 a:hover {
text-decoration: underline;
}
-body a {
- text-decoration: none;
- font-weight: bold;
- color: #3C659A;
-}
-body a:hover {
- color: #EA0076;
-}
-body .debug {
- border: 2px solid green;
- background-color: red;
+body .header .remotes .remote {
+ padding-top: 4px;
}
-body table {
- width: 100%;
- border: 1px solid #666;
- background: #f2f2f2;
-}
-body table tr.odd {
- background: #eee;
-}
-body table tr td {
- border: none;
-}
-body table tr td.last {
- text-align: right;
-}
-body table tr form * {
- margin: 0em;
+body .header .remotes form {
+ display: inline;
+ margin-bottom: 0;
}
-div.filename-header {
- background-color: #ccc;
- border: 1px solid #c5c5c5;
- padding: 1em;
- margin-bottom: 1.5em;
- margin-top: 1.5em;
-}
-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;
-}
-.comment {
- white-space: normal;
- background: #FBEAD0;
- border: 1px dashed #666;
- font-family: Consolas, Monaco, "Courier New", Courier, monospace;
- padding: 0.75em;
- margin-bottom: 1.5em;
-}
-.comment div.avatar {
- border: 1px solid black;
- float: right;
-}
-.comment div.message {
- margin-top: 1.5em;
- white-space: pre;
-}
-div#comment-review form {
- margin-bottom: 3em;
- display: none;
+body .header .remotes form a {
+ font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
+ color: #000000;
+ line-height: 1.45;
+ display: inline-block;
+ text-decoration: none;
+ padding: 1px;
+ background-color: #c9e69f;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ border-top: 1px solid #729c35;
+ border-right: 1px solid #62862e;
+ border-left: 1px solid #62862e;
+ border-bottom: 1px solid #516f26;
}
-table tbody tr.comment-line-selected {
- background-color: #FBEAD0 !important;
-}
-span.cancel, form span.cancel-line {
- margin-left: 10px;
-}
-.signoff {
- white-space: normal;
- border: 1px dashed #666;
- font-family: Consolas, Monaco, "Courier New", Courier, monospace;
- padding: 0.75em;
- margin-bottom: 1.5em;
+body .header .remotes form a:hover {
+ border-top: 1px solid #82b23d;
+ border-right: 1px solid #729c35;
+ border-left: 1px solid #729c35;
+ border-bottom: 1px solid #62862e;
+ background-color: #daeebe;
}
-.signoff.yes {
- background-color: #B4FF9D;
-}
-.signoff.no {
- background-color: #FC9696;
-}
-.signoff.neutral {
- background-color: #F0F0F0;
-}
-.signoff .avatar {
- border: 1px solid black;
- float: right;
-}
-.signoff .message {
- margin-top: 1.5em;
- white-space: pre;
+body .header .remotes form a span {
+ background-color: #9fc962;
+ display: inline-block;
+ padding: 0 6px;
+ text-shadow: 0px 1px 1px #a6cd6d;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
-.signoff .opinion {
- font-weight: bold;
-}
-.diff {
- overflow: auto;
+body .header .remotes form a span:hover {
+ background-color: #bad98f;
}
-.diff table tr {
- white-space: pre;
+body .header .remotes form a:active {
+ margin-top: 1px;
+ margin-bottom: -1px;
}
-.diff table tr.comment-line {
- white-space: normal;
-}
-.diff table tr.con {
- font-size: 11px;
+body .content {
+ border-top: 1px solid #f8f7e8;
}
-.diff table tr.add {
- background: #DBF3D1;
- font-size: 11px;
-}
-.diff table tr.rem {
- background: #FBDBDA;
- font-size: 11px;
+body .content .wrap {
+ -webkit-border-radius: 7px;
+ -moz-border-radius: 7px;
+ border-radius: 7px;
+ margin-top: 20px;
+ padding: 21px 20px;
+ width: 760px;
+ background-color: #fdfdfd;
}
-.diff table tr.skipped {
- background: #ccc;
- font-size: 11px;
-}
-.diff table tr td.diff-line div.line-data {
- display: none;
-}
-.diff .comment {
- margin-bottom: 0em;
-}
--- a/review/static/style.less Sat Jun 12 14:53:06 2010 -0400
+++ b/review/static/style.less Sat Jun 12 18:13:37 2010 -0400
@@ -1,194 +1,133 @@
-body {
- background: #999;
+@font-normal: "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
+@font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
- div#content-wrap {
- background-color: #fafafa;
- }
- div#main-wrap {
- width: 75em;
- margin: 0em auto;
- padding: 3em;
- }
- div#head-wrap {
- text-align: center;
- padding: 1.5em 0em .5em;
- color: #fff;
- background-color: #111;
- border-bottom: 6px solid #3C659A;
+@c-cream: #edecc7;
+@c-green: #648239;
+@c-orange: #bf4c18;
+@c-dark: #292620;
+@c-light: #fcfcfc;
+
+@content-width: 800px;
- h1, h1 a {
- font-weight: normal;
- }
- a {
- color: inherit;
- }
+.border-radius(@radius) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+}
+.multi-border(@top, @sides, @bottom) {
+ border-top: 1px solid @top;
+ border-right: 1px solid @sides;
+ border-left: 1px solid @sides;
+ border-bottom: 1px solid @bottom;
+}
+.button(@color: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
+ font: bold @fsize @font-normal;
+ color: @color - #ccc;
+ line-height: @lheight;
+ display: inline-block;
+ text-decoration: none;
+ padding: 1px;
+ background-color: saturate(lighten(@color, 30%), 10%);
+ .border-radius(4px);
+ .multi-border(darken(@color, 30%), darken(@color, 40%), darken(@color, 50%));
+ &:hover {
+ .multi-border(darken(@color, 20%), darken(@color, 30%), darken(@color, 40%));
+ background-color: lighten(saturate(lighten(@color, 30%), 10%), 10%);
}
- div#remote-wrap {
- text-align: center;
- padding-top: 1.5em;
- margin-bottom: -1.5em;
-
- span.remote-section {
- margin: 0em 1em;
-
- h3{
- display: inline;
- }
- }
- form {
- display: inline;
+ span {
+ background-color: @color;
+ display: inline-block;
+ padding: 0 @fsize/2;
+ text-shadow: 0px 1px 1px lighten(@color, 5%);
+ .border-radius(3px);
+ &:hover {
+ background-color: lighten(@color, 20%);
}
}
- div#footer {
- border-top: 6px solid #666;
- color: #fff;
- text-align: center;
- font-style: italic;
- padding-top: 1.5em;
-
- a {
- color: #fff;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
- a {
- text-decoration: none;
- font-weight: bold;
- color: #3C659A;
-
- &:hover {
- color: #EA0076;
- }
- }
- .debug {
- border: 2px solid green;
- background-color: red;
- }
- table {
- width: 100%;
- border: 1px solid #666;
- background: #f2f2f2;
-
- tr {
- &.odd {
- background: #eee;
- }
- td {
- border: none;
-
- &.last {
- text-align: right;
- }
- }
- form * {
- margin: 0em;
- }
- }
+ &:active {
+ margin-top: 1px;
+ margin-bottom: -1px;
}
}
-div.filename-header {
- background-color: #ccc;
- border: 1px solid #c5c5c5;
- padding: 1em;
- margin-bottom: 1.5em;
- margin-top: 1.5em;
-
- h3 {
- margin: 0em;
- }
- a.fold-file, a.unfold-file {
- float: right;
- font-weight: bold;
- font-size: 1.5em;
- }
+.group:after {
+ clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0;
}
-
-.comment {
- white-space: normal;
- background: #FBEAD0;
- border: 1px dashed #666;
- font-family: Consolas, Monaco, "Courier New", Courier, monospace;
- padding: 0.75em;
- margin-bottom: 1.5em;
-
- div.avatar {
- border: 1px solid black;
- float: right;
- }
- div.message {
- margin-top: 1.5em;
- white-space: pre;
- }
-}
-div#comment-review form {
- margin-bottom: 3em;
- display: none;
-}
-table tbody tr.comment-line-selected {
- background-color: #FBEAD0 !important;
-}
-
-span.cancel, form span.cancel-line {
- margin-left: 10px;
+* html .group, *:first-child + html .group {
+ zoom:1
}
-.signoff {
- white-space: normal;
- border: 1px dashed #666;
- font-family: Consolas, Monaco, "Courier New", Courier, monospace;
- padding: 0.75em;
- margin-bottom: 1.5em;
+html, body {
+ background-color: @c-cream;
+}
+body {
+ color: @c-dark;
+ font-family: @font-normal;
- &.yes { background-color: #B4FF9D; }
- &.no { background-color: #FC9696; }
- &.neutral { background-color: #F0F0F0; }
+ .hr {
+ height: 0;
+ width: 100%;
+ border-top: 1px solid @c-light;
+ }
+ .wrap {
+ width: @content-width;
+ margin: 0 auto;
+ }
+ .header {
+ background-color: @c-green;
+ padding-bottom: 1px;
+ border-bottom: 1px solid darken(@c-green, 10%);
- .avatar {
- border: 1px solid black;
- float: right;
+ .hr.one {
+ border-top: none;
+ height: 3px;
+ background-color: lighten(@c-green, 35%);
+ border-bottom: 1px solid @c-green;
+ }
+ .hr.two {
+ border-top: none;
+ border-bottom: 1px solid lighten(@c-green, 50%);
+ }
+ h1 {
+ color: @c-dark;
+ text-shadow: 0px 1px 1px lighten(@c-green, 50%);
+ margin-top: 16px;
+ float: right;
+
+ a {
+ color: black;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ .remotes {
+ .remote {
+ padding-top: 4px;
+ }
+ form {
+ display: inline;
+ margin-bottom: 0;
+
+ a {
+ .button(saturate(lighten(@c-green, 60%), 10%), #000, 12px, 1.45);
+ }
+ }
+ }
}
- .message {
- margin-top: 1.5em;
- white-space: pre;
- }
- .opinion {
- font-weight: bold;
+ .content {
+ border-top: 1px solid lighten(@c-cream, 10%);
+
+ .wrap {
+ .border-radius(7px);
+ @content-padding-horiz: 20px;
+
+ margin-top: 20px;
+ padding: 21px @content-padding-horiz;
+ width: @content-width - (@content-padding-horiz * 2);
+ background-color: #fdfdfd;
+ }
}
}
-.diff {
- overflow: auto;
-
- table tr {
- white-space: pre;
-
- &.comment-line {
- white-space: normal;
- }
- &.con {
- font-size: 11px;
- }
- &.add {
- background: #DBF3D1;
- font-size: 11px;
- }
- &.rem {
- background: #FBDBDA;
- font-size: 11px;
- }
- &.skipped {
- background: #ccc;
- font-size: 11px;
- }
- td.diff-line div.line-data {
- display: none;
- }
- }
- .comment {
- margin-bottom: 0em;
- }
-}
-
--- a/review/templates/base.html Sat Jun 12 14:53:06 2010 -0400
+++ b/review/templates/base.html Sat Jun 12 18:13:37 2010 -0400
@@ -5,54 +5,61 @@
<html>
<head>
- <title>Reviewing {{ utils["basename"](datastore.target.root) }}{% block title %}{% endblock %}</title>
+ <title>{{ utils["basename"](datastore.target.root) }}/ - hg-review</title>
<link rel="stylesheet" href="/static/aal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/static/style.css" type="text/css" media="screen" />
-
+ <link rel="stylesheet" href="/static/extra.css" type="text/css" media="screen" />
+
<script type="text/javascript" src="/static/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/ui.js"></script>
<script type="text/javascript" src="/static/comments.js"></script>
</head>
-
- <body>
- <div id="head-wrap">
- <h1>
- Reviewing
- <a href="/">
- {{ utils["basename"](datastore.target.root) }}
- </a>
- {% block header %}{% endblock %}
- </h1>
+
+ <body id="{% block id %}{% endblock %}">
+ <div class="header group">
+ <div class="hr one"> </div>
+ <div class="hr two"> </div>
+
+ <div class="wrap">
+ <h1>
+ Reviewing
+ <a href="/">
+ {{ utils["basename"](datastore.target.root) }}
+ </a>
+ {% block header %}{% endblock %}
+ </h1>
+ <div class="remotes">
+ {% if not read_only %}
+ <div class="push remote">
+ {% for name, path in datastore.repo.ui.configitems("paths") %}
+ <form action="/push/" method="POST" id="remote-push-{{ name }}">
+ <input type="hidden" name="path" value="{{ name }}" />
+ <a class="button" href="#"><span>push to {{ name }}</span></a>
+ </form>
+ {% endfor %}
+ </div>
+
+ <div class="pull remote">
+ {% for name, path in datastore.repo.ui.configitems("paths") %}
+ <form action="/pull/" method="post">
+ <input type="hidden" name="path" value="{{ name }}" />
+ <a class="button" href="#"><span>pull from {{ name }}</span></a>
+ </form>
+ {% endfor %}
+ </div>
+ {% endif %}
+ </div>
+ </div>
</div>
- <div id="content-wrap">
- {% if not read_only %}
- <div id="remote-wrap">
- <span id="remote-push" class="remote-section">
- <h3>Push comments to:</h3>
- {% for name, path in datastore.repo.ui.configitems("paths") %}
- <form action="/push/" method="post">
- <input type="hidden" name="path" value="{{ name }}" />
- <input type="submit" value="{{ name }}" />
- </form>
- {% endfor %}
- </span>
- <span id="remote-pull" class="remote-section">
- <h3>Pull comments from:</h3>
- {% for name, path in datastore.repo.ui.configitems("paths") %}
- <form action="/pull/" method="post">
- <input type="hidden" name="path" value="{{ name }}" />
- <input type="submit" value="{{ name }}" />
- </form>
- {% endfor %}
- </span>
- </div>
- {% endif %}
- <div id="main-wrap">
+ <div class="content">
+ <div class="wrap">
{% block content %}{% endblock %}
</div>
</div>
- <div id="footer">
- <p>reviewing {{ utils["basename"](datastore.target.root) }} with <a href="http://bitbucket.org/sjl/hg-review/">hg-review</a></p>
+ <div class="footer">
+ <div class="wrap">
+ <p>reviewing {{ utils["basename"](datastore.target.root) }} with <a href="http://bitbucket.org/sjl/hg-review/">hg-review</a></p>
+ </div>
</div>
</body>
</html>
--- a/review/templates/index.html Sat Jun 12 14:53:06 2010 -0400
+++ b/review/templates/index.html Sat Jun 12 18:13:37 2010 -0400
@@ -1,5 +1,6 @@
{% extends "base.html" %}
+{% block id %}index{% endblock %}
{% block title %}{% endblock %}
{% block header %}{% endblock %}