# HG changeset patch # User Steve Losh # Date 1276398735 14400 # Node ID fcbf8d764330a4c7b686dbde0c5b036b6fa400d8 # Parent c4db1e4882dd472f2e9f190a9974aad8325c98b0 web: much more styling diff -r c4db1e4882dd -r fcbf8d764330 review/static/aal.css --- a/review/static/aal.css Sat Jun 12 20:51:20 2010 -0400 +++ b/review/static/aal.css Sat Jun 12 23:12:15 2010 -0400 @@ -96,4 +96,4 @@ /* Useful classes */ img.left {display: inline; float: left; margin: 0 1.5em .75em 0;} -img.right {display: inline; float: right; margin: 0 0 .75em .75em;} \ No newline at end of file +img.right {display: inline; float: right; margin: 0 0 .75em .75em;} diff -r c4db1e4882dd -r fcbf8d764330 review/static/comments.js --- a/review/static/comments.js Sat Jun 12 20:51:20 2010 -0400 +++ b/review/static/comments.js Sat Jun 12 23:12:15 2010 -0400 @@ -1,14 +1,16 @@ -//$(function() { - - //$("div > form").hide(); - //$("tr:has(form)").hide(); - +$(function() { - //$("span.cancel a").click(function(event) { - //$(event.target).closest("div.input").children(".activate").children("a").show(); - //$(event.target).parents("form").hide(); - //return false; - //}); + $(".activate a").click(function(event) { + $(event.target).closest(".activate").hide(); + $(event.target).closest("div").children("form").fadeIn("fast"); + return false; + }); + + $("a.cancel").click(function(event) { + $(event.target).closest(".togglebox").children(".activate").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"); @@ -16,12 +18,6 @@ //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(); @@ -49,5 +45,6 @@ //$(event.target).closest("tr").after(comment_form); //return false; //}); - -//}); + + $("label.infield").inFieldLabels(); +}); diff -r c4db1e4882dd -r fcbf8d764330 review/static/extra.css --- a/review/static/extra.css Sat Jun 12 20:51:20 2010 -0400 +++ b/review/static/extra.css Sat Jun 12 23:12:15 2010 -0400 @@ -44,3 +44,14 @@ ); } +#changeset .content .togglebox form { + background: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.0, rgb(234, 233, 223)), + color-stop(0.3, rgb(250, 249, 239)), + color-stop(0.95, rgb(250, 249, 239)), + color-stop(1, rgb(255, 254, 243)) + ); +} diff -r c4db1e4882dd -r fcbf8d764330 review/static/jquery.infieldlabel.min.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/review/static/jquery.infieldlabel.min.js Sat Jun 12 23:12:15 2010 -0400 @@ -0,0 +1,12 @@ +/* + * In-Field Label jQuery Plugin + * http://fuelyourcoding.com/scripts/infield.html + * + * Copyright (c) 2009 Doug Neiner + * Dual licensed under the MIT and GPL licenses. + * Uses the same license as jQuery, see: + * http://docs.jquery.com/License + * + * @version 0.1 + */ +(function($){$.InFieldLabels=function(b,c,d){var f=this;f.$label=$(b);f.label=b;f.$field=$(c);f.field=c;f.$label.data("InFieldLabels",f);f.showing=true;f.init=function(){f.options=$.extend({},$.InFieldLabels.defaultOptions,d);if(f.$field.val()!=""){f.$label.hide();f.showing=false};f.$field.focus(function(){f.fadeOnFocus()}).blur(function(){f.checkForEmpty(true)}).bind('keydown.infieldlabel',function(e){f.hideOnChange(e)}).change(function(e){f.checkForEmpty()}).bind('onPropertyChange',function(){f.checkForEmpty()})};f.fadeOnFocus=function(){if(f.showing){f.setOpacity(f.options.fadeOpacity)}};f.setOpacity=function(a){f.$label.stop().animate({opacity:a},f.options.fadeDuration);f.showing=(a>0.0)};f.checkForEmpty=function(a){if(f.$field.val()==""){f.prepForShow();f.setOpacity(a?1.0:f.options.fadeOpacity)}else{f.setOpacity(0.0)}};f.prepForShow=function(e){if(!f.showing){f.$label.css({opacity:0.0}).show();f.$field.bind('keydown.infieldlabel',function(e){f.hideOnChange(e)})}};f.hideOnChange=function(e){if((e.keyCode==16)||(e.keyCode==9))return;if(f.showing){f.$label.hide();f.showing=false};f.$field.unbind('keydown.infieldlabel')};f.init()};$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300};$.fn.inFieldLabels=function(c){return this.each(function(){var a=$(this).attr('for');if(!a)return;var b=$("input#"+a+"[type='text'],"+"input#"+a+"[type='password'],"+"textarea#"+a);if(b.length==0)return;(new $.InFieldLabels(this,b[0],c))})}})(jQuery); \ No newline at end of file diff -r c4db1e4882dd -r fcbf8d764330 review/static/style.css --- a/review/static/style.css Sat Jun 12 20:51:20 2010 -0400 +++ b/review/static/style.css Sat Jun 12 23:12:15 2010 -0400 @@ -64,16 +64,17 @@ margin-bottom: 0; } body .header .remotes form a { + margin-right: 3px; font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif; color: #212000; line-height: 1.45; display: inline-block; text-decoration: none; padding: 1px; - background-color: #f9f8d3; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); + background-color: #edecc7; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -81,10 +82,12 @@ border-right: 1px solid #a9a883; border-left: 1px solid #a9a883; border-bottom: 1px solid #989772; - margin-right: 3px; +} +body .header .remotes form a:active { + margin-top: 1px; + margin-bottom: -1px; } body .header .remotes form a span { - background-color: #edecc7; display: inline-block; padding: 0 6px; text-shadow: 0px 1px 1px #fffffa; @@ -102,10 +105,6 @@ body .header .remotes form a:hover span { background-color: #fefdd8; } -body .header .remotes form a:active { - margin-top: 1px; - margin-bottom: -1px; -} body .content { border-top: 1px solid #f8f7e8; } @@ -145,6 +144,33 @@ body a:active { color: #bf1900; } +body .disabled { + display: none; +} +form .field { + position: relative; +} +form .field label { + display: inline; +} +form .field label.radio { + margin-right: 15px; +} +form .field label.infield { + display: block; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + position: absolute; + top: 5px; + left: 5px; +} +form .field textarea { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + padding: 5px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + border: 1px solid #444; +} #index .content table { width: 100%; } @@ -199,5 +225,161 @@ background-color: #666; } #index .content table tr td.stats .badge.comments { - background-color: #ff6f24; + background-color: #ff5700; +} +#changeset .content .fulldesc { + font-size: 18px; + line-height: 1.25; + margin-bottom: 14px; + overflow-x: auto; + overflow-y: hidden; + padding-bottom: 4px; + white-space: pre; + width: 100%; +} +#changeset .content .activate a { + font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif; + color: #1e1e1e; + line-height: 1.45; + display: inline-block; + text-decoration: none; + padding: 1px; + background-color: #eaeaea; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border-top: 1px solid #b7b7b7; + border-right: 1px solid #a6a6a6; + border-left: 1px solid #a6a6a6; + border-bottom: 1px solid #959595; +} +#changeset .content .activate a:active { + margin-top: 1px; + margin-bottom: -1px; +} +#changeset .content .activate a span { + display: inline-block; + padding: 0 6px; + text-shadow: 0px 1px 1px #ffffff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +#changeset .content .activate a:hover { + border-top: 1px solid #d3d3d3; + border-right: 1px solid #bbbbbb; + border-left: 1px solid #bbbbbb; + border-bottom: 1px solid #a4a4a4; + background-color: #fbfbfb; +} +#changeset .content .activate a:hover span { + background-color: #fbfbfb; +} +#changeset .content a.submit { + margin-right: 4px; + font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif; + color: #1e1e1e; + line-height: 1.45; + display: inline-block; + text-decoration: none; + padding: 1px; + background-color: #eaeaea; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border-top: 1px solid #b7b7b7; + border-right: 1px solid #a6a6a6; + border-left: 1px solid #a6a6a6; + border-bottom: 1px solid #959595; +} +#changeset .content a.submit:active { + margin-top: 1px; + margin-bottom: -1px; } +#changeset .content a.submit span { + display: inline-block; + padding: 0 6px; + text-shadow: 0px 1px 1px #ffffff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +#changeset .content a.submit:hover { + border-top: 1px solid #d3d3d3; + border-right: 1px solid #bbbbbb; + border-left: 1px solid #bbbbbb; + border-bottom: 1px solid #a4a4a4; + background-color: #fbfbfb; +} +#changeset .content a.submit:hover span { + background-color: #fbfbfb; +} +#changeset .content a.cancel { + font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif; + color: #1e1e1e; + line-height: 1.45; + display: inline-block; + text-decoration: none; + padding: 1px; + background-color: #eaeaea; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border-top: 1px solid #b7b7b7; + border-right: 1px solid #a6a6a6; + border-left: 1px solid #a6a6a6; + border-bottom: 1px solid #959595; +} +#changeset .content a.cancel:active { + margin-top: 1px; + margin-bottom: -1px; +} +#changeset .content a.cancel span { + display: inline-block; + padding: 0 6px; + text-shadow: 0px 1px 1px #ffffff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +#changeset .content a.cancel:hover { + border-top: 1px solid #d3d3d3; + border-right: 1px solid #bbbbbb; + border-left: 1px solid #bbbbbb; + border-bottom: 1px solid #a4a4a4; + background-color: #fbfbfb; +} +#changeset .content a.cancel:hover span { + background-color: #fbfbfb; +} +#changeset .content .togglebox form { + float: left; + border: 1px solid #ccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + padding: 15px 10px; + background-color: #faf9ef; + box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.02); + -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.02); + -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.02); +} +#changeset .content .add-review-comment { + margin-bottom: 40px; +} +#changeset .content .add-signoff { + margin-bottom: 40px; +} +#changeset .content .add-signoff form .sign-off-as { + font-weight: bold; + margin-bottom: 0; +} diff -r c4db1e4882dd -r fcbf8d764330 review/static/style.less --- a/review/static/style.less Sat Jun 12 20:51:20 2010 -0400 +++ b/review/static/style.less Sat Jun 12 23:12:15 2010 -0400 @@ -5,11 +5,13 @@ @c-green: #648239; @c-orange: #bf4c18; @c-green-light: #9AF040; -@c-orange-light: #FF6F24; +@c-orange-light: #FF5700; @c-dark: #292620; @c-light: #888888; +@c-metal: #eaeaea; + @content-width: 800px; @content-background: rgb(250, 250, 250); @@ -29,37 +31,35 @@ border-left: 1px solid @sides; border-bottom: 1px solid @bottom; } -.button(@color: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) { +.button(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) { font: bold @fsize @font-normal; - color: @color - #ccc; + color: @bgcolor - #ccc; line-height: @lheight; display: inline-block; text-decoration: none; padding: 1px; - background-color: @color + #0c0c0c; - .box-shadow(0px, 1px, 2px, rgba(0,0,0,0.5)); + background-color: @bgcolor; + .box-shadow(0px, 1px, 3px, rgba(0,0,0,0.1)); .border-radius(4px); - .multi-border((@color - #333), (@color - #444), (@color - #555)); - - span { - background-color: @color; - display: inline-block; - padding: 0 @fsize/2; - text-shadow: 0px 1px 1px (@color + #333); - .border-radius(3px); - } - &:hover { - .multi-border(desaturate(darken(@color, 10%), 10%), desaturate(darken(@color, 20%), 20%), desaturate(darken(@color, 30%), 30%)); - background-color: @color + #111; - span { - background-color: @color + #111; - } - } + .multi-border((@bgcolor - #333), (@bgcolor - #444), (@bgcolor - #555)); &:active { margin-top: 1px; margin-bottom: -1px; } } +.button-span(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) { + display: inline-block; + padding: 0 @fsize/2; + text-shadow: 0px 1px 1px (@bgcolor + #333); + .border-radius(3px); +} +.button-hover(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) { + .multi-border(desaturate(darken(@bgcolor, 10%), 10%), desaturate(darken(@bgcolor, 20%), 20%), desaturate(darken(@bgcolor, 30%), 30%)); + background-color: @bgcolor + #111; +} +.button-hover-span(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) { + background-color: @bgcolor + #111; +} .group:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; @@ -124,8 +124,12 @@ margin-bottom: 0; a { + margin-right: 3px; + .button(@c-cream, #000, 12px, 1.45); - margin-right: 3px; + span { .button-span(@c-cream, #000, 12px, 1.45); } + &:hover { .button-hover(@c-cream, #000, 12px, 1.45); } + &:hover span { .button-hover-span(@c-cream, #000, 12px, 1.45); } } } } @@ -171,70 +175,96 @@ color: @c-orange - #033; } } + .disabled { + display: none; + } } -#index { - .content { - table { - width: 100%; +form { + .field { + position: relative; + + label { + display: inline; - tr { + &.radio { + margin-right: 15px; + } + &.infield { + display: block; + font-family: @font-mono; + position: absolute; + top: 5px; + left: 5px; + } + } + textarea { + font-family: @font-mono; + padding: 5px; + .border-radius(2px); + border: 1px solid #444; + } + } +} + +#index .content { + table { + width: 100%; + + tr { + border: none; + + &:nth-child(even) { + background-color: lighten(@c-cream, 8%); + } + + td { border: none; - &:nth-child(even) { - background-color: lighten(@c-cream, 8%); + a { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } - - td { - border: none; - - a { - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &.node { + .rev { + font-weight: bold; } - &.node { - .rev { - font-weight: bold; - } - .sep { - font-weight: normal; - padding: 0px 2px 0px 1px; - color: lighten(@c-light, 40%); - } - .hash { - color: @c-light; - font: normal 11px @font-mono; - } + .sep { + font-weight: normal; + padding: 0px 2px 0px 1px; + color: lighten(@c-light, 40%); + } + .hash { + color: @c-light; + font: normal 11px @font-mono; } - &.stats { - text-align: right; + } + &.stats { + text-align: right; - .badge { - color: white; - font-weight: bold; - display: inline-block; - line-height: 1; - padding: 4px 5px; - margin-left: 4px; - - .border-radius(3px); + .badge { + color: white; + font-weight: bold; + display: inline-block; + line-height: 1; + padding: 4px 5px; + margin-left: 4px; - &.yes { - background-color: green; - } - &.no { - background-color: red; - } - &.neutral { - background-color: #666; - } - &.comments { - background-color: @c-orange-light; - } + .border-radius(3px); - + &.yes { + background-color: green; + } + &.no { + background-color: red; + } + &.neutral { + background-color: #666; + } + &.comments { + background-color: @c-orange-light; } } } @@ -242,3 +272,61 @@ } } } +#changeset .content { + .fulldesc { + font-size: 18px; + line-height: 1.25; + margin-bottom: 14px; + overflow-x: auto; + overflow-y: hidden; + padding-bottom: 4px; + white-space: pre; + width: 100%; + } + .activate a { + .button(@c-metal, #000, 12px, 1.45); + span { .button-span(@c-metal, #000, 12px, 1.45); } + &:hover { .button-hover(@c-metal, #000, 12px, 1.45); } + &:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); } + } + a.submit { + margin-right: 4px; + .button(@c-metal, #000, 12px, 1.45); + span { .button-span(@c-metal, #000, 12px, 1.45); } + &:hover { .button-hover(@c-metal, #000, 12px, 1.45); } + &:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); } + } + a.cancel { + .button(@c-metal, #000, 12px, 1.45); + span { .button-span(@c-metal, #000, 12px, 1.45); } + &:hover { .button-hover(@c-metal, #000, 12px, 1.45); } + &:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); } + } + .togglebox { + form { + float: left; + border: 1px solid #ccc; + .border-radius(3px); + padding: 15px 10px; + background-color: lighten(@c-cream, 12%); + .box-shadow(0px, 5px, 5px, rgba(0, 0, 0, 0.02); + } + } + + + .add-review-comment { + margin-bottom: 40px; + + } + + .add-signoff { + margin-bottom: 40px; + + form { + .sign-off-as { + font-weight: bold; + margin-bottom: 0; + } + } + } +} diff -r c4db1e4882dd -r fcbf8d764330 review/templates/base.html --- a/review/templates/base.html Sat Jun 12 20:51:20 2010 -0400 +++ b/review/templates/base.html Sat Jun 12 23:12:15 2010 -0400 @@ -5,12 +5,13 @@ - {{ utils["basename"](datastore.target.root) }}/ - hg-review + {% block title %}{% endblock %}{{ utils["basename"](datastore.target.root) }}/ - hg-review + diff -r c4db1e4882dd -r fcbf8d764330 review/templates/changeset.html --- a/review/templates/changeset.html Sat Jun 12 20:51:20 2010 -0400 +++ b/review/templates/changeset.html Sat Jun 12 23:12:15 2010 -0400 @@ -1,11 +1,15 @@ {% extends "base.html" %} -{% block title %} at {{ title }}{% endblock %} -{% block header %} at {{ title }}{% endblock %} +{% block id %}changeset{% endblock %} +{% block title %}Changeset {{ rev.rev() }} of {% endblock %} {% block content %}

