N°3913 UI improvements for setup, also remove A LOT of <table> 😬

This commit is contained in:
Stephen Abello
2021-08-13 12:23:21 +02:00
parent e666631f63
commit fabdef37d2
17 changed files with 383 additions and 178 deletions

View File

@@ -605,7 +605,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se
/* NOTE: Those helpers allow to easily use an icon from libs. like FontAwesome or FontCombodo within a CSS rule (eg. ::after) */ /* NOTE: Those helpers allow to easily use an icon from libs. like FontAwesome or FontCombodo within a CSS rule (eg. ::after) */
/* To use it, simply "@extend %fa-regular-base" in a rule and put the desired icon "content: '\f054'" */ /* To use it, simply "@extend %fa-regular-base" in a rule and put the desired icon "content: '\f054'" */
/******************************************************************************************************************************/ /******************************************************************************************************************************/
.dataTables_scrollHead thead tr th.sorting::after, .ibo-breadcrumbs--item:not(:last-child)::after, .ibo-prop--apply.ui-state-error:after, .ibo-sort-order::after { .dataTables_scrollHead thead tr th.sorting::after, .ibo-breadcrumbs--item:not(:last-child)::after, .ibo-prop--apply.ui-state-error:after, .ibo-sort-order::after, .collapsable-options:not(.setup-is-opened)::before, .collapsable-options.setup-is-opened::before, #params_summary div.closed .title::before, #params_summary div:not(.closed) .title::before {
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; font-weight: 900;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -750,7 +750,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se
-moz-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum";
font-feature-settings: "lnum"; font-feature-settings: "lnum";
} }
.ibo-font-ral-nor-250, .ui-dialog-title, .ibo-navigation-menu--user-info .ibo-navigation-menu--user-welcome-message, .ibo-welcome-popup--text { .ibo-font-ral-nor-250, .ui-dialog-title, .ibo-navigation-menu--user-info .ibo-navigation-menu--user-welcome-message, .ibo-welcome-popup--text, #ibo_setup_container .ibo-setup--body .setup-content-title, #ibo_setup_container .ibo-setup--body h2, .setup-end-placeholder a {
font-size: 1.5rem; font-size: 1.5rem;
font-family: "Raleway", "sans-serif", "system-ui"; font-family: "Raleway", "sans-serif", "system-ui";
font-weight: 400; font-weight: 400;
@@ -1364,6 +1364,9 @@ body.ibo-has-fullscreen-descendant {
* A single class to handle WYSIWYG generated content, where only HTML tags are available * A single class to handle WYSIWYG generated content, where only HTML tags are available
* See https://bulma.io/documentation/elements/content/ * See https://bulma.io/documentation/elements/content/
*/ */
.ibo-is-html-content code {
color: initial;
}
/***********************************************************************/ /***********************************************************************/
/* Sticky headers */ /* Sticky headers */
/* */ /* */
@@ -1419,6 +1422,10 @@ body.ibo-has-fullscreen-descendant {
* *
* You should have received a copy of the GNU Affero General Public License * You should have received a copy of the GNU Affero General Public License
*/ */
/**
* customize Bulma content variables
* See https://bulma.io/documentation/elements/content/
*/
/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */ /*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
@keyframes spinAround { @keyframes spinAround {
from { from {
@@ -2964,8 +2971,8 @@ a.box:active {
width: 100%; width: 100%;
} }
.content table td, .ibo-is-html-content table td, .content table th, .ibo-is-html-content table th { .content table td, .ibo-is-html-content table td, .content table th, .ibo-is-html-content table th {
border: 1px solid #dbdbdb; border: 1px solid black;
border-width: 0 0 1px; border-width: 1px;
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
vertical-align: top; vertical-align: top;
} }
@@ -2976,12 +2983,12 @@ a.box:active {
text-align: inherit; text-align: inherit;
} }
.content table thead td, .ibo-is-html-content table thead td, .content table thead th, .ibo-is-html-content table thead th { .content table thead td, .ibo-is-html-content table thead td, .content table thead th, .ibo-is-html-content table thead th {
border-width: 0 0 2px; border-width: 1px;
color: #363636; color: #363636;
} }
.content table tfoot td, .ibo-is-html-content table tfoot td, .content table tfoot th, .ibo-is-html-content table tfoot th { .content table tfoot td, .ibo-is-html-content table tfoot td, .content table tfoot th, .ibo-is-html-content table tfoot th {
border-width: 2px 0 0; border-width: 1px;
color: #363636; color: black;
} }
.content table tbody tr:last-child td, .ibo-is-html-content table tbody tr:last-child td, .content table tbody tr:last-child th, .ibo-is-html-content table tbody tr:last-child th { .content table tbody tr:last-child td, .ibo-is-html-content table tbody tr:last-child td, .content table tbody tr:last-child th, .ibo-is-html-content table tbody tr:last-child th {
border-bottom-width: 0; border-bottom-width: 0;
@@ -10349,7 +10356,7 @@ a.has-text-danger-dark:hover, .ibo-quick-create--compartment-results--element >
padding: 0.9rem !important; padding: 0.9rem !important;
box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4); box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
border-radius: 3px; border-radius: 3px;
white-space: pre-wrap; white-space: pre-line;
} }
/* Mentions in caselogs */ /* Mentions in caselogs */
/* Note: Mind the "ul", it allows us to have a more precise rule than the original plugin's CSS so we can override it */ /* Note: Mind the "ul", it allows us to have a more precise rule than the original plugin's CSS so we can override it */
@@ -10366,14 +10373,19 @@ ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item {
ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-image { ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-image {
width: 25px; width: 25px;
height: 25px; height: 25px;
/* min-xxx are here to avoid medallion to be horizontally compressed when the title is to long */
min-width: 25px;
min-height: 25px;
background-position: center center; background-position: center center;
background-size: 100%; background-size: 100%;
border-radius: 100%; border-radius: 100%;
margin-right: 0.5rem; margin-right: 0.5rem;
background-color: #e1e7ec; background-color: #ebf8ff;
border: 1px solid #929fb1; border: 1px solid #929fb1;
} }
ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title { ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title {
white-space: nowrap;
/* Here we don't want to truncate the text as in an autocomplete we might have similar values and we need the user to see the entire text to be able to differenciate them */
color: #3A3A3A; color: #3A3A3A;
} }
/*! /*!
@@ -10828,6 +10840,9 @@ ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title {
cursor: default; cursor: default;
z-index: 100; z-index: 100;
} }
.ui-autocomplete .ui-menu-item {
padding: 0;
}
.ui-autocomplete-input { .ui-autocomplete-input {
width: auto; width: auto;
display: inline; display: inline;
@@ -13772,7 +13787,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga
} }
.ibo-field:not([data-attribute-type="AttributeBlob"]):not([data-attribute-type="AttributeFile"]):not([data-attribute-type="AttributeImage"]):not([data-attribute-type="AttributeCustomFields"]):not(.ibo-input-file-select--container) .ibo-field--value * { .ibo-field:not([data-attribute-type="AttributeBlob"]):not([data-attribute-type="AttributeFile"]):not([data-attribute-type="AttributeImage"]):not([data-attribute-type="AttributeCustomFields"]):not(.ibo-input-file-select--container) .ibo-field--value * {
word-break: break-word; word-break: break-word;
white-space: pre-wrap; white-space: pre-line;
} }
.ibo-field ~ .ibo-field { .ibo-field ~ .ibo-field {
margin-top: 16px; margin-top: 16px;
@@ -14405,7 +14420,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga
} }
.search_form_handler .sf_criterion_area .sf_more_criterion > * { .search_form_handler .sf_criterion_area .sf_more_criterion > * {
background-color: white; background-color: white;
color: #dd6c20; color: #37474f;
} }
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_title { .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_title {
margin-right: 7px; margin-right: 7px;
@@ -16240,7 +16255,7 @@ input:checked + .ibo-dashboard--slider:after {
/* Avoid pre (code snippets) to overflow outside the entry */ /* Avoid pre (code snippets) to overflow outside the entry */
} }
.ibo-activity-entry--main-information-content pre { .ibo-activity-entry--main-information-content pre {
white-space: pre-wrap; white-space: pre-line;
/* Avoid table to overflow outside the entry (see N°2127) */ /* Avoid table to overflow outside the entry (see N°2127) */
} }
.ibo-activity-entry--main-information-content table { .ibo-activity-entry--main-information-content table {
@@ -17139,6 +17154,8 @@ tr.row_added td {
*/ */
} }
#ibo-main-content .ibo-panel.ibo-has-sticky-header { #ibo-main-content .ibo-panel.ibo-has-sticky-header {
margin-bottom: 200px;
/* Add a margin below the panel so the dropdown lists can open without problem (N°4039) */
/* Stickable header rules */ /* Stickable header rules */
} }
#ibo-main-content .ibo-panel.ibo-has-sticky-header > .ibo-sticky-sentinel-top { #ibo-main-content .ibo-panel.ibo-has-sticky-header > .ibo-sticky-sentinel-top {
@@ -17450,10 +17467,9 @@ h3.clickable.open {
fieldset { fieldset {
border: none; border: none;
padding: 0; padding: 0;
margin: 30px 0 0 0; margin: 15px 0 0 0;
} }
fieldset > legend { fieldset > legend {
margin-top: 25px;
margin-bottom: 7px; margin-bottom: 7px;
padding-bottom: 7px; padding-bottom: 7px;
width: 100%; width: 100%;
@@ -17505,14 +17521,11 @@ body {
border-bottom: none; border-bottom: none;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
#ibo_setup_container .ibo-setup--header img { #ibo_setup_container .ibo-setup--header .ibo-title--icon {
border: 0; border: 0;
vertical-align: middle; vertical-align: middle;
margin-right: 20px; margin-right: 20px;
} }
#ibo_setup_container .ibo-setup--header h1 {
margin-top: 10px;
}
#ibo_setup_container .ibo-setup--body { #ibo_setup_container .ibo-setup--body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -17562,10 +17575,10 @@ body {
margin-top: 5px; margin-top: 5px;
} }
#ibo_setup_container .ibo-setup--body .ibo-fieldset, #ibo_setup_container .ibo-setup--body fieldset { #ibo_setup_container .ibo-setup--body .ibo-fieldset, #ibo_setup_container .ibo-setup--body fieldset {
margin-top: 25px; margin-top: 12px;
} }
#ibo_setup_container .ibo-setup--body .ibo-fieldset ~ .ibo-fieldset, #ibo_setup_container .ibo-setup--body fieldset ~ .ibo-fieldset, #ibo_setup_container .ibo-setup--body .ibo-fieldset ~ fieldset, #ibo_setup_container .ibo-setup--body fieldset ~ fieldset { #ibo_setup_container .ibo-setup--body .ibo-fieldset ~ .ibo-fieldset, #ibo_setup_container .ibo-setup--body fieldset ~ .ibo-fieldset, #ibo_setup_container .ibo-setup--body .ibo-fieldset ~ fieldset, #ibo_setup_container .ibo-setup--body fieldset ~ fieldset {
margin-top: 25px; margin-top: 12px;
} }
#ibo_setup_container .ibo-setup--body .ibo-field { #ibo_setup_container .ibo-setup--body .ibo-field {
margin-top: 5px; margin-top: 5px;
@@ -17599,6 +17612,19 @@ body {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
} }
#ibo_setup_container .ibo-setup--body .ibo-input, #ibo_setup_container .ibo-setup--body .ui-autocomplete-input, #ibo_setup_container .ibo-setup--body .ui-multiselect, #ibo_setup_container .ibo-setup--body .dataTables_length select, .dataTables_length #ibo_setup_container .ibo-setup--body select, #ibo_setup_container .ibo-setup--body .ui_tpicker_hour_slider > select, #ibo_setup_container .ibo-setup--body .ui_tpicker_minute_slider > select, #ibo_setup_container .ibo-setup--body .ui_tpicker_second_slider > select, #ibo_setup_container .ibo-setup--body .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_op_content input[type="text"], .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_op_content #ibo_setup_container .ibo-setup--body input[type="text"], #ibo_setup_container .ibo-setup--body .search_form_handler .sf_filter .sff_input_wrapper input[type="text"], .search_form_handler .sf_filter .sff_input_wrapper #ibo_setup_container .ibo-setup--body input[type="text"] {
width: auto;
display: inline-block;
}
#ibo_setup_container .ibo-setup--body table td {
white-space: nowrap;
line-height: 2.5rem;
padding-right: 8px;
padding-bottom: 1rem;
}
#ibo_setup_container .ibo-setup--body .setup-content-title, #ibo_setup_container .ibo-setup--body h2 {
margin-bottom: 18px;
}
.ibo-setup--button-bar { .ibo-setup--button-bar {
margin-top: 16px; margin-top: 16px;
} }
@@ -17611,4 +17637,107 @@ body {
.ibo-setup-summary-title { .ibo-setup-summary-title {
font-size: 1.17rem; font-size: 1.17rem;
} }
.setup-prefix-toggler--input--container, .setup-tls--input--container, .setup-disk-location--input--container, .setup-backup--input--container {
display: flex;
line-height: 2.5rem;
margin: 1rem 0;
}
.setup-prefix-toggler--input--container input, .setup-tls--input--container input, .setup-disk-location--input--container input, .setup-backup--input--container input {
margin: 0 8px;
}
.setup-disk-location--input--container input, .setup-backup--input--container input {
flex-grow: 1;
}
.collapsable-options {
margin-bottom: 18px;
}
.collapsable-options:not(.setup-is-opened)::before {
margin-right: 8px;
content: '\f078';
}
.collapsable-options.setup-is-opened::before {
margin-right: 8px;
content: '\f077';
}
.setup-input--hint--icon {
color: #6e7a8a;
}
.setup-invalid-field--icon {
color: #c53030;
margin-left: 8px;
}
.setup-accept-licenses {
margin-top: 18px;
}
.setup-accept-licenses input {
margin-right: 8px;
}
.module-selection-banner {
display: flex;
}
.module-selection-banner > img {
margin-right: 12px;
}
.setup-end-placeholder {
display: flex;
flex-direction: row;
align-items: center;
}
.setup-end-placeholder > div {
padding: 0px 15px;
}
.setup-end-placeholder a {
display: flex;
flex-direction: column;
align-items: center;
}
.setup-end-placeholder a svg {
max-height: 150px;
margin-bottom: 15px;
width: auto;
}
/* integrityCheck: end (do not remove/edit) */ /* integrityCheck: end (do not remove/edit) */
/* Legacy inline stuff */
#params_summary {
overflow: auto;
}
#params_summary div {
width: 100%;
margin-top: 0;
padding-top: 0.5em;
padding-left: 0;
}
#params_summary div ul {
margin-left: 0;
padding-left: 40px;
}
#params_summary div.closed ul {
display: none;
}
#params_summary div li {
list-style: none;
width: 100%;
margin-left: 0;
padding-left: 0em;
}
.title {
padding-left: 20px;
font-weight: bold;
cursor: pointer;
}
#params_summary div.closed .title::before {
margin-right: 5px;
content: '\f078';
}
#params_summary div:not(.closed) .title::before {
margin-right: 5px;
content: '\f077';
}
#progress_content {
height: 200px;
overflow: auto;
text-align: center;
}
#installation_progress {
display: none;
}

