azkaban-developers

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
index 4ef618d..fdc224f 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
@@ -14,28 +14,28 @@
  * the License.
 *#
 
-
- 	## Graph view.
-
+	## Graph view.
 		<div class="container-full container-fill" id="graphView">
-			<div class="row row-offcanvas row-offcanvas-left">
-				<div class="col-xs-6 col-sm-3 sidebar-offcanvas graph-sidebar">
-					<div class="panel panel-default" id="jobList">
-						<div class="panel-heading">
-							<input id="filter" type="text" placeholder="Job Filter" class="form-control">
-						</div>
-						<div id="joblist"></div>
-						<div class="panel-footer">
-							<button type="button" class="btn btn-sm btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
-							<button type="button" class="btn btn-sm btn-default" id="autoPanZoomBtn" data-toggle="button">Auto Pan Zoom</button>
+			<div class="glyphicon glyphicon-th-list" id="open-joblist-btn" title="Open Job List Panel"></div>
+			<div class="graph-sidebar">
+				<div class="panel panel-default" id="joblist-panel">
+					<div class="panel-heading">
+						<div id="close-btn" title="Close Panel"><span class="glyphicon glyphicon-remove"></span></div>
+						<div id="inputbox-panel">
+							<input id="filter" type="text" placeholder="Job Filter" class="form-control input-sm">
 						</div>
-					</div><!-- /.panel -->
-				</div><!-- /.col-sidebar -->
-				<div class="col-xs-12 col-sm-9 col-content">
-					<div id="svgDiv" class="well well-clear well-sm">
-						<svg id="flow-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
-						</svg>
 					</div>
+					<div id="joblist"></div>
+					<div class="panel-footer">
+						<button type="button" class="btn btn-sm btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
+						<button type="button" class="btn btn-sm btn-default" id="autoPanZoomBtn" data-toggle="button">Auto Pan Zoom</button>
+					</div>
+				</div><!-- /.panel -->
+			</div>
+			<div class="col-content">
+				<div id="svgDiv" class="well well-clear well-sm">
+					<svg id="flow-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
+					</svg>
 				</div>
 			</div>
-		</div>
+		</div>
\ No newline at end of file

diff --git a/src/less/azkaban-graph.less b/src/less/azkaban-graph.less
index 93fb36c..50d818c 100644
--- a/src/less/azkaban-graph.less
+++ b/src/less/azkaban-graph.less
@@ -1,6 +1,12 @@
 .nodebox {
   text {
     pointer-events: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
 
   image {

diff --git a/src/less/flow.less b/src/less/flow.less
index b8dde8e..0139e3c 100644
--- a/src/less/flow.less
+++ b/src/less/flow.less
@@ -2,11 +2,25 @@
   height: 100%;
 }
 
+#graphView {
+   -moz-user-select: none;
+   -khtml-user-select: none;
+   -webkit-user-select: none;
+   user-select: none;
+}
+
 #flow-graph {
   width: 100%;
   height: 100%;
 }
 
+#headertabs {
+   -moz-user-select: none;
+   -khtml-user-select: none;
+   -webkit-user-select: none;
+   user-select: none;
+}
+
 #flow-executing-graph {
   width: 100%;
   height: 500px;
@@ -154,13 +168,48 @@ td {
 }
 
 .graph-sidebar {
-  height: 100%;
-  overflow-y: auto;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+}
+
+#inputbox-panel {
+	width: 206px;
+	margin: 0px;
+}
+
+#close-btn {
+	float: right;
+	color: #CCC;
+	padding: 5px 0px;
+	
+	&:hover {
+	  color: #666;
+	}
+}
+
+#joblist-panel {
+	height: 100%;
+	
+	.panel-heading {
+		padding-right: 10px;
+	}
+}
+
+#open-joblist-btn {
+	position: absolute;
+	margin: 10px;
+	color: #CCC;
+	
+	&:hover {
+		color: #666;
+	}
 }
 
 // TODO: Rename this as #job-list
 #joblist {
