composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°2314 Regression: extracted setup's stylesheet in its own file and pimped it up

Browse Source
This commit is contained in:
Stephen Abello
2019-12-16 17:04:29 +01:00
parent 434ed0dd4e
commit 87497eb491
6 changed files with 469 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
css/setup.css
View File

@@ -1,130 +1,208 @@
body {
background-color: #eee;
margin: 0;
padding: 0;
font-size: 10pt;
overflow-y: auto;
background-color: #eee;
color: #1a202c;
margin: 0;
padding: 0;
font-size: 10pt;
font-family: Tahoma, Verdana, Arial, Helvetica;
overflow-y: auto;
}
a {
color: #1c94c4;
text-decoration: none;
}
a:hover {
color: #ea7d1e;
}
#header {
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 20px;
background: #f6f6f1;
height: 54px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 20px;
background-color: #fff;
height: 54px;
border: 3px solid #cbd2d9;
border-bottom: none;
}
#header img {
border: 0;
vertical-align: middle;
margin-right: 20px;
border: 0;
vertical-align: middle;
margin-right: 20px;
}
#header h1 {
vertical-align: middle;
height: 54px;
noline-height: 54px;
margin: 0;
vertical-align: middle;
height: 54px;
noline-height: 54px;
margin: 0;
}
#setup {
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: #fff;
border: 3px solid #cbd2d9;
border-top: none;
}
.center {
text-align: center;
text-align: center;
}
h1 {
color: #555555;
font-size: 16pt;
color: #555;
font-size: 16pt;
}
h2 {
color: #000;
font-size: 14pt;
color: #1a202c;
font-size: 14pt;
}
h3 {
color: #1C94C4;
font-size: 12pt;
font-weight: bold;
color: #1c94c4;
font-size: 12pt;
font-weight: bold;
}
.next {
width: 100%;
text-align: right;
width: 100%;
text-align: right;
}
.v-spacer {
padding-top: 1em;
padding-top: 1em;
}
button {
margin-top: 1em;
padding-left: 1em;
padding-right: 1em;
margin-top: 1em;
padding-left: 1em;
padding-right: 1em;
}
p.info {
padding-left: 50px;
background: url(../images/info-mid.png) no-repeat left -5px;
min-height: 48px;
padding-left: 50px;
background: url(../images/info-mid.png) no-repeat left -5px;
min-height: 48px;
}
p.ok {
padding-left: 50px;
background: url(../images/clean-mid.png) no-repeat left -8px;
min-height: 48px;
padding-left: 50px;
background: url(../images/clean-mid.png) no-repeat left -8px;
min-height: 48px;
}
p.warning {
padding-left: 50px;
background: url(../images/messagebox_warning-mid.png) no-repeat left -5px;
min-height: 48px;
padding-left: 50px;
background: url(../images/messagebox_warning-mid.png) no-repeat left -5px;
min-height: 48px;
}
p.error {
padding-left: 50px;
background: url(../images/stop-mid.png) no-repeat left -5px;
min-height: 48px;
padding-left: 50px;
background: url(../images/stop-mid.png) no-repeat left -5px;
min-height: 48px;
}
td.label {
text-align: left;
text-align: left;
}
label.read-only {
color: #666;
cursor: text;
color: #666;
cursor: text;
}
td.input {
text-align: left;
text-align: left;
}
table.formTable {
border: 0;
cellpadding: 2px;
cellspacing: 0;
border: 0;
cellpadding: 2px;
cellspacing: 0;
}
.wizlabel, .wizinput {
color: #000;
font-size: 10pt;
color: #000;
font-size: 10pt;
}
.wizhelp {
color: #333;
font-size: 8pt;
color: #333;
font-size: 8pt;
}
#progress {
border:1px solid #000000;
width: 180px;
height: 20px;
line-height: 20px;
text-align: center;
margin: 5px;
border: none;
width: 210px;
height: 26px;
line-height: 26px;
text-align: center;
margin: 5px;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
border-radius: 2px;
background-color: #edf2f7 !important;
}
#progress .progress {
transition: background-color 0.2s ease-in-out;
}
#progress .progress.progress-error {
background-color: #e53e3e !important;
}
h3.clickable {
background: url(../images/plus.gif) no-repeat left;
padding-left:16px;
cursor: hand;
background: url(../images/plus.gif) no-repeat left;
padding-left: 16px;
cursor: hand;
}
h3.clickable.open {
background: url(../images/minus.gif) no-repeat left;
padding-left:16px;
cursor: hand;
}
background: url(../images/minus.gif) no-repeat left;
padding-left: 16px;
cursor: hand;
}
.message {
color: #1a202c;
background-color: #f7fafc;
border-left: 4px solid #4a5568;
padding: 10px;
}
.message.message-valid {
color: #276749;
background-color: #f0fff4;
border-color: #48bb78;
}
.message.message-warning {
color: #c05621;
background-color: #fffaf0;
border-color: #ed8936;
}
.message.message-error {
color: #c53030;
background-color: #fff5f5;
border-color: #e53e3e;
}
.message > .message-title {
font-weight: bold;
margin-right: 5px;
}
.text-valid {
color: #276749;
}
.text-warning {
color: #c05621;
}
.text-error {
color: #c53030;
}
fieldset {
border: none;
padding: 0;
margin: 0;
}
fieldset > legend {
font-size: 12pt;
margin-top: 25px;
margin-bottom: 7px;
width: 100%;
border-bottom: 1px solid #718096;
padding-bottom: 7px;
}
#details > .message {
margin-bottom: 6px;
}
#details > .message:last-of-type {
margin-bottom: 0;
}
.module-selection-banner img {
max-height: 48px;
}
.module-selection-body {
height: 28em;
overflow: auto;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
background-color: #f7fafc;
padding: 10px;
}

