Widget : style wip

plugin/dashboard/DashboardWidget.class.php

@@ -17,9 +17,13 @@ class DashboardWidget extends Entity{
 	public $height = 1; //Hauteur (Nombre Entier)
 	public $dashboard; //Tableau de bord (Nombre Entier)
 
-
 	public $icon;
+	public $iconColor;
+	public $titleColor;
 	public $headerBackground;
+	public $bodyBackground;
+	public $bodyColor;
+
 	public $description;
 	public $label;
 	public $content;
@@ -39,6 +43,14 @@ class DashboardWidget extends Entity{
 		'row' => array('type'=>'integer','label' => 'Ligne'),
 		'width' => array('type'=>'integer','label' => 'Largeur'),
 		'height' => array('type'=>'integer','label' => 'Hauteur'),
+
+		'icon' => array('type'=>'icon','label' => 'Icône'),
+		'iconColor' => array('type'=>'color','label' => 'Couleur icône'),
+		'titleColor' => array('type'=>'color','label' => 'Couleur titre'),
+		'headerBackground' => array('type'=>'color','label' => 'Couleur de fond en-têtes'),
+		'bodyBackground' => array('type'=>'color','label' => 'Couleur de fond du corps'),
+		'bodyColor' => array('type'=>'color','label' => 'Couleur texte du corps'),
+
 		'dashboard' => array('type'=>'integer','label' => 'Tableau de bord','link'=>'plugin/dashboard/Dashboard.class.php')
 	);
 

plugin/dashboard/css/component.css

@@ -264,4 +264,9 @@
 
 .dashboard-modal .modal-lg{
     max-width: 1200px;
+}
+
+.dashboard-widget-customizer{
+	width: calc(100% - 30px); 
+	height: calc(100% - 30px); 
 }

plugin/dashboard/dashboard.plugin.php

@@ -127,29 +127,58 @@ function dashboard_application_bottom(){
 								</ul>
 						</template>
 						<template id="configure-style">
-							<table class="table" id="configure-style-table">
-								<tbody>
-									<tr>
-										<th colspan="2" class="align-middle">En-tête</th>
-									</tr>
-									<tr>
-										<td><input type="text" data-type="color" id="widget-header-icon"></td>
-										<td class="align-middle">Icône</td>
-									</tr>
-									<tr>
-										<td><input type="text" data-type="color" id="widget-header-background"></td>
-										<td class="align-middle">Couleur de fond</td>
-									</tr>
-									<tr>
-										<th colspan="2" class="align-middle">Corps</th>
-									</tr>
-									<tr>
-										<td><input type="text" data-type="color" id="widget-body-background"></td>
-										<td class="align-middle">Couleur de fond</td>
-									</tr>
-
-								</tbody>
-							</table>
+							<div class="row">
+								<div class="col">
+									<table class="table" id="configure-style-table">
+										<tbody>
+											<tr>
+												<th colspan="2" class="align-middle">En-tête</th>
+											</tr>
+											<tr>
+												<td><input type="text" data-type="icon" id="widget-header-icon"></td>
+												<td class="align-middle">Icône</td>
+											</tr>
+											<tr>
+												<td><input type="text" data-type="color" id="widget-header-icon-color"></td>
+												<td class="align-middle">Couleur Icône</td>
+											</tr>
+											<tr>
+												<td><input type="text" data-type="color" id="widget-header-title-color"></td>
+												<td class="align-middle">Couleur titre</td>
+											</tr>
+											<tr>
+												<td><input type="text" data-type="color" id="widget-header-background"></td>
+												<td class="align-middle">Couleur de fond</td>
+											</tr>
+											<tr>
+												<th colspan="2" class="align-middle">Corps</th>
+											</tr>
+											<tr>
+												<td><input type="text" data-type="color" id="widget-body-background"></td>
+												<td class="align-middle">Couleur de fond</td>
+											</tr>
+											<tr>
+												<td><input type="text" data-type="color" id="widget-body-color"></td>
+												<td class="align-middle">Couleur texte</td>
+											</tr>
+
+										</tbody>
+									</table>
+								</div>
+								<div class="col dashboard-container">
+									<!-- -->
+									<div class="dashboard-widget dashboard-widget-customizer widget-draggable widget-resizeable widget-removable ui-draggable">
+								    	<div class="dashboard-widget-header" style="background-color: rgb(0, 123, 255);">
+								    		<div class="widget-header-icon ui-draggable-handle"><i class="far fa-user"></i></div>
+								    		<div class="widget-header-title ui-draggable-handle">Titre</div>
+								    		<ul class="widget-header-options"><li class="widget-option-configure" title="Configurer"><i class="fas fa-ellipsis-v"></i></li><li class="widget-option-delete" title="Supprimer"><i class="fa fa-times"></i></li></ul>
+								    	</div>
+								    	<div class="dashboard-widget-content"><div class="text-center m-auto">Contenu</div></div>
+								    	<div class="dashboard-widget-resize py-1 px-2"><i class="fas fa-chevron-right"></i></div>
+									</div>
+									<!-- -->
+								</div>
+							</div>
 						</template>
 						<div class="col-md-9 px-0 overflow-auto h-100 dashboard-configure-content" id="dashboard-configure-content">
 							

plugin/dashboard/js/component.js

@@ -138,15 +138,32 @@ function init_components_dashboard(input){
 			 				 id : widget.id
 			 			},function(response){
 			 				$('#configure-style-table').fromJson(response.item).change(function(){
-			 					var data = {}
-			 					data.action =  data.onConfigure;
-			 					data.id = widget.id;
+
+
+
+			 					var widgetData = {action:data.onConfigure};
+			 					
+			 					widgetData.id = widget.id;
 			 					var form = $('#configure-style-table').toJson();
-			 					data.headerBackground = form['widget-header-background'];
-			 					data.bodyBackground = form['widget-body-background'];
-			 					data.headerIcon = form['widget-header-icon'];
 
-			 					$.action(data);
+			 					widgetData.headerBackground = form['widget-header-background'];
+			 					widgetData.bodyBackground = form['widget-body-background'];
+			 					widgetData.bodyColor= form['widget-body-color'];
+			 					widgetData.iconColor = form['widget-header-icon-color'];
+			 					widgetData.titleColor = form['widget-header-title-color'];
+			 					widgetData.icon = form['widget-header-icon'];
+
+			 					var customiser = $('.dashboard-widget-customizer');
+			 					$('.dashboard-widget-header',customiser).css('backgroundColor',widgetData.headerBackground+'!important');
+			 					$('.widget-header-title',customiser).css('color',widgetData.titleColor+'!important');
+			 					$('.dashboard-widget-content',customiser).css({
+			 						backgroundColor : widgetData.bodyBackground+'!important',
+			 						color : widgetData.bodyColor+'!important'
+			 					});
+			 					$('.widget-header-icon i',customiser).css('color',widgetData.iconColor+'!important');
+			 					$('.widget-header-icon i',customiser).attr('class',widgetData.icon);
+
+			 					$.action(widgetData);
 			 			});
 
 			 			});

plugin/dashboard/js/dashboard.js

@@ -296,6 +296,9 @@ class Dashboard {
 		if(widget.label !== null) widgetElement.find('.widget-header-title').html(widget.label);
 		if(widget.icon !== null) widgetElement.find('.widget-header-icon i').attr('class', widget.icon);
 		if(widget.headerBackground !== null) widgetElement.find('.dashboard-widget-header').css('backgroundColor',widget.headerBackground);
+		if(widget.bodyBackground !== null) widgetElement.find('.dashboard-widget-content').css('backgroundColor',widget.bodyBackground);
+		if(widget.titleColor !== null) widgetElement.find('.widget-header-title,.widget-header-options').css('color',widget.titleColor);
+		if(widget.iconColor !== null) widgetElement.find('.widget-header-icon i').css('color',widget.iconColor);
 
 		if(widget.options !== null){
 			var tpl = '<li class="{{class}}" title="{{label}}"><i class="{{icon}}"></i></li>';

plugin/dashboard/page.list.dashboard.php

@@ -9,6 +9,9 @@ if(Dashboard::rowCount(array('scope'=>'home','uid'=>$myUser->login))==0){
     $dashboard->scope = "home";
     $dashboard->save();
 }
+require_once('DashboardWidget.class.php');
+
+
 
 ?>
 <div class="plugin-dashboard">