Commit a719bfc9313545bbba5ae2479790b8902d98bb3e
1 parent
bcfdacf0
Exists in
master
and in
4 other branches
Graph: navigation with keyboard
Showing
4 changed files
with
43 additions
and
18 deletions
Show diff stats
app/assets/stylesheets/common.scss
| @@ -413,18 +413,6 @@ a.project-update.titled { | @@ -413,18 +413,6 @@ a.project-update.titled { | ||
| 413 | top:0; | 413 | top:0; |
| 414 | } | 414 | } |
| 415 | } | 415 | } |
| 416 | -/** | ||
| 417 | - * Project graph | ||
| 418 | - */ | ||
| 419 | -#holder { | ||
| 420 | - cursor: move; | ||
| 421 | - height: 70%; | ||
| 422 | - overflow: hidden; | ||
| 423 | - background:white; | ||
| 424 | - border: 1px solid $style_color; | ||
| 425 | -} | ||
| 426 | - | ||
| 427 | - | ||
| 428 | 416 | ||
| 429 | input.git_clone_url { | 417 | input.git_clone_url { |
| 430 | width:325px; | 418 | width:325px; |
| @@ -889,3 +877,27 @@ li.note { | @@ -889,3 +877,27 @@ li.note { | ||
| 889 | @extend .primary; | 877 | @extend .primary; |
| 890 | } | 878 | } |
| 891 | } | 879 | } |
| 880 | + | ||
| 881 | +.graph_holder { | ||
| 882 | + border: 1px solid #aaa; | ||
| 883 | + padding:1px; | ||
| 884 | + | ||
| 885 | + | ||
| 886 | + h4 { | ||
| 887 | + padding:0 10px; | ||
| 888 | + border-bottom: 1px solid #bbb; | ||
| 889 | + background:#eee; | ||
| 890 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | ||
| 891 | + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 892 | + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 893 | + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 894 | + } | ||
| 895 | + | ||
| 896 | + .graph { | ||
| 897 | + background: #f1f1f1; | ||
| 898 | + cursor: move; | ||
| 899 | + height: 70%; | ||
| 900 | + overflow: hidden; | ||
| 901 | + } | ||
| 902 | + | ||
| 903 | +} |
app/views/projects/graph.html.haml
| 1 | -%h3 Network Graph | 1 | +%h3 Project Network Graph |
| 2 | %br | 2 | %br |
| 3 | -#holder.graph | 3 | +.graph_holder |
| 4 | + %h4 | ||
| 5 | + %small You can move around the graph by using arrow keys. | ||
| 6 | + #holder.graph | ||
| 4 | :javascript | 7 | :javascript |
| 5 | var chunk1={commits:#{@commits_json}}; | 8 | var chunk1={commits:#{@commits_json}}; |
| 6 | var days=#{@days_json}; | 9 | var days=#{@days_json}; |
| 7 | initGraph(); | 10 | initGraph(); |
| 8 | $(function(){ | 11 | $(function(){ |
| 9 | branchGraph($("#holder")[0]); | 12 | branchGraph($("#holder")[0]); |
| 13 | + initGraphNav(); | ||
| 10 | }); | 14 | }); |
vendor/assets/javascripts/branch-graph.js
| @@ -37,17 +37,17 @@ function branchGraph(holder) { | @@ -37,17 +37,17 @@ function branchGraph(holder) { | ||
| 37 | r = Raphael("holder", cw, ch), | 37 | r = Raphael("holder", cw, ch), |
| 38 | top = r.set(); | 38 | top = r.set(); |
| 39 | var cuday = 0, cumonth = ""; | 39 | var cuday = 0, cumonth = ""; |
| 40 | - r.rect(0, 0, days.length * 20 + 80, 30).attr({fill: "#FFF"}); | ||
| 41 | - r.rect(0, 30, days.length * 20 + 80, 20).attr({fill: "#f1f1f1"}); | 40 | + r.rect(0, 0, days.length * 20 + 80, 30).attr({fill: "#222"}); |
| 41 | + r.rect(0, 30, days.length * 20 + 80, 20).attr({fill: "#444"}); | ||
| 42 | 42 | ||
| 43 | for (mm = 0; mm < days.length; mm++) { | 43 | for (mm = 0; mm < days.length; mm++) { |
| 44 | if(days[mm] != null){ | 44 | if(days[mm] != null){ |
| 45 | if(cuday != days[mm][0]){ | 45 | if(cuday != days[mm][0]){ |
| 46 | - r.text(10 + mm * 20, 40, days[mm][0]).attr({font: "14px Fontin-Sans, Arial", fill: "#444"}); | 46 | + r.text(10 + mm * 20, 40, days[mm][0]).attr({font: "14px Fontin-Sans, Arial", fill: "#DDD"}); |
| 47 | cuday = days[mm][0] | 47 | cuday = days[mm][0] |
| 48 | } | 48 | } |
| 49 | if(cumonth != days[mm][1]){ | 49 | if(cumonth != days[mm][1]){ |
| 50 | - r.text(10 + mm * 20, 15, days[mm][1]).attr({font: "14px Fontin-Sans, Arial", fill: "#474D57"}); | 50 | + r.text(10 + mm * 20, 15, days[mm][1]).attr({font: "14px Fontin-Sans, Arial", fill: "#EEE"}); |
| 51 | cumonth = days[mm][1] | 51 | cumonth = days[mm][1] |
| 52 | } | 52 | } |
| 53 | 53 |