From 87497eb4917afacd1d78ac04ec4fcfe9fa9f7d45 Mon Sep 17 00:00:00 2001 From: Stephen Abello Date: Mon, 16 Dec 2019 17:04:29 +0100 Subject: [PATCH] =?UTF-8?q?N=C2=B02314=20Regression:=20extracted=20setup's?= =?UTF-8?q?=20stylesheet=20in=20its=20own=20file=20and=20pimped=20it=20up?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/setup.css | 240 ++++++++++++++++++++----------- css/setup.scss | 242 ++++++++++++++++++++++++++++++++ setup/setup.js | 2 +- setup/setuppage.class.inc.php | 8 +- setup/setuputils.class.inc.php | 42 ++++-- setup/wizardsteps.class.inc.php | 50 ++++--- 6 files changed, 469 insertions(+), 115 deletions(-) create mode 100644 css/setup.scss diff --git a/css/setup.css b/css/setup.css index f8f59f235..acd3caf0c 100644 --- a/css/setup.css +++ b/css/setup.css @@ -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; -} \ No newline at end of file + 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; +} diff --git a/css/setup.scss b/css/setup.scss new file mode 100644 index 000000000..83321bc25 --- /dev/null +++ b/css/setup.scss @@ -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; +} + diff --git a/setup/setup.js b/setup/setup.js index 77b1f14bb..b83719322 100644 --- a/setup/setup.js +++ b/setup/setup.js @@ -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('
'+request.responseText+'
').show(); if (ErrorFn) { diff --git a/setup/setuppage.class.inc.php b/setup/setuppage.class.inc.php index 0b85c2ed5..e567e8343 100644 --- a/setup/setuppage.class.inc.php +++ b/setup/setuppage.class.inc.php @@ -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("

$sText

\n"); + $this->add("
Success:$sText
"); $this->log_ok($sText); } public function warning($sText) { - $this->add("

$sText

\n"); + $this->add("
Warning:$sText
"); $this->log_warning($sText); } public function error($sText) { - $this->add("

$sText

\n"); + $this->add("
Error:$sText
"); $this->log_error($sText); } diff --git a/setup/setuputils.class.inc.php b/setup/setuputils.class.inc.php index 513f0870a..3260f4713 100644 --- a/setup/setuputils.class.inc.php +++ b/setup/setuputils.class.inc.php @@ -958,7 +958,7 @@ class SetupUtils $oPage->add(''); $oPage->add(''); - $oPage->add(''); + $oPage->add('
'); $oPage->add(''); $oPage->add('
Database'); @@ -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(" On Windows, the backup won\'t work because database password contains %, ! or " character");'); + // Unsupported Password, warn the user + $oPage->add_ready_script( +<<Error:On Windows, the backup won\'t work because database password contains %, ! or " character'); +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(" No connection to the database...");'); + $oPage->add_ready_script( + <<Error:No connection to the database'); +JS + ); } else { @@ -1378,27 +1386,45 @@ EOF } if (count($aErrors) > 0) { + $sErrorsToDisplay = utils::HtmlEntities(implode('
', $aErrors)); $oPage->add_ready_script('$("#wiz_form").data("db_connection", "error");'); - $oPage->add_ready_script('$("#db_info").html(\' Error: '.htmlentities(implode('
', $aErrors), ENT_QUOTES, 'UTF-8').'\');'); + $oPage->add_ready_script( +<<Error:$sErrorsToDisplay'); +JS + ); } else { if (count($aWarnings) > 0) { + $sWarningsToDisplay = utils::HtmlEntities(implode('
', $aWarnings)); $oPage->add_ready_script('$("#wiz_form").data("db_connection", "");'); - $oPage->add_ready_script('$("#db_info").html(\' Warning: '.htmlentities(implode('
', $aWarnings), ENT_QUOTES, 'UTF-8').'\');'); + $oPage->add_ready_script( + <<Warning:$sWarningsToDisplay'); +JS + ); } else { $oPage->add_ready_script('$("#wiz_form").data("db_connection", "");'); - $oPage->add_ready_script('$("#db_info").html(\' Database server connection Ok.\');'); + $oPage->add_ready_script( + <<Success:Database server connection ok.'); +JS + ); } } if ($checks['databases'] == null) { $sDBNameInput = ''; - $oPage->add_ready_script('$("#table_info").html(\' Not enough rights to enumerate the databases\');'); + $oPage->add_ready_script( +<<Error:Not enough rights to enumerate the databases'); +JS + ); } else { diff --git a/setup/wizardsteps.class.inc.php b/setup/wizardsteps.class.inc.php index e06ec3e3d..5ca1d3711 100644 --- a/setup/wizardsteps.class.inc.php +++ b/setup/wizardsteps.class.inc.php @@ -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('

Prerequisites validation: '); - $oPage->add(" "); - $oPage->add($sTitle); - $oPage->add('

'); - $oPage->add('
'); + $oPage->add( +<<Prerequisites validation: $sTitle +
+HTML + ); foreach($aErrors as $sText) { $oPage->error($sText); @@ -285,11 +286,11 @@ class WizStepInstallOrUpgrade extends WizardStep if ($oCheck->iSeverity == CheckResult::ERROR) { $bCanBackup = false; - $sMySQLDumpMessage .= '  Warning: '.$oCheck->sLabel; + $sMySQLDumpMessage .= '
Error:'.$oCheck->sLabel.'
'; } else { - $sMySQLDumpMessage .= ' '.$oCheck->sLabel.' '; + $sMySQLDumpMessage .= '
Success:'.$oCheck->sLabel.'
'; } } $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(" The datamodel will be upgraded from version $sInstalledDataModelVersion to version $sUpgradeDMVersion."); - $oPage->add(''); - $oPage->add(''); - $oPage->add(''); + $sCompatibleDMDirToDisplay = utils::HtmlEntities($sCompatibleDMDir); + $sUpgradeDMVersionToDisplay = utils::HtmlEntities($sUpgradeDMVersion); + $oPage->add( +<<The datamodel will be upgraded from version $sInstalledDataModelVersion to version $sUpgradeDMVersion.
+ + + +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(' '.$oCheckResult->sLabel); + $oPage->add('
Error:'.$oCheckResult->sLabel.'
'); } } else @@ -1053,7 +1061,7 @@ EOF { case CheckResult::INFO: $sStatus = 'ok'; - $sMessage = json_encode(' '.$oCheck->sLabel); + $sMessage = json_encode('
'.$oCheck->sLabel.'
'); break; @@ -1061,7 +1069,7 @@ EOF case CheckResult::ERROR: case CheckResult::WARNING: $sStatus = 'ko'; - $sMessage = json_encode(' '.$oCheck->sLabel); + $sMessage = json_encode('
'.$oCheck->sLabel.'
'); } $oPage->add_ready_script( @@ -1180,7 +1188,7 @@ EOF { case CheckResult::INFO: $sStatus = 'ok'; - $sMessage = json_encode(' '.$oCheck->sLabel); + $sMessage = json_encode('
'.$oCheck->sLabel.'
'); break; @@ -1188,7 +1196,7 @@ EOF case CheckResult::ERROR: case CheckResult::WARNING: $sStatus = 'ko'; - $sMessage = json_encode(' '.$oCheck->sLabel); + $sMessage = json_encode('
'.$oCheck->sLabel.'
'); } $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
{$aRes['next-step-label']}'); ExecuteStep('{$aRes['next-step']}'); @@ -2446,7 +2454,7 @@ EOF $oPage->add_ready_script( <<