Commit a719bfc9313545bbba5ae2479790b8902d98bb3e

Authored by randx
1 parent bcfdacf0

Graph: navigation with keyboard

app/assets/javascripts/graph.js 0 → 100644
... ... @@ -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 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  
... ...