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 | ... | ... |