Commit a719bfc9313545bbba5ae2479790b8902d98bb3e

Authored by randx
1 parent bcfdacf0

Graph: navigation with keyboard

app/assets/javascripts/graph.js 0 → 100644
@@ -0,0 +1,9 @@ @@ -0,0 +1,9 @@
  1 +function initGraphNav() {
  2 + $("body").keydown(function(e) {
  3 + if(e.keyCode == 37) { // left
  4 + $(".graph svg").animate({ left: "+=400" });
  5 + } else if(e.keyCode == 39) { // right
  6 + $(".graph svg").animate({ left: "-=400" });
  7 + }
  8 + });
  9 +}
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