Commit a719bfc9 authored by randx's avatar randx

Graph: navigation with keyboard

parent bcfdacf0
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;
}
}
/**
* Project graph
*/
#holder {
cursor: move;
height: 70%;
overflow: hidden;
background:white;
border: 1px solid $style_color;
}
input.git_clone_url {
width:325px;
......@@ -889,3 +877,27 @@ li.note {
@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;
}
}
%h3 Network Graph
%h3 Project Network Graph
%br
#holder.graph
.graph_holder
%h4
%small You can move around the graph by using arrow keys.
#holder.graph
:javascript
var chunk1={commits:#{@commits_json}};
var days=#{@days_json};
initGraph();
$(function(){
branchGraph($("#holder")[0]);
initGraphNav();
});
......@@ -37,17 +37,17 @@ function branchGraph(holder) {
r = Raphael("holder", cw, ch),
top = r.set();
var cuday = 0, cumonth = "";
r.rect(0, 0, days.length * 20 + 80, 30).attr({fill: "#FFF"});
r.rect(0, 30, days.length * 20 + 80, 20).attr({fill: "#f1f1f1"});
r.rect(0, 0, days.length * 20 + 80, 30).attr({fill: "#222"});
r.rect(0, 30, days.length * 20 + 80, 20).attr({fill: "#444"});
for (mm = 0; mm < days.length; mm++) {
if(days[mm] != null){
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]
}
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]
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment