-Dashboard: Refactor UX/UI modal de configuration (scrollbar custom, emplacement, taille, éléments actif ou non, contenu, etc...) (wip)

plugin/dashboard/css/component.css

@@ -1,37 +1,47 @@
 /* Scrollbar */
+.dashboard-modal *::-webkit-scrollbar,
 .dashboard-container *::-webkit-scrollbar {
     width: 0.5rem;
 }
+.dashboard-modal *::-webkit-scrollbar,
 .dashboard-container *::-webkit-scrollbar {
     width: 5px;
     height: 5px;
 }
+.dashboard-modal *::-webkit-scrollbar-button,
 .dashboard-container *::-webkit-scrollbar-button {
     width: 0px;
     height: 0px;
 }
+.dashboard-modal *::-webkit-scrollbar-thumb,
 .dashboard-container *::-webkit-scrollbar-thumb {
     background: #bbbbbb;
     border: 0px none #ffffff;
     border-radius: 50px;
 }
+.dashboard-modal *::-webkit-scrollbar-thumb,
 .dashboard-container *::-webkit-scrollbar-thumb:hover {
     background: #949494;
 }
+.dashboard-modal *::-webkit-scrollbar-thumb,
 .dashboard-container *::-webkit-scrollbar-thumb:active {
     background: #707070;
 }
+.dashboard-modal *::-webkit-scrollbar-track,
 .dashboard-container *::-webkit-scrollbar-track {
     background: inherit;
     border: 0px none #ffffff;
     border-radius: 50px;
 }
+.dashboard-modal *::-webkit-scrollbar-track,
 .dashboard-container *::-webkit-scrollbar-track:hover {
     background: #cecece;
 }
+.dashboard-modal *::-webkit-scrollbar-track,
 .dashboard-container *::-webkit-scrollbar-track:active {
     background: #d3d3d3;
 }
+.dashboard-modal *::-webkit-scrollbar-corner,
 .dashboard-container *::-webkit-scrollbar-corner {
     background: transparent;
 }
@@ -191,6 +201,19 @@
 .dashboard-configure-menu li:hover{
 	background: #f3f3f3;
 }
+.dashboard-modal .modal-body {
+	min-height: 300px;
+}
+.dashboard-modal .dashboard-configure-menu .nav-tabs .nav-item .nav-link,
+.dashboard-modal .dashboard-configure-menu .nav-tabs .nav-link {
+    color: var(--secondary);
+    background-color: transparent;
+}
+.dashboard-modal .dashboard-configure-menu .nav-tabs .nav-item.show .nav-link,
+.dashboard-modal .dashboard-configure-menu .nav-tabs .nav-link.active {
+    color: var(--white);
+    background-color: var(--primary);
+}
 .dashboard-modal .widget-types{
     padding: 0;
     margin: 0;

plugin/dashboard/dashboard.plugin.php

@@ -86,7 +86,7 @@ function dashboard_application_bottom(){
 
 <!-- Modal Dashboard -->
 <div class="modal fade dashboard-modal" id="dashboard-modal"  tabindex="-1" role="dialog" aria-hidden="true">
-	<div class="modal-dialog modal-lg" role="document">
+	<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
 				<h5 class="modal-title" id="exampleModalLabel">Configuration</h5>
@@ -94,24 +94,38 @@ function dashboard_application_bottom(){
 					<span aria-hidden="true">&times;</span>
 				</button>
 			</div>
-			<div class="modal-body p-0">
-				<div class="row">
-					<div class="col-md-4">
-				  		<ul class="list-group rounded-0 dashboard-configure-menu" id="dashboard-configure-menu">
-							<li data-menu='type' class="list-group-item border-top-0 active"><i class="far fa-window-maximize text-muted"></i> Type</li>
-							<li data-menu='properties' class="list-group-item"><i class="fas fa-list-ul text-muted"></i> Propriétés</li>
-							<li data-menu='style' class="list-group-item border-bottom-0"><i class="fas fa-palette text-muted"></i> Style</li>
-						</ul>
-					</div>
-					<div class="col-md-8">
-						<ul id="widget-types" class="widget-types bg-light">
-						    <li data-id="{{id}}" class="shadow-sm bg-white hidden">
-						        <h3><i class="{{icon}}"></i> {{label}}</h3>
-						        <p>{{description}}</p>
-						        <a>+ D'infos</a>
-						        <div class="btn btn-primary">Selectionner</div>
-						    </li>
-						</ul>
+			<div class="modal-body p-0 overflow-hidden">
+				<div class="container-fluid py-0 h-100">
+					<div class="row h-100">
+						<div class="col-md-4 border-right px-0 overflow-auto h-100 dashboard-configure-menu" id="dashboard-configure-menu">
+							<ul class="nav nav-tabs flex-column dashboard-configure-menu rounded-0 border-0" id="dashboard-configure-menu" role="tablist" aria-orientation="vertical">
+								<li data-menu='type' class="nav-item border-bottom">
+									<a class="nav-link border-0 rounded-0 active" id="type-tab" data-toggle="tab" href="#type" role="tab" aria-controls="type" aria-selected="true">
+										<i class="far fa-window-maximize mr-1"></i>Type
+									</a>
+								</li>
+								<li data-menu='properties' class="nav-item border-bottom">
+									<a class="nav-link border-0 rounded-0" id="properties-tab" data-toggle="tab" href="#properties" role="tab" aria-controls="properties" aria-selected="false">
+										<i class="fas fa-list-ul mr-1"></i>Propriétés
+									</a>
+								</li>
+								<li data-menu='style' class="nav-item border-bottom">
+									<a class="nav-link border-0 rounded-0" id="style-tab" data-toggle="tab" href="#style" role="tab" aria-controls="style" aria-selected="false">
+										<i class="fas fa-palette mr-1"></i>Style
+									</a>
+								</li>
+							</ul>
+						</div>
+						<div class="col-md-8 px-0 overflow-auto h-100 dashboard-configure-content" id="dashboard-configure-content">
+							<ul id="widget-types" class="widget-types bg-light">
+							    <li data-id="{{id}}" class="shadow-sm bg-white hidden">
+							        <h3><i class="{{icon}}"></i> {{label}}</h3>
+							        <p>{{description}}</p>
+							        <a>+ D'infos</a>
+							        <div class="btn btn-primary">Selectionner</div>
+							    </li>
+							</ul>
+						</div>
 					</div>
 				</div>
 			</div>

plugin/dashboard/js/component.js

@@ -103,6 +103,7 @@ function init_components_dashboard(input){
 		    var menu = li.attr('data-menu');
 		    li.parent().find('>li').removeClass('active');
 		    li.addClass('active');
+
 		    $('#widget-types').fill({
 		        action : data.onConfigure,
 		        id : id,

plugin/dashboard/js/dashboard.js

@@ -58,8 +58,8 @@ class Dashboard {
 			over: function(event, ui){
 				//@TODO:
 				// - Gérer les overflow de la grid => ex: lacher un widget en bas de gris doit recalculer le placeholder le plus bas possible sans sortir du cadre
-				// - Ne pas pouvoir superposer des widgets
-				// - Gérer l'offset du point d'ancrage ne fonction de l'endroit où le curseur drag le widget (centrer le widget avec la placeholder)
+				// - Ne pas pouvoir créer un widget dessous un widget existant
+				// - Ne pas pouvoir superposer des widgets (ou en faire une option)
 				var currentWidget = ui.draggable;
 				var offsets = {
 					rowEnd: currentWidget.attr('data-height'),