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 | 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 | 417 | input.git_clone_url { |
| 430 | 418 | width:325px; |
| ... | ... | @@ -889,3 +877,27 @@ li.note { |
| 889 | 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 | 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 | 7 | :javascript |
| 5 | 8 | var chunk1={commits:#{@commits_json}}; |
| 6 | 9 | var days=#{@days_json}; |
| 7 | 10 | initGraph(); |
| 8 | 11 | $(function(){ |
| 9 | 12 | branchGraph($("#holder")[0]); |
| 13 | + initGraphNav(); | |
| 10 | 14 | }); | ... | ... |
vendor/assets/javascripts/branch-graph.js
| ... | ... | @@ -37,17 +37,17 @@ function branchGraph(holder) { |
| 37 | 37 | r = Raphael("holder", cw, ch), |
| 38 | 38 | top = r.set(); |
| 39 | 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 | 43 | for (mm = 0; mm < days.length; mm++) { |
| 44 | 44 | if(days[mm] != null){ |
| 45 | 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 | 47 | cuday = days[mm][0] |
| 48 | 48 | } |
| 49 | 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 | 51 | cumonth = days[mm][1] |
| 52 | 52 | } |
| 53 | 53 | ... | ... |