kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Graph: navigation with keyboard

Browse source
This commit is contained in:
randx 2012-05-31 23:30:54 +03:00
parent bcfdacf0d4
commit a719bfc931
4 changed files with 43 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/graph.js Normal file
View 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" });
}
});
}

36
app/assets/stylesheets/common.scss
View file

@ -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;
}
}

8
app/views/projects/graph.html.haml
View file

@ -1,10 +1,14 @@
%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();
});

8
vendor/assets/javascripts/branch-graph.js vendored
View file

@ -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]
}