Commit f04597d91864ed9af1444b1caef05b5498bd6c88
1 parent
e6c0673e
Exists in
master
and in
4 other branches
updated raphael
better labels
Showing
3 changed files
with
52 additions
and
20 deletions
Show diff stats
Gemfile
| @@ -108,7 +108,7 @@ group :assets do | @@ -108,7 +108,7 @@ group :assets do | ||
| 108 | gem "jquery-rails", "2.1.3" | 108 | gem "jquery-rails", "2.1.3" |
| 109 | gem "jquery-ui-rails", "2.0.2" | 109 | gem "jquery-ui-rails", "2.0.2" |
| 110 | gem "modernizr", "2.6.2" | 110 | gem "modernizr", "2.6.2" |
| 111 | - gem "raphael-rails", "1.5.2" | 111 | + gem "raphael-rails", git: "https://github.com/koenpunt/raphael-rails.git" |
| 112 | gem 'bootstrap-sass', "2.2.1.1" | 112 | gem 'bootstrap-sass', "2.2.1.1" |
| 113 | gem "font-awesome-sass-rails", "~> 2.0.0" | 113 | gem "font-awesome-sass-rails", "~> 2.0.0" |
| 114 | gem "gemoji", "~> 1.2.1", require: 'emoji/railtie' | 114 | gem "gemoji", "~> 1.2.1", require: 'emoji/railtie' |
Gemfile.lock
| @@ -71,6 +71,12 @@ GIT | @@ -71,6 +71,12 @@ GIT | ||
| 71 | http_parser.rb (~> 0.5.3) | 71 | http_parser.rb (~> 0.5.3) |
| 72 | multi_json (~> 1.0) | 72 | multi_json (~> 1.0) |
| 73 | 73 | ||
| 74 | +GIT | ||
| 75 | + remote: https://github.com/koenpunt/raphael-rails.git | ||
| 76 | + revision: cb2c92a040b9b941a5f1aa1ea866cc26e944fe58 | ||
| 77 | + specs: | ||
| 78 | + raphael-rails (2.1.0) | ||
| 79 | + | ||
| 74 | GEM | 80 | GEM |
| 75 | remote: http://rubygems.org/ | 81 | remote: http://rubygems.org/ |
| 76 | specs: | 82 | specs: |
| @@ -344,7 +350,6 @@ GEM | @@ -344,7 +350,6 @@ GEM | ||
| 344 | thor (>= 0.14.6, < 2.0) | 350 | thor (>= 0.14.6, < 2.0) |
| 345 | raindrops (0.10.0) | 351 | raindrops (0.10.0) |
| 346 | rake (10.0.1) | 352 | rake (10.0.1) |
| 347 | - raphael-rails (1.5.2) | ||
| 348 | rb-fsevent (0.9.2) | 353 | rb-fsevent (0.9.2) |
| 349 | rb-inotify (0.8.8) | 354 | rb-inotify (0.8.8) |
| 350 | ffi (>= 0.5.0) | 355 | ffi (>= 0.5.0) |
| @@ -512,7 +517,7 @@ DEPENDENCIES | @@ -512,7 +517,7 @@ DEPENDENCIES | ||
| 512 | rack-mini-profiler | 517 | rack-mini-profiler |
| 513 | rails (= 3.2.9) | 518 | rails (= 3.2.9) |
| 514 | rails-dev-tweaks | 519 | rails-dev-tweaks |
| 515 | - raphael-rails (= 1.5.2) | 520 | + raphael-rails! |
| 516 | rb-fsevent | 521 | rb-fsevent |
| 517 | rb-inotify | 522 | rb-inotify |
| 518 | redcarpet (~> 2.2.2) | 523 | redcarpet (~> 2.2.2) |
vendor/assets/javascripts/branch-graph.js
| @@ -108,22 +108,10 @@ | @@ -108,22 +108,10 @@ | ||
| 108 | fill: this.colors[this.commits[i].space], | 108 | fill: this.colors[this.commits[i].space], |
| 109 | stroke: "none" | 109 | stroke: "none" |
| 110 | }); | 110 | }); |
| 111 | - if (this.commits[i].refs != null && this.commits[i].refs != "") { | ||
| 112 | - var longrefs = this.commits[i].refs | ||
| 113 | - , shortrefs = this.commits[i].refs; | ||
| 114 | - if (shortrefs.length > 15){ | ||
| 115 | - shortrefs = shortrefs.substr(0,13) + "..."; | ||
| 116 | - } | ||
| 117 | - var t = r.text(x+5, y+8, shortrefs).attr({ | ||
| 118 | - font: "12px Monaco, Arial", | ||
| 119 | - fill: "#666", | ||
| 120 | - title: longrefs, | ||
| 121 | - cursor: "pointer", | ||
| 122 | - rotation: "90" | ||
| 123 | - }); | ||
| 124 | - | ||
| 125 | - var textbox = t.getBBox(); | ||
| 126 | - t.translate(textbox.height/-4, textbox.width/2); | 111 | + |
| 112 | + | ||
| 113 | + if (this.commits[i].refs) { | ||
| 114 | + this.appendLabel(x, y, this.commits[i].refs); | ||
| 127 | } | 115 | } |
| 128 | var c; | 116 | var c; |
| 129 | for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) { | 117 | for (var j = 0, jj = this.commits[i].parents.length; j < jj; j++) { |
| @@ -208,6 +196,45 @@ | @@ -208,6 +196,45 @@ | ||
| 208 | }); | 196 | }); |
| 209 | }; | 197 | }; |
| 210 | 198 | ||
| 199 | + BranchGraph.prototype.appendLabel = function(x, y, refs){ | ||
| 200 | + var r = this.raphael | ||
| 201 | + , shortrefs = refs | ||
| 202 | + , text, textbox, rect; | ||
| 203 | + | ||
| 204 | + if (shortrefs.length > 15){ | ||
| 205 | + // Truncate if longer than 15 chars | ||
| 206 | + shortrefs = shortrefs.substr(0,13) + "..."; | ||
| 207 | + } | ||
| 208 | + | ||
| 209 | + text = r.text(x+5, y+8, shortrefs).attr({ | ||
| 210 | + font: "12px Monaco, Arial", | ||
| 211 | + fill: "#FFF", | ||
| 212 | + title: refs | ||
| 213 | + }); | ||
| 214 | + | ||
| 215 | + textbox = text.getBBox(); | ||
| 216 | + text.transform([ | ||
| 217 | + 't', textbox.height/-4, textbox.width/2 + 5, | ||
| 218 | + 'r90' | ||
| 219 | + ]); | ||
| 220 | + | ||
| 221 | + // Create rectangle based on the size of the textbox | ||
| 222 | + rect = r.rect(x, y, textbox.width + 15, textbox.height + 5, 4).attr({ | ||
| 223 | + fill: "#000", | ||
| 224 | + "fill-opacity": .5, | ||
| 225 | + stroke: "none" | ||
| 226 | + }); | ||
| 227 | + | ||
| 228 | + // Rotate and reposition rectangle over text | ||
| 229 | + rect.transform([ | ||
| 230 | + 'r', 90, x, y, | ||
| 231 | + 't', 5, -10 | ||
| 232 | + ]); | ||
| 233 | + | ||
| 234 | + // Set text to front | ||
| 235 | + text.toFront(); | ||
| 236 | + }; | ||
| 237 | + | ||
| 211 | BranchGraph.prototype.appendAnchor = function(top, c, x, y) { | 238 | BranchGraph.prototype.appendAnchor = function(top, c, x, y) { |
| 212 | var r = this.raphael | 239 | var r = this.raphael |
| 213 | , options = this.options | 240 | , options = this.options |
| @@ -252,6 +279,6 @@ Raphael.fn.tooltip = function (x, y, set, dir, size) { | @@ -252,6 +279,6 @@ Raphael.fn.tooltip = function (x, y, set, dir, size) { | ||
| 252 | "l", 0, mmax(h - size, 0), (dir == 1) * size, size, (dir == 1) * -size, size, 0, mmax(h - size, 0), "a", size, size, 0, 0, 1, -size, size, | 279 | "l", 0, mmax(h - size, 0), (dir == 1) * size, size, (dir == 1) * -size, size, 0, mmax(h - size, 0), "a", size, size, 0, 0, 1, -size, size, |
| 253 | "l", -mmax(w - size, 0), 0, "z"].join(",") | 280 | "l", -mmax(w - size, 0), 0, "z"].join(",") |
| 254 | , xy = [{x: x, y: y + size * 2 + h}, {x: x - size * 2 - w, y: y}, {x: x, y: y - size * 2 - h}, {x: x + size * 2 + w, y: y}][dir]; | 281 | , xy = [{x: x, y: y + size * 2 + h}, {x: x - size * 2 - w, y: y}, {x: x, y: y - size * 2 - h}, {x: x + size * 2 + w, y: y}][dir]; |
| 255 | - set.translate(xy.x - w - bb.x, xy.y - h - bb.y); | 282 | + set.transform(['t', xy.x - w - bb.x, xy.y - h - bb.y]); |
| 256 | return this.set(this.path(p).attr({fill: "#234", stroke: "none"}).insertBefore(set.node ? set : set[0]), set); | 283 | return this.set(this.path(p).attr({fill: "#234", stroke: "none"}).insertBefore(set.node ? set : set[0]), set); |
| 257 | }; | 284 | }; |