242
css/setup.scss Normal file
View File

@@ -0,0 +1,242 @@
$message-default-border-color: #4A5568 !default;
$message-default-text-color: #1A202C !default;
$message-default-background-color: #F7FAFC !default;
$message-valid-border-color: #48BB78 !default;
$message-valid-text-color: #276749 !default;
$message-valid-background-color: #F0FFF4 !default;
$message-warning-border-color: #ED8936 !default;
$message-warning-text-color: #C05621 !default;
$message-warning-background-color: #FFFAF0 !default;
$message-error-border-color: #E53E3E !default;
$message-error-text-color: #C53030 !default;
$message-error-background-color: #FFF5F5 !default;
$content-border-color: #CBD2D9 !default;
$default-font-color: #1A202C !default;
$legend-border-color: #718096 !default;
$link-default-color: #1c94c4 !default;
$link-hover-color: #EA7D1E !default;
body {
background-color: #eee;
color: $default-font-color;
margin: 0;
padding: 0;
font-size: 10pt;
font-family: Tahoma, Verdana, Arial, Helvetica;
overflow-y: auto;
}
a{
color: $link-default-color;
text-decoration: none;
&:hover{
color: $link-hover-color;
}
}
#header {
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 20px;
background-color: #fff;
height: 54px;
border: 3px solid $content-border-color;
border-bottom: none;
}
#header img {
border: 0;
vertical-align: middle;
margin-right: 20px;
}
#header h1 {
vertical-align: middle;
height: 54px;
noline-height: 54px;
margin: 0;
}
#setup {
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: #fff;
border: 3px solid $content-border-color;
border-top: none;
}
.center {
text-align: center;
}
h1 {
color: #555555;
font-size: 16pt;
}
h2 {
color: $default-font-color;
font-size: 14pt;
}
h3 {
color: #1C94C4;
font-size: 12pt;
font-weight: bold;
}
.next {
width: 100%;
text-align: right;
}
.v-spacer {
padding-top: 1em;
}
button {
margin-top: 1em;
padding-left: 1em;
padding-right: 1em;
}
p.info {
padding-left: 50px;
background: url(../images/info-mid.png) no-repeat left -5px;
min-height: 48px;
}
p.ok {
padding-left: 50px;
background: url(../images/clean-mid.png) no-repeat left -8px;
min-height: 48px;
}
p.warning {
padding-left: 50px;
background: url(../images/messagebox_warning-mid.png) no-repeat left -5px;
min-height: 48px;
}
p.error {
padding-left: 50px;
background: url(../images/stop-mid.png) no-repeat left -5px;
min-height: 48px;
}
td.label {
text-align: left;
}
label.read-only {
color: #666;
cursor: text;
}
td.input {
text-align: left;
}
table.formTable {
border: 0;
cellpadding: 2px;
cellspacing: 0;
}
.wizlabel, .wizinput {
color: #000;
font-size: 10pt;
}
.wizhelp {
color: #333;
font-size: 8pt;
}
#progress {
border: none;
width: 210px;
height: 26px;
line-height: 26px;
text-align: center;
margin: 5px;
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.06) !important;
border-radius: 2px;
background-color: #EDF2F7 !important;
.progress{
transition: background-color 0.2s ease-in-out;
&.progress-error{
background-color: #E53E3E !important;
}
}
}
h3.clickable {
background: url(../images/plus.gif) no-repeat left;
padding-left:16px;
cursor: hand;
}
h3.clickable.open {
background: url(../images/minus.gif) no-repeat left;
padding-left:16px;
cursor: hand;
}
.message{
color: $message-default-text-color;
background-color: $message-default-background-color;
border-left: 4px solid $message-default-border-color;
padding: 10px;
&.message-valid{
color: $message-valid-text-color;
background-color: $message-valid-background-color;
border-color: $message-valid-border-color;
}
&.message-warning{
color: $message-warning-text-color;
background-color: $message-warning-background-color;
border-color: $message-warning-border-color;
}
&.message-error{
color: $message-error-text-color;
background-color: $message-error-background-color;
border-color: $message-error-border-color;
}
>.message-title {
font-weight: bold;
margin-right: 5px;
}
}
.text-valid{
color:$message-valid-text-color
}
.text-warning{
color:$message-warning-text-color
}
.text-error{
color:$message-error-text-color
}
fieldset{
border: none;
padding: 0;
margin: 0;
> legend{
font-size: 12pt;
margin-top: 25px;
margin-bottom: 7px;
width: 100%;
border-bottom: 1px solid#718096;
padding-bottom: 7px;
}
}
#details{
>.message{
margin-bottom: 6px;
&:last-of-type{
margin-bottom: 0;
}
}
}
.module-selection-banner{
img{
max-height: 48px;
}
}
.module-selection-body{
height: 28em;
overflow: auto;
box-shadow: inset 0 2px 4px 0
rgba(0,0,0,.06) !important;
background-color: #F7FAFC;
padding: 10px;
}

