refactor: miglioria grafica configurazione iniziale

2025-06-05 22:09:38 +02:00 · 2025-05-15 15:57:29 +02:00
parent 28996c0707
commit ccc0b32762
3 changed files with 338 additions and 54 deletions
--- a/assets/src/css/style.css
+++ b/assets/src/css/style.css
@@ -2819,6 +2819,226 @@ section.content, .main-footer {
    font-size: 13px;
 }

+/* ===== CONFIGURATION WIZARD STYLES ===== */
+
+/* Main container for configuration wizard */
+.config-wizard-container {
+    max-width: 1200px !important;
+    margin: 3% auto !important;
+    border-radius: 8px !important;
+    border: none !important;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Header styling for configuration wizard */
+.config-wizard-header {
+    background-color: #f8f9fa !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
+    padding: 20px !important;
+    text-align: center !important;
+}
+
+.config-wizard-header img {
+    max-width: 280px !important;
+}
+
+/* Navigation tabs styling */
+.config-wizard-tabs {
+    background-color: #f8f9fa !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
+    margin-bottom: 0 !important;
+    display: flex !important;
+    list-style: none !important;
+    padding: 0 !important;
+}
+
+.config-wizard-tabs li {
+    flex: 1 !important;
+    text-align: center !important;
+}
+
+.config-wizard-tabs li a {
+    padding: 15px 0 !important;
+    display: block !important;
+    color: #495057 !important;
+    text-decoration: none !important;
+}
+
+.config-wizard-tabs li.active a {
+    color: #3c8dbc !important;
+    font-weight: bold !important;
+    border-bottom: 2px solid #3c8dbc !important;
+}
+
+.config-wizard-tabs li a h3 {
+    margin: 0 !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+}
+
+/* Content area styling */
+.config-wizard-content {
+    padding: 25px 30px !important;
+}
+
+/* SmartWizard specific fixes */
+.sw-theme-default {
+    border: none !important;
+}
+
+.sw-theme-default .sw-toolbar {
+    display: none !important;
+}
+
+.sw-theme-default .step-content {
+    padding: 0 !important;
+    border: none !important;
+}
+
+.sw-theme-default .sw-toolbar-bottom {
+    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+}
+
+.sw-theme-default > ul.step-anchor > li.active > a {
+    color: #3c8dbc !important;
+    border-bottom: 2px solid #3c8dbc !important;
+    background: transparent !important;
+}
+
+.sw-theme-default > ul.step-anchor > li > a,
+.sw-theme-default > ul.step-anchor > li > a:hover {
+    background: transparent !important;
+    border: none !important;
+}
+
+.sw-theme-default > ul.step-anchor > li.done > a {
+    color: #5cb85c !important;
+    background: transparent !important;
+}
+
+/* Fix for step content display */
+#steps > div[id^="step-"] {
+    display: none;
+}
+
+#steps > div#step-1 {
+    display: block;
+}
+
+/* Requirements cards styling */
+.requirements-card {
+    border-radius: 6px !important;
+    margin-bottom: 15px !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
+}
+
+.requirements-card-header {
+    padding: 12px 15px !important;
+}
+
+.requirements-card-header-success {
+    background-color: #f0f9f0 !important;
+}
+
+.requirements-card-header-danger {
+    background-color: #fff1f1 !important;
+}
+
+.requirements-card-title {
+    font-size: 15px !important;
+    font-weight: 600 !important;
+}
+
+.requirements-card-title-success {
+    color: #28a745 !important;
+}
+
+.requirements-card-title-danger {
+    color: #dc3545 !important;
+}
+
+.requirements-icon {
+    font-size: 16px !important;
+}
+
+/* Requirements table styling */
+.requirements-table {
+    margin-bottom: 0 !important;
+}
+
+.requirements-table-icon-col {
+    width: 40px !important;
+}
+
+.requirements-table-type-col {
+    width: 120px !important;
+}
+
+.requirements-table-name-col {
+    width: 300px !important;
+}
+
+/* Section headers */
+.config-section-header {
+    color: #3c8dbc !important;
+    font-weight: 600 !important;
+    margin-bottom: 15px !important;
+}
+
+/* Section content */
+.config-section-content {
+    margin-bottom: 25px !important;
+}
+
+.config-section-content p {
+    margin-bottom: 15px !important;
+    color: #555 !important;
+    line-height: 1.5 !important;
+}
+
+.config-info-text {
+    color: #666 !important;
+    font-size: 13px !important;
+}
+
+/* License container */
+.config-license-container {
+    border: 1px solid #e9ecef !important;
+    border-radius: 6px !important;
+    background-color: #f8f9fa !important;
+    margin-bottom: 20px !important;
+}
+
+.config-license-container textarea {
+    border: none !important;
+    background-color: #f8f9fa !important;
+    font-family: monospace !important;
+    font-size: 12px !important;
+}
+
+/* License acceptance box */
+.config-acceptance-box {
+    border-radius: 6px !important;
+    border: 1px solid #e9ecef !important;
+    background-color: #f8f9fa !important;
+    padding: 15px !important;
+    margin-top: 10px !important;
+}
+
+.config-acceptance-text {
+    font-weight: 600 !important;
+    color: #555 !important;
+}
+
+/* Language selector */
+.config-language-selector {
+    padding: 15px 20px 0 0 !important;
+}
+
+.config-language-selector select {
+    border-radius: 4px !important;
+}
+
 /* Stili per il modal di controllo database */

 /* Stili per i pulsanti */
