made graphg ticker, and fixes a paging bug caused grapgh disaligment

pylons_app/controllers/changelog.py

@@ -1,90 +1,90
 #!/usr/bin/env python
 # encoding: utf-8
 # changelog controller for pylons
 # Copyright (C) 2009-2010 Marcin Kuzminski <[e-mail]>
  
 # This program is free software; you can redistribute it and/or
 # modify it under the terms of the GNU General Public License
 # as published by the Free Software Foundation; version 2
 # of the License or (at your opinion) any later version of the license.
 # 
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 # 
 # You should have received a copy of the GNU General Public License
 # along with this program; if not, write to the Free Software
 # Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
 # MA  02110-1301, USA.
 """
 Created on April 21, 2010
 changelog controller for pylons
 @author: marcink
 """
 from json import dumps
 from mercurial.graphmod import colored, CHANGESET, revisions as graph_rev
 from pylons import request, session, tmpl_context as c
 from pylons_app.lib.auth import LoginRequired, HasRepoPermissionAnyDecorator
 from pylons_app.lib.base import BaseController, render
 from pylons_app.model.hg_model import HgModel
 from webhelpers.paginate import Page
 import logging
 log = logging.getLogger(__name__)
 
 class ChangelogController(BaseController):
     
     @LoginRequired()
     @HasRepoPermissionAnyDecorator('repository.read', 'repository.write',
                                    'repository.admin')    
     def __before__(self):
         super(ChangelogController, self).__before__()
                 
     def index(self):
         limit = 100
         default = 20
         if request.params.get('size'):
             try:
                 int_size = int(request.params.get('size'))
             except ValueError:
                 int_size = default
             int_size = int_size if int_size <= limit else limit 
             c.size = int_size
             session['changelog_size'] = c.size
             session.save()
         else:
             c.size = int(session.get('changelog_size', default))
 
         changesets = HgModel().get_repo(c.repo_name)
             
         p = int(request.params.get('page', 1))
         c.total_cs = len(changesets)
         c.pagination = Page(changesets, page=p, item_count=c.total_cs,
                             items_per_page=c.size)
             
         self._graph(changesets, c.size, p)
         
         return render('changelog/changelog.html')
 
 
     def _graph(self, repo, size, p):
         revcount = size
         if not repo.revisions:return dumps([]), 0
         
         max_rev = repo.revisions[-1]
-        offset = 1 if p == 1 else  ((p - 1) * revcount)
+        offset = 1 if p == 1 else  ((p - 1) * revcount + 1)
         rev_start = repo.revisions[(-1 * offset)]
         
         revcount = min(max_rev, revcount)
         rev_end = max(0, rev_start - revcount)
         dag = graph_rev(repo.repo, rev_start, rev_end)
         
         c.dag = tree = list(colored(dag))
         data = []
         for (id, type, ctx, vtx, edges) in tree:
             if type != CHANGESET:
                 continue
             data.append(('', vtx, edges))
     
         c.jsdata = dumps(data) 
 

pylons_app/public/css/monoblue_custom.css

