jro_apps/redmine Commit - r8747:d8fed7d515bf

Better handling of horizontal position....

Etienne Massip -

r8747:d8fed7d515bf

parent child

Context file:

r8747:d8fed7d515bf

Collapse all files

public/javascripts/revision_graph.js +10 -9

             var revisionGraph = null;
             function drawRevisionGraph(holder, commits_hash, graph_space) {
                 var XSTEP = 20,
                     CIRCLE_INROW_OFFSET = 10;
                 var commits_by_scmid = $H(commits_hash),
                     commits = commits_by_scmid.values();
                 var max_rdmid = commits.length - 1;
                 var commit_table_rows = $$('table.changesets tr.changeset');
                 // create graph
                 if(revisionGraph != null)
                     revisionGraph.clear();
                 else
                     revisionGraph = Raphael(holder);
                 var top = revisionGraph.set();
                 // init dimensions
-                var graph_offset = $(holder).getLayout().get('top'),
+                var graph_x_offset = Element.select(commit_table_rows.first(),'td').first().getLayout().get('left') - $(holder).getLayout().get('left'),
-                    graph_width = (graph_space + 1) * XSTEP,
+                    graph_y_offset = $(holder).getLayout().get('top'),
-                    graph_height = commit_table_rows[max_rdmid].getLayout().get('top') + commit_table_rows[max_rdmid].getLayout().get('height') - graph_offset;
+                    graph_right_side = graph_x_offset + (graph_space + 1) * XSTEP,
+                    graph_bottom = commit_table_rows.last().getLayout().get('top') + commit_table_rows.last().getLayout().get('height') - graph_y_offset;
-                revisionGraph.setSize(graph_width, graph_height);
+                revisionGraph.setSize(graph_right_side, graph_bottom);
                 // init colors
                 var colors = [];
                 Raphael.getColor.reset();
                 for (var k = 0; k <= graph_space; k++) {
                     colors.push(Raphael.getColor());
                 }
                 var parent_commit;
                 var x, y, parent_x, parent_y;
                 var path, longrefs, shortrefs, label, labelBBox;
                 commits.each(function(commit) {
-                    y = commit_table_rows[max_rdmid - commit.rdmid].getLayout().get('top') - graph_offset + CIRCLE_INROW_OFFSET;
+                    y = commit_table_rows[max_rdmid - commit.rdmid].getLayout().get('top') - graph_y_offset + CIRCLE_INROW_OFFSET;
-                    x = XSTEP / 2 + XSTEP * commit.space;
+                    x = graph_x_offset + XSTEP / 2 + XSTEP * commit.space;
                     revisionGraph.circle(x, y, 3).attr({fill: colors[commit.space], stroke: 'none'});
                     // title
                     if (commit.refs != null && commit.refs != '') {
                         longrefs  = commit.refs;
                         shortrefs = longrefs.length > 15 ? longrefs.substr(0, 13) + '...' : longrefs;
                         label = revisionGraph.text(x + 5, y + 5, shortrefs)
                             .attr({
                                 font: '12px Fontin-Sans, Arial',
                                 fill: '#666',
                                 title: longrefs,
                                 cursor: 'pointer',
                                 rotation: '0'});
                         labelBBox = label.getBBox();
                         label.translate(labelBBox.width / 2, -labelBBox.height / 3);
                     }
                     // paths to parents
                     commit.parent_scmids.each(function(parent_scmid) {
                         parent_commit = commits_by_scmid.get(parent_scmid);
                         if (parent_commit) {
-                            parent_y = commit_table_rows[max_rdmid - parent_commit.rdmid].getLayout().get('top') - graph_offset + CIRCLE_INROW_OFFSET;
+                            parent_y = commit_table_rows[max_rdmid - parent_commit.rdmid].getLayout().get('top') - graph_y_offset + CIRCLE_INROW_OFFSET;
-                            parent_x = XSTEP / 2 + XSTEP * parent_commit.space;
+                            parent_x = graph_x_offset + XSTEP / 2 + XSTEP * parent_commit.space;
                             if (parent_commit.space == commit.space) {
                                 // vertical path
                                 path = revisionGraph.path([
                                     'M', x, y,
                                     'V', parent_y]);
                             } else {
                                 // path to a commit in a different branch (Bezier curve)
                                 path = revisionGraph.path([
                                     'M', x, y,
                                     'C', x, y, x, y + (parent_y - y) / 2, x + (parent_x - x) / 2, y + (parent_y - y) / 2,
                                     'C', x + (parent_x - x) / 2, y + (parent_y - y) / 2, parent_x, parent_y-(parent_y-y)/2, parent_x, parent_y]);
                             }
                         } else {
                             // vertical path ending at the bottom of the revisionGraph
                             path = revisionGraph.path([
                                 'M', x, y,
-                                'V', graph_height]);
+                                'V', graph_bottom]);
                         }
                         path.attr({stroke: colors[commit.space], "stroke-width": 1.5});
                     });
                     top.push(revisionGraph.circle(x, y, 10)
                         .attr({
                             fill: '#000',
                             opacity: 0,
                             cursor: 'pointer',
                             href: commit.href})
                         .hover(function () {}, function () {}));
                 });
                 top.toFront();
             };