-  height: 100%;
+  overflow-y: auto;
+  height: calc(~"100% - 102px");
 }
 ul.tree-list {
   list-style-type: none;
@@ -186,7 +235,8 @@ li.tree-list-item {
     position: relative;
     display: block;
     border-bottom-width: 0;
-    padding: 10px 15px;
+    padding: 5px 15px;
+    font-size: 8pt;
 
     &:hover,
     &:focus {

diff --git a/src/web/js/azkaban/util/svg-navigate.js b/src/web/js/azkaban/util/svg-navigate.js
index 6fcb7cd..8c3c7c8 100644
--- a/src/web/js/azkaban/util/svg-navigate.js
+++ b/src/web/js/azkaban/util/svg-navigate.js
@@ -71,7 +71,6 @@
 		}
 		var target = evt.target;
 		
-		
 		var leftOffset = 0;
 		var topOffset = 0;
 		if (!target.marker) {
@@ -105,9 +104,12 @@
 		target.zoomIndex = zoomLevel;
 		var scale = target.zoomLevels[zoomLevel];
 		
-		var y = evt.layerY;
-		var x = evt.layerX;
+		var y = evt.offsetY;
+		var x = evt.offsetX;
 
+		evt.stopPropagation();
+		evt.preventDefault();
+		
 		scaleGraph(target, scale, x, y);
 	}
 	
@@ -134,7 +136,7 @@
 		}
 		retransform(target);
 	}
-	
+
 	this.translateDeltaGraph = function(target, x, y) {
 		target.translateX += x;
 		target.translateY += y;

diff --git a/src/web/js/azkaban/view/exflow.js b/src/web/js/azkaban/view/exflow.js
index f6ecc38..6129676 100644
--- a/src/web/js/azkaban/view/exflow.js
+++ b/src/web/js/azkaban/view/exflow.js
@@ -546,7 +546,7 @@ $(function() {
 	});
 	
 	jobsListView = new azkaban.JobListView({
-		el: $('#jobList'), 
+		el: $('#joblist-panel'), 
 		model: graphModel, 
 		contextMenuCallback: jobClickCallback
 	});

diff --git a/src/web/js/azkaban/view/flow.js b/src/web/js/azkaban/view/flow.js
index b5466c4..3934055 100644
--- a/src/web/js/azkaban/view/flow.js
+++ b/src/web/js/azkaban/view/flow.js
@@ -423,7 +423,7 @@ $(function() {
 	});
 	
   jobsListView = new azkaban.JobListView({
-		el: $('#jobList'), 
+		el: $('#joblist-panel'), 
 		model: graphModel, 
 		contextMenuCallback: jobClickCallback
 	});

diff --git a/src/web/js/azkaban/view/job-list.js b/src/web/js/azkaban/view/job-list.js
index b615cb5..3bf66af 100644
--- a/src/web/js/azkaban/view/job-list.js
+++ b/src/web/js/azkaban/view/job-list.js
@@ -25,7 +25,8 @@ azkaban.JobListView = Backbone.View.extend({
 		"click #resetPanZoomBtn": "handleResetPanZoom",
 		"click #autoPanZoomBtn": "handleAutoPanZoom",
 		"contextmenu li.listElement": "handleContextMenuClick",
-		"click .expandarrow": "handleToggleMenuExpand"
+		"click .expandarrow": "handleToggleMenuExpand",
+		"click #close-btn" : "handleClose"
 	},
 	
 	initialize: function(settings) {
@@ -34,6 +35,9 @@ azkaban.JobListView = Backbone.View.extend({
 		this.model.bind('change:graph', this.render, this);
 		this.model.bind('change:update', this.handleStatusUpdate, this);
 		
+		$("#open-joblist-btn").click(this.handleOpen);
+		$("#joblist-panel").hide();
+		
 		this.filterInput = $(this.el).find("#filter");
 		this.list = $(this.el).find("#joblist");
 		this.contextMenu = settings.contextMenuCallback;
@@ -329,5 +333,12 @@ azkaban.JobListView = Backbone.View.extend({
 		// Using $().hasClass('active') does not use here because it appears that
 		// this is called before the Bootstrap toggle completes.
 		this.model.set({"autoPanZoom": $(target).hasClass('btn-info')});
+	},
+	
+	handleClose: function(evt) {
+		$("#joblist-panel").fadeOut();
+	},
+	handleOpen: function(evt) {
+		$("#joblist-panel").fadeIn();
 	}
 });