Dashboard : agrandissement modale+ autoload premier onglet

plugin/dashboard/css/main.css

@@ -9,4 +9,8 @@
 html.module-index,
 .module-index body{
 	background-color: #efefef;
+}
+
+.dashboard-modal .modal-lg{
+    max-width: 1200px;
 }

plugin/dashboard/dashboard.plugin.php

@@ -97,7 +97,7 @@ function dashboard_application_bottom(){
 			<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">
+						<div class="col-md-3 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">
@@ -116,13 +116,12 @@ function dashboard_application_bottom(){
 								</li>
 							</ul>
 						</div>
-						<div class="col-md-8 px-0 overflow-auto h-100 dashboard-configure-content" id="dashboard-configure-content">
+						<div class="col-md-9 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>

plugin/dashboard/js/component.js

@@ -98,19 +98,27 @@ function init_components_dashboard(input){
 		});
 
 	}).on('configure',function(id){
-		$('#dashboard-configure-menu li').click(function(){
-		    var li = $(this);
-		    var menu = li.attr('data-menu');
-		    li.parent().find('>li').removeClass('active');
-		    li.addClass('active');
 
-		    $('#widget-types').fill({
+
+		var selectMenu = function(id,menu){
+			$('#widget-types').fill({
 		        action : data.onConfigure,
 		        id : id,
 		        menu : menu
 		    },function(response){
 
 		    });
+		}
+
+		selectMenu(id,"type");
+
+		$('#dashboard-configure-menu li').click(function(){
+		    var li = $(this);
+		    var menu = li.attr('data-menu');
+		    li.parent().find('>li').removeClass('active');
+		    li.addClass('active');
+
+		    selectMenu(id,menu);
 		});
 	});
 }

plugin/dashboard/js/dashboard.js

@@ -261,8 +261,10 @@ class Dashboard {
 	}
 
 	configureWidget(id){
-		$('#dashboard-modal').modal('show');
-		this.trigger('configure', id);
+		var object = this;
+		$('#dashboard-modal').on('shown.bs.modal', function () {
+			object.trigger('configure', id);
+		}).modal('show');
 	}
 
 	widgetToArray(widget){