--- a/include/init/configuration.php
+++ b/include/init/configuration.php
@@ -233,13 +233,52 @@ if (empty($creation) && (!file_exists('config.inc.php') || !$valid_config)) {
                useURLhash: false,
                showStepURLhash: false,
                theme: "default",
-                transitionEffect: "slideLeft",
-                lang : {
+                transitionEffect: "fade",
+                toolbarSettings: {
+                    toolbarPosition: "bottom",
+                    toolbarButtonPosition: "right",
+                    showNextButton: true,
+                    showPreviousButton: true
+                },
+                anchorSettings: {
+                    anchorClickable: true,
+                    enableAllAnchors: true,
+                    markDoneStep: true,
+                    markAllPreviousStepsAsDone: true
+                },
+                lang: {
                    next: "'.tr('Successivo').'",
                    previous: "'.tr('Precedente').'",
                }
            });

+            // Custom tab navigation
+            $(".config-wizard-tabs li a").click(function(e) {
+                e.preventDefault();
+                var targetStep = $(this).attr("href").replace("#", "");
+
+                // Remove active class from all tabs
+                $(".config-wizard-tabs li").removeClass("active");
+
+                // Add active class to current tab
+                $(this).parent().addClass("active");
+
+                // Hide all steps
+                $("#steps > div[id^=\'step-\']").hide();
+
+                // Show target step
+                $("#" + targetStep).show();
+
+                // Scroll to top of steps
+                $("html, body").animate({ scrollTop: $("#steps").offset().top }, 500);
+            });
+
+            // Set first tab as active by default
+            $(".config-wizard-tabs li:first").addClass("active");
+            $("#steps > div[id^=\'step-\']").hide();
+            $("#step-1").show();
+
+            // Original leaveStep handler
            $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
                result = true;
                if(stepDirection == "forward" && $("#step-" + (stepNumber + 1) + " form").length){
@@ -307,13 +346,13 @@ if (empty($creation) && (!file_exists('config.inc.php') || !$valid_config)) {
        </script>';

    echo '
-        <div class="card card-center-large card-warning">
-            <div class="card-header with-border text-center">
-                <img src="'.$img.'/logo_completo.png" width="300" alt="'.tr('OSM Logo').'">
+        <div class="card card-center-large shadow-lg config-wizard-container">
+            <div class="card-header config-wizard-header">
+                <img src="'.$img.'/logo_completo.png" alt="'.tr('OSM Logo').'">
            </div>

-            <div class="card-body" id="smartwizard">
-                <span class="pull-right col-md-4">
+            <div class="card-body" id="smartwizard" style="padding: 0;">
+                <span class="float-right col-md-4 config-language-selector">
                    <select class="form-control hide" id="language" required="1">';

    $languages = [
@@ -393,36 +432,35 @@ if (empty($creation) && (!file_exists('config.inc.php') || !$valid_config)) {
                    </script>
                </span>

-                <ul>
+                <ul class="config-wizard-tabs">
                    <li><a href="#step-1">
-                        <h3>'.tr('Requisiti').'</h3>
+                        <h3><i class="fa fa-check-circle mr-2"></i>'.tr('Requisiti').'</h3>
                    </a></li>

                    <li><a href="#step-2">
-                        <h3>'.tr('Licenza').'</h3>
+                        <h3><i class="fa fa-file-text mr-2"></i>'.tr('Licenza').'</h3>
                    </a></li>

                    <li><a href="#step-3">
-                        <h3>'.tr('Configurazione').'</h3>
+                        <h3><i class="fa fa-cog mr-2"></i>'.tr('Configurazione').'</h3>
                    </a></li>
                </ul>

-                <div id="steps">
+                <div id="steps" class="config-wizard-content">

                    <div id="step-1">';

    // Introduzione
    echo '
-    <p>'.tr('Benvenuto in _NAME_!', [
-        '_NAME_' => '<strong>OpenSTAManager</strong>',
-    ]).'</p>
-    <p>'.tr("Prima di procedere con l'installazione, verifica che il sistema soddisfi i seguenti requisiti").'.</p>
-    <br>
-
-    <p>'.tr('Le impostazioni PHP possono essere modificate nel file _FILE_', [
-        '_FILE_' => '<b>php.ini</b>',
-    ]).'.</p>
-    <hr>';
+    <div class="config-section-content">
+        <h4 class="config-section-header">'.tr('Benvenuto in _NAME_!', [
+            '_NAME_' => '<strong>OpenSTAManager</strong>',
+        ]).'</h4>
+        <p>'.tr("Prima di procedere con l'installazione, verifica che il sistema soddisfi i seguenti requisiti").'.</p>
+        <p class="config-info-text"><i class="fa fa-info-circle text-info mr-1"></i> '.tr('Le impostazioni PHP possono essere modificate nel file _FILE_', [
+            '_FILE_' => '<b>php.ini</b>',
+        ]).'</p>
+    </div>';

    // REQUISITI PER IL CORRETTO FUNZIONAMENTO
    include __DIR__.'/requirements.php';
