Dashboard : wip

plugin/dashboard/css/component.css

@@ -184,4 +184,19 @@
 }
 .dashboard-configure-menu li:hover{
 	background: #f3f3f3;
+}
+
+.dashboardModal .widget-types{
+	padding: 0;
+	margin: 0;
+	display: grid;
+	grid-template-columns: auto auto auto;
+	list-style-type: none;
+}
+.dashboardModal .widget-types li{
+	border-radius: 2px;
+	padding: 5px;
+	margin: 5px;
+	background: #ebebeb;
+	list-style-type: none;
 }

plugin/dashboard/dashboard.plugin.php

@@ -85,7 +85,7 @@ function dashboard_application_bottom(){
  </template>
 
 <!-- Modal Dashboard -->
-<div class="modal fade" id="dashboardModal" tabindex="-1" role="dialog"aria-hidden="true">
+<div class="modal fade dashboardModal" id="dashboardModal"  tabindex="-1" role="dialog"aria-hidden="true">
 	<div class="modal-dialog modal-lg" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
@@ -104,10 +104,9 @@ function dashboard_application_bottom(){
 						</ul>
 					</div>
 					<div class="col-md-8">
-						<ul id="widget-types">
-							<li data-id="{{id}}">
-								<h1>{{label}}</h1>
-								<i class="{{icon}}"></i>
+						<ul id="widget-types" class="widget-types bg-light">
+							<li data-id="{{id}}" class="shadow-sm bg-white">
+								<h3><i class="{{icon}}"></i> {{label}}</h3>
 								<p>{{description}}</p>
 								<a>+ D'infos</a>
 								<div class="btn btn-primary">Selectionner</div>

plugin/dashboard/js/component.js

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