View File

@@ -288,10 +288,9 @@ h3.clickable.open {
fieldset { fieldset {
border: none; border: none;
padding: 0; padding: 0;
margin: 30px 0 0 0; margin: 15px 0 0 0;
> legend { > legend {
margin-top: 25px;
margin-bottom: 7px; margin-bottom: 7px;
padding-bottom: 7px; padding-bottom: 7px;
width: 100%; width: 100%;
@@ -367,15 +366,11 @@ body {
border-bottom: none; border-bottom: none;
border-radius: $ibo-border-radius-300 $ibo-border-radius-300 0 0; border-radius: $ibo-border-radius-300 $ibo-border-radius-300 0 0;
img { .ibo-title--icon {
border: 0; border: 0;
vertical-align: middle; vertical-align: middle;
margin-right: 20px; margin-right: 20px;
} }
h1 {
margin-top: 10px;
}
} }
.ibo-setup--body { .ibo-setup--body {
@@ -433,10 +428,10 @@ body {
} }
.ibo-fieldset { .ibo-fieldset {
margin-top: 25px; margin-top: 12px;
& ~ .ibo-fieldset { & ~ .ibo-fieldset {
margin-top: 25px; margin-top: 12px;
} }
} }
@@ -485,6 +480,22 @@ body {
overflow: auto; overflow: auto;
} }
} }
.ibo-input{
width: auto;
display: inline-block;
}
table {
td{
white-space: nowrap;
line-height: 2.5rem;
padding-right: 8px;
padding-bottom: 1rem;
}
}
.setup-content-title, h2{
@extend %ibo-font-ral-nor-250;
margin-bottom: 18px;
}
} }
} }
@@ -506,4 +517,119 @@ body {
font-size: $ibo-font-size-150; font-size: $ibo-font-size-150;
} }
/* integrityCheck: end (do not remove/edit) */
.setup-prefix-toggler--input--container, .setup-tls--input--container, .setup-disk-location--input--container, .setup-backup--input--container {
display: flex;
line-height: 2.5rem;
margin: 1rem 0;
input{
margin: 0 8px;
}
}
.setup-disk-location--input--container, .setup-backup--input--container{
input{
flex-grow: 1;
}
}
.collapsable-options{
margin-bottom: 18px;
&:not(.setup-is-opened)::before{
margin-right: 8px;
@extend %fa-solid-base;
content: '\f078';
}
&.setup-is-opened::before{
margin-right: 8px;
@extend %fa-solid-base;
content: '\f077';
}
}
.setup-input--hint--icon{
color: $ibo-color-grey-700
}
.setup-invalid-field--icon{
color: $ibo-color-red-700;
margin-left: 8px;
}
.setup-accept-licenses{
margin-top: 18px;
input{
margin-right: 8px;
}
}
.module-selection-banner{
display: flex;
>img{
margin-right: 12px;
}
}
.setup-end-placeholder{
display: flex;
flex-direction: row;
align-items: center;
>div {
padding: 0px 15px;
}
a {
display: flex;
flex-direction: column;
align-items: center;
@extend %ibo-font-ral-nor-250;
svg{
max-height: 150px;
margin-bottom: 15px;
width: auto;
}
}
}
/* integrityCheck: end (do not remove/edit) */
/* Legacy inline stuff */
#params_summary {
overflow: auto;
}
#params_summary div {
width:100%;
margin-top:0;
padding-top: 0.5em;
padding-left: 0;
}
#params_summary div ul {
margin-left:0;
padding-left: 40px;
}
#params_summary div.closed ul {
display:none;
}
#params_summary div li {
list-style: none;
width: 100%;
margin-left:0;
padding-left: 0em;
}
.title {
padding-left: 20px;
font-weight: bold;
cursor: pointer;
}
#params_summary div {
&.closed .title::before {
margin-right: 5px;
@extend %fa-solid-base;
content: '\f078';
}
&:not(.closed) .title::before {
margin-right: 5px;
@extend %fa-solid-base;
content: '\f077';
}
}
#progress_content {
height: 200px;
overflow: auto;
text-align: center;
}
#installation_progress {
display: none;
}

View File

