changed radiobuttons to jQuery UI buttons (restyled) on installation page

core/css/styles.css

@@ -75,9 +75,11 @@ legend { padding:.2em; font-size:1.2em; }
 #login form input[type="checkbox"]+label { position:relative; margin:0; font-size:1em; text-shadow:#fff 0 1px 0; }
 #login form ul.errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 4em 0; padding:1em 1em 1em 5em; }
 
-#login form p { clear:both; }
-#login form p label { float:left; position:static; margin:0; padding:0.1em;}
-#login form p input { float:left; width: auto;}
+#login form #selectDbType { text-align:center; }
+#login form #selectDbType label { position:static; background:#F8F8F8 none; border:1px solid #DDD; box-shadow:0 1px 1px #FFF, 0 1px 0 #BBB inset; color: #555; font-size:1em; margin:0 -0.3em 1em; padding:0.6em 0.5em 0.4em; cursor:pointer; width:7.5em;}
+#login form #selectDbType label span { cursor:pointer; }
+#login form #selectDbType label.ui-state-hover, #login form #selectDbType label.ui-state-active { color: #333; background-color: #FFF; }
+
 
 /* NAVIGATION ------------------------------------------------------------- */
 #navigation { position:fixed; top:3.5em; float:left; width:12.5em; padding:0; z-index:75; height:100%; background:#eee; border-right: 1px #ccc solid; -moz-box-shadow: -3px 0 7px #000; -webkit-box-shadow: -3px 0 7px #000; box-shadow: -3px 0 7px #000; }

core/js/setup.js

@@ -1,4 +1,5 @@
 $(document).ready(function() {
+	$('#selectDbType').buttonset();
 	$('#datadirField').hide(250);
 	if($('#hasSQLite').val()=='true'){
 		$('#databaseField').hide(250);

core/templates/installation.php

@@ -25,16 +25,15 @@
 	<fieldset id='databaseField'>
 		<?php if($_['hasMySQL'] or $_['hasPostgreSQL']) $hasOtherDB = true; //other than SQLite ?>
 		<legend><?php echo $l->t( 'Configure the database' ); ?></legend>
+		<div id="selectDbType">
 		<?php if($_['hasSQLite']): ?>
 		<input type='hidden' id='hasSQLite' value='true' />
 		<?php if(!$hasOtherDB): ?>
 		<p><?php echo $l->t( 'SQLite will be used.' ); ?></p>
 		<input type="hidden" id="dbtype" name="dbtype" value="sqlite" />
 		<?php else: ?>
-		<p>
-			<input type="radio" name="dbtype" value='sqlite' id="sqlite" <?php OC_Helper::init_radio('dbtype', 'sqlite', 'sqlite'); ?>/>
-			<label class="sqlite" for="sqlite"><?php echo $l->t( 'SQLite' ); ?></label>
-		</p>
+		<input type="radio" name="dbtype" value='sqlite' id="sqlite" <?php OC_Helper::init_radio('dbtype', 'sqlite', 'sqlite'); ?>/>
+		<label class="sqlite" for="sqlite"><?php echo $l->t( 'SQLite' ); ?></label>
 		<?php endif; ?>
 		<?php endif; ?>
 
@@ -44,10 +43,8 @@
 		<p><?php echo $l->t( 'MySQL will be used.' ); ?></p>
 		<input type="hidden" id="dbtype" name="dbtype" value="mysql" />
 		<?php else: ?>
-		<p>
-			<input type="radio" name="dbtype" value='mysql' id="mysql" <?php OC_Helper::init_radio('dbtype','pgsql', 'mysql', 'sqlite'); ?>/>
-			<label class="mysql" for="mysql">MySQL</label>
-		</p>
+		<input type="radio" name="dbtype" value='mysql' id="mysql" <?php OC_Helper::init_radio('dbtype','pgsql', 'mysql', 'sqlite'); ?>/>
+		<label class="mysql" for="mysql">MySQL</label>
 		<?php endif; ?>
 		<?php endif; ?>
 
@@ -59,6 +56,7 @@
 		<p><label class="pgsql" for="pgsql">PostgreSQL</label><input type="radio" name="dbtype" value='pgsql' id="pgsql" <?php OC_Helper::init_radio('dbtype','pgsql', 'mysql', 'sqlite'); ?>/></p>
 		<?php endif; ?>
 		<?php endif; ?>
+		</div>
 
 		<?php if($hasOtherDB): ?>
 		<div id="use_other_db">