From 4b38d4c3d64a75df403c63c75d56f74466cbcbd9 Mon Sep 17 00:00:00 2001
From: Fred Tempez <ftempez@gmail.com>
Date: Sun, 17 May 2020 07:40:09 +0200
Subject: [PATCH] =?UTF-8?q?093=20Th=C3=A8me=20admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core.php                                 |  6 +-
 core/module/install/ressource/defaultdata.php |  6 +-
 core/module/theme/theme.php                   | 27 ++++---
 core/module/theme/view/admin/admin.css        |  2 +-
 core/module/theme/view/admin/admin.js.php     | 47 +++++++++++
 core/module/theme/view/admin/admin.php        | 80 ++++++++++++-------
 6 files changed, 122 insertions(+), 46 deletions(-)
 create mode 100644 core/module/theme/view/admin/admin.js.php

diff --git a/core/core.php b/core/core.php
index 873fcc5b..534bff60 100755
--- a/core/core.php
+++ b/core/core.php
@@ -1527,7 +1527,7 @@ class core extends common {
 			// Version
 			$css = '/*' . md5(json_encode($this->getData(['admin']))) . '*/';
 			$css .= '#site{background-color:' . $this->getData(['admin','backgroundColor']) . ';}';
-			$css .= 'body, .row > div {font:' . $this->getData(['admin','fontSize']) . ' "' . $this->getData(['admin','font'])  . '", sans-serif;}';
+			$css .= 'body, .row > div {font:' . $this->getData(['admin','fontSize']) . ' "' . $this->getData(['admin','fontText'])  . '", sans-serif;}';
 			$css .= 'body h1, h2, h3, h4, h5, h6 {font-family:' .   $this->getData(['admin','fontTitle' ]) . ', sans-serif;color:' . $this->getData(['admin','colorTitle' ]) . ';}';
 			$css .= 'body:not(.editorWysiwyg),.block h4,input[type=email],input[type=text],input[type=password],.inputFile,select,textarea:not(.editorWysiwyg),.inputFile,span .zwiico-help,.button.buttonGrey {color:' . $this->getData(['admin','colorText']) . ';}';
 			$colors = helper::colorVariants($this->getData(['admin','backgroundColorButton']));
@@ -1538,10 +1538,10 @@ class core extends common {
 			$css .= '.button.buttonGrey {background: ' . $colors['normal'] . ';}.button.buttonGrey:hover {background:' . $colors['darken'] . '}.button.buttonGrey:active {background:' . $colors['veryDarken'] . '}';
 			$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonRed']));
 			$css .= '.button.buttonRed {background: ' . $colors['normal'] . ';}.button.buttonRed:hover {background:' . $colors['darken'] . '}.button.buttonRed:active {background:' . $colors['veryDarken'] . '}';			
-			$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonRed']));
-			$css .= '.button.buttonRed {background: ' . $colors['normal'] . ';}.button.buttonRed:hover {background:' . $colors['darken'] . '}.button.buttonRed:active {background:' . $colors['veryDarken'] . '}';						
 			$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGreen']));
 			$css .= 'button[type=submit] {background-color: ' . $colors['normal']. ';color: ' . $this->getData(['admin','colorButtonText']) . '}button[type=submit]:hover {background-color: ' . $colors['darken'] . ';}';
+			$colors = helper::colorVariants($this->getData(['admin','backgroundBlockColor']));
+			$css .= '.block {border: 1px solid ' . $this->getData(['admin','borderBlockColor']) . ';}.block h4 {background: ' . $colors['normal'] . ';color:' . $colors['text']. ';}';
 			// Enregistre la personnalisation
 			file_put_contents(self::DATA_DIR.'admin.css', $css);
 		}
diff --git a/core/module/install/ressource/defaultdata.php b/core/module/install/ressource/defaultdata.php
index ddbd2e20..75be736a 100755
--- a/core/module/install/ressource/defaultdata.php
+++ b/core/module/install/ressource/defaultdata.php
@@ -163,7 +163,7 @@ class init extends common {
 		],
 		'admin' => [
 			'backgroundColor' => 'rgba(255, 255, 255, 1)',
-			'font' => 'open+Sans',
+			'fontText' => 'open+Sans',
 			'fontSize' => '13px',
 			'fontTitle' => 'Oswald',
 			'colorText' => 'rgba(33, 34, 35, 1)',
@@ -172,7 +172,9 @@ class init extends common {
 			'backgroundColorButton' => 'rgba(44, 79, 110, 1)',
 			'backgroundColorButtonGrey' => 'rgba(236, 239, 241, 1)',
 			'backgroundColorButtonRed' => 'rgba(231, 76, 60, 1)',
-			'backgroundColorButtonGreen' => 'rgba(57, 112, 12, 1)'
+			'backgroundColorButtonGreen' => 'rgba(57, 112, 12, 1)',
+			'backgroundBlockColor' => 'rgba(236, 239, 241, 1)',
+			'borderBlockColor' => 'rgba(236, 239, 241, 1)',
 		],
     ];
 
diff --git a/core/module/theme/theme.php b/core/module/theme/theme.php
index 0449d57e..32cd0607 100755
--- a/core/module/theme/theme.php
+++ b/core/module/theme/theme.php
@@ -247,17 +247,19 @@ class theme extends common {
 		// Soumission du formulaire
 		if($this->isPost()) {
 			$this->setData(['admin', [
-				'backgroundColor' 	=> $this->getInput('themeAdminBackgroundColor'),
-				'colorTitle' 		=> $this->getInput('themeAdmincolorTitle'),
-				'colorText'			=> $this->getInput('themeAdmincolorText'),
-				'colorButtonText' 	=> $this->getInput('themeAdmincolorButtonText'),
-				'backgroundColorButton' 	=> $this->getInput('themeAdmincolorButton'),
-				'backgroundColorButtonGrey'	=> $this->getInput('themeAdmincolorGrey'),
-				'backgroundColorButtonRed'	=> $this->getInput('themeAdmincolorRed'),
-				'backgroundColorButtonGreen'=> $this->getInput('themeAdmincolorGreen'),
-				'font' 		=> $this->getInput('themeFont'),
-				'fontSize' 	=> $this->getInput('themeTextFontSize'),
-				'fontTitle' => $this->getInput('themeFontTitle')
+				'backgroundColor' 	=> $this->getInput('adminBackgroundColor'),
+				'colorTitle' 		=> $this->getInput('adminColorTitle'),
+				'colorText'			=> $this->getInput('adminColorText'),
+				'colorButtonText' 	=> $this->getInput('adminColorButtonText'),
+				'backgroundColorButton' 	=> $this->getInput('adminColorButton'),
+				'backgroundColorButtonGrey'	=> $this->getInput('adminColorGrey'),
+				'backgroundColorButtonRed'	=> $this->getInput('adminColorRed'),
+				'backgroundColorButtonGreen'=> $this->getInput('adminColorGreen'),
+				'fontText' 		=> $this->getInput('adminFontText'),
+				'fontSize' 	=> $this->getInput('adminFontTextSize'),
+				'fontTitle' => $this->getInput('adminFontTitle'),
+				'backgroundBlockColor' => $this->getInput('adminBackGroundBlockColor'),
+				'borderBlockColor' => $this->getInput('adminBorderBlockColor'),
 			]]);
 			// Valeurs en sortie
 			$this->addOutput([
@@ -540,7 +542,8 @@ class theme extends common {
 	 */
 	public function resetAdmin() {
 		// Supprime le fichier de personnalisation avancée
-		unlink(self::DATA_DIR.'admin.json');
+		//unlink(self::DATA_DIR.'admin.json');
+		$this->initData('admin');
 		// Valeurs en sortie
 		$this->addOutput([
 			'notification' => 'Thème réinitialisé',
diff --git a/core/module/theme/view/admin/admin.css b/core/module/theme/view/admin/admin.css
index bfeedf7c..a7f42f05 100755
--- a/core/module/theme/view/admin/admin.css
+++ b/core/module/theme/view/admin/admin.css
@@ -13,4 +13,4 @@
  */
 
 /* Thème administration */
-@import url("site/data/admin.css");
\ No newline at end of file
+@import url("site/data/admin.css");
diff --git a/core/module/theme/view/admin/admin.js.php b/core/module/theme/view/admin/admin.js.php
new file mode 100644
index 00000000..2818bf39
--- /dev/null
+++ b/core/module/theme/view/admin/admin.js.php
@@ -0,0 +1,47 @@
+/**
+ * This file is part of Zwii.
+ *
+ * For full copyright and license information, please see the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @author Fred Tempez <frederic.tempez@outlook.com>
+ * @copyright Copyright (C) 2008-2018, Rémi Jean
+ * @license GNU General Public License, version 3
+ * @link http://zwiicms.com/
+ */
+
+ /**
+ * Aperçu en direct
+ */
+$("input, select").on("change", function() {
+    
+    var titleFont = $("#adminFontTitle").val();
+    var textFont = $("#adminFontText").val();
+    var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
+
+    var css = "#site{background-color:" + $("#adminBackgroundColor").val() + ";}";
+    css += "body, .row > div {font:" + $("#adminFontTextSize").val() + " '" + textFont  + "', sans-serif;}";
+    css += "body h1, h2, h3, h4, h5, h6 {font-family:'" +  titleFont + "', sans-serif; color:" + $("#adminColorTitle").val() + ";}";
+    css += "body:not(.editorWysiwyg),.block h4,input[type=email],input[type=text],input[type=password],.inputFile,select,textarea:not(.editorWysiwyg),.inputFile,span .zwiico-help,.button.buttonGrey {color:" + $("#adminColorText").val() + ";}";
+    var colors = core.colorVariants($("#adminColorButton").val());
+    css += ".button,input[type='checkbox']:checked + label::before,.speechBubble{ background-color:" + colors.normal + "; color:" + $("#adminColorButtonText").val() + ";}";    
+    css += ".speechBubble::before {border-color:" + colors.normal + " transparent transparent transparent;}";
+    css += ".button:hover, button[type=submit]:hover { background-color:" + colors.darken + ";}";
+    var colors = core.colorVariants($("#adminColorGrey").val());    
+    css += ".button.buttonGrey {background: " + colors.normal + ";}.button.buttonGrey:hover {background:" + colors.darken + "}.button.buttonGrey:active {background:" + colors.veryDarken + "}";
+    var colors = core.colorVariants($("#adminColorRed").val());    
+    css += ".button.buttonRed {background: " + colors.normal + ";}.button.buttonRed:hover {background:" + colors.darken + "}.button.buttonRed:active {background:" + colors.veryDarken + "}";
+    var colors = core.colorVariants($("#adminColorGreen").val());    
+    css += "button[type=submit] {background-color: " + colors.normal + ";color: " + $("#adminColorButtonText").val() + "}button[type=submit]:hover {background-color: " + colors.darken + ";}";
+    var colors = core.colorVariants($("#adminBackGroundBlockColor").val());  
+    css += ".block {border: 1px solid " + $("#adminBorderBlockColor").val() + ";}.block h4 {background: "  + colors.normal + ";color:" + colors.text + ";}";
+
+	// Ajout du css au DOM
+	$("#themePreview").remove();
+	$("<style>")
+		.attr("type", "text/css")
+		.attr("id", "themePreview")
+		.text(css)
+		.appendTo("head");
+
+});
diff --git a/core/module/theme/view/admin/admin.php b/core/module/theme/view/admin/admin.php
index 8ffe852e..6bc7e5f0 100755
--- a/core/module/theme/view/admin/admin.php
+++ b/core/module/theme/view/admin/admin.php
@@ -8,13 +8,19 @@
 				'value' => 'Retour'
 			]); ?>
 		</div>
-		<div class="col2 offset6">
-		<?php echo template::button('configAdminReset', [
+		<div class="col2">
+			<?php echo template::button('configHome', [
+				'href' => helper::baseUrl() ,
+				'value' => 'Accueil'
+			]); ?>		
+		</div>
+		<div class="col2 offset4">
+			<?php echo template::button('configAdminReset', [
 				'class' => 'buttonRed',
 				'href' => helper::baseUrl() . 'theme/resetAdmin',
 				'value' => 'Réinitialiser'
-			]); ?>		
-		</div>
+			]); ?>						
+		</div>	
 		<div class="col2">
 			<?php echo template::submit('configAdminSubmit',[
 				'value' => 'valider',
@@ -27,32 +33,50 @@
 			<div class="block">
 					<h4>Couleurs</h4>
 				<div class="row">
-					<div class="col3">
-						<?php echo template::text('themeAdminBackgroundColor', [
+					<div class="col4">
+						<?php echo template::text('adminBackgroundColor', [
 							'class' => 'colorPicker',
 							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
 							'label' => 'Arrière-plan',
 							'value' => $this->getData(['admin', 'backgroundColor'])
 						]); ?>
 					</div>
-					<div class="col3">
-						<?php echo template::text('themeAdmincolorTitle', [
+					<div class="col4">
+						<?php echo template::text('adminBackGroundBlockColor', [
+							'class' => 'colorPicker',
+							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
+							'label' => 'Arrière-plan des blocs',
+							'value' => $this->getData(['admin', 'backgroundBlockColor'])
+						]); ?>
+					</div>
+					<div class="col4">
+						<?php echo template::text('adminBorderBlockColor', [
+							'class' => 'colorPicker',
+							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
+							'label' => 'Bordure des blocs',
+							'value' => $this->getData(['admin', 'borderBlockColor'])
+						]); ?>
+					</div>					
+				</div>
+				<div class="row">
+					<div class="col4">
+						<?php echo template::text('adminColorTitle', [
 							'class' => 'colorPicker',
 							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
 							'label' => 'Titres',
 							'value' => $this->getData(['admin', 'colorTitle'])
 						]); ?>
 					</div>                                        
-					<div class="col3">
-						<?php echo template::text('themeAdmincolorText', [
+					<div class="col4">
+						<?php echo template::text('adminColorText', [
 							'class' => 'colorPicker',
 							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
 							'label' => 'Texte',
 							'value' => $this->getData(['admin', 'colorText'])
 						]); ?>
 					</div>
-					<div class="col3">
-						<?php echo template::text('themeAdmincolorButtonText', [
+					<div class="col4">
+						<?php echo template::text('adminColorButtonText', [
 							'class' => 'colorPicker',
 							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
 							'label' => 'Texte des boutons',
@@ -61,24 +85,24 @@
 					</div>  
 				</div>
 				<div class="row">
-					<div class="col3">
-						<?php echo template::text('themeAdmincolorButton', [
-							'class' => 'colorPicker',
-							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
-							'label' => 'Bouton standard',
-							'value' => $this->getData(['admin', 'backgroundColorButton'])
-						]); ?>
-					</div>            
 					<div class="col3">                 
-						<?php echo template::text('themeAdmincolorGrey', [
+						<?php echo template::text('adminColorGrey', [
 							'class' => 'colorPicker',
 							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
 							'label' => 'Bouton retour',
 							'value' => $this->getData(['admin', 'backgroundColorButtonGrey'])
 						]); ?>
-					</div>            
+					</div>  					
 					<div class="col3">
-						<?php echo template::text('themeAdmincolorRed', [
+						<?php echo template::text('adminColorButton', [
+							'class' => 'colorPicker',
+							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
+							'label' => 'Bouton standard',
+							'value' => $this->getData(['admin', 'backgroundColorButton'])
+						]); ?>
+					</div>                      
+					<div class="col3">
+						<?php echo template::text('adminColorRed', [
 							'class' => 'colorPicker',
 							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
 							'label' => 'Bouton effacement',
@@ -86,7 +110,7 @@
 						]); ?>
 					</div>
 					<div class="col3">
-						<?php echo template::text('themeAdmincolorGreen', [
+						<?php echo template::text('adminColorGreen', [
 							'class' => 'colorPicker',
 							'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
 							'label' => 'Bouton validation',
@@ -103,20 +127,20 @@
 					<h4>Mise en forme du texte</h4>
 					<div class="row">
 						<div class="col4">
-							<?php echo template::select('themeFont', $module::$fonts, [
+							<?php echo template::select('adminFontText', $module::$fonts, [
 								'label' => 'Police du texte',
-								'selected' => $this->getData(['admin', 'font']),
+								'selected' => $this->getData(['admin', 'fontText']),
 								'fonts' => true
 							]); ?>
 						</div>				
 						<div class="col4">
-							<?php echo template::select('themeTextFontSize', $module::$siteFontSizes, [
+							<?php echo template::select('adminFontTextSize', $module::$siteFontSizes, [
 								'label' => 'Taille',
 								'selected' => $this->getData(['admin', 'fontSize'])
 							]); ?>
 						</div>
 						<div class="col4">
-							<?php echo template::select('themeFontTitle', $module::$fonts, [
+							<?php echo template::select('adminFontTitle', $module::$fonts, [
 								'label' => 'Police des titres',
 								'selected' => $this->getData(['admin', 'fontTitle']),
 								'fonts' => true