@@ -4,7 +4,7 @@
<step> <step>
<title>Configuration Management options</title> <title>Configuration Management options</title>
<description><![CDATA[<h2>The options below allow you to configure the type of elements that are to be managed inside iTop.</h2>]]></description> <description><![CDATA[<h2>The options below allow you to configure the type of elements that are to be managed inside iTop.</h2>]]></description>
<banner>/images/modules.png</banner> <banner>/images/icons/icons8-apps-tab.svg</banner>
<options type="array"> <options type="array">
<choice> <choice>
<extension_code>itop-config-mgmt-core</extension_code> <extension_code>itop-config-mgmt-core</extension_code>
@@ -65,7 +65,7 @@
<step> <step>
<title>Service Management options</title> <title>Service Management options</title>
<description><![CDATA[<h2>Select the choice that best describes the relationships between the services and the IT infrastructure in your IT environment.</h2>]]></description> <description><![CDATA[<h2>Select the choice that best describes the relationships between the services and the IT infrastructure in your IT environment.</h2>]]></description>
<banner>./wizard-icons/service.png</banner> <banner>/images/icons/icons8-services.svg</banner>
<alternatives type="array"> <alternatives type="array">
<choice> <choice>
<extension_code>itop-service-mgmt-enterprise</extension_code> <extension_code>itop-service-mgmt-enterprise</extension_code>
@@ -89,7 +89,7 @@
<step> <step>
<title>Tickets Management options</title> <title>Tickets Management options</title>
<description><![CDATA[<h2>Select the type of tickets you want to use in order to respond to user requests and incidents.</h2>]]></description> <description><![CDATA[<h2>Select the type of tickets you want to use in order to respond to user requests and incidents.</h2>]]></description>
<banner>./itop-incident-mgmt-itil/images/incident-escalated.png</banner> <banner>/images/icons/icons8-discussion-forum.svg</banner>
<alternatives type="array"> <alternatives type="array">
<choice> <choice>
<extension_code>itop-ticket-mgmt-simple-ticket</extension_code> <extension_code>itop-ticket-mgmt-simple-ticket</extension_code>
@@ -161,7 +161,7 @@
<step> <step>
<title>Change Management options</title> <title>Change Management options</title>
<description><![CDATA[<h2>Select the type of tickets you want to use in order to manage changes to the IT infrastructure.</h2>]]></description> <description><![CDATA[<h2>Select the type of tickets you want to use in order to manage changes to the IT infrastructure.</h2>]]></description>
<banner>./itop-change-mgmt/images/change.png</banner> <banner>/images/icons/icons8-change.svg</banner>
<alternatives type="array"> <alternatives type="array">
<choice> <choice>
<extension_code>itop-change-mgmt-simple</extension_code> <extension_code>itop-change-mgmt-simple</extension_code>
@@ -192,7 +192,7 @@
<step> <step>
<title>Additional ITIL tickets</title> <title>Additional ITIL tickets</title>
<description><![CDATA[<h2>Pick from the list below the additional ITIL processes that are to be implemented in iTop.</h2>]]></description> <description><![CDATA[<h2>Pick from the list below the additional ITIL processes that are to be implemented in iTop.</h2>]]></description>
<banner>./itop-knownerror-mgmt/images/known-error.png</banner> <banner>/images/icons/icons8-important-book.svg</banner>
<options type="array"> <options type="array">
<choice> <choice>
<extension_code>itop-kown-error-mgmt</extension_code> <extension_code>itop-kown-error-mgmt</extension_code>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="ldLw80Wb5w9tTRcKjgX8Ga" x1="2.252" x2="34.131" y1="12.996" y2="42.423" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0077d2"/><stop offset="1" stop-color="#0b59a2"/></linearGradient><path fill="url(#ldLw80Wb5w9tTRcKjgX8Ga)" d="M23.008,22.387L6.256,31.181c-1.523,0.8-1.523,2.98,0,3.779l16.752,8.795 c0.621,0.326,1.363,0.326,1.984,0l16.752-8.795c1.523-0.8,1.523-2.98,0-3.779l-16.752-8.795 C24.371,22.06,23.629,22.06,23.008,22.387z"/><path d="M25.457,35.569L37.78,29.1l-12.787-6.713c-0.621-0.326-1.363-0.326-1.984,0L10.22,29.1l12.322,6.469 c0.447,0.235,0.952,0.36,1.458,0.36S25.011,35.805,25.457,35.569z" opacity=".05"/><path d="M25.225,35.127l12.017-6.309l-12.25-6.431c-0.621-0.326-1.363-0.326-1.984,0l-12.25,6.431 l12.017,6.309c0.376,0.198,0.8,0.303,1.225,0.303S24.849,35.325,25.225,35.127z" opacity=".07"/><linearGradient id="ldLw80Wb5w9tTRcKjgX8Gb" x1="6.773" x2="38.652" y1="8.098" y2="37.525" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aa4f4"/><stop offset="1" stop-color="#007ad9"/></linearGradient><path fill="url(#ldLw80Wb5w9tTRcKjgX8Gb)" d="M23.008,13.316L6.256,22.11c-1.523,0.8-1.523,2.98,0,3.779l16.752,8.795 c0.621,0.326,1.363,0.326,1.984,0l16.752-8.795c1.523-0.8,1.523-2.98,0-3.779l-16.752-8.795 C24.371,12.989,23.629,12.989,23.008,13.316z"/><path d="M25.457,26.498l12.322-6.469l-12.787-6.713c-0.621-0.326-1.363-0.326-1.984,0l-12.787,6.713 l12.321,6.469c0.447,0.235,0.952,0.36,1.458,0.36S25.011,26.733,25.457,26.498z" opacity=".05"/><path d="M25.225,26.056l12.017-6.309l-12.25-6.431c-0.621-0.326-1.363-0.326-1.984,0l-12.25,6.431 l12.017,6.309c0.376,0.198,0.8,0.303,1.225,0.303S24.849,26.254,25.225,26.056z" opacity=".07"/><linearGradient id="ldLw80Wb5w9tTRcKjgX8Gc" x1="11.294" x2="43.173" y1="3.201" y2="32.627" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#75daff"/><stop offset="1" stop-color="#1ea2e4"/></linearGradient><path fill="url(#ldLw80Wb5w9tTRcKjgX8Gc)" d="M23.008,4.245L6.256,13.039c-1.523,0.8-1.523,2.98,0,3.779l16.752,8.795 c0.621,0.326,1.363,0.326,1.984,0l16.752-8.795c1.523-0.8,1.523-2.98,0-3.779L24.992,4.245C24.371,3.918,23.629,3.918,23.008,4.245z"/></svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="bwc2gTApiQRdrgZvACv8Ha" x1="24" x2="24" y1="6.708" y2="14.977" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eba600"/><stop offset="1" stop-color="#c28200"/></linearGradient><path fill="url(#bwc2gTApiQRdrgZvACv8Ha)" d="M24.414,10.414l-2.536-2.536C21.316,7.316,20.553,7,19.757,7L5,7C3.895,7,3,7.895,3,9l0,30 c0,1.105,0.895,2,2,2l38,0c1.105,0,2-0.895,2-2V13c0-1.105-0.895-2-2-2l-17.172,0C25.298,11,24.789,10.789,24.414,10.414z"/><linearGradient id="bwc2gTApiQRdrgZvACv8Hb" x1="24" x2="24" y1="10.854" y2="40.983" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd869"/><stop offset="1" stop-color="#fec52b"/></linearGradient><path fill="url(#bwc2gTApiQRdrgZvACv8Hb)" d="M21.586,14.414l3.268-3.268C24.947,11.053,25.074,11,25.207,11H43c1.105,0,2,0.895,2,2v26 c0,1.105-0.895,2-2,2H5c-1.105,0-2-0.895-2-2V15.5C3,15.224,3.224,15,3.5,15h16.672C20.702,15,21.211,14.789,21.586,14.414z"/><path fill="#c28200" d="M36,11.5v1c0,0.276-0.224,0.5-0.5,0.5H34c-0.552,0-1-0.448-1-1c0-0.552,0.448-1,1-1h1.5 C35.776,11,36,11.224,36,11.5z M34,14c0-0.552-0.448-1-1-1h-1.5c-0.276,0-0.5,0.224-0.5,0.5v1c0,0.276,0.224,0.5,0.5,0.5H33 C33.552,15,34,14.552,34,14z M33,16c0,0.552,0.448,1,1,1h1.5c0.276,0,0.5-0.224,0.5-0.5v-1c0-0.276-0.224-0.5-0.5-0.5H34 C33.448,15,33,15.448,33,16z M34,18c0-0.552-0.448-1-1-1h-1.5c-0.276,0-0.5,0.224-0.5,0.5v1c0,0.276,0.224,0.5,0.5,0.5H33 C33.552,19,34,18.552,34,18z M33,20c0,0.552,0.448,1,1,1h1.5c0.276,0,0.5-0.224,0.5-0.5v-1c0-0.276-0.224-0.5-0.5-0.5H34 C33.448,19,33,19.448,33,20z M33,24c0,0.552,0.448,1,1,1h1.5c0.276,0,0.5-0.224,0.5-0.5v-1c0-0.276-0.224-0.5-0.5-0.5H34 C33.448,23,33,23.448,33,24z M34,22c0-0.552-0.448-1-1-1h-1.5c-0.276,0-0.5,0.224-0.5,0.5v1c0,0.276,0.224,0.5,0.5,0.5H33 C33.552,23,34,22.552,34,22z"/><linearGradient id="bwc2gTApiQRdrgZvACv8Hc" x1="33.5" x2="33.5" y1="25.944" y2="37.581" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4b4b4b"/><stop offset="1" stop-color="#3b3b3b"/></linearGradient><path fill="url(#bwc2gTApiQRdrgZvACv8Hc)" d="M36.128,26.848C36.055,26.358,35.635,26,35.139,26h-3.279c-0.495,0-0.915,0.358-0.988,0.848 C30.603,28.65,30,32.761,30,33.5c0,1.933,1.567,3.5,3.5,3.5s3.5-1.567,3.5-3.5C37,32.761,36.397,28.65,36.128,26.848z M33.5,35 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S34.328,35,33.5,35z"/></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="dXHSUfh5hrWnbqlt~U9wLa" x1="16.293" x2="29.836" y1="5.793" y2="19.336" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33bef0"/><stop offset="1" stop-color="#0a85d9"/></linearGradient><path fill="url(#dXHSUfh5hrWnbqlt~U9wLa)" d="M33,6H10C8.895,6,8,6.895,8,8v1H5.369C4.864,9,4.611,9.611,4.968,9.968L8,13v1 c0,1.105,0.895,2,2,2h23c1.105,0,2-0.895,2-2V8C35,6.895,34.105,6,33,6z"/><linearGradient id="dXHSUfh5hrWnbqlt~U9wLb" x1="23.069" x2="33.24" y1="21.569" y2="31.74" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33bef0"/><stop offset="1" stop-color="#0a85d9"/></linearGradient><path fill="url(#dXHSUfh5hrWnbqlt~U9wLb)" d="M37,19H14c-1.105,0-2,0.895-2,2v1H9.369c-0.505,0-0.758,0.611-0.401,0.968L12,26v1 c0,1.105,0.895,2,2,2h23c1.105,0,2-0.895,2-2v-6C39,19.895,38.105,19,37,19z"/><linearGradient id="dXHSUfh5hrWnbqlt~U9wLc" x1="26.867" x2="39.133" y1="34.367" y2="46.633" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33bef0"/><stop offset="1" stop-color="#0a85d9"/></linearGradient><path fill="url(#dXHSUfh5hrWnbqlt~U9wLc)" d="M41,32H18c-1.105,0-2,0.895-2,2v1h-2.631c-0.505,0-0.758,0.611-0.401,0.968L16,39v1 c0,1.105,0.895,2,2,2h23c1.105,0,2-0.895,2-2v-6C43,32.895,42.105,32,41,32z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#d35230" d="M41,6v36c0,1.105-0.895,2-2,2h-5V4h5C40.105,4,41,4.895,41,6z"/><linearGradient id="dtB3~Rmk9s1reNExHNnKMa" x1="461.857" x2="461.857" y1="413.305" y2="410.163" gradientTransform="matrix(0 -1 -1 0 448.277 485.857)" gradientUnits="userSpaceOnUse"><stop offset=".441" stop-color="#999998"/><stop offset=".653" stop-color="#c1c1c0"/><stop offset=".88" stop-color="#e5e5e5"/><stop offset="1" stop-color="#f3f3f3"/></linearGradient><path fill="url(#dtB3~Rmk9s1reNExHNnKMa)" d="M39,6v36c0,1.105-0.895,2-2,2h-6V4h6C38.105,4,39,4.895,39,6z"/><linearGradient id="dtB3~Rmk9s1reNExHNnKMb" x1="3.638" x2="15.691" y1="-26.572" y2="-59.405" gradientTransform="matrix(1 0 0 -1 0 -18)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ca4e2a"/><stop offset="1" stop-color="#b63016"/></linearGradient><path fill="url(#dtB3~Rmk9s1reNExHNnKMb)" d="M7,6v36c0,1.105,0.895,2,2,2h2V4H9C7.895,4,7,4.895,7,6z"/><path fill="#ed6c47" d="M35,4H11v40h24c1.105,0,2-0.895,2-2V6C37,4.895,36.105,4,35,4z"/><path d="M25.892,31.233c-0.494-0.449-1.126-0.677-1.879-0.677c-0.744,0-1.376,0.224-1.878,0.665 c-0.524,0.458-0.79,1.053-0.79,1.767c0,0.684,0.259,1.271,0.771,1.75c0.502,0.468,1.14,0.705,1.896,0.705 c0.762,0,1.398-0.231,1.89-0.688c0.5-0.467,0.753-1.061,0.753-1.768C26.655,32.287,26.398,31.697,25.892,31.233z" opacity=".07"/><path d="M21.392,28.312l-0.406-13.521c-0.015-0.476,0.159-0.924,0.489-1.265 c0.33-0.34,0.774-0.527,1.25-0.527h2.525c0.468,0,0.923,0.193,1.25,0.529c0.326,0.336,0.504,0.797,0.489,1.265v0.001l-0.43,13.521 C26.529,29.261,25.766,30,24.821,30h-1.69C22.185,30,21.421,29.259,21.392,28.312z M26.228,30.864 c-0.588-0.536-1.334-0.808-2.216-0.808c-0.869,0-1.612,0.266-2.207,0.788c-0.628,0.55-0.96,1.291-0.96,2.144 c0,0.815,0.322,1.547,0.931,2.115c0.598,0.558,1.351,0.84,2.237,0.84c0.893,0,1.643-0.276,2.23-0.822 c0.597-0.557,0.913-1.294,0.913-2.133C27.155,32.152,26.835,31.419,26.228,30.864z" opacity=".05"/><path d="M23.131,29.5h1.69c0.673,0,1.218-0.527,1.239-1.2l0.43-13.521c0.011-0.338-0.113-0.658-0.349-0.901 c-0.235-0.243-0.552-0.377-0.89-0.377h-2.525c-0.339,0-0.656,0.134-0.891,0.376c-0.235,0.242-0.359,0.562-0.349,0.9l0.406,13.521 C21.913,28.972,22.457,29.5,23.131,29.5z" opacity=".07"/><path fill="#fff" d="M24.012,34.944c-0.628,0-1.146-0.19-1.555-0.571s-0.613-0.842-0.613-1.384 c0-0.565,0.206-1.029,0.619-1.39c0.412-0.361,0.928-0.541,1.549-0.541c0.628,0,1.143,0.183,1.543,0.547 c0.401,0.366,0.601,0.826,0.601,1.384c0,0.565-0.198,1.032-0.595,1.401C25.164,34.758,24.648,34.944,24.012,34.944z M25.99,14.763 L25.56,28.284C25.548,28.683,25.22,29,24.821,29h-1.69c-0.4,0-0.727-0.318-0.739-0.717l-0.406-13.52 C21.973,14.343,22.306,14,22.725,14h2.525C25.668,14,26.003,14.346,25.99,14.763z"/></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><circle cx="22" cy="9" r="2" fill="#c767e5"/><circle cx="12" cy="9" r="2" fill="#c767e5"/><path fill="#c767e5" d="M34,9c0-1.1-0.9-2-2-2H22l-2,2c0,3,3,3,3,7c0,0.702-0.127,1.374-0.349,2H34V9z"/><path fill="#c767e5" d="M11,16c0-4,3-4,3-7l-2-2H2C0.9,7,0,7.9,0,9v9h11.349C11.127,17.374,11,16.702,11,16z"/><path fill="#a238c2" d="M34,39v-9H0v9c0,1.1,0.9,2,2,2h30C33.1,41,34,40.1,34,39z"/><path fill="#ba54d9" d="M34,29.806c0-1.854,2.204-2.772,3.558-1.507C38.513,29.19,39.75,30,42,30 c3.675,0,6.578-3.303,5.902-7.102c-0.572-3.218-3.665-5.24-6.909-4.838c-1.663,0.206-2.671,0.92-3.479,1.684 C36.185,20.998,34,20.028,34,18.2V18H22.651c-0.825,2.329-3.04,4-5.651,4s-4.827-1.671-5.651-4H0v12h34V29.806z"/></svg>

