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

Harmonize setup look with backoffice one and force navigation buttons to remain at the same position at every setup step 🙉🙉🙉

Browse Source
This commit is contained in:
Stephen Abello
2021-06-15 15:03:50 +02:00
parent c0be48ceee
commit 27da8470b7
4 changed files with 919 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1231
css/setup.css
View File

File diff suppressed because it is too large Load Diff

40
css/setup.scss
View File

@@ -22,8 +22,8 @@ $approot-relative: '../' !default;
@import "backoffice/main";
$content-border-color: #CBD2D9 !default;
$default-font-color: #1A202C !default;
$content-border-color: $ibo-color-grey-400 !default;
$default-font-color: $ibo-color-grey-900 !default;
$legend-border-color: #718096 !default;
$link-default-color: #1c94c4 !default;
$link-hover-color: #EA7D1E !default;
@@ -89,7 +89,9 @@ $progress-bar-error-bg-color: #F56565 !default;
/* Theme */
body {
background-color: #eee;
display: flex;
flex-direction: column;
background-color: $ibo-color-grey-100;
color: $default-font-color;
margin: 0;
padding: 0;
@@ -307,7 +309,6 @@ fieldset {
}
.module-selection-body {
height: 28em;
overflow: auto;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
background-color: #F7FAFC;
@@ -340,6 +341,11 @@ body {
width: 800px;
margin-left: auto;
margin-right: auto;
height: 100%;
display: flex;
flex-direction: column;
padding: 20px 0;
pre {
white-space: pre-wrap;
@@ -355,11 +361,11 @@ body {
.ibo-setup--header {
background-color: #fff;
padding: 20px;
padding: 0 20px;
border: 3px solid $content-border-color;
margin-top: 50px;
height: 80px;
border-bottom: none;
border-radius: $ibo-border-radius-300 $ibo-border-radius-300 0 0;
img {
border: 0;
@@ -377,7 +383,29 @@ body {
padding: 20px;
border: 3px solid $content-border-color;
border-top: none;
flex-grow: 1;
overflow: auto;
border-radius: 0 0 $ibo-border-radius-300 $ibo-border-radius-300;
.ibo-setup--wizard{
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
.ibo-setup--wizard--content{
overflow: auto;
}
.ibo-setup--wizard--buttons-container{
margin-top: auto;
tr{
display: flex;
justify-content: flex-end;
}
button {
margin-left: 8px;
}
}
}
.itop-setup--message {
margin-top: 16px;
}

12
setup/wizardcontroller.class.inc.php
View File

@@ -190,8 +190,10 @@ class WizardController
$oPage->add_linked_script('../setup/setup.js');
$oPage->add_script("function CanMoveForward()\n{\n".$oStep->JSCanMoveForward()."\n}\n");
$oPage->add_script("function CanMoveBackward()\n{\n".$oStep->JSCanMoveBackward()."\n}\n");
$oPage->add('<form id="wiz_form" method="post">');
$oPage->add('<form id="wiz_form" class="ibo-setup--wizard" method="post">');
$oPage->add('<div class="ibo-setup--wizard--content">');
$oStep->Display($oPage);
$oPage->add('</div>');
// Add the back / next buttons and the hidden form
// to store the parameters
@@ -203,14 +205,14 @@ class WizardController
}
$oPage->add('<input type="hidden" name="_steps" value="'.htmlentities(json_encode($this->aSteps), ENT_QUOTES, 'UTF-8').'"/>');
$oPage->add('<table style="width:100%;"><tr>');
$oPage->add('<table style="width:100%;" class="ibo-setup--wizard--buttons-container"><tr>');
if ((count($this->aSteps) > 0) && ($oStep->CanMoveBackward()))
{
$oPage->add('<td style="text-align: left"><button id="btn_back" type="submit" name="operation" value="back"> &lt;&lt; Back </button></td>');
$oPage->add('<td style="text-align: left"><button id="btn_back" class="ibo-button ibo-is-alternative ibo-is-neutral" type="submit" name="operation" value="back"><span class="ibo-button--label">Back</span></button></td>');
}
if ($oStep->CanMoveForward())
{
$oPage->add('<td style="text-align:right;"><button id="btn_next" class="default" type="submit" name="operation" value="next">'.htmlentities($oStep->GetNextButtonLabel(), ENT_QUOTES, 'UTF-8').'</button></td>');
$oPage->add('<td style="text-align:right;"><button id="btn_next" class="default ibo-button ibo-is-regular ibo-is-primary" type="submit" name="operation" value="next"><span class="ibo-button--label">'.htmlentities($oStep->GetNextButtonLabel(), ENT_QUOTES, 'UTF-8').'</span></button></td>');
}
$oPage->add('</tr></table>');
$oPage->add("</form>");
@@ -432,7 +434,7 @@ abstract class WizardStep
*/
public function GetNextButtonLabel()
{
return ' Next >> ';
return 'Next';
}
/**

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

@@ -64,7 +64,7 @@ class WizStepWelcome extends WizardStep
*/
public function GetNextButtonLabel()
{
return ' Continue >> ';
return 'Continue';
}
public function GetPossibleSteps()
@@ -123,11 +123,11 @@ EOF
break;
}
}
$sStyle = 'style="display:none;max-height:196px;overflow:auto;"';
$sToggleButtons = '<button type="button" id="show_details" onclick="$(\'#details\').toggle(); $(this).toggle(); $(\'#hide_details\').toggle();">Show details</button><button type="button" id="hide_details" style="display:none;" onclick="$(\'#details\').toggle(); $(this).toggle(); $(\'#show_details\').toggle();">Hide details</button>';
$sStyle = 'style="display:none;overflow:auto;"';
$sToggleButtons = '<button type="button" id="show_details" class="ibo-button ibo-is-alternative ibo-is-neutral" onclick="$(\'#details\').toggle(); $(this).toggle(); $(\'#hide_details\').toggle();"><span class="ibo-button--icon fa fa-caret-down"></span><span class="ibo-button--label">Show details</span></button><button type="button" id="hide_details" class="ibo-button ibo-is-alternative ibo-is-neutral" style="display:none;" onclick="$(\'#details\').toggle(); $(this).toggle(); $(\'#show_details\').toggle();"><span class="ibo-button--icon fa fa-caret-up"></span><span class="ibo-button--label">Hide details</span></button>';
if (count($aErrors)> 0)
{
$sStyle = 'style="max-height:196px;overflow:auto;"';
$sStyle = 'overflow:auto;"';
$sTitle = count($aErrors).' Error(s), '.count($aWarnings).' Warning(s).';
$sH2Class = 'text-error';
}
@@ -2155,7 +2155,7 @@ class WizStepSummary extends WizardStep
*/
public function GetNextButtonLabel()
{
return ' Install ! ';
return 'Install';
}
public function CanMoveForward()
@@ -2180,7 +2180,6 @@ class WizStepSummary extends WizardStep
$oPage->add_style(
<<<CSS
#params_summary {
height: 200px;
overflow: auto;
}
#params_summary div {
@@ -2206,7 +2205,6 @@ class WizStepSummary extends WizardStep
padding-left: 20px;
font-weight: bold;
cursor: pointer;
background: url(../images/minus.gif) 2px 2px no-repeat;
}
#params_summary div.closed .title {
background: url(../images/plus.gif) 2px 2px no-repeat;