@@ -1,946 +1,946
 /*** Initial Settings ***/
 #mainhtml {
 	margin: 15px 50px;
 	background: #DBD4C6;
 	font-family: sans-serif;
 }
 
 #mainhtml .breadcrumbs a:HOVER {
 	text-decoration: underline;
 }
 
 a {
 	color: #556CB5;
 	text-decoration: none;
 }
 
 a:HOVER {
 	text-decoration: underline;
 }
 
 /*** end of Initial Settings ***/ 
 
 /*** ***/
 .table_disp {
 	border-left: 0px solid #666666;
 	border-bottom: 1px solid #666666;
 	border-right: 1px solid #666666;
 	padding: 0px;
 	margin: 0px;
 	border-spacing: 0px;
 }
 
 .table_disp .header {
 	border-top: 1px solid #666666;
 	background-color: #556CB5;
 	font-weight: bold;
 	color: white;
 	vertical-align: middle;
 	padding: 3px 5px;
 	text-align: left;
 	font-size: 0.9em;
 }
 
 .table_disp .header td {
 	padding: 4px;
 	vertical-align: middle;
 	border-top: 1px solid #AAAAAA;
 	border-bottom: 2px solid #666666;
 }
 
 .table_disp td {
 	border-left: 1px solid #AAAAAA;
 	padding-left: 4px;
 	padding-right: 4px;
 }
 
 table tr.parity0:hover,table tr.parity1:hover {
 	background: #D5E1E6;
 }
 
 table tr.parity0 {
 	background: #EAEAE9;
 }
 
 table tr.parity1 {
 	background: #FFFFFF;
 }
 
 /*** ***/ 
 
 /** COMMON SETTINGS **/
 .add_icon {
 	background: url("/images/icons/add.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 }
 
 .edit_icon {
 	background: url("/images/icons/folder_edit.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 }
 
 .delete_icon {
 	background: url("/images/icons/delete.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 }
 
 .action_button {
 	border: 0px;
 	display: block;
 }
 
 .action_button:hover {
 	border: 0px;
 	font-style: italic;
 	cursor: pointer;
 }
 
 .flash_msg ul {
 	margin: 0;
 	padding: 25px 0px 0px 0px;
 }
 
 .error_msg {
 	background-color: #FFCFCF;
 	background-image: url("/images/icons/error_msg.png");
 	border: 1px solid #FF9595;
 	color: #CC3300;
 }
 
 .warning_msg {
 	background-color: #FFFBCC;
 	background-image: url("/images/icons/warning_msg.png");
 	border: 1px solid #FFF35E;
 	color: #C69E00;
 }
 
 .success_msg {
 	background-color: #D5FFCF;
 	background-image: url("/images/icons/success_msg.png");
 	border: 1px solid #97FF88;
 	color: #009900;
 }
 
 .notice_msg {
 	background-color: #DCE3FF;
 	background-image: url("/images/icons/notice_msg.png");
 	border: 1px solid #93A8FF;
 	color: #556CB5;
 }
 
 .success_msg,.error_msg,.notice_msg,.warning_msg {
 	background-position: 10px center;
 	background-repeat: no-repeat;
 	font-size: 12px;
 	font-weight: bold;
 	min-height: 14px;
 	line-height: 14px;
 	margin-bottom: 0px;
 	margin-top: 0px;
 	padding: 3px 10px 3px 40px;
 	display: block;
 	overflow: auto;
 }
 
 #msg_close {
 	background: transparent url("icons/cross_grey_small.png") no-repeat
 		scroll 0 0;
 	cursor: pointer;
 	height: 16px;
 	position: absolute;
 	right: 5px;
 	top: 5px;
 	width: 16px;
 }
 
 .error-message {
 	color: #CC3300;
 }
 
 /**** TOOLTIP ****/
 .yui-overlay,.yui-panel-container {
 	visibility: hidden;
 	position: absolute;
 	z-index: 2;
 }
 
 .yui-tt {
 	visibility: hidden;
 	position: absolute;
 	color: #666666;
 	background-color: #FFFFFF;
 	font-family: arial, helvetica, verdana, sans-serif;
 	padding: 8px;
 	border: 2px solid #556CB5;
 	font: 100% sans-serif;
 	width: auto;
 	opacity: 1.0;
 }
 
 .yui-tt-shadow {
 	display: none;
 }
 
 /** END TOOLTIP **/ 
 
 /** AUTOCOMPLETE **/ 
 
 .ac{
 	vertical-align: top;
 
 }
 .ac .match {
     font-weight:bold;
 }
 
 .ac .yui-ac {
 	position: relative;
 	font-family: arial;
 	font-size: 100%;
 }
 
 .ac #perm_ac{
 	width:15em;
 }
 /* styles for input field */
 .ac .yui-ac-input {
 	position: absolute;
 	width: 100%;
 }
 
 /* styles for results container */
 .ac .yui-ac-container {
 	position: absolute;
 	top: 1.6em;
 	width: 100%;
 }
 
 /* styles for header/body/footer wrapper within container */
 .ac .yui-ac-content {
 	position: absolute;
 	width: 100%;
 	border: 1px solid #808080;
 	background: #fff;
 	overflow: hidden;
 	z-index: 9050;
 }
 
 /* styles for container shadow */
 .ac .yui-ac-shadow {
 	position: absolute;
 	margin: .3em;
 	width: 100%;
 	background: #000;
 	-moz-opacity: 0.10;
 	opacity: .10;
 	filter: alpha(opacity = 10);
 	z-index: 9049;
 }
 
 /* styles for results list */
 .ac .yui-ac-content ul {
 	margin: 0;
 	padding: 0;
 	width: 100%;
 }
 
 /* styles for result item */
 .ac .yui-ac-content li {
 	margin: 0;
 	padding: 2px 5px;
 	cursor: default;
 	white-space: nowrap;
 }
 
 /* styles for prehighlighted result item */
 .ac .yui-ac-content li.yui-ac-prehighlight {
 	background: #B3D4FF;
 }
 
 /* styles for highlighted result item */
 .ac .yui-ac-content li.yui-ac-highlight {
 	background: #556CB5;
 	color: #FFF;
 }
 
 /** END AUTOCOMPLETE **/
 div#main {
 	padding: 5px;
 }
 
 div#container {
 	background: #FFFFFF;
 	position: relative;
 	color: #666;
 }
 
 div.page-header {
 	padding: 50px 20px 0;
 	background: #556cb5 top left repeat-x;
 	position: relative;
 }
 
 div.page-header h1 {
 	margin: 10px 0 30px;
 	font-size: 1.8em;
 	font-weight: bold;
 	font-family: sans-serif;
 	letter-spacing: 1px;
 	color: #FFFFFF;
 }
 
 div.page-header h1 a {
 	font-weight: bold;
 	color: #FFFFFF;
 }
 
 div.page-header a {
 	text-decoration: none;
 }
 
 div.page-header form {
 	position: absolute;
 	margin-bottom: 2px;
 	bottom: 0;
 	right: 20px;
 }
 
 div.page-header form label {
 	color: #DDD;
 }
 
 div.page-header form input {
 	padding: 2px;
 	border: solid 1px #DDD;
 }
 
 div.page-header form dl {
 	overflow: hidden;
 }
 
 div.page-header form dl dt {
 	font-size: 1.2em;
 }
 
 div.page-header form dl dt,div.page-header form dl dd {
 	margin: 0 0 0 5px;
 	float: left;
 	height: 24px;
 	line-height: 20px;
 }
 
 ul.page-nav {
 	margin: 10px 0 0 0;
 	list-style-type: none;
 	overflow: hidden;
 	width: 800px;
 	padding: 0;
 }
 
 ul.page-nav li {
 	margin: 0 4px 0 0;
 	float: left;
 	height: 24px;
 	font-size: 1.1em;
 	line-height: 24px;
 	text-align: center;
 	background: #556CB5;
 }
 
 ul.page-nav li.current {
 	background: #FFF;
 	padding-right: 5px;
 	padding-left: 5px;
 }
 
 ul.page-nav li.current a {
 	color: #556CB5;
 }
 
 ul.page-nav li a {
 	height: 24px;
 	color: #FFF;
 	padding-right: 5px;
 	padding-left: 5px;
 	display: block;
 	text-decoration: none;
 	font-weight: bold;
 }
 
 ul.page-nav li.logout a {
 	color: #FDAC9D;
 }
 
 ul.page-nav li a:hover {
 	background: #FFF;
 	color: #556CB5;
 }
 
 ul.submenu {
 	margin: 5px 0px -20px 0px;
 	list-style-type: none;
 }
 
 ul.submenu li {
 	margin: 0 10px 0 0;
 	font-size: 0.9em;
 	font-weight: bold;
 	display: inline;
 }
 
 ul.submenu .repos {
 	background: url("/images/icons/folder_edit.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 }
 
 ul.submenu .users {
 	background: url("/images/icons/user_edit.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 }
 
 ul.submenu .permissions {
 	background: url("/images/icons/folder_key.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 }
 
 ul.submenu .current_submenu {
 	border-bottom: 2px solid #556CB5;
 }
 
 h2 {
 	margin: 20px 0 10px;
 	height: 30px;
 	line-height: 30px;
 	text-indent: 20px;
 	background: #FFF;
 	font-size: 1.2em;
 	border-top: dotted 1px #D5E1E6;
 	font-weight: bold;
 	color: #556CB5;
 }
 
 h2.no-link {
 	color: #006699;
 }
 
 h2.no-border {
 	color: #FFF;
 	background: #556CB5;
 	border: 0;
 }
 
 h2 a {
 	font-weight: bold;
 	color: #006699;
 }
 
 div.page-path {
 	text-align: right;
 	padding: 20px 30px 10px 0;
 	border: solid #d9d8d1;
 	border-width: 0px 0px 1px;
 	font-size: 1.2em;
 }
 
 div.page-footer {
 	margin: 50px 0 0;
 	position: relative;
 	text-align: center;
 	font-weight: bold;
 	font-size: 90%;
 }
 
 div.page-footer p {
 	position: relative;
 	left: 20px;
 	bottom: 5px;
 	font-size: 1.2em;
 }
 
 ul.rss-logo {
 	position: absolute;
 	top: -10px;
 	right: 20px;
 	height: 20px;
 	list-style-type: none;
 }
 
 ul.rss-logo li {
 	display: inline;
 }
 
 ul.rss-logo li a {
 	padding: 3px 6px;
 	line-height: 10px;
 	border: 1px solid;
 	border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
 	color: #ffffff;
 	background-color: #ff6600;
 	font-weight: bold;
 	font-family: sans-serif;
 	font-size: 10px;
 	text-align: center;
 	text-decoration: none;
 }
 
 div.rss-logo li a:hover {
 	background-color: #ee5500;
 }
 
 p.normal {
 	margin: 20px 0 20px 30px;
 	font-size: 1.2em;
 }
 
 span.logtags span {
 	background-repeat: no-repeat;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 	font-weight: bold;
 }
 
 span.logtags span.tagtag {
 	background-image: url("/images/icons/tag_green.png");
 }
 
 span.logtags span.branchtag {
 	background-image: url("/images/icons/arrow_branch.png");
 	color: #628F53;
 }
 
 span.logtags span.inbranchtag {
 	background-image: url("/images/icons/arrow_branch.png");
 }
 
 div.diff pre {
 	margin: 10px 0 0 0;
 }
 
 div.diff pre span {
 	font-family: monospace;
 	white-space: pre;
 	font-size: 1.2em;
 	padding: 3px 0;
 }
 
 td.source {
 	white-space: pre;
 	font-family: monospace;
 	margin: 10px 30px 0;
 	font-size: 1.2em;
 	font-family: monospace;
 }
 
 div.source div.parity0,div.source div.parity1 {
 	padding: 1px;
 	font-size: 1.2em;
 }
 
 div.source div.parity0 {
 	background: #F1F6F7;
 }
 
 div.source div.parity1 {
 	background: #FFFFFF;
 }
 
 div.parity0:hover,div.parity1:hover {
 	background: #D5E1E6;
 }
 
 .linenr {
 	color: #999;
 	text-align: right;
 }
 
 .lineno {
 	text-align: right;
 }
 
 .lineno a {
 	color: #999;
 }
 
 td.linenr {
 	width: 60px;
 }
 
 div#powered-by {
 	position: absolute;
 	width: 75px;
 	top: 15px;
 	right: 20px;
 	font-size: 1.2em;
 }
 
 div#powered-by a {
 	color: #EEE;
 	text-decoration: none;
 }
 
 div#powered-by a:hover {
 	text-decoration: underline;
 }
 
 dl.overview {
 	margin: 0 0 0 30px;
 	font-size: 1.1em;
 	overflow: hidden;
 }
 
 dl.overview dt,dl.overview dd {
 	margin: 5px 0;
 	float: left;
 }
 
 dl.overview dt {
 	clear: left;
 	font-weight: bold;
 	width: 150px;
 }
 
 #clone_url {
 	border: 0px;
 }
 
 /** end of summary **/ /** chagelog **/
 h3.changelog {
 	margin: 20px 0 5px 30px;
 	padding: 0 0 2px;
 	font-size: 1.4em;
 	border-bottom: dotted 1px #D5E1E6;
 }
 
 ul.changelog-entry {
 	margin: 0 0 10px 30px;
 	list-style-type: none;
 	position: relative;
 }
 
 ul.changelog-entry li span.revdate {
 	font-size: 1.1em;
 }
 
 ul.changelog-entry li.age {
 	position: absolute;
 	top: -25px;
 	right: 10px;
 	font-size: 1.4em;
 	color: #CCC;
 	font-weight: bold;
 	font-style: italic;
 }
 
 ul.changelog-entry li span.name {
 	font-size: 1.2em;
 	font-weight: bold;
 }
 
 ul.changelog-entry li.description {
 	margin: 10px 0 0;
 	font-size: 1.1em;
 }
 
 /** end of changelog **/ /** file **/
 p.files {
 	margin: 0 0 0 20px;
 	font-size: 2.0em;
 	font-weight: bold;
 }
 
 /** end of file **/ /** changeset **/
 #changeset_content {
 	width: 60%;
 	float: left;
 }
 
 #changeset_content .container .wrapper {
 	width: 600px;
 }
 
 #changeset_content .container {
 	border: 1px solid #CCCCCC;
 	height: 120px;
 }
 
 #changeset_content .container .left {
 	float: left;
 	width: 70%;
 	padding-left: 5px;
 }
 
 #changeset_content .container .right {
 	float: right;
 	width: 25%;
 	text-align: right;
 }
 
 #changeset_content .container .left .date {
 	font-weight: bold;
 }
 
 #changeset_content .container .left .author {
 	
 }
 
 #changeset_content .container .left .message {
 	font-style: italic;
 	color: #556CB5;
 }
 
 .cs_files {
 	width: 60%;
 }
 
 .cs_files .cs_added {
 	background: url("/images/icons/page_white_add.png") no-repeat scroll 3px;
 	/*background-color:#BBFFBB;*/
 	height: 16px;
 	padding-left: 20px;
 	margin-top: 7px;
 	text-align: left;
 }
 
 .cs_files .cs_changed {
 	background: url("/images/icons/page_white_edit.png") no-repeat scroll
 		3px;
 	/*background-color: #FFDD88;*/
 	height: 16px;
 	padding-left: 20px;
 	margin-top: 7px;
 	text-align: left;
 }
 
 .cs_files .cs_removed {
 	background: url("/images/icons/page_white_delete.png") no-repeat scroll
 		3px;
 	/*background-color: #FF8888;*/
 	height: 16px;
 	padding-left: 20px;
 	margin-top: 7px;
 	text-align: left;
 }
 
 /** end of changeset **/ /** canvas **/
