093 Thème admin

This commit is contained in:
Fred Tempez 2020-05-17 07:40:09 +02:00
parent e1f4a6dc8c
commit 4b38d4c3d6
6 changed files with 122 additions and 46 deletions

View File

@ -1527,7 +1527,7 @@ class core extends common {
// Version // Version
$css = '/*' . md5(json_encode($this->getData(['admin']))) . '*/'; $css = '/*' . md5(json_encode($this->getData(['admin']))) . '*/';
$css .= '#site{background-color:' . $this->getData(['admin','backgroundColor']) . ';}'; $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 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']) . ';}'; $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'])); $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'] . '}'; $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'])); $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'] . '}'; $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'])); $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'] . ';}'; $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 // Enregistre la personnalisation
file_put_contents(self::DATA_DIR.'admin.css', $css); file_put_contents(self::DATA_DIR.'admin.css', $css);
} }

View File

@ -163,7 +163,7 @@ class init extends common {
], ],
'admin' => [ 'admin' => [
'backgroundColor' => 'rgba(255, 255, 255, 1)', 'backgroundColor' => 'rgba(255, 255, 255, 1)',
'font' => 'open+Sans', 'fontText' => 'open+Sans',
'fontSize' => '13px', 'fontSize' => '13px',
'fontTitle' => 'Oswald', 'fontTitle' => 'Oswald',
'colorText' => 'rgba(33, 34, 35, 1)', 'colorText' => 'rgba(33, 34, 35, 1)',
@ -172,7 +172,9 @@ class init extends common {
'backgroundColorButton' => 'rgba(44, 79, 110, 1)', 'backgroundColorButton' => 'rgba(44, 79, 110, 1)',
'backgroundColorButtonGrey' => 'rgba(236, 239, 241, 1)', 'backgroundColorButtonGrey' => 'rgba(236, 239, 241, 1)',
'backgroundColorButtonRed' => 'rgba(231, 76, 60, 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)',
], ],
]; ];

View File

@ -247,17 +247,19 @@ class theme extends common {
// Soumission du formulaire // Soumission du formulaire
if($this->isPost()) { if($this->isPost()) {
$this->setData(['admin', [ $this->setData(['admin', [
'backgroundColor' => $this->getInput('themeAdminBackgroundColor'), 'backgroundColor' => $this->getInput('adminBackgroundColor'),
'colorTitle' => $this->getInput('themeAdmincolorTitle'), 'colorTitle' => $this->getInput('adminColorTitle'),
'colorText' => $this->getInput('themeAdmincolorText'), 'colorText' => $this->getInput('adminColorText'),
'colorButtonText' => $this->getInput('themeAdmincolorButtonText'), 'colorButtonText' => $this->getInput('adminColorButtonText'),
'backgroundColorButton' => $this->getInput('themeAdmincolorButton'), 'backgroundColorButton' => $this->getInput('adminColorButton'),
'backgroundColorButtonGrey' => $this->getInput('themeAdmincolorGrey'), 'backgroundColorButtonGrey' => $this->getInput('adminColorGrey'),
'backgroundColorButtonRed' => $this->getInput('themeAdmincolorRed'), 'backgroundColorButtonRed' => $this->getInput('adminColorRed'),
'backgroundColorButtonGreen'=> $this->getInput('themeAdmincolorGreen'), 'backgroundColorButtonGreen'=> $this->getInput('adminColorGreen'),
'font' => $this->getInput('themeFont'), 'fontText' => $this->getInput('adminFontText'),
'fontSize' => $this->getInput('themeTextFontSize'), 'fontSize' => $this->getInput('adminFontTextSize'),
'fontTitle' => $this->getInput('themeFontTitle') 'fontTitle' => $this->getInput('adminFontTitle'),
'backgroundBlockColor' => $this->getInput('adminBackGroundBlockColor'),
'borderBlockColor' => $this->getInput('adminBorderBlockColor'),
]]); ]]);
// Valeurs en sortie // Valeurs en sortie
$this->addOutput([ $this->addOutput([
@ -540,7 +542,8 @@ class theme extends common {
*/ */
public function resetAdmin() { public function resetAdmin() {
// Supprime le fichier de personnalisation avancée // 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 // Valeurs en sortie
$this->addOutput([ $this->addOutput([
'notification' => 'Thème réinitialisé', 'notification' => 'Thème réinitialisé',

View File

@ -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");
});

View File

@ -8,8 +8,14 @@
'value' => 'Retour' 'value' => 'Retour'
]); ?> ]); ?>
</div> </div>
<div class="col2 offset6"> <div class="col2">
<?php echo template::button('configAdminReset', [ <?php echo template::button('configHome', [
'href' => helper::baseUrl() ,
'value' => 'Accueil'
]); ?>
</div>
<div class="col2 offset4">
<?php echo template::button('configAdminReset', [
'class' => 'buttonRed', 'class' => 'buttonRed',
'href' => helper::baseUrl() . 'theme/resetAdmin', 'href' => helper::baseUrl() . 'theme/resetAdmin',
'value' => 'Réinitialiser' 'value' => 'Réinitialiser'
@ -27,32 +33,50 @@
<div class="block"> <div class="block">
<h4>Couleurs</h4> <h4>Couleurs</h4>
<div class="row"> <div class="row">
<div class="col3"> <div class="col4">
<?php echo template::text('themeAdminBackgroundColor', [ <?php echo template::text('adminBackgroundColor', [
'class' => 'colorPicker', 'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.', 'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Arrière-plan', 'label' => 'Arrière-plan',
'value' => $this->getData(['admin', 'backgroundColor']) 'value' => $this->getData(['admin', 'backgroundColor'])
]); ?> ]); ?>
</div> </div>
<div class="col3"> <div class="col4">
<?php echo template::text('themeAdmincolorTitle', [ <?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', 'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.', 'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Titres', 'label' => 'Titres',
'value' => $this->getData(['admin', 'colorTitle']) 'value' => $this->getData(['admin', 'colorTitle'])
]); ?> ]); ?>
</div> </div>
<div class="col3"> <div class="col4">
<?php echo template::text('themeAdmincolorText', [ <?php echo template::text('adminColorText', [
'class' => 'colorPicker', 'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.', 'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Texte', 'label' => 'Texte',
'value' => $this->getData(['admin', 'colorText']) 'value' => $this->getData(['admin', 'colorText'])
]); ?> ]); ?>
</div> </div>
<div class="col3"> <div class="col4">
<?php echo template::text('themeAdmincolorButtonText', [ <?php echo template::text('adminColorButtonText', [
'class' => 'colorPicker', 'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.', 'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Texte des boutons', 'label' => 'Texte des boutons',
@ -62,15 +86,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col3"> <div class="col3">
<?php echo template::text('themeAdmincolorButton', [ <?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 standard',
'value' => $this->getData(['admin', 'backgroundColorButton'])
]); ?>
</div>
<div class="col3">
<?php echo template::text('themeAdmincolorGrey', [
'class' => 'colorPicker', 'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.', 'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Bouton retour', 'label' => 'Bouton retour',
@ -78,7 +94,15 @@
]); ?> ]); ?>
</div> </div>
<div class="col3"> <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', 'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.', 'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Bouton effacement', 'label' => 'Bouton effacement',
@ -86,7 +110,7 @@
]); ?> ]); ?>
</div> </div>
<div class="col3"> <div class="col3">
<?php echo template::text('themeAdmincolorGreen', [ <?php echo template::text('adminColorGreen', [
'class' => 'colorPicker', 'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.', 'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Bouton validation', 'label' => 'Bouton validation',
@ -103,20 +127,20 @@
<h4>Mise en forme du texte</h4> <h4>Mise en forme du texte</h4>
<div class="row"> <div class="row">
<div class="col4"> <div class="col4">
<?php echo template::select('themeFont', $module::$fonts, [ <?php echo template::select('adminFontText', $module::$fonts, [
'label' => 'Police du texte', 'label' => 'Police du texte',
'selected' => $this->getData(['admin', 'font']), 'selected' => $this->getData(['admin', 'fontText']),
'fonts' => true 'fonts' => true
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col4">
<?php echo template::select('themeTextFontSize', $module::$siteFontSizes, [ <?php echo template::select('adminFontTextSize', $module::$siteFontSizes, [
'label' => 'Taille', 'label' => 'Taille',
'selected' => $this->getData(['admin', 'fontSize']) 'selected' => $this->getData(['admin', 'fontSize'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col4">
<?php echo template::select('themeFontTitle', $module::$fonts, [ <?php echo template::select('adminFontTitle', $module::$fonts, [
'label' => 'Police des titres', 'label' => 'Police des titres',
'selected' => $this->getData(['admin', 'fontTitle']), 'selected' => $this->getData(['admin', 'fontTitle']),
'fonts' => true 'fonts' => true