From bac6a9d24097ffbb8b946838dd1a67f32f08d3db Mon Sep 17 00:00:00 2001
From: Sam Minnee <sam@silverstripe.com>
Date: Wed, 13 Oct 2010 00:45:50 +0000
Subject: [PATCH] ENHANCEMENT: refactored requirements section to hide
 successful tests (from r101381)

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@111998 467b73ca-7a2a-4603-9d3b-597d59a354a9
---
 dev/install/config-form.html |  92 ++++++++++++-------------------
 dev/install/install.css      | 104 ++++++++++++++++++++++++-----------
 dev/install/install.js       |  23 +++++++-
 3 files changed, 130 insertions(+), 89 deletions(-)

diff --git a/dev/install/config-form.html b/dev/install/config-form.html
index 4af58471d..b07d6e118 100644
--- a/dev/install/config-form.html
+++ b/dev/install/config-form.html
@@ -66,7 +66,7 @@
 								<?php if($alreadyInstalled) { ?>
 									<p class="warning">
 										<strong>Note:</strong> It seems as though SilverStripe is already installed here.<br />
-										If you ask me to install, I will overwrite the <strong>.htaccess</strong> or <strong>web.config</strong> and <strong>mysite/_config.php</strong> files. 
+										If you ask me to install, I will overwrite the <strong>.htaccess</strong> and <strong>mysite/_config.php</strong> files. 
 										<br />
 									<input type="checkbox" id="ReIn" name="force_reinstall"><label for="ReIn">That's okay, please re-install SilverStripe and overwrite these files.</label>
 									</p>
@@ -200,18 +200,20 @@
 							
 							<?php $dbReq->showTable("Database Configuration"); ?>
 							
-							<h4 class="sectionHeading">CMS Admin Account</h4>
+							<h4>CMS Admin Account</h4>
+						
 							<div id="AdminAccount" class="section">
-								<p id="adminAcc" class="helpText">
-									We will set up the first administrator account for you automatically. You can change these details later in the "Security" section within the CMS.
-								</p>
-								<div class="fields">
-									<div class="field">
+								
+								<div class="fieldGroup">
+									<p class="helpText">We will set up the first administrator account for you automatically. You can change these details later in the "Security" section within the CMS.</p>
+									
+									<div class="field">	
 										<label for="admin_username">Email:</label>
 										<span class="middleColumn">
 											<input type="text" class="text configured-by-env" name="admin[username]" id="admin_username" value="<?php echo $adminConfig['username']; ?>" <?php if($usingEnv && defined('SS_DEFAULT_ADMIN_USERNAME')) echo 'disabled="disabled"' ?>>
 										</span>
 									</div>
+									
 									<div class="field">
 										<label for="admin_password">Password:</label>
 										<span class="middleColumn">
@@ -219,63 +221,41 @@
 										</span>
 									</div>
 								</div>
+								
+								<div class="fieldGroup">
+									<p class="helpText">
+										Determines the default "locale" settings (for dates, currencies, etc.), 
+										as well as setting the default language of the CMS interface.
+										This can be customized for any CMS user.
+										<br />
+										Caution: Not all aspects of the interface might be localized yet.
+									</p>
+									
+									<div class="field">
+										<label for="locale">Default language:</label>
+										<span class="middleColumn">
+											<select name="locale" id="locale">
+												<?php
+												$selectedLocale = isset($_POST['locale']) ? $_POST['locale'] : $defaultLocale;
+												foreach($locales as $code => $details) {
+													$selected = $code == $selectedLocale ? ' selected="true"' : '';
+													echo "<option$selected value=\"$code\">{$details[0]} - {$details[1]}</option>\n";
+												}
+												?>
+											</select> 
+										</span>
+									</div>
+								</div>
 							</div>
 							
-							<h4 class="sectionHeading">Theme</h4>
+							<h4>Theme</h4>
 							<p>You can change the theme or <a href="http://silverstripe.org/themes">download</a> another from the SilverStripe website after installation.</p>
 							<ul id="Themes">
 								<li><input type="radio" name="template" value="blackcandy" id="BlackCandy" <?php if(!isset($_POST['template']) || $_POST['template'] == 'blackcandy') {?>checked="checked"<?php }?>><label for="BlackCandy"><a href="http://silverstripe.org/blackcandy/">BlackCandy</a> - our default theme ready to use.</label></li>
 								<li><input type="radio" name="template" value="tutorial" id="EmptyTemplate" <?php if(isset($_POST['template']) && $_POST['template'] == 'tutorial') {?>checked="checked"<?php }?>><label for="EmptyTemplate">Empty template - ready to begin the <a href="http://doc.silverstripe.org/doku.php?id=tutorials" target="_blank">tutorial</a>.</label></li>
 							</ul>
 							
-							<h4 class="sectionHeading">Server configuration</h4>
-							<div id="devSection" class="section">
-								<div class="fields">
-									<div class="field">
-										<label for="devsites">Development servers:</label>
-										<span class="middleColumn">
-											<textarea name="devsites" id="devsites" class="configured-by-env" rows="5" cols="10">
-<?php if(@$_POST['devsites']) echo $_POST['devsites'];
-else echo 'localhost
-127.0.0.1'; ?></textarea>
-										</span>
-									</div>
-								</div>
-								<p id="devHelp" class="helpText">
-									SilverStripe allows you to run a site in <a href="http://doc.silverstripe.org/doku.php?id=configuration">development mode</a>.
-									This shows all error messages in the web browser instead of emailing them to the administrator, and allows
-									the database to be built without logging in as administrator. Please enter the host/domain names for servers
-									you will be using for development.
-								</p>
-							</div>
-							
-							
-							<div id="localeSection" class="section">
-								<div class="fields">
-									<div class="field">
-										<label for="locale">Default language:</label>
-										<span class="middleColumn">
-											<select name="locale" id="locale">
-	<?php
-	$selectedLocale = isset($_POST['locale']) ? $_POST['locale'] : $defaultLocale;
-	foreach($locales as $code => $details) {
-		$selected = $code == $selectedLocale ? ' selected="true"' : '';
-		echo "<option$selected value=\"$code\">{$details[0]} - {$details[1]}</option>\n";
-	}
-	?>
-											</select> 
-										</span>
-									</div>
-								</div>
-								<p id="localeHelp" class="helpText">
-									Determines the default "locale" settings (for dates, currencies, etc.), 
-									as well as setting the default language of the CMS interface.
-									This can be customized for any CMS user.
-									<br />
-									Caution: Not all aspects of the interface might be localized yet.
-								</p>
-							</div>
-
+	
 							<h4 id="requirements">Requirements</h4>
 							<?php $req->showTable(); ?>
 							
diff --git a/dev/install/install.css b/dev/install/install.css
index aa938dc8b..0b06c7d8c 100644
--- a/dev/install/install.css
+++ b/dev/install/install.css
@@ -32,17 +32,6 @@ ul#Themes{
 	ul#Themes label {
 		margin: -2px 5px 0 15px;
 	}
