Made the loading indicator a bit more elegant

klaussilveira · Jun 8, 2013 · 00ba071 · 00ba071
1 parent 0af3b18
commit 00ba071
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 26 deletions.
diff --git a/web/css/style.css b/web/css/style.css
diff --git a/web/js/networkGraph.js b/web/js/networkGraph.js
@@ -74,8 +74,9 @@
 
 		// "private" methods
 		function findLaneNumberFor( commit ) {
-			// oh? we've already got a lane?
+
 			if( commit.lane ) {
+				// oh? we've already got a lane?
 				return commit.lane.number;
 			}
 
@@ -325,14 +326,11 @@
 			commitsGraph = $('div.network-graph').first(),
 			laneManager = graphLaneManager(),
 			dataRetriever = commitDataRetriever( commitsGraph.data('source'), handleCommitsRetrieved  ),
-
-			refreshButton = $('<button class="btn btn-small">Load More</button>').insertAfter(commitsGraph.parent('div')),
 			paper = Raphael( commitsGraph[0], commitsGraph.width(), commitsGraph.height()),
 			usedColumns = 0,
 			detailOverlay = commitDetailOverlay();
 
-		dataRetriever.bindIndicator( $('.network-header .meta') );
-		dataRetriever.bindIndicator( commitsGraph );
+		dataRetriever.bindIndicator( commitsGraph.parent('.network-view') );
 		detailOverlay.appendTo( commitsGraph );
 
 
@@ -468,6 +466,11 @@
 				.mouseout( handleCommitMouseout )
 				.click( handleCommitClick );
 
+			// maybe we have not enough space for the lane yet
+			if( commit.lane.centerY + cfg.laneHeight > paper.height ) {
+				extendPaper( paper.width, commit.lane.centerY + cfg.laneHeight )
+			}
+
 			$.each( commit.children, function ( idx, thisChild ) {
 
 				// if there is one child only, stay on the commit's lane as long as possible when connecting the dots.

diff --git a/web/less/network.less b/web/less/network.less
@@ -2,6 +2,37 @@
 	width: 100%;
 	margin-bottom: @baseLineHeight;
 	border: 1px solid @treeHeaderBorder;
+	position: relative;
+
+	&.loading-commits {
+
+		&:before {
+			content: "";
+			display: block;
+			height: 100px;
+			width: 200px;
+			box-sizing: border-box;
+			padding: 10px;
+			font-weight: bold;
+			position: absolute;
+
+			left: 50%;
+			top: 50%;
+			margin-left: -100px;
+			margin-top: -50px;
+
+			color: #555;
+			background: rgba(255,255,255,.8) url("@{ajaxLoaderPath}") no-repeat center;
+			z-index: 2000;
+			border: 1px solid #eee;
+			border-radius: 8px;
+			box-shadow: 2px 2px 2px #eee;
+		}
+
+		.network-header .meta:after {
+			content: " - Loading";
+		}
+	}
 
 	.network-header {
 		padding: 8px;
@@ -19,10 +50,6 @@
 			float: left;
 			padding: 4px 0;
 			font-size: 14px;
-
-			&.loading-commits:after {
-				content: ' - Loading...';
-			}
 		}
 
 	}
@@ -63,21 +90,5 @@
 			}
 		}
 
-		&.loading-commits:before {
-			content: "";
-			display: block;
-			height: 100%;
-			width: 80px;
-			box-sizing: border-box;
-			padding: 10px;
-			font-weight: bold;
-			position: absolute;
-			left: 0;
-			top: 0;
-			color: #555;
-			background: rgba(255,255,255,.8) url("@{ajaxLoaderPath}") no-repeat center;
-			z-index: 2000;
-		}
-
 	}
 }