From 69a2e4754ef71b8f4baa31f3438b839ed51964c8 Mon Sep 17 00:00:00 2001
From: Steffen Vogel <info@steffenvogel.de>
Date: Mon, 1 Nov 2010 17:43:57 +0100
Subject: [PATCH] beautified controls

---
 frontend/index.html              | 14 +++++++------
 frontend/javascripts/frontend.js | 36 +++++++++++++++++++++++++++++---
 frontend/stylesheets/style.css   | 19 ++++++++++-------
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index f8abc96..7374003 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -38,19 +38,21 @@
 
 <div id="content">
 	<div id="plot"></div>
+
+<div id="accordion">
 	<div id="controls">
-		<input type="image" src="images/control_rewind_blue.png" value="move_back" title="move back" />
-		<input type="image" src="images/zoom_in.png" value="zoom_in" title="zoom in" />
-		<input type="image" src="images/zoom_out.png" value="zoom_out" title="zoom out" />
+		<button value="move_back"><img src="images/control_rewind_blue.png" title="move back" /></button>
+		<button value="zoom_in"><img src="images/zoom_in.png" title="zoom in" /></button>
+		<button value="zoom_out"><img src="images/zoom_out.png" title="zoom out" /></button>
 		<button value="zoom_hour">Stunde</button>
 		<button value="zoom_day">Tag</button>
 		<button value="zoom_week">Woche</button>
 		<button value="zoom_month">Monat</button>
-		<input type="image" src="images/control_end_blue.png" value="move_last" title="move to present" />
-		<input type="image" src="images/control_fastforward_blue.png" value="move_forward" title="move forward" />
+		<button value="zoom_year">Jahr</button>
+		<button value="move_last"><img src="images/control_end_blue.png" title="move to present" /></button>
+		<button value="move_forward"><img src="images/control_fastforward_blue.png" title="move forward" /></button>
 	</div>
 	
-	<div id="accordion">
 		<h3><img src="images/table.png" alt="" /> Kanäle</h3>
 		<div id="entities">
 		<table>
diff --git a/frontend/javascripts/frontend.js b/frontend/javascripts/frontend.js
index fb2d75d..e60d5d0 100644
--- a/frontend/javascripts/frontend.js
+++ b/frontend/javascripts/frontend.js
@@ -128,7 +128,7 @@ vz.wui.dialogs.init = function() {
  */
 vz.wui.initEvents = function() {
 	// bind plot actions
-	$('#controls input[type=image]').button().click(vz.wui.handleControls);
+	$('#controls button').button().click(vz.wui.handleControls);
 	$('#controls').buttonset();
 	
 	
@@ -178,8 +178,8 @@ vz.wui.refresh = function() {
 vz.wui.handleControls = function () {
 	var delta = vz.options.plot.xaxis.max - vz.options.plot.xaxis.min;
 	var middle = vz.options.plot.xaxis.min + delta/2;
-	
-	switch(this.value) {
+
+	switch($(this).val()) {
 		case 'move_last':
 			vz.options.plot.xaxis.max = new Date().getTime();
 			vz.options.plot.xaxis.min = new Date().getTime() - delta;
@@ -208,6 +208,36 @@ vz.wui.handleControls = function () {
 			vz.options.plot.xaxis.min -= delta;
 			vz.options.plot.xaxis.max += delta;
 			break;
+
+		case 'zoom_hour':
+			hour = 60*60*1000;
+			vz.options.plot.xaxis.min = middle - hour/2;
+			vz.options.plot.xaxis.max =  middle + hour/2;
+			break;
+
+		case 'zoom_day':
+			var day = 24*60*60*1000;
+			vz.options.plot.xaxis.min = middle - day/2;
+			vz.options.plot.xaxis.max =  middle + day/2;
+			break;
+
+		case 'zoom_week':
+			var week = 7*24*60*60*1000;
+			vz.options.plot.xaxis.min = middle - week/2;
+			vz.options.plot.xaxis.max =  middle + week/2;
+			break;
+
+		case 'zoom_month':
+			var month = 30*24*60*60*1000;
+			vz.options.plot.xaxis.min = middle - month/2;
+			vz.options.plot.xaxis.max =  middle + month/2;
+			break;
+
+		case 'zoom_year':
+			var year = 30*24*60*60*1000;
+			vz.options.plot.xaxis.min = middle - year/2;
+			vz.options.plot.xaxis.max =  middle + year/2;
+			break;
 	}
 	
 	// update delta after zoom
diff --git a/frontend/stylesheets/style.css b/frontend/stylesheets/style.css
index e90db9d..8f1a8fa 100644
--- a/frontend/stylesheets/style.css
+++ b/frontend/stylesheets/style.css
@@ -44,16 +44,21 @@ tbody tr td {
 	margin: 10px;
 }
 
-#controls {
-	width: 100%;
-	text-align: center;
+#controls button {
+	width: 10%;
 }
 
-#controls button {
-	font-size: 1em;
+#controls span.ui-button-text {
+	font-size: 0.85em;
+	height: 16px;
+}
+
+#controls {
+	padding: 0 !important;
 }
 
 #accordion {
+	margin-top: 10px;
 	background-color: lightgrey;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -63,7 +68,7 @@ tbody tr td {
 #accordion h3 {
 	background-color: grey;
 	padding: 4px;
-	margin: 2px 0px;
+	margin: 2px 0;
 	color: white;
 	cursor: pointer;
 	font-size: 0.9em;
@@ -73,7 +78,7 @@ tbody tr td {
 }
 
 #accordion div {
-	padding: 5px;
+	padding: 4px;
 }
 
 /* treeTable for entities */