After

Width:  |  Height:  |  Size: 786 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 10 KiB

View File

@@ -51,4 +51,6 @@ function ExecuteStep(sStep)
$('#wiz_form').data('installation_status', 'error'); $('#wiz_form').data('installation_status', 'error');
WizardUpdateButtons(); WizardUpdateButtons();
} ); } );
} }
CombodoTooltip.InitAllNonInstantiatedTooltips();

View File

@@ -39,9 +39,14 @@ class SetupPage extends NiceWebPage
{ {
parent::__construct($sTitle); parent::__construct($sTitle);
$this->add_linked_script("../js/jquery.blockUI.js"); $this->add_linked_script("../js/jquery.blockUI.js");
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'node_modules/@popperjs/core/dist/umd/popper.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'node_modules/tippy.js/dist/tippy-bundle.umd.js');
$this->add_linked_script("../setup/setup.js"); $this->add_linked_script("../setup/setup.js");
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/font-awesome/css/all.min.css'); $this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/font-awesome/css/all.min.css');
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/font-combodo/font-combodo.css'); $this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/font-combodo/font-combodo.css');
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'node_modules/tippy.js/dist/tippy.css');
$this->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'node_modules/tippy.js/animations/shift-away-subtle.css');
$this->LoadTheme(); $this->LoadTheme();
$this->add_saas("css/setup.scss"); $this->add_saas("css/setup.scss");

View File