2
setup/setup.js
View File

@@ -10,7 +10,7 @@ function WizardAsyncAction(sActionCode, oParams, OnErrorFunction)
$(document).ajaxError(function(event, request, settings) {
// update progressbar
// not calling a dedicated plugin method as it is overdated and will be replaced soon
$("#progress .progress").css("background-image", "none");
$("#progress .progress").addClass('progress-error');
$('#async_action').html('<pre>'+request.responseText+'</pre>').show();
if (ErrorFn)
{

8
setup/setuppage.class.inc.php
View File

@@ -42,7 +42,7 @@ class SetupPage extends NiceWebPage
parent::__construct($sTitle);
$this->add_linked_script("../js/jquery.blockUI.js");
$this->add_linked_script("../setup/setup.js");
$this->add_linked_stylesheet("../css/setup.css");
$this->add_saas("css/setup.scss");
}
/**
@@ -77,19 +77,19 @@ class SetupPage extends NiceWebPage
public function ok($sText)
{
$this->add("<p class=\"ok\">$sText</p>\n");
$this->add("<div class=\"message message-valid\"><span class=\"message-title\">Success:</span>$sText</div>");
$this->log_ok($sText);
}
public function warning($sText)
{
$this->add("<p class=\"warning\">$sText</p>\n");
$this->add("<div class=\"message message-warning\"><span class=\"message-title\">Warning:</span>$sText</div>");
$this->log_warning($sText);
}
public function error($sText)
{
$this->add("<p class=\"error\">$sText</p>\n");
$this->add("<div class=\"message message-error\"><span class=\"message-title\">Error:</span>$sText</div>");
$this->log_error($sText);
}

42
setup/setuputils.class.inc.php
View File

@@ -958,7 +958,7 @@ class SetupUtils
$oPage->add('</fieldset>');
$oPage->add('</td></tr>');
$oPage->add('<tr><td colspan="2"><span id="db_info" style="display:inline-block; height:1.5em; margin-left:10px;"></span></td></tr>');
$oPage->add('<tr><td colspan="2"><div id="db_info"></div></td></tr>');
$oPage->add('<tr><td colspan="2">');
$oPage->add('<fieldset><legend>Database</legend>');
@@ -1340,8 +1340,12 @@ EOF
$bIsWindows = (array_key_exists('WINDIR', $_SERVER) || array_key_exists('windir', $_SERVER));
if ($bIsWindows && (preg_match('@([%!"])@',$sDBPwd) > 0))
{
// Unsuported Password, warn the user
$oPage->add_ready_script('$("#db_info").html("<img src=\'../images/error.png\'/>&nbsp;On Windows, the backup won\'t work because database password contains %, ! or &quot; character");');
// Unsupported Password, warn the user
$oPage->add_ready_script(
<<<JS
$("#db_info").html('<div class="message message-error"><span class="message-title">Error:</span>On Windows, the backup won\'t work because database password contains %, ! or &quot; character</div>');
JS
);
}
else
{
@@ -1356,7 +1360,11 @@ EOF
{
// Connection failed, disable the "Next" button
$oPage->add_ready_script('$("#wiz_form").data("db_connection", "error");');
$oPage->add_ready_script('$("#db_info").html("<img src=\'../images/error.png\'/>&nbsp;No connection to the database...");');
$oPage->add_ready_script(
<<<JS
$("#db_info").html('<div class="message message-error"><span class="message-title">Error:</span>No connection to the database</div>');
JS
);
}
else
{
@@ -1378,27 +1386,45 @@ EOF
}
if (count($aErrors) > 0)
{
$sErrorsToDisplay = utils::HtmlEntities(implode('<br/>', $aErrors));
$oPage->add_ready_script('$("#wiz_form").data("db_connection", "error");');
$oPage->add_ready_script('$("#db_info").html(\'<img src="../images/validation_error.png"/>&nbsp;<b>Error:</b> '.htmlentities(implode('<br/>', $aErrors), ENT_QUOTES, 'UTF-8').'\');');
$oPage->add_ready_script(
<<<JS
$("#db_info").html('<div class="message message-error"><span class="message-title">Error:</span>$sErrorsToDisplay</div>');
JS
);
}
else
{
if (count($aWarnings) > 0)
{
$sWarningsToDisplay = utils::HtmlEntities(implode('<br/>', $aWarnings));
$oPage->add_ready_script('$("#wiz_form").data("db_connection", "");');
$oPage->add_ready_script('$("#db_info").html(\'<img src="../images/error.png"/>&nbsp;<b>Warning:</b> '.htmlentities(implode('<br/>', $aWarnings), ENT_QUOTES, 'UTF-8').'\');');
$oPage->add_ready_script(
<<<JS
$("#db_info").html('<div class="message message-warning"><span class="message-title">Warning:</span>$sWarningsToDisplay</div>');
JS
);
}
else
{
$oPage->add_ready_script('$("#wiz_form").data("db_connection", "");');
$oPage->add_ready_script('$("#db_info").html(\'<img src="../images/validation_ok.png"/>&nbsp;Database server connection Ok.\');');
$oPage->add_ready_script(
<<<JS
$("#db_info").html('<div class="message message-valid"><span class="message-title">Success:</span>Database server connection ok.</div>');
JS
);
}
}
if ($checks['databases'] == null)
{
$sDBNameInput = '<input id="db_name" name="db_name" size="15" maxlen="32" value="'.htmlentities($sDBName, ENT_QUOTES, 'UTF-8').'"/><span style="width:20px;" id="v_db_name"></span>';
$oPage->add_ready_script('$("#table_info").html(\'<img src="../images/error.png"/>&nbsp;Not enough rights to enumerate the databases\');');
$oPage->add_ready_script(
<<<JS
$("#table_info").html('<div class="message message-error"><span class="message-title">Error:</span>Not enough rights to enumerate the databases</div>');
JS
);
}
else
{

50
setup/wizardsteps.class.inc.php
View File

@@ -126,24 +126,25 @@ EOF
if (count($aErrors)> 0)
{
$sStyle = 'style="max-height:196px;overflow:auto;"';
$sImage = "stop-mid.png";
$sTitle = count($aErrors).' Error(s), '.count($aWarnings).' Warning(s).';
$sH2Class = 'text-error';
}
else if (count($aWarnings)> 0)
{
$sTitle = count($aWarnings).' Warning(s) '.$sToggleButtons;
$sImage = "messagebox_warning-mid.png";
$sH2Class = 'text-warning';
}
else
{
$sTitle = 'Ok. '.$sToggleButtons;
$sImage = "clean-mid.png";
$sH2Class = 'text-valid';
}
$oPage->add('<h2>Prerequisites validation: ');
$oPage->add("<img style=\"vertical-align:middle;\" src=\"../images/$sImage\"> ");
$oPage->add($sTitle);
$oPage->add('</h2>');
$oPage->add('<div id="details" '.$sStyle.'>');
$oPage->add(
<<<HTML
<h2>Prerequisites validation: <span class="$sH2Class">$sTitle</span></h2>
<div id="details" $sStyle>
HTML
);
foreach($aErrors as $sText)
{
$oPage->error($sText);
@@ -285,11 +286,11 @@ class WizStepInstallOrUpgrade extends WizardStep
if ($oCheck->iSeverity == CheckResult::ERROR)
{
$bCanBackup = false;
$sMySQLDumpMessage .= '<img src="../images/error.png"/>&nbsp;<b> Warning:</b> '.$oCheck->sLabel;
$sMySQLDumpMessage .= '<div class="message message-error"><span class="message-title">Error:</span>'.$oCheck->sLabel.'</div>';
}
else
{
$sMySQLDumpMessage .= '<img src="../images/validation_ok.png"/> '.$oCheck->sLabel.' ';
$sMySQLDumpMessage .= '<div class="message message-valid"><span class="message-title">Success:</span>'.$oCheck->sLabel.'</div>';
}
}
$sChecked = ($bCanBackup && $bDBBackup) ? ' checked ' : '';
@@ -622,10 +623,17 @@ EOF
{
// No changes detected... or no way to tell because of the lack of a manifest or previous source dir
// Use the "compatible" datamodel as-is.
$oPage->p("<img src=\"../images/validation_ok.png\"/>&nbsp;The datamodel will be upgraded from version $sInstalledDataModelVersion to version $sUpgradeDMVersion.");
$oPage->add('<input type="hidden" name="upgrade_type" value="use-compatible">');
$oPage->add('<input type="hidden" name="datamodel_path" value="'.htmlentities($sCompatibleDMDir, ENT_QUOTES, 'UTF-8').'">');
$oPage->add('<input type="hidden" name="datamodel_version" value="'.htmlentities($sUpgradeDMVersion, ENT_QUOTES, 'UTF-8').'">');
$sCompatibleDMDirToDisplay = utils::HtmlEntities($sCompatibleDMDir);
$sUpgradeDMVersionToDisplay = utils::HtmlEntities($sUpgradeDMVersion);
$oPage->add(
<<<HTML
<div class="message message-valid">The datamodel will be upgraded from version $sInstalledDataModelVersion to version $sUpgradeDMVersion.</div>
<input type="hidden" name="upgrade_type" value="use-compatible">
<input type="hidden" name="datamodel_path" value="$sCompatibleDMDirToDisplay">
<input type="hidden" name="datamodel_version" value="$sUpgradeDMVersionToDisplay">
HTML
);
}
// Check if there are "extensions" to preserve and if it's possible
@@ -641,7 +649,7 @@ EOF
$oPage->p("Cannot copy the extensions from '$sPreviousVersionDir/extensions' to '".APPROOT."extensions' due to the following access rights issue(s):");
foreach($aErrors as $sDir => $oCheckResult)
{
$oPage->p('<img src="../images/error.png"/>&nbsp;'.$oCheckResult->sLabel);
$oPage->add('<div class="message message-error"><span class="message-title">Error:</span>'.$oCheckResult->sLabel.'</div>');
}
}
else
@@ -1053,7 +1061,7 @@ EOF
{
case CheckResult::INFO:
$sStatus = 'ok';
$sMessage = json_encode('<img src="../images/validation_ok.png">&nbsp;'.$oCheck->sLabel);
$sMessage = json_encode('<div class="message message-valid">'.$oCheck->sLabel.'</div>');
break;
@@ -1061,7 +1069,7 @@ EOF
case CheckResult::ERROR:
case CheckResult::WARNING:
$sStatus = 'ko';
$sMessage = json_encode('<img src="../images/error.png">&nbsp;'.$oCheck->sLabel);
$sMessage = json_encode('<div class="message message-error">'.$oCheck->sLabel.'</div>');
}
$oPage->add_ready_script(
@@ -1180,7 +1188,7 @@ EOF
{
case CheckResult::INFO:
$sStatus = 'ok';
$sMessage = json_encode('<img src="../images/validation_ok.png">&nbsp;'.$oCheck->sLabel);
$sMessage = json_encode('<div class="message message-valid">'.$oCheck->sLabel.'</div>');
break;
@@ -1188,7 +1196,7 @@ EOF
case CheckResult::ERROR:
case CheckResult::WARNING:
$sStatus = 'ko';
$sMessage = json_encode('<img src="../images/error.png">&nbsp;'.$oCheck->sLabel);
$sMessage = json_encode('<div class="message message-error">'.$oCheck->sLabel.'</div>');
}
$oPage->add_ready_script(
@@ -2433,7 +2441,7 @@ JS
$("#wiz_form").data("installation_status", "running");
WizardUpdateButtons();
$('#setup_msg').html('$sMessage');
$('#progress').progression( {Current:{$aRes['percentage-completed']}, Maximum: 100, aBackgroundImg: GetAbsoluteUrlAppRoot()+'setup/orange-progress.gif', aTextColor: '#000000'} );
$('#progress').progression( {Current:{$aRes['percentage-completed']}, Maximum: 100, aBackground: '#FBD38D', aTextColor: '#000000'} );
//$("#percentage").html('{$aRes['percentage-completed']} % completed<br/>{$aRes['next-step-label']}');
ExecuteStep('{$aRes['next-step']}');
@@ -2446,7 +2454,7 @@ EOF
$oPage->add_ready_script(
<<<EOF
$("#wiz_form").data("installation_status", "completed");
$('#progress').progression( {Current:100, Maximum: 100, aBackgroundImg: GetAbsoluteUrlAppRoot()+'setup/orange-progress.gif', aTextColor: '#000000'} );
$('#progress').progression( {Current:100, Maximum: 100, aBackground: '#FBD38D', aTextColor: '#000000'} );
WizardUpdateButtons();
$("#btn_next").unbind("click.install");
$("#btn_next").click();