Graph: navigation with keyboard
This commit is contained in:
parent
bcfdacf0d4
commit
a719bfc931
4 changed files with 43 additions and 18 deletions
9
app/assets/javascripts/graph.js
Normal file
9
app/assets/javascripts/graph.js
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
function initGraphNav() {
|
||||||
|
$("body").keydown(function(e) {
|
||||||
|
if(e.keyCode == 37) { // left
|
||||||
|
$(".graph svg").animate({ left: "+=400" });
|
||||||
|
} else if(e.keyCode == 39) { // right
|
||||||
|
$(".graph svg").animate({ left: "-=400" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
|
@ -413,18 +413,6 @@ a.project-update.titled {
|
||||||
top:0;
|
top:0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* Project graph
|
|
||||||
*/
|
|
||||||
#holder {
|
|
||||||
cursor: move;
|
|
||||||
height: 70%;
|
|
||||||
overflow: hidden;
|
|
||||||
background:white;
|
|
||||||
border: 1px solid $style_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
input.git_clone_url {
|
input.git_clone_url {
|
||||||
width:325px;
|
width:325px;
|
||||||
|
@ -889,3 +877,27 @@ li.note {
|
||||||
@extend .primary;
|
@extend .primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.graph_holder {
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
padding:1px;
|
||||||
|
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
padding:0 10px;
|
||||||
|
border-bottom: 1px solid #bbb;
|
||||||
|
background:#eee;
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
|
||||||
|
background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
|
||||||
|
background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
|
||||||
|
background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph {
|
||||||
|
background: #f1f1f1;
|
||||||
|
cursor: move;
|
||||||
|
height: 70%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -1,10 +1,14 @@
|
||||||
%h3 Network Graph
|
%h3 Project Network Graph
|
||||||
%br
|
%br
|
||||||
#holder.graph
|
.graph_holder
|
||||||
|
%h4
|
||||||
|
%small You can move around the graph by using arrow keys.
|
||||||
|
#holder.graph
|
||||||
:javascript
|
:javascript
|
||||||
var chunk1={commits:#{@commits_json}};
|
var chunk1={commits:#{@commits_json}};
|
||||||
var days=#{@days_json};
|
var days=#{@days_json};
|
||||||
initGraph();
|
initGraph();
|
||||||
$(function(){
|
$(function(){
|
||||||
branchGraph($("#holder")[0]);
|
branchGraph($("#holder")[0]);
|
||||||
|
initGraphNav();
|
||||||
});
|
});
|
||||||
|
|
8
vendor/assets/javascripts/branch-graph.js
vendored
8
vendor/assets/javascripts/branch-graph.js
vendored
|
@ -37,17 +37,17 @@ function branchGraph(holder) {
|
||||||
r = Raphael("holder", cw, ch),
|
r = Raphael("holder", cw, ch),
|
||||||
top = r.set();
|
top = r.set();
|
||||||
var cuday = 0, cumonth = "";
|
var cuday = 0, cumonth = "";
|
||||||
r.rect(0, 0, days.length * 20 + 80, 30).attr({fill: "#FFF"});
|
r.rect(0, 0, days.length * 20 + 80, 30).attr({fill: "#222"});
|
||||||
r.rect(0, 30, days.length * 20 + 80, 20).attr({fill: "#f1f1f1"});
|
r.rect(0, 30, days.length * 20 + 80, 20).attr({fill: "#444"});
|
||||||
|
|
||||||
for (mm = 0; mm < days.length; mm++) {
|
for (mm = 0; mm < days.length; mm++) {
|
||||||
if(days[mm] != null){
|
if(days[mm] != null){
|
||||||
if(cuday != days[mm][0]){
|
if(cuday != days[mm][0]){
|
||||||
r.text(10 + mm * 20, 40, days[mm][0]).attr({font: "14px Fontin-Sans, Arial", fill: "#444"});
|
r.text(10 + mm * 20, 40, days[mm][0]).attr({font: "14px Fontin-Sans, Arial", fill: "#DDD"});
|
||||||
cuday = days[mm][0]
|
cuday = days[mm][0]
|
||||||
}
|
}
|
||||||
if(cumonth != days[mm][1]){
|
if(cumonth != days[mm][1]){
|
||||||
r.text(10 + mm * 20, 15, days[mm][1]).attr({font: "14px Fontin-Sans, Arial", fill: "#474D57"});
|
r.text(10 + mm * 20, 15, days[mm][1]).attr({font: "14px Fontin-Sans, Arial", fill: "#EEE"});
|
||||||
cumonth = days[mm][1]
|
cumonth = days[mm][1]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue