commit afa2ebd2778768b5b7d8eadea15a9e6cc9f21c9c
Author: Mike Muzurakis <clopy@unweb.me>
Date:   Tue Apr 12 16:31:02 2011 +0300

    visual fixes on new wizard, Refs #83

diff --git a/ui/static/main.css b/ui/static/main.css
index 0254575..ee0f5e6 100644
--- a/ui/static/main.css
+++ b/ui/static/main.css
@@ -375,6 +375,10 @@ div#wrapper {
     background-color: #999;
 }
 
+.selecteddiv {
+    background-color: #999 !important;
+}
+
 #wizard label a:hover strong {
     color: white;
 }
@@ -386,6 +390,7 @@ div#wrapper {
 
 #wizard div.image .radio {
     float: left;
+    margin-top: 10px;
 }
 
 #wizard div.image span.image-id, #wizard div.image span.description {
@@ -422,10 +427,14 @@ div#wrapper {
     font-size: 110%;
     font-weight: normal;
     display: inline;
-    margin-top: 15px;
+    margin-top: 10px;
     position: absolute;
 }
 
+#wizard .first {
+    margin-left: -7px;
+}
+
 #wizard .topruler {
     background-color: #CCCCCC;
     border: 0 none;
@@ -445,7 +454,18 @@ div#wrapper {
 }
 
 #wizard #cancel {
+    text-align: center;
+}
+
+#wizard #start {
+    text-align: center;
+    background-color: #FF6600;
+    border-color: #FF6600;
+}
 
+#wizard #start:hover {
+    background-color: #FF9651;
+    border-color: #FF9651;
 }
 
 .page ul {
@@ -472,7 +492,8 @@ div#wrapper {
 #status li {
 	float:left;
 	color:#7D7D7D;
-    padding: 9px 70px 0 40px;
+    padding: 0px 81px 0 40px;
+    margin-top:10px;
 }
 
 #status li.active .headernumber {
@@ -556,13 +577,19 @@ div.image-container {
 	margin: -3px 0 0 15px;
     padding: 2px 10px 2px 0;
 	text-align: right;
-	width: 40px;		
+	width: 40px;
+    border-width:1px;		
+}
+
+.selectedrange {
+    border: 1px inset blue;
 }
 
 #credits-indicator {
     background-color: #ECECEC;
     float: none;
     margin: 0 0 0 8px;
+    border-width:1px;
 }
 
 div.machine {
@@ -753,12 +780,14 @@ button.prev {
     background-color: #666666;
     border:none;
     margin-left: -1px;
+    text-align: left;
 }
 
 .image-logo {
     float: left;
     margin-right: 1em;
     margin-left: 1.5em;
+    margin-top: 4px;
 }
 
 div.image {
@@ -925,11 +954,26 @@ div.list .stopped {
 }
 
 #wizard div.panes {
-    height: 250px;
+    height: 252px;
     margin-bottom: 6px;
     clear:both;
 }
 
+.typebody {
+    font-size: 80%;
+    font-weight: normal;
+    position: relative;
+    top: -3px;
+}
+
+.typehover {
+    color: #666666;
+}
+
+#label-name {
+    margin-top: 15px;
+}
+
 /* single tab */
 #wizard ul.tabs li {  
     margin-bottom: 0; 
@@ -948,12 +992,13 @@ div.list .stopped {
 	outline:0;
     background-color: #CCCCCC;
     text-align: center;
-    width: 90px;
+    width: 100px;
+    white-space: nowrap;
 }
 
 #wizard ul.tabs a:hover {
 	color: black;
-    background-color:#F7F7F7;
+    background-color:#AAAAAA;
 }
 	
 /* selected tab */
diff --git a/ui/static/synnefo.js b/ui/static/synnefo.js
index 43b40bf..460d253 100644
--- a/ui/static/synnefo.js
+++ b/ui/static/synnefo.js
@@ -299,7 +299,7 @@ function update_wizard_images() {
                     img.find(".description").text(image.metadata.values.description);
                 }
                 if (image.metadata.values.size != undefined) {
-    			    img.find(".size").text(image.metadata.values.size);
+    			    img.find("#size").text(image.metadata.values.size);
                 }
             }
 			img.find("input.radio").attr('id',"img-radio-" + image.id);
@@ -339,31 +339,37 @@ function update_wizard_flavors(){
 							   progress: true,
 							   max:ram.length-1});
 	$("#small").click();
-	
+
 	// update the indicators when sliding
 	$("#cpu:range").data().rangeinput.onSlide(function(event,value){
 		$("#cpu-indicator")[0].value = cpus[Number(value)];
+        $("#cpu-indicator").addClass('selectedrange');
 	});
 	$("#cpu:range").data().rangeinput.change(function(event,value){
 		$("#cpu-indicator")[0].value = cpus[Number(value)];				
 		$("#custom").click();
-        $("#custom input").attr('checked', 'checked');				
+        $("#custom input").attr('checked', 'checked');		
+        $("#cpu-indicator").removeClass('selectedrange');		
 	});			
 	$("#ram:range").data().rangeinput.onSlide(function(event,value){
 		$("#ram-indicator")[0].value = ram[Number(value)];
+        $("#ram-indicator").addClass('selectedrange');
 	});
 	$("#ram:range").data().rangeinput.change(function(event,value){
 		$("#ram-indicator")[0].value = ram[Number(value)];				
 		$("#custom").click();
         $("#custom input").attr('checked', 'checked');
+        $("#ram-indicator").removeClass('selectedrange');		
 	});			
 	$("#storage:range").data().rangeinput.onSlide(function(event,value){
 		$("#storage-indicator")[0].value = disks[Number(value)];
+        $("#storage-indicator").addClass('selectedrange');
 	});
 	$("#storage:range").data().rangeinput.change(function(event,value){
 		$("#storage-indicator")[0].value = disks[Number(value)];				
 		$("#custom").click();
         $("#custom input").attr('checked', 'checked');
+        $("#storage-indicator").removeClass('selectedrange');		
 	});				
 }
 
diff --git a/ui/templates/machines.html b/ui/templates/machines.html
index d9598f1..349fcc5 100644
--- a/ui/templates/machines.html
+++ b/ui/templates/machines.html
@@ -27,7 +27,7 @@
 	<div class="modal" id="wizard">
 		<!-- status bar -->
 		<ul id="status">
-			<li class="active"><span class="headernumber">1</span><div class="headerbody">{% trans "Image" %}</div></li>
+			<li class="active"><span class="headernumber" class="first">1</span><div class="headerbody first">{% trans "Image" %}</div></li>
 			<li><span class="headernumber">2</span><div class="headerbody">{% trans "Flavor" %}</div></li>
 			<li><span class="headernumber">3</span><div class="headerbody">{% trans "Name" %}</div></li>
 		</ul>
@@ -47,12 +47,12 @@
                             <a>
                                 <div class="image-container">
                                     <div class="image">
-                                        <input class="radio" type="radio" name="image-id" id="image-id" />
+                                        <input class="radio" type="radio" name="imageGroup" id="image-id" />
                                         <img src="" class="image-logo"/>
                                         <strong class="image-title">image.title</strong>
                                         <br />
                                         <span class="description">image.description</span> 
-                                        <span class="size">?? MB</span>                              
+                                        <span id="size" class="size">?? MB</span><span class="size">MB</span>                         
                                     </div>
                                 </div>  
                             </a>
@@ -77,25 +77,25 @@
                         <div class="machine-type">
                             <label for="small" id="small">
                                 <input type="radio" id="small" name="machine-type" value="small" checked="true" />
-                                <strong>{% trans "small" %}</strong>
+                                <span class="typebody" id="small-body">{% trans "small" %}</span>
                             </label>
                         </div>
                         <div class="machine-type">      
                             <label for="medium" id="medium">
                                 <input type="radio" id="medium" name="machine-type" value="medium" />                  
-                                <strong>{% trans "medium" %}</strong>
+                                <span class="typebody" id="medium-body">{% trans "medium" %}</span>
                             </label>
                         </div>
                         <div class="machine-type">
                             <label for="large" id="large">
                                 <input type="radio" id="large" name="machine-type" value="large" />
-                                <strong>{% trans "large" %}</strong>
+                                <span class="typebody" id="large-body">{% trans "large" %}</span>
                             </label>
                         </div>
                         <div class="machine-type">
                             <label for="custom" id="custom">
                                 <input type="radio" name="machine-type" id="custom" value="large" />
-                                <strong>{% trans "custom" %}</strong>
+                                <span class="typebody" id="custom-body">{% trans "custom" %}</span>
                             </label>
                         </div>
                     </li>
@@ -133,7 +133,7 @@
 				<h2>{% trans "Confirm your settings" %}</h2>
                 <hr class="topruler" />
                 <ul id="page3-container">
-                    <li class="required">
+                    <li class="required" id="label-name">
                         <label>
                             <strong>Name:</strong>
                             <input type="text" class="text" name="machine_name" id="name" value="My Ubuntu 10.04 x86_64 server"/>
@@ -195,6 +195,14 @@
 <div id="machines" class="separator"></div>
 
 <script>
+//add hover to labels
+$('span.typebody').mouseover(function() {
+    $(this).addClass('typehover')
+});
+$('span.typebody').mouseout(function() {
+    $(this).removeClass('typehover')
+});
+
 // return value from metadata key "OS", if it exists
 function os_icon(metadata) {
     if (!metadata) {
@@ -208,13 +216,13 @@ function os_icon(metadata) {
     }
 } 
 
-
 // switch to list view
 $("a#list").click(function(){
     list_view(); 
     return false;
 });
 
+
 // switch to standard view
 $("a#standard").click(function(){
     standard_view();
@@ -316,6 +324,32 @@ function disableSliders() {
     $("#storage").attr('disabled',true);
 }
 
+if($('.radio:checked').val() == 'true')  {
+    $(this).parent().addClass('selecteddiv');
+}
+
+//update radio button when clicking on text
+$("#small-body").live('click' ,function() { 
+    $(this).parent().find("#small").click();
+});
+$("#medium-body").live('click' ,function() { 
+    $(this).parent().find("#medium").click();
+});
+$("#large-body").live('click' ,function() { 
+    $(this).parent().find("#large").click();
+});
+$("#custom-body").live('click' ,function() { 
+    $(this).parent().find("#custom").click();
+});
+
+//select image div on radio button select
+$('.radio').live('click' ,function() {           
+    $(this).parents("div").find(".image").removeClass('selecteddiv');
+    if($(this).is(':checked'))  {
+        $(this).parent().addClass('selecteddiv');
+    }
+});
+
 // confirm all actions
 $("div.confirm_multiple .yes").live('click', function(){
     while(pending_actions.length > 0){ // if there is a pending action for this server execute it