-.good td {
-	color: green;
-}
-
-.warning td {
-	color: #ef7f24;
-}
-.testResults .error td {
-	border: 1px #CCC solid;
-	color: red;
-}
 
 h4.sectionHeading {
 	margin-top: 20px;
@@ -50,13 +39,13 @@ h4.sectionHeading {
 
 .error {
 	padding: 0.5em;
-	background-color: #ffe9e9;
+	background-color: #fdf5f5;
 	border: 1px #ff8e8e solid;
 	color: #f03838;
 }
 .warning {
 	padding: 0.5em;
-	background-color: #fef1e1;
+	background-color: #fcf8f2;
 	border: 1px #ffc28b solid;
 	color: #cb6a1c;
 }
@@ -83,7 +72,7 @@ p.error a:hover {
 span.middleColumn {
 	width: 297px;
 	margin-right: 0;
-	margin-top: 0;
+	margin-top: 5px;
 	padding: 4px;
 }
 input.text, textarea, select {
@@ -107,13 +96,72 @@ table.testResults {
 }
 #Layout h4 {
 	font-size: 2em;
+	margin-top: 18px;
+	line-height: 1.4;
 	clear: left;
 }
-.testResults td {
-	border: 1px #CCC solid;
-	width: 400px;
-	padding: 4px;
+
+/**
+ * Requirements and test results
+ * ------------------------------------------------ */
+table.testResults {
+	margin-top: 0;
 }
+	table.testResults td {
+		border: 1px #CCC solid;
+		border-top: none;
+		width: 400px;
+		padding: 6px;
+	}
+		table.testResults tr.good {
+			display: none;
+			border: none;
+		}
+			table.testResults tr.good td {
+				color: green;
+			}
+
+			table.testResults tr.warning {
+				border: none;
+			}
+				table.testResults tr.warning td {
+					color: #ef7f24;
+				}
+			table.testResults tr.error {
+				border: none;
+			}
+					table.testResult tr.error {
+						color: red;
+					}
+
+h5.requirement {
+	padding: 10px;
+	background: #f1f1f1;
+	border: 1px solid #ccc;
+	border-width: 0 1px 1px 1px;
+	margin: 0;
+}	
+	h5.requirement span {
+		float: right;
+	}
+		h5.requirement.good {
+			color: #359318;
+		}
+		h5.requirement.warning {
+			color: #cb6a1c;
+		}
+		h5.requirement.error {
+			color: #F03838;
+		}
+	h5.requirement a {
+		font-size: 9px;
+		float: right;
+		line-height: 19px;
+		margin: 0 0 0 30px;
+		color: #666;
+		text-decoration: none;
+		font-weight: normal;
+	}
 .clear {
 	clear: both;
 }
@@ -127,26 +175,19 @@ table.testResults {
 	margin-bottom: 0;
 }
 
-.helpText {
+#Layout .helpText {
 	float: right;
-	padding-right: 40px;
-	width: 290px;
-	margin-bottom: 0;
+	width: 330px;
+	padding-right: 90px;
 }
 
 .section {
-	float: left;
 	overflow: hidden;
 }
 
 .fields {
 	float: left;
-	margin-right: 20px;
-}
-
-#localeHelp,
-#localeSection {
-	height: 15em;
+	width: 330px;
 }
 
 #devHelp,
@@ -198,7 +239,8 @@ table.testResults {
 .databaseError {
 	clear:both;
 	overflow: hidden;
-	width: 250px;
+	width: 290px;
+	line-height: 1.2;
 	margin: 10px;
 	margin-bottom: 0;
 	display: none;
@@ -210,4 +252,4 @@ table.testResults {
 	.databaseError ul, .databaseError li {
 		margin-left: 0;
 		padding-left: 0;
-	}
\ No newline at end of file
+	}
diff --git a/dev/install/install.js b/dev/install/install.js
index afb2c3ae5..fe281a2b4 100644
--- a/dev/install/install.js
+++ b/dev/install/install.js
@@ -31,9 +31,28 @@ $(document).ready(function() {
 	 */
 	$('#ReIn').click(function() {
 		$('#install_button').attr('disabled', !$(this).is(':checked'));
-	})
+	});
+	
 	$('#install_button').click(function() {
 		$('#saving_top').hide(); 
 		$(this).val('Installing SilverStripe...');
-	})
+	});
+	
+	/**
+	 * Show all the requirements 
+	 */
+	$('h5.requirement a').click(function() {
+		if($(this).text() == 'Hide All Requirements') {
+			// hide the shown requirements
+			$(this).parents('h5').next('table.testResults').find('.good').hide();
+			$(this).text('See All Requirements');
+		}
+		else {
+			// show the requirements.
+			$(this).parents('h5').next('table.testResults').find('.good').show();
+			$(this).text('Hide All Requirements');			
+		}
+		
+		return false;
+	});
 });
\ No newline at end of file