@@ -1016,82 +1016,66 @@ class SetupUtils
$sWikiVersion = utils::GetItopVersionWikiSyntax(); //eg : '2_7_0'; $sWikiVersion = utils::GetItopVersionWikiSyntax(); //eg : '2_7_0';
$sMysqlTlsWikiPageUrl = 'https://www.itophub.io/wiki/page?id='.$sWikiVersion.':install:php_and_mysql_tls'; $sMysqlTlsWikiPageUrl = 'https://www.itophub.io/wiki/page?id='.$sWikiVersion.':install:php_and_mysql_tls';
$oPage->add('<tr><td colspan="2">');
$oPage->add('<fieldset><legend>Database Server Connection</legend>'); $oPage->add('<fieldset><legend>Database Server Connection</legend>');
$oPage->add('<table id="table_db_options">'); $oPage->add('<table id="table_db_options">');
//-- DB connection params //-- DB connection params
$oPage->add('<tbody>'); $oPage->add('<tbody>');
$oPage->add('<tr><td>Server Name:</td><td><input id="db_server" type="text" name="db_server" value="'.htmlentities($sDBServer, ENT_QUOTES, 'UTF-8').'" size="15"/></td><td>E.g. "localhost", "dbserver.mycompany.com" or "192.142.10.23"</td></tr>'); $oPage->add('<tr><td>Server Name:</td><td><input id="db_server" class="ibo-input" type="text" name="db_server" value="'.htmlentities($sDBServer, ENT_QUOTES, 'UTF-8').'" size="15"/></td><td><i class="fas fa-question-circle setup-input--hint--icon" data-tooltip-content="E.g. \'localhost\', \'dbserver.mycompany.com\' or \'192.142.10.23\'"></i></td></tr>');
$oPage->add('<tr><td>Login:</td><td><input id="db_user" type="text" name="db_user" value="' $oPage->add('<tr><td>Login:</td><td><input id="db_user" class="ibo-input" type="text" name="db_user" value="'
.htmlentities($sDBUser, ENT_QUOTES, 'UTF-8') .htmlentities($sDBUser, ENT_QUOTES, 'UTF-8')
.'" size="15"/></td><td rowspan="2" style="vertical-align:top">The account must have the following privileges on the database: SELECT, INSERT, UPDATE, DELETE, DROP, CREATE, ALTER, CREATE VIEW, SHOW VIEW, LOCK TABLE, SUPER, TRIGGER</td></tr>'); .'" size="15"/></td><td><i class="fas fa-question-circle setup-input--hint--icon" data-tooltip-content="The account must have the following privileges on the database: SELECT, INSERT, UPDATE, DELETE, DROP, CREATE, ALTER, CREATE VIEW, SHOW VIEW, LOCK TABLE, SUPER, TRIGGER"></i></td></tr>');
$oPage->add('<tr><td>Password:</td><td><input id="db_pwd" autocomplete="off" type="password" name="db_pwd" value="'.htmlentities($sDBPwd, ENT_QUOTES, 'UTF-8').'" size="15"/></td></tr>'); $oPage->add('<tr><td>Password:</td><td><input id="db_pwd" class="ibo-input" autocomplete="off" type="password" name="db_pwd" value="'.htmlentities($sDBPwd, ENT_QUOTES, 'UTF-8').'" size="15"/></td></tr>');
$oPage->add('</tbody>'); $oPage->add('</tbody></table>');
//-- TLS params (N°1260) //-- TLS params (N°1260)
$sTlsEnabledChecked = $bTlsEnabled ? ' checked' : ''; $sTlsEnabledChecked = $bTlsEnabled ? ' checked' : '';
$sTlsCaDisabled = $bTlsEnabled ? '' : ' disabled'; $sTlsCaDisabled = $bTlsEnabled ? '' : ' disabled';
$oPage->add('<tbody id="tls_options" class="collapsable-options">'); $oPage->add('<div id="tls_options" class="collapsable-options">');
$oPage->add('<tr><th colspan="3" style="text-align: left; background-color: transparent"><label style="margin: 6em; font-weight: normal; color: #696969"><img style="vertical-align:bottom" id="db_tls_img">Use TLS encrypted connection</label></th></tr>'); $oPage->add('<span data-role="setup-collapsable-options--toggler"><img id="db_tls_img"><label>Use TLS encrypted connection</label></span>');
$oPage->add('<tr style="display:none"><td colspan="3" class="message message-error">Before configuring MySQL with TLS encryption, read the documentation <a href="'.$sMysqlTlsWikiPageUrl.'" target="_blank">on Combodo\'s Wiki</a></td></tr>'); $oPage->add('<div class="message message-error" style="display:none;">Before configuring MySQL with TLS encryption, read the documentation <a href="'.$sMysqlTlsWikiPageUrl.'" target="_blank">on Combodo\'s Wiki</a></div>');
$oPage->add('<tr style="display:none"><td colspan="3"><label><input id="db_tls_enabled" type="checkbox"'.$sTlsEnabledChecked.' name="db_tls_enabled" value="1"> Encrypted connection enabled</label></td></tr>'); $oPage->add('<label style="display:none;"><input id="db_tls_enabled" type="checkbox" '.$sTlsEnabledChecked.' name="db_tls_enabled" value="1"> Encrypted connection enabled</label>');
$oPage->add('<tr style="display:none"><td>SSL CA:</td>'); $oPage->add('<div class="setup-tls--input--container" style="display:none">SSL CA:');
$oPage->add('<td><input id="db_tls_ca" autocomplete="off" type="text" name="db_tls_ca" value="'.htmlentities($sTlsCA, $oPage->add('<input id="db_tls_ca" class="ibo-input" autocomplete="off" type="text" name="db_tls_ca" value="'.htmlentities($sTlsCA,
ENT_QUOTES, 'UTF-8').'" size="15"'.$sTlsCaDisabled.'></td>'); ENT_QUOTES, 'UTF-8').'" size="15"'.$sTlsCaDisabled.'>');
$oPage->add('<td>Path to certificate authority file for SSL</td></tr>'); $oPage->add('Path to certificate authority file for SSL</div>');
$oPage->add('</tbody>'); $oPage->add('</div>');
$oPage->add('</table>');
$oPage->add('</fieldset>'); $oPage->add('</fieldset>');
$oPage->add('</td></tr>');
$oPage->add('<tr><td colspan="2"><div id="db_info"></div></td></tr>'); $oPage->add('<div id="db_info"></div>');
$oPage->add('<tr><td colspan="2">'); $oPage->add('');
$oPage->add('<fieldset><legend>Database</legend>'); $oPage->add('<fieldset><legend>Database</legend>');
$oPage->add('<table>'); $oPage->add('<table>');
if ($bIsItopInstall) if ($bIsItopInstall)
{ {
$oPage->add('<tr><td><input type="radio" id="create_db" name="create_db" value="yes"/><label for="create_db">&nbsp;Create a new database:</label></td>'); $oPage->add('<tr><td><input type="radio" id="create_db" name="create_db" value="yes"/><label for="create_db">&nbsp;Create a new database:</label></td>');
$oPage->add('<td><input id="db_new_name" type="text" name="db_new_name" value="'.htmlentities($sNewDBName, ENT_QUOTES, 'UTF-8').'" size="15" maxlength="32"/><span style="width:20px;" id="v_db_new_name"></span></td></tr>'); $oPage->add('<td><input id="db_new_name" class="ibo-input" type="text" name="db_new_name" value="'.htmlentities($sNewDBName, ENT_QUOTES, 'UTF-8').'" size="15" maxlength="32"/><span style="width:20px;" id="v_db_new_name"></span></td></tr>');
$oPage->add('<tr><td><input type="radio" id="existing_db" name="create_db" value="no"/><label for="existing_db">&nbsp;Use the existing database:</label></td>'); $oPage->add('<tr><td><input type="radio" id="existing_db" name="create_db" value="no"/><label for="existing_db">&nbsp;Use the existing database:</label></td>');
$oPage->add('<td id="db_name_container"><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></td></tr>'); $oPage->add('<td id="db_name_container" class="ibo-input-select-wrapper"><input id="db_name" class="ibo-input ibo-input-select" name="db_name" size="15" maxlen="32" value="'.htmlentities($sDBName, ENT_QUOTES, 'UTF-8').'"/><span style="width:20px;" id="v_db_name"></span></td></tr>');
$oPage->add('</tbody>');
$oPage->add('<tbody id="prefix_option" class="collapsable-options">');
$oPage->add('<tr><th colspan="3" style="text-align: left; background-color: transparent"><label style="margin: 0.4em; font-weight: normal; color: #696969"><img style="vertical-align:bottom">Use shared database</label></th></tr>');
$oPage->add('<tr style="display:none"><td>Use a prefix for the tables:</td><td><input id="db_prefix" type="text" name="db_prefix" value="'.htmlentities($sDBPrefix,
ENT_QUOTES, 'UTF-8').'" size="15"/><span style="width:20px;" id="v_db_prefix"></span></td></tr>');
$oPage->add('</tbody>');
} }
else else
{ {
$oPage->add('<tr><td>Database Name:</td><td id="db_name_container"><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></td></tr>'); $oPage->add('<tr><td>Database Name:</td><td id="db_name_container" class="ibo-input-select-wrapper"><input id="db_name" class="ibo-input ibo-input-select" name="db_name" size="15" maxlen="32" value="'.htmlentities($sDBName, ENT_QUOTES, 'UTF-8').'"/><span style="width:20px;" id="v_db_name"></span></td></tr>');
$oPage->add('</tbody>');
$oPage->add('<tbody id="prefix_option" class="collapsable-options">');
$oPage->add('<tr><th colspan="3" style="text-align: left; background-color: transparent"><label style="margin: 0.4em; font-weight: normal; color: #696969"><img style="vertical-align:bottom">Use shared database</label></th></tr>');
$oPage->add('<tr style="display:none"><td>Use a prefix for the tables:</td><td><input id="db_prefix" type="text" name="db_prefix" value="'.htmlentities($sDBPrefix,
ENT_QUOTES, 'UTF-8').'" size="15"/><span style="width:20px;" id="v_db_prefix"></span></td></tr>');
$oPage->add('</tbody>');
} }
$oPage->add('</table>'); $oPage->add('</table>');
$oPage->add('<div id="prefix_option" class="collapsable-options">');
$oPage->add('<span data-role="setup-collapsable-options--toggler"><label style="font-weight: normal;"><img>Use shared database</label></span>');
$oPage->add('<div class="setup-prefix-toggler--input--container" style="display:none">Use a prefix for the tables:<input id="db_prefix" class="ibo-input" type="text" name="db_prefix" value="'.htmlentities($sDBPrefix,
ENT_QUOTES, 'UTF-8').'" size="15"/><span style="width:20px;" id="v_db_prefix"></span></div>');
$oPage->add('</div>');
$oPage->add('</fieldset>'); $oPage->add('</fieldset>');
$oPage->add('<tr><td colspan="2"><span id="table_info">&nbsp;</span></td></tr>'); $oPage->add('<span id="table_info"></span>');
$oPage->add('</td></tr>');
// Sub options toggle (TLS, prefix) // Sub options toggle (TLS, prefix)
$oPage->add_script(<<<'JS' $oPage->add_script(<<<'JS'
function toggleCollapsableOptions($tbody) { function toggleCollapsableOptions($tbody) {
$tbody.find("tr").not("tr:first-child").toggle(); $tbody.children().not(":first-child").toggle();
updateCollapsableImage($tbody); updateCollapsableImage($tbody);
} }
function updateCollapsableImage($tbody) { function updateCollapsableImage($tbody) {
$collapsableImg = $tbody.find("tr:first-child>th>label>img"); $tbody.toggleClass('setup-is-opened');
imgPath = "../images/";
imgUrl = ($tbody.find("tr:nth-child(2)>td:visible").length > 0)
? "minus.gif"
: "plus.gif";
$collapsableImg.attr("src", imgPath+imgUrl);
} }
JS JS
); );
@@ -1101,17 +1085,14 @@ JS
} }
$oPage->add_ready_script( $oPage->add_ready_script(
<<<'JS' <<<'JS'
$("tbody.collapsable-options>tr>th>label").on('click', function() { $("[data-role=\"setup-collapsable-options--toggler\"").on('click', function() {
var $tbody = $(this).closest("tbody"); var $tbody = $(this).closest("div");
toggleCollapsableOptions($tbody); toggleCollapsableOptions($tbody);
}); });
$("#db_tls_enabled").on('click', function() { $("#db_tls_enabled").on('click', function() {
var bTlsEnabled = $("#db_tls_enabled").is(":checked"); var bTlsEnabled = $("#db_tls_enabled").is(":checked");
$("#db_tls_ca").prop("disabled", !bTlsEnabled); $("#db_tls_ca").prop("disabled", !bTlsEnabled);
}); });
$("tbody.collapsable-options").each(function() {
updateCollapsableImage($(this));
})
JS JS
); );
@@ -1206,13 +1187,13 @@ function ValidateField(sFieldId, bUsed)
} }
else else
{ {
$("#v_"+sFieldId).html('<img src="../images/validation_error.png" title="Only the characters [A-Za-z0-9_] are allowed"/>'); $("#v_"+sFieldId).html('<i class="fas fa-exclamation-triangle setup-invalid-field--icon" title="Only the characters [A-Za-z0-9_] are allowed"></i>');
return false; return false;
} }
} }
else if (bMandatory) else if (bMandatory)
{ {
$("#v_"+sFieldId).html('<img src="../images/validation_error.png" title="This field cannot be empty"/>'); $("#v_"+sFieldId).html('<i class="fas fa-exclamation-triangle setup-invalid-field--icon" title="This field cannot be empty"></i>');
return false; return false;
} }
else else
@@ -1507,7 +1488,7 @@ JS
} }
else else
{ {
$sDBNameInput = '<select id="db_name" name="db_name">'; $sDBNameInput = '<select id="db_name" class="ibo-input ibo-input-select" name="db_name">';
foreach ($checks['databases'] as $sDatabaseName) foreach ($checks['databases'] as $sDatabaseName)
{ {
if ($sDatabaseName != 'information_schema') if ($sDatabaseName != 'information_schema')
@@ -1556,7 +1537,7 @@ JS
public static function GetLanguageSelect($sSourceDir, $sInputName, $sDefaultLanguageCode) public static function GetLanguageSelect($sSourceDir, $sInputName, $sDefaultLanguageCode)
{ {
$sHtml = '<select id="'.$sInputName.'" name="'.$sInputName.'">'; $sHtml = '<div class="ibo-input-select-wrapper"><select id="'.$sInputName.'" class="ibo-input ibo-input-select" name="'.$sInputName.'">';
$sSourceDir = APPROOT.'dictionaries/'; $sSourceDir = APPROOT.'dictionaries/';
$aLanguages = SetupUtils::GetAvailableLanguages($sSourceDir); $aLanguages = SetupUtils::GetAvailableLanguages($sSourceDir);
foreach ($aLanguages as $sCode => $aInfo) { foreach ($aLanguages as $sCode => $aInfo) {
@@ -1564,7 +1545,7 @@ JS
$sHtml .= '<option value="'.$sCode.'" '.$sSelected.'>'.htmlentities($aInfo['description'], ENT_QUOTES, $sHtml .= '<option value="'.$sCode.'" '.$sSelected.'>'.htmlentities($aInfo['description'], ENT_QUOTES,
'UTF-8').' ('.htmlentities($aInfo['localized_description'], ENT_QUOTES, 'UTF-8').')</option>'; 'UTF-8').' ('.htmlentities($aInfo['localized_description'], ENT_QUOTES, 'UTF-8').')</option>';
} }
$sHtml .= '</select></td></tr>'; $sHtml .= '</select></div>';
return $sHtml; return $sHtml;
} }

View File

@@ -267,7 +267,7 @@ class WizStepInstallOrUpgrade extends WizardStep
{ {
$sUpgradeInfoStyle = ' style="display: none;" '; $sUpgradeInfoStyle = ' style="display: none;" ';
} }
$oPage->add('<h2>What do you want to do?</h2>'); $oPage->add('<div class="setup-content-title">What do you want to do?</div>');
$sChecked = ($sInstallMode == 'install') ? ' checked ' : ''; $sChecked = ($sInstallMode == 'install') ? ' checked ' : '';
$oPage->p('<input id="radio_install" type="radio" name="install_mode" value="install" '.$sChecked.'/><label for="radio_install">&nbsp;Install a new '.ITOP_APPLICATION.'</label>'); $oPage->p('<input id="radio_install" type="radio" name="install_mode" value="install" '.$sChecked.'/><label for="radio_install">&nbsp;Install a new '.ITOP_APPLICATION.'</label>');
$sChecked = ($sInstallMode == 'upgrade') ? ' checked ' : ''; $sChecked = ($sInstallMode == 'upgrade') ? ' checked ' : '';
@@ -276,12 +276,9 @@ class WizStepInstallOrUpgrade extends WizardStep
$sUpgradeDir = utils::HtmlEntities($sPreviousVersionDir); $sUpgradeDir = utils::HtmlEntities($sPreviousVersionDir);
$oPage->add(<<<HTML $oPage->add(<<<HTML
<table id="upgrade_info"'.$sUpgradeInfoStyle.'> <div id="upgrade_info"'.$sUpgradeInfoStyle.'>
<tr> <div class="setup-disk-location--input--container">Location on the disk:<input id="previous_version_dir_display" type="text" value="$sUpgradeDir" class="ibo-input" disabled>
<td>Location on the disk:</td> <input type="hidden" name="previous_version_dir" value="$sUpgradeDir"></div>
<td><input id="previous_version_dir_display" type="text" value="$sUpgradeDir" style="width: 98%;" disabled>
<input type="hidden" name="previous_version_dir" value="$sUpgradeDir"></td>
</tr>
HTML HTML
); );
@@ -307,19 +304,18 @@ HTML
} }
$sChecked = ($bCanBackup && $bDBBackup) ? ' checked ' : ''; $sChecked = ($bCanBackup && $bDBBackup) ? ' checked ' : '';
$sDisabled = $bCanBackup ? '' : ' disabled '; $sDisabled = $bCanBackup ? '' : ' disabled ';
$oPage->add('<tr><td colspan="2"><input id="db_backup" type="checkbox" name="db_backup" '.$sChecked.$sDisabled.' value="1"/><label for="db_backup">&nbsp;Backup the '.ITOP_APPLICATION.' database before upgrading</label></td></tr>'); $oPage->add('<input id="db_backup" type="checkbox" name="db_backup" '.$sChecked.$sDisabled.' value="1"/><label for="db_backup">Backup the '.ITOP_APPLICATION.' database before upgrading</label>');
$oPage->add('<tr><td style="width: 8rem; text-align: right;">Save the backup to:</td><td><input id="db_backup_path" type="text" name="db_backup_path" $oPage->add('<div class="setup-backup--input--container">Save the backup to:<input id="db_backup_path" class="ibo-input" type="text" name="db_backup_path"
'.$sDisabled.'value="' '.$sDisabled.'value="'
.htmlentities($sDBBackupPath, ENT_QUOTES, 'UTF-8').'" style="width: 98%;"/></td></tr>'); .htmlentities($sDBBackupPath, ENT_QUOTES, 'UTF-8').'"/></div>');
$fFreeSpace = SetupUtils::CheckDiskSpace($sDBBackupPath); $fFreeSpace = SetupUtils::CheckDiskSpace($sDBBackupPath);
$sMessage = ''; $sMessage = '';
if ($fFreeSpace !== false) if ($fFreeSpace !== false)
{ {
$sMessage .= SetupUtils::HumanReadableSize($fFreeSpace).' free in '.dirname($sDBBackupPath); $sMessage .= SetupUtils::HumanReadableSize($fFreeSpace).' free in '.dirname($sDBBackupPath);
} }
$oPage->add('<tr><td colspan="2">'); $oPage->add($sMySQLDumpMessage.'<span id="backup_info" style="font-size:small;color:#696969;">'.$sMessage.'</span>');
$oPage->add($sMySQLDumpMessage.'<br/><span id="backup_info" style="font-size:small;color:#696969;">'.$sMessage.'</span></td></tr>'); $oPage->add('</div>');
$oPage->add('</table>');
$sAuthentToken = $this->oWizard->GetParameter('authent', ''); $sAuthentToken = $this->oWizard->GetParameter('authent', '');
$oPage->add('<input type="hidden" id="authent_token" value="'.$sAuthentToken.'"/>'); $oPage->add('<input type="hidden" id="authent_token" value="'.$sAuthentToken.'"/>');
//$oPage->add('</fieldset>'); //$oPage->add('</fieldset>');
@@ -708,7 +704,7 @@ class WizStepLicense extends WizardStep
$oPage->add_style( $oPage->add_style(
<<<CSS <<<CSS
fieldset ul { fieldset ul {
max-height: 18em; max-height: 30em;
overflow: auto; overflow: auto;
} }
CSS CSS
@@ -724,7 +720,7 @@ CSS
foreach ($aLicenses as $oLicense) foreach ($aLicenses as $oLicense)
{ {
$oPage->add('<li><b>'.$oLicense->product.'</b>, &copy; '.$oLicense->author.' is licensed under the <b>'.$oLicense->license_type.' license</b>. (<span class="toggle" id="toggle_'.$index.'">Details</span>)'); $oPage->add('<li><b>'.$oLicense->product.'</b>, &copy; '.$oLicense->author.' is licensed under the <b>'.$oLicense->license_type.' license</b>. (<span class="toggle" id="toggle_'.$index.'">Details</span>)');
$oPage->add('<div id="license_'.$index.'" class="license_text" style="display:none;overflow:auto;max-height:10em;font-size:small;border:1px #696969 solid;margin-bottom:1em; margin-top:0.5em;padding:0.5em;"><pre>'.$oLicense->text.'</pre></div>'); $oPage->add('<div id="license_'.$index.'" class="license_text" style="display:none;overflow:auto;max-height:10em;font-size:12px;border:1px #696969 solid;margin-bottom:1em; margin-top:0.5em;padding:0.5em;"><pre>'.$oLicense->text.'</pre></div>');
$oPage->add_ready_script('$(".license_text a").attr("target", "_blank").addClass("no-arrow");'); $oPage->add_ready_script('$(".license_text a").attr("target", "_blank").addClass("no-arrow");');
$oPage->add_ready_script('$("#toggle_'.$index.'").on("click", function() { $("#license_'.$index.'").toggle(); } );'); $oPage->add_ready_script('$("#toggle_'.$index.'").on("click", function() { $("#license_'.$index.'").toggle(); } );');
$index++; $index++;
@@ -732,7 +728,7 @@ CSS
$oPage->add('</ul>'); $oPage->add('</ul>');
$oPage->add('</fieldset>'); $oPage->add('</fieldset>');
$sChecked = ($this->oWizard->GetParameter('accept_license', 'no') == 'yes') ? ' checked ' : ''; $sChecked = ($this->oWizard->GetParameter('accept_license', 'no') == 'yes') ? ' checked ' : '';
$oPage->p('<input type="checkbox" name="accept_license" id="accept" value="yes" '.$sChecked.'><label for="accept">&nbsp;I accept the terms of the licenses of the '.count($aLicenses).' components mentioned above.</label>'); $oPage->add('<div class="setup-accept-licenses"><input type="checkbox" name="accept_license" id="accept" value="yes" '.$sChecked.'><label for="accept">I accept the terms of the licenses of the '.count($aLicenses).' components mentioned above.</label></div>');
$oPage->add_ready_script('$("#accept").bind("click change", function() { WizardUpdateButtons(); });'); $oPage->add_ready_script('$("#accept").bind("click change", function() { WizardUpdateButtons(); });');
} }
@@ -890,9 +886,9 @@ class WizStepAdminAccount extends WizardStep
$oPage->add('<fieldset>'); $oPage->add('<fieldset>');
$oPage->add('<legend>Administrator Account</legend>'); $oPage->add('<legend>Administrator Account</legend>');
$oPage->add('<table>'); $oPage->add('<table>');
$oPage->add('<tr><td>Login: </td><td><input id="admin_user" name="admin_user" type="text" size="25" maxlength="64" value="'.htmlentities($sAdminUser, ENT_QUOTES, 'UTF-8').'"><span id="v_admin_user"/></td><tr>'); $oPage->add('<tr><td>Login: </td><td><input id="admin_user" class="ibo-input" name="admin_user" type="text" size="25" maxlength="64" value="'.htmlentities($sAdminUser, ENT_QUOTES, 'UTF-8').'"><span id="v_admin_user"/></td></tr>');
$oPage->add('<tr><td>Password: </td><td><input id="admin_pwd" autocomplete="off" name="admin_pwd" type="password" size="25" maxlength="64" value="'.htmlentities($sAdminPwd, ENT_QUOTES, 'UTF-8').'"><span id="v_admin_pwd"/></td><tr>'); $oPage->add('<tr><td>Password: </td><td><input id="admin_pwd" class="ibo-input" autocomplete="off" name="admin_pwd" type="password" size="25" maxlength="64" value="'.htmlentities($sAdminPwd, ENT_QUOTES, 'UTF-8').'"><span id="v_admin_pwd"/></td></tr>');
$oPage->add('<tr><td>Confirm password: </td><td><input id="confirm_pwd" autocomplete="off" name="confirm_pwd" type="password" size="25" maxlength="64" value="'.htmlentities($sConfirmPwd, ENT_QUOTES, 'UTF-8').'"></td><tr>'); $oPage->add('<tr><td>Confirm password: </td><td><input id="confirm_pwd" class="ibo-input" autocomplete="off" name="confirm_pwd" type="password" size="25" maxlength="64" value="'.htmlentities($sConfirmPwd, ENT_QUOTES, 'UTF-8').'"></td></tr>');
$sSourceDir = APPROOT.'dictionaries/'; $sSourceDir = APPROOT.'dictionaries/';
$aLanguages = SetupUtils::GetAvailableLanguages($sSourceDir); $aLanguages = SetupUtils::GetAvailableLanguages($sSourceDir);
$oPage->add('<tr><td>Language: </td><td>'); $oPage->add('<tr><td>Language: </td><td>');
@@ -920,7 +916,7 @@ EOF
bRet = ($('#admin_user').val() != ''); bRet = ($('#admin_user').val() != '');
if (!bRet) if (!bRet)
{ {
$("#v_admin_user").html('<img src="../images/validation_error.png" title="This field cannot be empty"/>'); $("#v_admin_user").html('<i class="fas fa-exclamation-triangle setup-invalid-field--icon" title="This field cannot be empty"></i>');
} }
else else
{ {
@@ -930,7 +926,7 @@ EOF
bPasswordsMatch = ($('#admin_pwd').val() == $('#confirm_pwd').val()); bPasswordsMatch = ($('#admin_pwd').val() == $('#confirm_pwd').val());
if (!bPasswordsMatch) if (!bPasswordsMatch)
{ {
$('#v_admin_pwd').html('<img src="../images/validation_error.png" title="Retyped password do not match"/>'); $('#v_admin_pwd').html('<i class="fas fa-exclamation-triangle setup-invalid-field--icon" title="Retyped password does not match"></i>');
} }
else else
{ {
@@ -1022,17 +1018,17 @@ class WizStepInstallMiscParams extends AbstractWizStepMiscParams
$oPage->add('<fieldset>'); $oPage->add('<fieldset>');
$oPage->add('<legend>Application URL</legend>'); $oPage->add('<legend>Application URL</legend>');
$oPage->add('<table>'); $oPage->add('<table>');
$oPage->add('<tr><td>URL: </td><td><input id="application_url" name="application_url" type="text" size="35" maxlength="1024" value="'.htmlentities($sApplicationURL, ENT_QUOTES, 'UTF-8').'" style="width: 100%;box-sizing: border-box;"><span id="v_application_url"/></td><tr>'); $oPage->add('<tr><td>URL: </td><td><input id="application_url" class="ibo-input" name="application_url" type="text" size="35" maxlength="1024" value="'.htmlentities($sApplicationURL, ENT_QUOTES, 'UTF-8').'" style="width: 100%;box-sizing: border-box;"><span id="v_application_url"/></td><tr>');
$oPage->add('<tr><td colspan="2"><div class="message message-warning">Change the value above if the end-users will be accessing the application by another path due to a specific configuration of the web server.</div></td><tr>');
$oPage->add('</table>'); $oPage->add('</table>');
$oPage->add('<div class="message message-warning">Change the value above if the end-users will be accessing the application by another path due to a specific configuration of the web server.</div>');
$oPage->add('</fieldset>'); $oPage->add('</fieldset>');
$oPage->add('<fieldset>'); $oPage->add('<fieldset>');
$oPage->add('<legend>Path to Graphviz\' dot application</legend>'); $oPage->add('<legend>Path to Graphviz\' dot application</legend>');
$oPage->add('<table style="width: 100%;">'); $oPage->add('<table>');
$oPage->add('<tr><td>Path: </td><td><input id="graphviz_path" name="graphviz_path" type="text" size="35" maxlength="1024" value="'.htmlentities($sGraphvizPath, ENT_QUOTES, 'UTF-8').'" style="width: 100%;box-sizing: border-box;"><span id="v_graphviz_path"/></td><tr>'); $oPage->add('<tr><td>Path: </td><td><input id="graphviz_path" class="ibo-input" name="graphviz_path" type="text" size="35" maxlength="1024" value="'.htmlentities($sGraphvizPath, ENT_QUOTES, 'UTF-8').'" style="width: 100%;box-sizing: border-box;"><span id="v_graphviz_path"/></td>');
$oPage->add('<tr><td colspan="2"><a href="http://www.graphviz.org" target="_blank">Graphviz</a> is required to display the impact analysis graph (i.e. impacts / depends on).</td><tr>'); $oPage->add('<td><i class="fas fa-question-circle setup-input--hint--icon" data-tooltip-content="Graphviz is required to display the impact analysis graph (i.e. impacts / depends on)."></i></td><tr>');
$oPage->add('<tr><td colspan="2"><span id="graphviz_status"></span></td><tr>');
$oPage->add('</table>'); $oPage->add('</table>');
$oPage->add('<span id="graphviz_status"></span>');
$oPage->add('</fieldset>'); $oPage->add('</fieldset>');
$oPage->add('<fieldset>'); $oPage->add('<fieldset>');
$oPage->add('<legend>Sample Data</legend>'); $oPage->add('<legend>Sample Data</legend>');
@@ -1170,17 +1166,17 @@ class WizStepUpgradeMiscParams extends AbstractWizStepMiscParams
$oPage->add('<fieldset>'); $oPage->add('<fieldset>');
$oPage->add('<legend>Application URL</legend>'); $oPage->add('<legend>Application URL</legend>');
$oPage->add('<table>'); $oPage->add('<table>');
$oPage->add('<tr><td>URL: </td><td><input id="application_url" name="application_url" type="text" size="35" maxlength="1024" value="'.htmlentities($sApplicationURL, ENT_QUOTES, 'UTF-8').'" style="width: 100%;box-sizing: border-box;"><span id="v_application_url"/></td><tr>'); $oPage->add('<tr><td>URL: </td><td><input id="application_url" class="ibo-input" name="application_url" type="text" size="35" maxlength="1024" value="'.htmlentities($sApplicationURL, ENT_QUOTES, 'UTF-8').'" style="width: 100%;box-sizing: border-box;"><span id="v_application_url"/></td><tr>');
$oPage->add('<tr><td colspan="2"><div class="message message-warning">Change the value above if the end-users will be accessing the application by another path due to a specific configuration of the web server.</div></td><tr>');
$oPage->add('</table>'); $oPage->add('</table>');
$oPage->add('<div class="message message-warning">Change the value above if the end-users will be accessing the application by another path due to a specific configuration of the web server.</div>');
$oPage->add('</fieldset>'); $oPage->add('</fieldset>');
$oPage->add('<fieldset>'); $oPage->add('<fieldset>');
$oPage->add('<legend>Path to Graphviz\' dot application</legend>'); $oPage->add('<legend>Path to Graphviz\' dot application</legend>');
$oPage->add('<table style="width: 100%;">'); $oPage->add('<table>');
$oPage->add('<tr><td>Path: </td><td><input id="graphviz_path" name="graphviz_path" type="text" size="35" maxlength="1024" value="'.htmlentities($sGraphvizPath, ENT_QUOTES, 'UTF-8').'" style="width: 100%;box-sizing: border-box;"><span id="v_graphviz_path"/></td><tr>'); $oPage->add('<tr><td>Path: </td><td><input id="graphviz_path" class="ibo-input" name="graphviz_path" type="text" size="35" maxlength="1024" value="'.htmlentities($sGraphvizPath, ENT_QUOTES, 'UTF-8').'" style="width: 100%;box-sizing: border-box;"><span id="v_graphviz_path"/></td>');
$oPage->add('<tr><td colspan="2"><a href="http://www.graphviz.org" target="_blank">Graphviz</a> is required to display the impact analysis graph (i.e. impacts / depends on).</td><tr>'); $oPage->add('<td><i class="fas fa-question-circle setup-input--hint--icon" data-tooltip-content="Graphviz is required to display the impact analysis graph (i.e. impacts / depends on)."></i></td><tr>');
$oPage->add('<tr><td colspan="2"><span id="graphviz_status"></span></td><tr>');
$oPage->add('</table>'); $oPage->add('</table>');
$oPage->add('<span id="graphviz_status"></span>');
$oPage->add('</fieldset>'); $oPage->add('</fieldset>');
$sAuthentToken = $this->oWizard->GetParameter('authent', ''); $sAuthentToken = $this->oWizard->GetParameter('authent', '');
$oPage->add('<input type="hidden" id="authent_token" value="'.$sAuthentToken.'"/>'); $oPage->add('<input type="hidden" id="authent_token" value="'.$sAuthentToken.'"/>');
@@ -1416,7 +1412,7 @@ class WizStepModulesChoice extends WizardStep
$oPage->warning($sManualInstallError); $oPage->warning($sManualInstallError);
} }
$oPage->add('<table class="module-selection-banner"><tr>'); $oPage->add('<div class="module-selection-banner">');
$sBannerPath = isset($aStepInfo['banner']) ? $aStepInfo['banner'] : ''; $sBannerPath = isset($aStepInfo['banner']) ? $aStepInfo['banner'] : '';
if (!empty($sBannerPath)) if (!empty($sBannerPath))
{ {
@@ -1432,11 +1428,11 @@ class WizStepModulesChoice extends WizardStep
$sRealPath = realpath($sFullPath); $sRealPath = realpath($sFullPath);
$sBannerUrl = utils::GetDefaultUrlAppRoot(true).str_replace(realpath(APPROOT), '', $sRealPath); $sBannerUrl = utils::GetDefaultUrlAppRoot(true).str_replace(realpath(APPROOT), '', $sRealPath);
} }
$oPage->add('<td><img src="'.$sBannerUrl.'"/><td>'); $oPage->add('<img src="'.$sBannerUrl.'"/>');
} }
$sDescription = isset($aStepInfo['description']) ? $aStepInfo['description'] : ''; $sDescription = isset($aStepInfo['description']) ? $aStepInfo['description'] : '';
$oPage->add('<td>'.$sDescription.'<td>'); $oPage->add('<span>'.$sDescription.'</span>');
$oPage->add('</tr></table>'); $oPage->add('</div>');
// Build the default choices // Build the default choices
$aDefaults = $this->GetDefaults($aStepInfo, $aModules); $aDefaults = $this->GetDefaults($aStepInfo, $aModules);
@@ -1902,7 +1898,7 @@ EOF
$aStepDefinition = array( $aStepDefinition = array(
'title' => 'Extensions', 'title' => 'Extensions',
'description' => '<h2>Select additional extensions to install. You can launch the installation again to install new extensions, but you cannot remove already installed extensions.</h2>', 'description' => '<h2>Select additional extensions to install. You can launch the installation again to install new extensions, but you cannot remove already installed extensions.</h2>',
'banner' => '/images/extension.png', 'banner' => '/images/icons/icons8-puzzle.svg',
'options' => array() 'options' => array()
); );
@@ -1935,7 +1931,7 @@ EOF
$aStepDefinition = array( $aStepDefinition = array(
'title' => 'Modules Selection', 'title' => 'Modules Selection',
'description' => '<h2>Select the modules to install. You can launch the installation again to install new modules, but you cannot remove already installed modules.</h2>', 'description' => '<h2>Select the modules to install. You can launch the installation again to install new modules, but you cannot remove already installed modules.</h2>',
'banner' => '/images/modules.png', 'banner' => '/images/icons/icons8-apps-tab.svg',
'options' => array() 'options' => array()
); );
foreach($this->oExtensionsMap->GetAllExtensions() as $oExtension) foreach($this->oExtensionsMap->GetAllExtensions() as $oExtension)
@@ -2192,48 +2188,6 @@ class WizStepSummary extends WizardStep
public function Display(WebPage $oPage) public function Display(WebPage $oPage)
{ {
$oPage->add_style(
<<<CSS
#params_summary {
overflow: auto;
}
#params_summary div {
width:100%;
margin-top:0;
padding-top: 0.5em;
padding-left: 0;
}
#params_summary div ul {
margin-left:0;
padding-left: 20px;
}
#params_summary div.closed ul {
display:none;
}
#params_summary div li {
list-style: none;
width: 100%;
margin-left:0;
padding-left: 0em;
}
.title {
padding-left: 20px;
font-weight: bold;
cursor: pointer;
}
#params_summary div.closed .title {
background: url(../images/plus.gif) 2px 2px no-repeat;
}
#progress_content {
height: 200px;
overflow: auto;
text-align: center;
}
#installation_progress {
display: none;
}
CSS
);
$aInstallParams = $this->BuildConfig(); $aInstallParams = $this->BuildConfig();
@@ -2272,7 +2226,7 @@ CSS
} }
$oPage->add('</ul></div>'); $oPage->add('</ul></div>');
$oPage->add('<div><span class="title ibo-setup-summary-title">Data Model Configuration</span>'); $oPage->add('<div class="closed"><span class="title ibo-setup-summary-title">Data Model Configuration</span>');
$oPage->add($this->oWizard->GetParameter('display_choices')); $oPage->add($this->oWizard->GetParameter('display_choices'));
$oPage->add('</div>'); $oPage->add('</div>');
@@ -2593,7 +2547,7 @@ class WizStepDone extends WizardStep
{ {
// To mitigate security risks: pass only the filename without the extension, the download will add the extension itself // To mitigate security risks: pass only the filename without the extension, the download will add the extension itself
$oPage->p('Your backup is ready'); $oPage->p('Your backup is ready');
$oPage->p('<a style="background:transparent;" href="'.utils::GetAbsoluteUrlAppRoot(true).'setup/ajax.dataloader.php?operation=async_action&step_class=WizStepDone&params[backup]='.urlencode($sBackupDestination).'&authent='.$this->oWizard->GetParameter('authent','').'" target="_blank"><img src="../images/tar.png" style="border:0;vertical-align:middle;">&nbsp;Download '.basename($sBackupDestination).'</a>'); $oPage->p('<a style="background:transparent;" href="'.utils::GetAbsoluteUrlAppRoot(true).'setup/ajax.dataloader.php?operation=async_action&step_class=WizStepDone&params[backup]='.urlencode($sBackupDestination).'&authent='.$this->oWizard->GetParameter('authent','').'" target="_blank"><img src="../images/icons/icons8-archive-folder.svg" style="border:0;vertical-align:middle;">&nbsp;Download '.basename($sBackupDestination).'</a>');
} }
else else
{ {
@@ -2602,11 +2556,11 @@ class WizStepDone extends WizardStep
} }
// Form goes here.. No back button since the job is done ! // Form goes here.. No back button since the job is done !
$oPage->add('<table id="placeholder" style="width:600px;border:0;padding:0;"><tr>'); $oPage->add('<div id="placeholder" class="setup-end-placeholder">');
$oPage->add("<td><a style=\"background:transparent;padding:0;\" title=\"Subscribe to Combodo Newsletter.\" href=\"https://www.combodo.com/newsletter-subscription?var_mode=recalcul\" target=\"_blank\"><img style=\"border:0\" src=\"../images/setup-register.gif\"/></td></a>"); $oPage->add("<div><a class=\"ibo-svg-illustration--container\" title=\"Subscribe to Combodo Newsletter.\" href=\"https://www.combodo.com/newsletter-subscription?var_mode=recalcul\" target=\"_blank\">".file_get_contents(APPROOT.'images/illustrations/undraw_newsletter.svg')." Register now</a></div>");
$oPage->add("<td><a style=\"background:transparent;padding:0;\" title=\"Get Professional Support from Combodo\" href=\"https://support.combodo.com\" target=\"_blank\"><img style=\"border:0\" src=\"../images/setup-support.gif\"/></td></a>"); $oPage->add("<div><a class=\"ibo-svg-illustration--container\" title=\"Get Professional Support from Combodo\" href=\"https://support.combodo.com\" target=\"_blank\">".file_get_contents(APPROOT.'images/illustrations/undraw_active_support.svg')."Get professional support</a></div>");
$oPage->add("<td><a style=\"background:transparent;padding:0;\" title=\"Get Professional Training from Combodo\" href=\"http://www.combodo.com/training\" target=\"_blank\"><img style=\"border:0\" src=\"../images/setup-training.gif\"/></td></a>"); $oPage->add("<div><a class=\"ibo-svg-illustration--container\" title=\"Get Professional Training from Combodo\" href=\"http://www.combodo.com/training\" target=\"_blank\">".file_get_contents(APPROOT.'images/illustrations/undraw_education.svg')."Get professional training</a></div>");
$oPage->add('</tr></table>'); $oPage->add('</div>');
$oPage->add('</div>'); $oPage->add('</div>');
@@ -2711,7 +2665,7 @@ class WizStepDone extends WizardStep
} }
$sImgUrl .= '&m='.urlencode(implode(' ', $aReportedModules)); $sImgUrl .= '&m='.urlencode(implode(' ', $aReportedModules));
$oPage->add('<img style="border:0" src="'.$sImgUrl.'"/>'); $oPage->add('<img style="visibility: hidden;border:0" src="'.$sImgUrl.'"/>');
$sForm = addslashes($sForm); $sForm = addslashes($sForm);
$oPage->add_ready_script("$('#wiz_form').after('$sForm');"); $oPage->add_ready_script("$('#wiz_form').after('$sForm');");
SetupUtils::EraseSetupToken(); SetupUtils::EraseSetupToken();