MDL-45167 install: Improve styling of installation process

This commit is contained in:
Andrew Nicols 2014-04-30 15:21:41 +08:00
parent 5077d63790
commit 395e5e5304
3 changed files with 325 additions and 109 deletions

View File

@ -314,7 +314,7 @@ if ($config->stage == INSTALL_SAVE) {
install_print_header($config, 'config.php',
get_string('configurationcompletehead', 'install'),
get_string('configurationcompletesub', 'install').get_string('configfilenotwritten', 'install'));
get_string('configurationcompletesub', 'install').get_string('configfilenotwritten', 'install'), 'alert-error');
echo '<div class="configphp"><pre>';
echo p($configphp);
echo '</pre></div>';
@ -442,39 +442,41 @@ if ($config->stage == INSTALL_DATABASE) {
echo '<div class="userinput">';
$disabled = empty($distro->dbhost) ? '' : 'disabled="disabled';
echo '<div class="formrow"><label for="id_dbhost" class="formlabel">'.$strdbhost.'</label>';
echo '<input id="id_dbhost" name="dbhost" '.$disabled.' type="text" value="'.s($config->dbhost).'" size="50" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbhost">'.$strdbhost.'</label></div>';
echo '<div class="fitemelement"><input id="id_dbhost" name="dbhost" '.$disabled.' type="text" value="'.s($config->dbhost).'" size="50" /></div>';
echo '</div>';
echo '<div class="formrow"><label for="id_dbname" class="formlabel">'.$strdbname.'</label>';
echo '<input id="id_dbname" name="dbname" type="text" value="'.s($config->dbname).'" size="50" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbname">'.$strdbname.'</label></div>';
echo '<div class="fitemelement"><input id="id_dbname" name="dbname" type="text" value="'.s($config->dbname).'" size="50" /></div>';
echo '</div>';
$disabled = empty($distro->dbuser) ? '' : 'disabled="disabled';
echo '<div class="formrow"><label for="id_dbuser" class="formlabel">'.$strdbuser.'</label>';
echo '<input id="id_dbuser" name="dbuser" '.$disabled.' type="text" value="'.s($config->dbuser).'" size="50" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbuser">'.$strdbuser.'</label></div>';
echo '<div class="fitemelement"><input id="id_dbuser" name="dbuser" '.$disabled.' type="text" value="'.s($config->dbuser).'" size="50" /></div>';
echo '</div>';
echo '<div class="formrow"><label for="id_dbpass" class="formlabel">'.$strdbpass.'</label>';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbpass">'.$strdbpass.'</label></div>';
// no password field here, the password may be visible in config.php if we can not write it to disk
echo '<input id="id_dbpass" name="dbpass" type="text" value="'.s($config->dbpass).'" size="50" class="forminput" />';
echo '<div class="fitemelement"><input id="id_dbpass" name="dbpass" type="text" value="'.s($config->dbpass).'" size="50" /></div>';
echo '</div>';
echo '<div class="formrow"><label for="id_prefix" class="formlabel">'.$strprefix.'</label>';
echo '<input id="id_prefix" name="prefix" type="text" value="'.s($config->prefix).'" size="10" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_prefix">'.$strprefix.'</label></div>';
echo '<div class="fitemelement"><input id="id_prefix" name="prefix" type="text" value="'.s($config->prefix).'" size="10" /></div>';
echo '</div>';
echo '<div class="formrow"><label for="id_prefix" class="formlabel">'.$strdbport.'</label>';
echo '<input id="id_dbport" name="dbport" type="text" value="'.s($config->dbport).'" size="10" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_prefix">'.$strdbport.'</label></div>';
echo '<div class="fitemelement"><input id="id_dbport" name="dbport" type="text" value="'.s($config->dbport).'" size="10" /></div>';
echo '</div>';
if (!(stristr(PHP_OS, 'win') && !stristr(PHP_OS, 'darwin'))) {
echo '<div class="formrow"><label for="id_dbsocket" class="formlabel">'.$strdbsocket.'</label>';
echo '<input id="id_dbsocket" name="dbsocket" type="text" value="'.s($config->dbsocket).'" size="50" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbsocket">'.$strdbsocket.'</label></div>';
echo '<div class="fitemelement"><input id="id_dbsocket" name="dbsocket" type="text" value="'.s($config->dbsocket).'" size="50" /></div>';
echo '</div>';
}
echo '<div class="hint">'.$hint_database.'</div>';
if ($hint_database !== '') {
echo '<div class="alert alert-error">'.$hint_database.'</div>';
}
echo '</div>';
install_print_footer($config);
die;
@ -498,8 +500,8 @@ if ($config->stage == INSTALL_DATABASETYPE) {
);
echo '<div class="userinput">';
echo '<div class="formrow"><label class="formlabel" for="dbtype">'.get_string('dbtype', 'install').'</label>';
echo '<select id="dbtype" name="dbtype" class="forminput">';
echo '<div class="fitem"><div class="fitemtitle"><label for="dbtype">'.get_string('dbtype', 'install').'</label></div>';
echo '<div class="fitemelement"><select id="dbtype" name="dbtype">';
$disabled = array();
$options = array();
foreach ($databases as $type=>$database) {
@ -516,7 +518,7 @@ if ($config->stage == INSTALL_DATABASETYPE) {
}
echo '</optgroup>';
}
echo '</select></div>';
echo '</select></div></div>';
echo '</div>';
install_print_footer($config);
@ -577,27 +579,27 @@ if ($config->stage == INSTALL_PATHS) {
$stradmindirname = get_string('admindirname', 'install');
echo '<div class="userinput">';
echo '<div class="formrow"><label for="id_wwwroot" class="formlabel">'.$paths['wwwroot'].'</label>';
echo '<input id="id_wwwroot" name="wwwroot" type="text" value="'.s($CFG->wwwroot).'" disabled="disabled" size="70" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_wwwroot">'.$paths['wwwroot'].'</label></div>';
echo '<div class="fitemelement"><input id="id_wwwroot" name="wwwroot" type="text" value="'.s($CFG->wwwroot).'" disabled="disabled" size="70" /></div>';
echo '</div>';
echo '<div class="formrow"><label for="id_dirroot" class="formlabel">'.$paths['dirroot'].'</label>';
echo '<input id="id_dirroot" name="dirroot" type="text" value="'.s($CFG->dirroot).'" disabled="disabled" size="70"class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_dirroot">'.$paths['dirroot'].'</label></div>';
echo '<div class="fitemelement"><input id="id_dirroot" name="dirroot" type="text" value="'.s($CFG->dirroot).'" disabled="disabled" size="70" /></div>';
echo '</div>';
echo '<div class="formrow"><label for="id_dataroot" class="formlabel">'.$paths['dataroot'].'</label>';
echo '<input id="id_dataroot" name="dataroot" type="text" value="'.s($config->dataroot).'" size="70" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_dataroot">'.$paths['dataroot'].'</label></div>';
echo '<div class="fitemelement"><input id="id_dataroot" name="dataroot" type="text" value="'.s($config->dataroot).'" size="70" /></div>';
if ($hint_dataroot !== '') {
echo '<div class="hint">'.$hint_dataroot.'</div>';
echo '<div class="alert alert-error">'.$hint_dataroot.'</div>';
}
echo '</div>';
if (!file_exists("$CFG->dirroot/admin/environment.xml")) {
echo '<div class="formrow"><label for="id_admin" class="formlabel">'.$paths['admindir'].'</label>';
echo '<input id="id_admin" name="admin" type="text" value="'.s($config->admin).'" size="10" class="forminput" />';
echo '<div class="fitem"><div class="fitemtitle"><label for="id_admin">'.$paths['admindir'].'</label></div>';
echo '<div class="fitemelement"><input id="id_admin" name="admin" type="text" value="'.s($config->admin).'" size="10" /></div>';
if ($hint_admindir !== '') {
echo '<div class="hint">'.$hint_admindir.'</div>';
echo '<div class="alert alert-error">'.$hint_admindir.'</div>';
}
echo '</div>';
}
@ -619,7 +621,7 @@ if ($distro) {
install_print_header($config, get_string('language'),
get_string('chooselanguagehead', 'install'),
$sub);
$sub, 'alert-success');
} else {
install_print_header($config, get_string('language'),
@ -629,13 +631,13 @@ if ($distro) {
$languages = get_string_manager()->get_list_of_translations();
echo '<div class="userinput">';
echo '<div class="formrow"><label class="formlabel" for="langselect">'.get_string('language').'</label>';
echo '<select id="langselect" name="lang" class="forminput" onchange="this.form.submit()">';
echo '<div class="fitem"><div class="fitemtitle"><label for="langselect">'.get_string('language').'</label></div>';
echo '<div class="fitemelement"><select id="langselect" name="lang" onchange="this.form.submit()">';
foreach ($languages as $name=>$value) {
$selected = ($name == $CFG->lang) ? 'selected="selected"' : '';
echo '<option value="'.s($name).'" '.$selected.'>'.$value.'</option>';
}
echo '</select></div>';
echo '</select></div></div>';
echo '</div>';
install_print_footer($config);

View File

@ -41,7 +41,7 @@ foreach($files as $file) {
$content .= file_get_contents(dirname(dirname(__FILE__)).'/theme/'.$file) . "\n";
}
$content .= "
$content .= <<<EOF
body {
padding: 4px;
@ -55,94 +55,58 @@ h2 {
text-align:center;
}
input, textarea, .uneditable-input {
textarea, .uneditable-input {
width: 50%;
}
input[type=submit] {
width: 30%;
}
#installdiv {
width: 800px;
margin-left:auto;
margin-right:auto;
width: 800px;
margin-left:auto;
margin-right:auto;
padding: 5px;
margin-bottom: 15px;
}
#installdiv dt {
font-weight: bold;
font-weight: bold;
}
#installdiv dd {
padding-bottom: 0.5em;
padding-bottom: 0.5em;
}
.stage {
margin-top: 2em;
margin-bottom: 2em;
width: 100%;
padding:25px;
margin-top: 2em;
margin-bottom: 2em;
padding: 25px;
}
#installform {
width: 100%;
}
#nav_buttons input {
margin: 5px;
width: 100%;
}
#envresult {
text-align:left;
width: auto;
margin-left:10em;
text-align:left;
width: auto;
margin-left:10em;
}
#envresult dd {
color: red;
}
.formrow {
clear:both;
text-align:left;
padding: 8px;
}
.formrow label.formlabel {
display:block;
float:left;
width: 160px;
margin-right:5px;
text-align:right;
}
.formrow .forminput {
display:block;
float:left;
color: red;
}
fieldset {
text-align:center;
border:none;
text-align:center;
border:none;
}
.hint {
display:block;
clear:both;
padding-left: 265px;
color: red;
fieldset .configphp,
fieldset .alert {
text-align: left;
}
.configphp {
text-align:left;
background-color:white;
padding:1em;
width:95%;
}
.stage6 .stage {
font-weight: bold;
color: red;
.sitelink {
text-align: center;
}
/*
@ -150,19 +114,258 @@ MDL-43839 IE9 cannot handle all of our CSS.
Once IE9 is no longer supported we can include 'bootstrapbase/style/moodle.css' above
and remove the following.
*/
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
#page-footer {
padding: 1em 0;
margin-top: 1em;
border-top: 2px solid #ddd;
}
.fitem {
clear:both;
text-align:left;
padding: 8px;
}
.fitemtitle {
float: left;
width: 245px;
text-align: right;
}
label {
font-weight: bold;
display: inline-block;
margin: 5px;
}
.fitemelement {
margin-left: 265px;
}
.alert, .alert h4 {
color: #c09853;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.notifytiny {
font-size: 10.5px;
}
input[type="button"], input[type="submit"] {
margin: 0 0 10px 5px;
display: inline-block;
padding: 4px 12px;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="button"]:focus, input[type="submit"]:focus {
color: #333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="button"]:focus, input[type="submit"]:focus, input[type="button"]:active, input[type="submit"]:active, input[type="button"].active, input[type="submit"].active, input[type="button"].disabled, input[type="submit"].disabled, input[type="reset"].disabled, input[type="submit"][disabled], input[type="reset"][disabled] {
color: #333;
background-color: #e6e6e6;
}
button, input, select, textarea {
margin: 0;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
display: inline-block;
height: 20px;
padding: 4px 6px;
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
select {
background-color: #fff;
border: 1px solid #ccc;
}
label, select, button, input[type="button"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
cursor: pointer;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
display: inline-block;
height: 20px;
padding: 4px 6px;
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
select, input[type="file"] {
height: 30px;
line-height: 30px;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
cursor: not-allowed;
background-color: #eee;
}
input.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #005aa8;
background-image: -moz-linear-gradient(top,#0070a8,#0038a8);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#0070a8),to(#0038a8));
background-image: -webkit-linear-gradient(top,#0070a8,#0038a8);
background-image: -o-linear-gradient(top,#0070a8,#0038a8);
background-image: linear-gradient(to bottom,#0070a8,#0038a8);
background-repeat: repeat-x;
border-color: #0038a8 #0038a8 #001e5c;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0070a8',endColorstr='#ff0038a8',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
input.btn-primary:hover,
input.btn-primary:active,
input.btn-primary:focus {
color: #fff;
background-color: #0038a8;
}
.breadcrumb {
background-color: #f5f5f5;
}
.breadcrumb {
background-color: rgb(245, 245, 245);
padding: 8px 15px;
padding: 8px 15px;
margin: 0 0 20px;
list-style: none;
background-color: #f5f5f5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.breadcrumb > li {
display: inline-block;
text-shadow: 0 1px 0 #fff;
line-height: 20px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
.breadcrumb {
background-color: rgb(245, 245, 245);
padding: 8px 15px;
}
/*
End of MDL-43839 IE9 specific CSS.
*/
";
EOF;
// fix used urls
$content = str_replace('[[pix:theme|hgradient]]', '../theme/standard/pix/hgradient.jpg', $content);

View File

@ -197,12 +197,22 @@ function install_db_validate($database, $dbhost, $dbuser, $dbpass, $dbname, $pre
$legacystring = $ex->errorcode;
if ($stringmanager->string_exists($errorstring, $ex->module)) {
// By using a different string id from the error code we are separating exception handling and output.
return $stringmanager->get_string($errorstring, $ex->module, $ex->a).'<br />'.$ex->debuginfo;
$returnstring = $stringmanager->get_string($errorstring, $ex->module, $ex->a);
if ($ex->debuginfo) {
$returnstring .= '<br />'.$ex->debuginfo;
}
return $returnstring;
} else if ($stringmanager->string_exists($legacystring, $ex->module)) {
// There are some DML exceptions that may be thrown here as well as during normal operation.
// If we have a translated message already we still want to serve it here.
// However it is not the preferred way.
return $stringmanager->get_string($legacystring, $ex->module, $ex->a).'<br />'.$ex->debuginfo;
$returnstring = $stringmanager->get_string($legacystring, $ex->module, $ex->a);
if ($ex->debuginfo) {
$returnstring .= '<br />'.$ex->debuginfo;
}
return $returnstring;
}
// No specific translation. Deliver a generic error message.
return $stringmanager->get_string('dmlexceptiononinstall', 'error', $ex);
@ -302,9 +312,10 @@ function install_print_help_page($help) {
* @param string $stagename
* @param string $heading
* @param string $stagetext
* @param string $stageclass
* @return void
*/
function install_print_header($config, $stagename, $heading, $stagetext) {
function install_print_header($config, $stagename, $heading, $stagetext, $stageclass = "alert-info") {
global $CFG;
@header('Content-Type: text/html; charset=UTF-8');
@ -334,9 +345,9 @@ function install_print_header($config, $stagename, $heading, $stagetext) {
<div class="headermenu">&nbsp;</div>
</div>
<div class="navbar clearfix">
<div class="breadcrumb">
<ul><li class="first">'.$stagename.'</li></ul>
</div>
<nav class="breadcrumb-nav">
<ul class="breadcrumb"><li class="first">'.$stagename.'</li></ul>
</nav>
<div class="navbutton">&nbsp;</div>
</div>
</div>
@ -346,7 +357,7 @@ function install_print_header($config, $stagename, $heading, $stagetext) {
echo '<h2>'.$heading.'</h2>';
if ($stagetext !== '') {
echo '<div class="stage generalbox box">';
echo '<div class="alert ' . $stageclass . '">';
echo $stagetext;
echo '</div>';
}
@ -382,9 +393,9 @@ function install_print_footer($config, $reload=false) {
}
if ($reload) {
$next = '<input type="submit" id="nextbutton" name="next" value="'.s(get_string('reload')).'" />';
$next = '<input type="submit" id="nextbutton" class="btn btn-primary" name="next" value="'.s(get_string('reload')).'" />';
} else {
$next = '<input type="submit" id="nextbutton" name="next" value="'.s(get_string('next')).' &raquo;" />';
$next = '<input type="submit" id="nextbutton" class="btn btn-primary" name="next" value="'.s(get_string('next')).' &raquo;" />';
}
echo '</fieldset><fieldset id="nav_buttons">'.$first.$next.'</fieldset>';
@ -394,7 +405,7 @@ function install_print_footer($config, $reload=false) {
'<img src="pix/moodlelogo.png" alt="moodlelogo" /></a></div>';
echo '</form></div>';
echo '<div id="footer"><hr />'.$homelink.'</div>';
echo '<div id="page-footer">'.$homelink.'</div>';
echo '</div></body></html>';
}