Changeset {{ rev.rev() }}: {{ rev.description().splitlines()[0] }}

- + + {% if utils['len'](rev.description().splitlines()) > 1 %} +
{{ "\n".join(rev.description().splitlines()[1:]).strip() }}
+ {% endif %} + {% for comment in rcset.review_level_comments() %}
{{ macros.gravatar(comment, utils) }} @@ -18,25 +22,23 @@
{% endfor %} - + {% if not read_only %} -
-

Add a comment on this changeset

-
+
+ Add a comment on this changeset +
- - + +
-
- - Cancel -
+ Post Comment + Cancel
{% endif %} - +

Signoffs

- + {% for signoff in rcset.signoffs %}
{{ macros.gravatar(signoff, utils) }} @@ -49,43 +51,44 @@
{% endfor %} - + {% if not read_only %} -
-

+

+ {% if cu_signoff %} - Change your signoff + Change your signoff {% else %} - Sign off on this changeset + Sign off on this changeset {% endif %} -

-
+ + +

Sign off as:

- Yes - No - Neutral + + +
- - + +
- - Cancel + Add Signoff + Cancel
{% endif %}

Files

- + {% for filename in rcset.files() %}
   ↓

{{ filename }}

- +
{% for comment in rcset.file_level_comments(filename) %}
@@ -100,11 +103,11 @@
{% endfor %} - + {% if not read_only %}

Add a comment on this file

- +
@@ -118,7 +121,7 @@
{% endif %} - +
@@ -126,7 +129,7 @@ {# 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'] %} @@ -150,7 +153,7 @@ - + {% for comment in line['comments'] %} +
{{ line['number'] }}{{ filename }}
{{ line['number'] }}: {{ line['content'][1:]|escape }}
{{ macros.gravatar(comment, utils) }} @@ -173,4 +176,4 @@ {% endfor %} -{% endblock %} \ No newline at end of file +{% endblock %} diff -r c4db1e4882dd -r fcbf8d764330 review/templates/index.html --- a/review/templates/index.html Sat Jun 12 20:51:20 2010 -0400 +++ b/review/templates/index.html Sat Jun 12 23:12:15 2010 -0400 @@ -2,7 +2,6 @@ {% block id %}index{% endblock %} {% block title %}{% endblock %} -{% block header %}{% endblock %} {% block content %}

Changesets

@@ -10,7 +9,7 @@ {% for rcset in rcsets %} {% set rev = rcset.target[rcset.node] %} {% set node_short = utils['node_short'](rev.node()) %} -
{{ rev.rev() }}:{{ node_short }} {{ rev.description().splitlines()[0] }}