-#graph_nodes {
-	margin-top: 8px;
-}
 
 #graph {
 	overflow: hidden;
 }
 
 #graph_nodes {
 	width: 160px;
 	float: left;
+	margin-left:-50px;
+	margin-top: 5px;
 }
 
 #graph_content {
 	width: 800px;
 	float: left;
 }
 
 #graph_content .container_header {
 	border: 1px solid #CCCCCC;
 	height: 30px;
 	background: #EEEEEE;
 }
 
 #graph_content .container .wrapper {
 	width: 600px;
 }
 
 #graph_content .container {
 	border-bottom: 1px solid #CCCCCC;
 	border-left: 1px solid #CCCCCC;
 	border-right: 1px solid #CCCCCC;
-	height: 120px;
+	min-height: 80px;
+	overflow: hidden;
 }
 
 #graph_content .container .left {
 	float: left;
 	width: 70%;
 	padding-left: 5px;
 }
 
 #graph_content .container .right {
 	float: right;
 	width: 25%;
 	text-align: right;
 }
 
 #graph_content .container .left .date {
 	font-weight: bold;
 }
 
 #graph_content .container .left .author {
 	
 }
 
 #graph_content .container .left .message {
 	font-size: 80%;
 }
 
 .right div {
 	clear: both;
 }
 
 .right .changes .added,.changed,.removed {
 	border: 1px solid #DDDDDD;
 	display: block;
 	float: right;
 	font-size: 0.75em;
 	text-align: center;
 	min-width: 15px;
 }
 
 .right .changes .added {
 	background: #BBFFBB;
 }
 
 .right .changes .changed {
 	background: #FFDD88;
 }
 
 .right .changes .removed {
 	background: #FF8888;
 }
 
 .right .merge {
 	vertical-align: top;
 	font-size: 60%;
 	font-weight: bold;
 }
 
 .right .merge img {
 	vertical-align: bottom;
 }
 
 .right .parent {
 	font-size: 90%;
 	font-family: monospace;
 }
 
 /** end of canvas **/ /* FILE BROWSER */
 div.browserblock {
 	overflow: hidden;
 	padding: 0px;
 	border: 1px solid #ccc;
 	background: #f8f8f8;
 	font-size: 100%;
 	line-height: 100%;
 	/* new */
 	line-height: 125%;
 }
 
 div.browserblock .browser-header {
 	border-bottom: 1px solid #CCCCCC;
 	background: #EEEEEE;
 	color: blue;
 	padding: 10px 0 10px 0;
 }
 
 div.browserblock .browser-header span {
 	margin-left: 25px;
 	font-weight: bold;
 }
 
 div.browserblock .browser-body {
 	background: #EEEEEE;
 }
 
 table.code-browser {
 	border-collapse: collapse;
 	width: 100%;
 }
 
 table.code-browser tr {
 	margin: 3px;
 }
 
 table.code-browser thead th {
 	background-color: #EEEEEE;
 	height: 20px;
 	font-size: 1.1em;
 	font-weight: bold;
 	text-align: center;
 	text-align: left;
 	padding-left: 10px;
 }
 
 table.code-browser tbody tr {
 	
 }
 
 table.code-browser tbody td {
 	padding-left: 10px;
 	height: 20px;
 }
 
 .info-table {
 	background: none repeat scroll 0 0 #FAFAFA;
 	border-bottom: 1px solid #DDDDDD;
 	width: 100%;
 }
 
 .rss_logo {
 	background: url("/images/icons/rss_16.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 }
 
 .atom_logo {
 	background: url("/images/icons/atom.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	padding-top: 0px;
 	text-align: left;
 }
 
 .archive_logo {
 	background: url("/images/icons/compress.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	text-align: left;
 }
 
 .browser-file {
 	background: url("/images/icons/document_16.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	text-align: left;
 }
 
 .browser-dir {
 	background: url("/images/icons/folder_16.png") no-repeat scroll 3px;
 	height: 16px;
 	padding-left: 20px;
 	text-align: left;
 }
 
 #repos_list {
 	border: 1px solid #556CB5;
 	background: #FFFFFF;
 }
  No newline at end of file

pylons_app/public/js/graph.js

@@ -1,132 +1,135
 // branch_renderer.js - Rendering of branch DAGs on the client side
 //
+// Copyright 2010 Marcin Kuzminski <marcin AT python-works DOT com>
 // Copyright 2008 Jesper Noehr <jesper AT noehr DOT org>
 // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl>
 // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de>
 //
 // derived from code written by Scott James Remnant <[e-mail]>
 // Copyright 2005 Canonical Ltd.
 //
 // This software may be used and distributed according to the terms
 // of the GNU General Public License, incorporated herein by reference.
 
 var colors = [
 	[ 1.0, 0.0, 0.0 ],
 	[ 1.0, 1.0, 0.0 ],
 	[ 0.0, 1.0, 0.0 ],
 	[ 0.0, 1.0, 1.0 ],
 	[ 0.0, 0.0, 1.0 ],
 	[ 1.0, 0.0, 1.0 ],
 	[ 1.0, 1.0, 0.0 ],
 	[ 0.0, 0.0, 0.0 ]
 ];
 
 function BranchRenderer() {
 	
 	this.canvas = document.getElementById("graph_canvas");
 	
 	if (navigator.userAgent.indexOf('MSIE') >= 0) 
 		this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
 	this.ctx = this.canvas.getContext('2d');
 	this.ctx.strokeStyle = 'rgb(0, 0, 0)';
 	this.ctx.fillStyle = 'rgb(0, 0, 0)';
 	this.cur = [0, 0];
 	this.max_column = 1;
-	this.line_width = 3;
+	this.line_width = 2.5;
+	this.dot_radius = 5.5;
 	this.bg = [0, 4];
 	this.cell = [2, 0];
 	this.revlink = '';
 	
 	this.scale = function(height) {
 		this.box_size = Math.floor(height/1.2);
 		this.cell_height = this.box_size;
 		this.bg_height = height;
 	}
 	
 	this.setColor = function(color, bg, fg) {
 		color %= colors.length;
 		var red = (colors[color][0] * fg) || bg;
 		var green = (colors[color][1] * fg) || bg;
 		var blue = (colors[color][2] * fg) || bg;
 		red = Math.round(red * 255);
 		green = Math.round(green * 255);
 		blue = Math.round(blue * 255);
 		var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
 		this.ctx.strokeStyle = s;
 		this.ctx.fillStyle = s;
 	}
 
 	this.render = function(data) {
 		var idx = 1;
 		var rela = document.getElementById('graph');
 		var pad = 160;
-		var scale = 20;
+		var scale = 22;
 		
 		for (var i in data) {
 			this.scale(scale);
 			var row = document.getElementById("chg_"+idx);
 			var	next = document.getElementById("chg_"+idx+1);
 			var extra = 0;
 			
 			//skip this since i don't have DATE in my app
 			//if (next.is('.changesets-date')) {
 			//	extra = next.outerHeight();
 			//}
 						
 			
 			this.cell[1] += row.clientWidth;
 			this.bg[1] += this.bg_height;
 			
 			cur = data[i];
 			nodeid = cur[0];
 			node = cur[1];
 			in_l = cur[2];
 			
 			for (var j in in_l) {
 				
 				line = in_l[j];
 				start = line[0];
 				end = line[1];
 				color = line[2];
 
 				if (start > this.max_column) {
 					this.max_column = start;
 				}
 				
 				if (end > this.max_column) {
 					this.max_column = end;
 				}
 				
 				this.setColor(color, 0.0, 0.65);
 				
 				
 				y = row.offsetTop-rela.offsetTop+4;
 				x = pad-((this.cell[0] + this.box_size * start - 1) + this.bg_height-2);
+				this.ctx.lineWidth=this.line_width;
 				this.ctx.beginPath();
 				this.ctx.moveTo(x, y);
 				
 				//i don't know why it's +1 just fixes some drawing graph.
 				y += row.clientHeight+1;
 				x = pad-((1 + this.box_size * end) + this.bg_height-2);
-				this.ctx.lineTo(x,y+extra);
+				this.ctx.lineTo(x,y+extra,3);
 				this.ctx.stroke();
 			}
 			
 			column = node[0]
 			color = node[1]
 			
-			radius = 4;
+			radius = this.dot_radius;
 			y = row.offsetTop-rela.offsetTop+4;
 			x = pad-(Math.round(this.cell[0] * scale/2 * column + radius) + 15 - (column*4));
 		
 			this.ctx.beginPath();
 			this.setColor(color, 0.25, 0.75);
 			this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
 			this.ctx.fill();
 			
 			idx++;
 		}
 				
 	}
 
 }

pylons_app/templates/changelog/changelog.html

@@ -1,108 +1,108
 <%inherit file="/base/base.html"/>
 
 <%def name="title()">
     ${_('Changelog - %s') % c.repo_name}
 </%def>
 <%def name="breadcrumbs()">
     ${h.link_to(u'Home',h.url('/'))}
     / 
     ${h.link_to(c.repo_name,h.url('changelog_home',repo_name=c.repo_name))}
     /
     ${_('changelog')}
 </%def>
 <%def name="page_nav()">
 	${self.menu('changelog')}     
 </%def>
 
 <%def name="main()">
 
     <h2 class="no-link no-border">${_('Changelog')} - ${_('showing ')} 
     	${c.size if c.size <= c.total_cs else c.total_cs}
     	${_('out of')} ${c.total_cs} ${_('revisions')}
     </h2>
 	<noscript>${_('The revision graph only works with JavaScript-enabled browsers.')}</noscript>
 % if c.pagination:
 
 <div id="graph">
 	<div id="graph_nodes">
 		<canvas id="graph_canvas"></canvas>
 	</div>
 	<div id="graph_content">
 		<div class="container_header">
 			${h.form(h.url.current(),method='get')}
 			<div>
 				<span>${_('Show')}: </span>
 				<span>${h.text('size',size=2,value=c.size)}</span>
 				<span>${_('revisions')}</span>
 				${h.submit('set',_('set'))}
 			</div>
 			${h.end_form()}
 		</div>
 	%for cnt,cs in enumerate(c.pagination):
 		<div id="chg_${cnt+1}" class="container">
 			<div class="left">
 				<div class="date">${_('commit')} ${cs.revision}: ${cs.raw_id}@${cs.date}</div>
-				<div class="author">${cs.author}</div>
-				<div class="message">
-					${h.link_to(h.wrap_paragraphs(cs.message),
-					h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
-				</div>
 					<span class="logtags">
 						<span class="branchtag">${cs.branch}</span>
 						%for tag in cs.tags:
 							<span class="tagtag">${tag}</span>
 						%endfor
 					</span>
+				<div class="author">${cs.author}</div>
+				<div class="message">
+					${h.link_to(h.wrap_paragraphs(cs.message),
+					h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
+				</div>
 			</div>	
 			<div class="right">
 						<div class="changes">
 							<span class="removed" title="${_('removed')}">${len(cs.removed)}</span>
 							<span class="changed" title="${_('changed')}">${len(cs.changed)}</span>
 							<span class="added" title="${_('added')}">${len(cs.added)}</span>
 						</div>					
 							%if len(cs.parents)>1:
 							<div class="merge">
 								${_('merge')}<img alt="merge" src="/images/icons/arrow_join.png"/>
 							</div>
 							%endif						
 						%for p_cs in reversed(cs.parents):
 							<div class="parent">${_('Parent')} ${p_cs.revision}: ${h.link_to(p_cs.raw_id,
 								h.url('changeset_home',repo_name=c.repo_name,revision=p_cs.raw_id),title=p_cs.message)}
 							</div>
 						%endfor								
 			</div>				
 		</div>
 		
 	%endfor
 	</div>
 </div>
 <script type="text/javascript" src="/js/graph.js"></script>
 
 <script type="text/javascript">
 YAHOO.util.Event.onDOMReady(function(){
 	function set_canvas() {
 		var c = document.getElementById('graph_nodes');
 		var t = document.getElementById('graph_content');
 		canvas = document.getElementById('graph_canvas');
 		var div_h = t.clientHeight;
 		c.style.height=div_h+'px';
 		canvas.setAttribute('height',div_h);
 		canvas.setAttribute('width',160);
 	};
 
 	set_canvas();
 	
 	var jsdata = ${c.jsdata|n};
 	var r = new BranchRenderer();
 	r.render(jsdata); 
 
 });
 </script>
 
 <div>
 	<h2>${c.pagination.pager('$link_previous ~2~ $link_next')}</h2>
 </div>	
 %else:
 	${_('There are no changes yet')}
 %endif
 </%def>    
  No newline at end of file