@@ -433,22 +471,34 @@ if (empty($creation) && (!file_exists('config.inc.php') || !$valid_config)) {
    // LICENZA
    echo '
                    <div id="step-2">
-                        <p>'.tr('OpenSTAManager è tutelato dalla licenza _LICENSE_', [
-        '_LICENSE_' => 'GPL 3.0',
-    ]).':</p>
+                        <div class="config-section-content">
+                            <h4 class="config-section-header">'.tr('Licenza del software').'</h4>
+                            <p>'.tr('OpenSTAManager è tutelato dalla licenza _LICENSE_', [
+                                '_LICENSE_' => '<strong>GPL 3.0</strong>',
+                            ]).':</p>
+                        </div>

-                        <textarea class="form-control autosize" rows="15" readonly>'.file_get_contents('LICENSE').'</textarea><br>
-                        <a class="pull-left" href="https://www.gnu.org/licenses/translations.en.html#GPL" target="_blank">[ '.tr('Versioni tradotte').' ]</a><hr>
+                        <div class="config-license-container">
+                            <textarea class="form-control autosize" rows="15" readonly>'.file_get_contents('LICENSE').'</textarea>
+                        </div>

-                        <div class="row">
-                            <div class="col-md-8">
-                                <span class="pull-left" title="'.tr('Visiona e accetta la licenza per proseguire').'">'.tr('Accetti la licenza GPLv3 di OpenSTAManager?').'*</span>
+                        <div class="config-section-content">
+                            <a class="text-info" href="https://www.gnu.org/licenses/translations.en.html#GPL" target="_blank"><i class="fa fa-external-link mr-1"></i> '.tr('Versioni tradotte').'</a>
+                        </div>
+
+                        <div class="config-acceptance-box">
+                            <div class="row">
+                                <div class="col-md-8">
+                                    <span class="config-acceptance-text" title="'.tr('Visiona e accetta la licenza per proseguire').'">'.tr('Accetti la licenza GPLv3 di OpenSTAManager?').'*</span>
+                                </div>
+
+                                <form class="col-md-4">
+                                    <div class="custom-control custom-checkbox">
+                                        <input type="checkbox" id="agree" name="agree" data-parsley-required="true" class="custom-control-input">
+                                        <label class="custom-control-label" for="agree">'.tr('Ho visionato e accetto').'.</label>
+                                    </div>
+                                </form>
                            </div>
-
-                            <form class="col-md-4">
-                                <input type="checkbox" id="agree" name="agree" data-parsley-required="true">
-                                <label for="agree">'.tr('Ho visionato e accetto').'.</label>
-                            </form>
                        </div>
                    </div>';

@@ -474,18 +524,20 @@ if (empty($creation) && (!file_exists('config.inc.php') || !$valid_config)) {
                        <form action="?action=updateconfig&firstuse=true" method="post" id="config-form">
                            <input type="hidden" name="lang" value="'.trans()->getCurrentLocale().'">

-                            <h4>'.tr('Formato date').'</h4>
-                            <div class="row">
-                                <div class="col-md-4">
-                                    {[ "type": "text", "label": "'.tr('Formato data lunga').'", "name": "timestamp_format", "value": "d/m/Y H:i", "required": 1 ]}
-                                </div>
+                            <div class="config-section-content">
+                                <h4 class="config-section-header">'.tr('Formato date').'</h4>
+                                <div class="row">
+                                    <div class="col-md-4">
+                                        {[ "type": "text", "label": "'.tr('Formato data lunga').'", "name": "timestamp_format", "value": "d/m/Y H:i", "required": 1 ]}
+                                    </div>

-                                <div class="col-md-4">
-                                    {[ "type": "text", "label": "'.tr('Formato data corta').'", "name": "date_format", "value": "d/m/Y", "required": 1 ]}
-                                </div>
+                                    <div class="col-md-4">
+                                        {[ "type": "text", "label": "'.tr('Formato data corta').'", "name": "date_format", "value": "d/m/Y", "required": 1 ]}
+                                    </div>

-                                <div class="col-md-4">
-                                    {[ "type": "text", "label": "'.tr('Formato orario').'", "name": "time_format", "value": "H:i", "required": 1 ]}
+                                    <div class="col-md-4">
+                                        {[ "type": "text", "label": "'.tr('Formato orario').'", "name": "time_format", "value": "H:i", "required": 1 ]}
+                                    </div>
                                </div>
                            </div>

@@ -564,7 +616,7 @@ if (empty($creation) && (!file_exists('config.inc.php') || !$valid_config)) {
                            <!-- PULSANTI -->
                            <div class="row">
                                <div class="col-md-4">
-                                    <span>*<small><small>'.tr('Campi obbligatori').'</small></small></span>
+                                    <span class="config-info-text">*<small>'.tr('Campi obbligatori').'</small></span>
                                </div>
                                <div class="col-md-4 text-right">
                                    <button type="button" id="test" class="btn btn-info btn-block">
--- a/include/init/requirements.php
+++ b/include/init/requirements.php
@@ -443,9 +443,11 @@ foreach ($requirements as $key => $values) {
    }

    echo '
-<div class="card card-outline card-'.($general_status ? 'success collapsed-card' : 'danger').'">
-    <div class="card-header with-border">
-        <h3 class="card-title">'.$key.'</h3>';
+<div class="card card-outline card-'.($general_status ? 'success collapsed-card' : 'danger').' requirements-card">
+    <div class="card-header with-border requirements-card-header requirements-card-header-'.($general_status ? 'success' : 'danger').'">
+        <h3 class="card-title requirements-card-title requirements-card-title-'.($general_status ? 'success' : 'danger').'">
+            <i class="fa fa-'.($general_status ? 'check-circle' : 'exclamation-circle').' mr-2"></i>'.$key.'
+        </h3>';

    if ($general_status) {
        echo '
@@ -459,19 +461,29 @@ foreach ($requirements as $key => $values) {
    echo '
    </div>
    <div class="card-body no-padding">
-        <table class="table">';
+        <table class="table table-striped requirements-table">
+            <thead>
+                <tr>
+                    <th class="requirements-table-icon-col"></th>
+                    <th class="requirements-table-type-col">'.tr('Tipo').'</th>
+                    <th class="requirements-table-name-col">'.tr('Nome').'</th>
+                    <th>'.tr('Descrizione').'</th>
+                </tr>
+            </thead>
+            <tbody>';

    foreach ($values as $value) {
        echo '
-            <tr class="'.($value['status'] ? 'success' : 'danger').'">
-                <td style="width: 10px"><i class="fa fa-'.($value['status'] ? 'check' : 'times').'"></i></td>
-                <td style="width: 120px" >'.$value['type'].'</td>
-                <td style="width: 300px" >'.$value['name'].'</td>
+            <tr>
+                <td class="text-center"><i class="fa fa-'.($value['status'] ? 'check text-success' : 'times text-danger').' requirements-icon"></i></td>
+                <td>'.$value['type'].'</td>
+                <td><strong>'.$value['name'].'</strong></td>
                <td>'.$value['description'].'</td>
            </tr>';
    }

    echo '
+            </tbody>
        </table>
    </div>
 </div>';