Skip to content

Commit e64ebd8

Browse files
Pek5892Pek5892
committed
refactor: miglioria grafica barra dei plugin
1 parent 77b6482 commit e64ebd8

4 files changed

Lines changed: 174 additions & 28 deletions

File tree

‎assets/src/css/style.css‎

Lines changed: 117 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1576,6 +1576,12 @@ div.tip {
15761576
.control-sidebar{
15771577
top: 0;
15781578
padding-top: 50px;
1579+
transition: all 0.3s ease;
1580+
right: -200px;
1581+
}
1582+
1583+
.control-sidebar-open {
1584+
right: 0 !important;
15791585
}
15801586

15811587
.control-sidebar > h4 {
@@ -2329,6 +2335,11 @@ body:not(.sidebar-collapse) .sidebar .nav-treeview .nav-treeview .nav-link {
23292335

23302336
.with-control-sidebar {
23312337
margin-right: 200px;
2338+
transition: margin-right 0.3s ease;
2339+
}
2340+
2341+
section.content, .main-footer {
2342+
transition: margin-right 0.3s ease;
23322343
}
23332344

23342345
.control-sidebar-open {
@@ -2342,17 +2353,42 @@ body:not(.sidebar-collapse) .sidebar .nav-treeview .nav-treeview .nav-link {
23422353
right: 0;
23432354
}
23442355

2356+
/* Stile per il pulsante della barra dei plugin - Sostituito da nuove classi alla fine del file */
23452357
.control-sidebar-button{
23462358
position: fixed;
23472359
right: 0px;
2348-
padding: 10px;
2349-
top: 62px;
2350-
z-index: 50;
2360+
padding: 10px 12px;
2361+
z-index: 1050;
23512362
cursor: pointer;
23522363
background: #fff;
23532364
border-top-left-radius: 5px;
23542365
border-bottom-left-radius: 5px;
2355-
box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
2366+
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
2367+
transition: all 0.3s ease;
2368+
border-left: 1px solid #e9ecef;
2369+
display: flex;
2370+
align-items: center;
2371+
justify-content: center;
2372+
}
2373+
2374+
/* Stili per il pulsante della barra dei plugin - Sostituiti da nuove classi alla fine del file */
2375+
.control-sidebar-button:hover {
2376+
background-color: #f8f9fa;
2377+
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
2378+
}
2379+
2380+
.control-sidebar-button i {
2381+
color: #3c8dbc;
2382+
font-size: 14px;
2383+
transition: all 0.3s ease;
2384+
}
2385+
2386+
.control-sidebar-button:hover i {
2387+
color: #2c6f9d;
2388+
}
2389+
2390+
.control-sidebar-button.with-control-sidebar {
2391+
background-color: #f8f9fa;
23562392
}
23572393

23582394
.dropdown-menu {
@@ -2465,6 +2501,11 @@ body:not(.sidebar-collapse) .sidebar .nav-treeview .nav-treeview .nav-link {
24652501
opacity:1 !important;
24662502
}
24672503

2504+
/* Spostamento breadcrumb per evitare sovrapposizione con l'indicatore del plugin sidebar */
2505+
.breadcrumb.float-sm-right {
2506+
padding-right: 50px; /* Aggiunto spazio a destra per evitare sovrapposizione con l'indicatore del plugin sidebar */
2507+
}
2508+
24682509
/* Improved styling for unpaid items and open activities */
24692510
.badge-danger i.fa, .badge-success i.fa, .badge-warning i.fa {
24702511
font-size: 14px;
@@ -2766,4 +2807,76 @@ body:not(.sidebar-collapse) .sidebar .nav-treeview .nav-treeview .nav-link {
27662807
margin-bottom: 10px;
27672808
border-left: 4px solid #ffc107; /* Colore più intenso che si abbina al giallo */
27682809
border-radius: 0 4px 4px 0;
2810+
}
2811+
2812+
/* Stili migliorati per la barra dei plugin */
2813+
.control-sidebar-button {
2814+
position: fixed;
2815+
right: 0px;
2816+
padding: 12px 14px;
2817+
top: 120px; /* Posizionato sotto la barra dei pulsanti */
2818+
z-index: 1050; /* Aumentato il z-index per assicurarsi che sia sopra i pulsanti */
2819+
cursor: pointer;
2820+
background: #fff;
2821+
border-top-left-radius: 8px;
2822+
border-bottom-left-radius: 8px;
2823+
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
2824+
transition: all 0.3s ease;
2825+
border-left: 1px solid #e9ecef;
2826+
display: flex;
2827+
align-items: center;
2828+
justify-content: center;
2829+
}
2830+
2831+
.control-sidebar-button i {
2832+
font-size: 16px;
2833+
color: #3c8dbc;
2834+
}
2835+
2836+
.control-sidebar-enhanced {
2837+
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
2838+
border-left: 1px solid #f0f0f0;
2839+
}
2840+
2841+
.plugin-header {
2842+
padding: 15px 15px 12px;
2843+
margin: 0;
2844+
border-bottom: 1px solid #f0f0f0;
2845+
font-size: 16px;
2846+
display: flex;
2847+
align-items: center;
2848+
}
2849+
2850+
.plugin-header i {
2851+
margin-right: 8px;
2852+
color: #3c8dbc;
2853+
}
2854+
2855+
.plugin-tabs {
2856+
padding-top: 10px;
2857+
}
2858+
2859+
.plugin-tab-item {
2860+
margin-bottom: 2px;
2861+
}
2862+
2863+
.plugin-tab-link {
2864+
border-radius: 4px;
2865+
transition: all 0.2s ease;
2866+
padding: 10px 15px;
2867+
}
2868+
2869+
.plugin-tab-text {
2870+
font-weight: 500;
2871+
}
2872+
2873+
.plugin-tab-badge {
2874+
margin-left: 5px;
2875+
transition: all 0.2s ease;
2876+
}
2877+
2878+
.plugin-tab-badge-light {
2879+
margin-left: 5px;
2880+
background-color: rgba(255,255,255,0.3);
2881+
transition: all 0.2s ease;
27692882
}

‎assets/src/js/base/sidebar.js‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,28 @@ $(document).ready(function () {
5858

5959
// Gestione click sul pulsante per il toggle
6060
pluginToggle.on("click", function () {
61+
// Add a subtle animation to the button
62+
$(this).css({
63+
"transform": "scale(0.95)",
64+
"opacity": "0.9"
65+
});
66+
67+
setTimeout(function() {
68+
pluginToggle.css({
69+
"transform": "scale(1)",
70+
"opacity": "1"
71+
});
72+
}, 150);
73+
6174
$("aside.content-sidebar, section.content, .main-footer, .control-sidebar-button").toggleClass("with-control-sidebar");
6275
$(".control-sidebar-button i").toggleClass("fa-chevron-right").toggleClass("fa-chevron-left");
6376

6477
toggleControlSidebar();
65-
$(window).resize();
78+
79+
// Trigger resize event after animation completes
80+
setTimeout(function() {
81+
$(window).resize();
82+
}, 300);
6683
});
6784

6885
// Barra plugin laterale disabilitata per schermi piccoli
@@ -87,6 +104,15 @@ $(document).ready(function () {
87104
*/
88105
function toggleControlSidebar() {
89106
const sidebar = $(".control-sidebar");
107+
const button = $(".control-sidebar-button");
90108

109+
// Add smooth animation
91110
sidebar.toggleClass("control-sidebar-open");
111+
112+
// Add visual feedback to the button
113+
if (sidebar.hasClass("control-sidebar-open")) {
114+
button.css("background-color", "#f8f9fa");
115+
} else {
116+
button.css("background-color", "#fff");
117+
}
92118
}

‎controller.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,12 @@
6565
echo '
6666
</h1>
6767
</div>
68+
<div class="col-sm-6">
69+
<ol class="breadcrumb float-sm-right">
70+
<li class="breadcrumb-item"><a href="'.$rootdir.'/">Home</a></li>
71+
<li class="breadcrumb-item active">'.$structure->getTranslation('title').'</li>
72+
</ol>
73+
</div>
6874
</div>
6975
</div>
7076
</section>

‎include/top.php‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -557,13 +557,15 @@
557557
if (($in_editor || $in_controller) && !$isInstallation) {
558558
// Menu laterale per la visualizzazione dei plugin
559559
echo '
560-
<div class="control-sidebar-button"><i class="fa fa-chevron-left"></i></div>
561-
<aside class="control-sidebar control-sidebar-light">
562-
<h4><i class="fa fa-plug"></i> '.tr('Plugin').'</h4>
563-
<ul class="nav nav-tabs nav-pills nav-stacked">
564-
<li data-toggle="control-sidebar" class="active btn-default nav-item">
565-
<a class="nav-link active" data-toggle="tab" href="#tab_0">
566-
'.$structure->getTranslation('title').'
560+
<div class="control-sidebar-button" title="'.tr('Plugin').'">
561+
<i class="fa fa-chevron-left"></i>
562+
</div>
563+
<aside class="control-sidebar control-sidebar-light control-sidebar-enhanced">
564+
<h4 class="plugin-header"><i class="fa fa-plug"></i> '.tr('Plugin').'</h4>
565+
<ul class="nav nav-tabs nav-pills nav-stacked plugin-tabs">
566+
<li data-toggle="control-sidebar" class="active btn-default nav-item plugin-tab-item">
567+
<a class="nav-link active plugin-tab-link" data-toggle="tab" href="#tab_0">
568+
<span class="plugin-tab-text">'.$structure->getTranslation('title').'</span>
567569
</a>
568570
</li>';
569571

@@ -585,10 +587,10 @@
585587
}
586588

587589
echo '
588-
<li data-toggle="control-sidebar" class="btn-default nav-item" >
589-
<a class="nav-link" data-toggle="tab" href="#tab_'.$plugin['id'].'" id="link-tab_'.$plugin['id'].'">
590-
'.$plugin['title'].'
591-
<span class="right badge badge-danger">'.($count > 0 ? $count : '').'</span>
590+
<li data-toggle="control-sidebar" class="btn-default nav-item plugin-tab-item">
591+
<a class="nav-link plugin-tab-link" data-toggle="tab" href="#tab_'.$plugin['id'].'" id="link-tab_'.$plugin['id'].'">
592+
<span class="plugin-tab-text">'.$plugin['title'].'</span>
593+
<span class="right badge badge-danger plugin-tab-badge">'.($count > 0 ? $count : '').'</span>
592594
</a>
593595
</li>';
594596
}
@@ -599,10 +601,10 @@
599601
$notes = $structure->recordNotes($id_record);
600602

601603
echo '
602-
<li data-toggle="control-sidebar" class="btn-default nav-item">
603-
<a class="bg-info nav-link" data-toggle="tab" href="#tab_note" id="link-tab_note">
604-
'.tr('Note interne').'
605-
<span class="badge pull-right">'.($notes->count() ?: '').'</span>
604+
<li data-toggle="control-sidebar" class="btn-default nav-item plugin-tab-item">
605+
<a class="bg-info nav-link plugin-tab-link" data-toggle="tab" href="#tab_note" id="link-tab_note">
606+
<span class="plugin-tab-text">'.tr('Note interne').'</span>
607+
<span class="badge pull-right plugin-tab-badge-light">'.($notes->count() ?: '').'</span>
606608
</a>
607609
</li>';
608610
}
@@ -613,21 +615,20 @@
613615
$checklists_total = $structure->recordChecks($id_record)->where('is_titolo', 0);
614616

615617
echo '
616-
<li data-toggle="control-sidebar" class="btn-default nav-item">
617-
<a class="bg-info nav-link" data-toggle="tab" href="#tab_checks" id="link-tab_checks">
618-
'.tr('Checklist')
619-
.($checklists_total ? ' <span class="badge pull-right">'.$checklists_unchecked->count().tr(' / ').$checklists_total->count().'</span>' : '')
620-
.'
618+
<li data-toggle="control-sidebar" class="btn-default nav-item plugin-tab-item">
619+
<a class="bg-info nav-link plugin-tab-link" data-toggle="tab" href="#tab_checks" id="link-tab_checks">
620+
<span class="plugin-tab-text">'.tr('Checklist').'</span>
621+
'.($checklists_total ? ' <span class="badge pull-right plugin-tab-badge-light">'.$checklists_unchecked->count().tr(' / ').$checklists_total->count().'</span>' : '').'
621622
</a>
622623
</li>';
623624
}
624625

625626
// Tab per le informazioni sulle operazioni
626627
if (Auth::admin()) {
627628
echo '
628-
<li data-toggle="control-sidebar" class="btn-default nav-item">
629-
<a class="bg-info nav-link" data-toggle="tab" href="#tab_info" id="link-tab_info">
630-
'.tr('Info').'
629+
<li data-toggle="control-sidebar" class="btn-default nav-item plugin-tab-item">
630+
<a class="bg-info nav-link plugin-tab-link" data-toggle="tab" href="#tab_info" id="link-tab_info">
631+
<span class="plugin-tab-text">'.tr('Info').'</span>
631632
</a>
632633
</li>';
633634
}

0 commit comments

Comments
 (0)