public/stylesheets/scm.css +1 -1

             table.revision-info td {
                 margin:  0px;
                 padding: 0px;
             }
-            div.revision-graph { position: absolute; overflow:hidden; }
+            div.revision-graph { position: absolute; }
             div.changeset-changes ul { margin: 0; padding: 0; }
             div.changeset-changes ul > ul { margin-left: 18px; padding: 0; }
             li.change {
                 list-style-type:none;
                 background-image: url(../images/bullet_black.png);
                 background-position: 1px 1px;
                 background-repeat: no-repeat;
                 padding-top: 1px;
                 padding-bottom: 1px;
                 padding-left: 20px;
                 margin: 0;
             }
             li.change.folder { background-image: url(../images/folder_open.png); }
             li.change.folder.change-A { background-image: url(../images/folder_open_add.png); }
             li.change.folder.change-M { background-image: url(../images/folder_open_orange.png); }
             li.change.change-A { background-image: url(../images/bullet_add.png); }
             li.change.change-M { background-image: url(../images/bullet_orange.png); }
             li.change.change-C { background-image: url(../images/bullet_blue.png); }
             li.change.change-R { background-image: url(../images/bullet_purple.png); }
             li.change.change-D { background-image: url(../images/bullet_delete.png); }
             li.change .copied-from { font-style: italic; color: #999; font-size: 0.9em; }
             li.change .copied-from:before { content: " - "}
             #changes-legend { float: right; font-size: 0.8em; margin: 0; }
             #changes-legend li { float: left; background-position: 5px 0; }
             table.filecontent { border: 1px solid #ccc;  border-collapse: collapse; width:98%; background-color: #fafafa; }
             table.filecontent th { border: 1px solid #ccc; background-color: #eee; }
             table.filecontent th.filename { background-color: #e4e4d4; text-align: left; padding: 0.2em;}
             table.filecontent tr.spacing th { text-align:center; }
             table.filecontent tr.spacing td { height: 0.4em; background: #EAF2F5;}
             table.filecontent th.line-num {
                 border: 1px solid #d7d7d7;
                 font-size: 0.8em;
                 text-align: right;
                 width: 2%;
                 padding-right: 3px;
                 color: #999;
                 user-select: none;
                 -moz-user-select: none;
                 -o-user-select: none;
                 -ms-user-select: none;
                 -webkit-user-select: none;
             }
             table.filecontent th.line-num a {
                 text-decoration: none;
                 color: inherit;
             }
             table.filecontent td.line-code pre {
                 margin: 0px;
                 white-space: pre-wrap;
             }
             /* 12 different colors for the annonate view */
             table.annotate tr.bloc-0 {background: #FFFFBF;}
             table.annotate tr.bloc-1 {background: #EABFFF;}
             table.annotate tr.bloc-2 {background: #BFFFFF;}
             table.annotate tr.bloc-3 {background: #FFD9BF;}
             table.annotate tr.bloc-4 {background: #E6FFBF;}
             table.annotate tr.bloc-5 {background: #BFCFFF;}
             table.annotate tr.bloc-6 {background: #FFBFEF;}
             table.annotate tr.bloc-7 {background: #FFE6BF;}
             table.annotate tr.bloc-8 {background: #FFE680;}
             table.annotate tr.bloc-9 {background: #AA80FF;}
             table.annotate tr.bloc-10 {background: #FFBFDC;}
             table.annotate tr.bloc-11 {background: #BFE4FF;}
             table.annotate td.revision {
                 text-align: center;
                 width: 2%;
                 padding-left: 1em;
                 background: inherit;
             }
             table.annotate td.author {
                 text-align: center;
                 border-right: 1px solid #d7d7d7;
                 white-space: nowrap;
                 padding-left: 1em;
                 padding-right: 1em;
                 width: 3%;
                 background: inherit;
                 font-size: 90%;
             }
             table.annotate td.line-code { background-color: #fafafa; }
             div.action_M { background: #fd8 }
             div.action_D { background: #f88 }
             div.action_A { background: #bfb }
             /************* CodeRay styles *************/
             .syntaxhl div {display: inline;}
             .syntaxhl .line-numbers {
                 padding: 2px 4px 2px 4px; background-color: #eee; margin:0px 5px 0px 0px;
                 user-select: none;
                 -moz-user-select: none;
                 -o-user-select: none;
                 -ms-user-select: none;
                 -webkit-user-select: none;
             }
             .syntaxhl .code pre { overflow: auto }
             .syntaxhl .debug { color:white ! important; background:blue ! important; }
             .syntaxhl .attribute-name { color:#b48 }
             .syntaxhl .annotation { color:#007 }
             .syntaxhl .attribute-value { color:#700 }
             .syntaxhl .binary { color:#509 }
             .syntaxhl .comment { color:#777 }
             .syntaxhl .comment .char { color:#444 }
             .syntaxhl .comment .delimiter { color:#444 }
             .syntaxhl .char { color:#D20 }
             .syntaxhl .char .content { color:#D20 }
             .syntaxhl .char .delimiter { color:#710 }
             .syntaxhl .class { color:#B06; font-weight:bold }
             .syntaxhl .complex { color:#A08 }
             .syntaxhl .constant { color:#036; font-weight:bold }
             .syntaxhl .color { color:#0A0 }
             .syntaxhl .class-variable { color:#369 }
             .syntaxhl .decorator { color:#B0B }
             .syntaxhl .definition { color:#099; font-weight:bold }
             .syntaxhl .directive { color:#088; font-weight:bold }
             .syntaxhl .delimiter { color:black }
             .syntaxhl .doc { color:#970 }
             .syntaxhl .doctype { color:#34b }
             .syntaxhl .doc-string { color:#D42; font-weight:bold }
             .syntaxhl .escape  { color:#666 }
             .syntaxhl .entity { color:#800; font-weight:bold }
             .syntaxhl .error { color:#F00; background-color:#FAA }
             .syntaxhl .exception { color:#C00; font-weight:bold }
             .syntaxhl .float { color:#60E }
             .syntaxhl .function { color:#06B; font-weight:bold }
             .syntaxhl .global-variable { color:#d70 }
             .syntaxhl .hex { color:#02b }
             .syntaxhl .integer  { color:#00D }
             .syntaxhl .include { color:#B44; font-weight:bold }
             .syntaxhl .imaginary { color:#f00 }
             .syntaxhl .inline { background-color: hsla(0,0%,0%,0.07); color: black }
             .syntaxhl .inline-delimiter { font-weight: bold; color: #666 }
             .syntaxhl .instance-variable { color:#33B }
             .syntaxhl .label { color:#970; font-weight:bold }
             .syntaxhl .local-variable { color:#963 }
             .syntaxhl .namespace { color:#707; font-weight:bold }
             .syntaxhl .octal { color:#40E }
             .syntaxhl .operator { }
             .syntaxhl .predefined-constant { color:#069 }
             .syntaxhl .predefined { color:#369; font-weight:bold }
             .syntaxhl .predefined-type { color:#0a5; font-weight:bold }
             .syntaxhl .preprocessor { color:#579 }
             .syntaxhl .pseudo-class { color:#00C; font-weight:bold }
             .syntaxhl .reserved { color:#080; font-weight:bold }
             .syntaxhl .key .char { color: #60f }
             .syntaxhl .key .delimiter { color: #404 }
             .syntaxhl .key { color: #606 }
             .syntaxhl .keyword { color:#080; font-weight:bold }
             .syntaxhl .regexp { background-color:hsla(300,100%,50%,0.06); }
             .syntaxhl .regexp .content { color:#808 }
             .syntaxhl .regexp .delimiter { color:#404 }
             .syntaxhl .regexp .modifier { color:#C2C }
             .syntaxhl .string { background-color:hsla(0,100%,50%,0.05); }
             .syntaxhl .string .content { color: #D20 }
             .syntaxhl .string .char { color: #b0b }
             .syntaxhl .string .delimiter { color: #710 }
             .syntaxhl .string .modifier { color: #E40 }
             .syntaxhl .shell { background-color:hsla(120,100%,50%,0.06); }
             .syntaxhl .shell .content { color:#2B2 }
             .syntaxhl .shell .delimiter { color:#161 }
             .syntaxhl .symbol { color:#A60 }
             .syntaxhl .symbol .content { color:#A60 }
             .syntaxhl .symbol .delimiter { color:#630 }
             .syntaxhl .tag { color:#070 }
             .syntaxhl .type { color:#339; font-weight:bold }
             .syntaxhl .value { color: #088; }
             .syntaxhl .variable  { color:#037 }
             .syntaxhl .insert { background: hsla(120,100%,50%,0.12) }
             .syntaxhl .delete { background: hsla(0,100%,50%,0.12) }
             .syntaxhl .change { color: #bbf; background: #007; }
             .syntaxhl .head { color: #f8f; background: #505 }
             .syntaxhl .head .filename { color: white; }

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages