Browse Source

10.1 Thème

pull/9/head
Fred Tempez 2 years ago
parent
commit
3960e68365
  1. 6
      CHANGES.md
  2. 13
      core/core.php
  3. 4
      core/layout/common.css
  4. 8
      core/module/install/ressource/defaultdata.php
  5. 12
      core/module/theme/theme.php
  6. 8
      core/module/theme/view/admin/admin.php
  7. 1
      core/module/theme/view/menu/menu.js.php
  8. 51
      core/module/theme/view/menu/menu.php
  9. 150
      core/module/theme/view/site/site.js.php
  10. 43
      core/module/theme/view/site/site.php

6
CHANGES.md

@ -1,13 +1,15 @@
# Changelog
## version 10.1.000
- Nouveauté :
- Nouveautés :
- Thème des écrans d'administration modifiable (configuration, utilisateurs : etc.)
- Thème du site : couleur de l'encadrement et la bordure des blocs.
- Thème du menu : couleur du texte de la page active
- Corrections :
- Configuration SMTP : sur-cryptage du mot de passe.
- Quelques corrections liées à l'hébergeur Free.
- Modification :
- Optimisation des opérations de disque, mis en cache en lecture des données de pages. Aucun cache en écriture.
- Optimisation des opérations de disque, mise en cache en lecture des données de pages. Aucun cache en écriture.
- Mise à jour :
- TinyMCE 4.9.10

13
core/core.php

@ -173,8 +173,8 @@ class common {
$this->user = $this->getData(['user', $this->getInput('ZWII_USER_ID')]);
}
// Mise ne cache des pages
$this->page = $this->readPageCache();
// Mise en cache des pages
$this->page = $this->getPageCache();
// Construit la liste des pages parents/enfants
if($this->hierarchy['all'] === []) {
@ -435,7 +435,7 @@ class common {
* Lecture des fichiers de données de page et mise ne cache
* @param @return string données des pages
*/
public function readPageCache() {
public function getPageCache() {
// Trois tentatives
for($i = 0; $i < 3; $i++) {
$data =json_decode(file_get_contents(self::DATA_DIR.'fr/page.json'), true);
@ -443,7 +443,7 @@ class common {
return($data);
}
elseif($i === 2) {
exit('Unable to read data file.');
exit('Erreur fatale : impossible d\'accéder aux pages');
}
// Pause de 10 millisecondes
usleep(10000);
@ -1409,7 +1409,7 @@ class core extends common {
// Icône BacktoTop
$css .= '#backToTop {background-color:' .$this->getData(['theme', 'body', 'toTopbackgroundColor']). ';color:'.$this->getData(['theme', 'body', 'toTopColor']).';}';
// Site
$colors = helper::colorVariants($this->getData(['theme', 'text', 'linkTextColor']));
$colors = helper::colorVariants($this->getData(['theme', 'text', 'linkColor']));
$css .= 'a{color:' . $colors['normal'] . '}';
$css .= 'a:hover{color:' . $colors['darken'] . '}';
$css .= 'body,.row > div{font-size:' . $this->getData(['theme', 'text', 'fontSize']) . '}';
@ -1433,6 +1433,9 @@ class core extends common {
$css .= '.button:active,button[type=\'submit\']:active,.pagination a:active{background-color:' . $colors['veryDarken'] . '}';
$colors = helper::colorVariants($this->getData(['theme', 'title', 'textColor']));
$css .= 'h1,h2,h3,h4,h5,h6{color:' . $colors['normal'] . ';font-family:"' . str_replace('+', ' ', $this->getData(['theme', 'title', 'font'])) . '",sans-serif;font-weight:' . $this->getData(['theme', 'title', 'fontWeight']) . ';text-transform:' . $this->getData(['theme', 'title', 'textTransform']) . '}';
// Les blocs
$colors = helper::colorVariants($this->getData(['theme', 'block', 'backgroundColor']));
$css .= '.block {border: 1px solid ' . $this->getdata(['theme','block','borderColor']) . ';}.block h4 {background:'. $colors['normal'] . ';color:' . $colors['text'] .';}';
// Bannière
$colors = helper::colorVariants($this->getData(['theme', 'header', 'backgroundColor']));
if($this->getData(['theme', 'header', 'margin'])) {

4
core/layout/common.css

@ -829,7 +829,7 @@ footer #footerSocials .zwiico-github:hover {
/* Bloc */
.block {
border: 1px solid #D8DFE3;
/* border: 1px solid #D8DFE3;*/
padding: 20px 20px 10px;
margin: 20px 0;
word-wrap: break-word;
@ -844,7 +844,7 @@ footer #footerSocials .zwiico-github:hover {
.block h4 {
margin: -20px -20px 10px -20px;
padding: 10px;
background: #ECEFF1;
/* background: #ECEFF1;*/
}
/* Aides */

8
core/module/install/ressource/defaultdata.php

@ -144,11 +144,15 @@ class init extends common {
'shadow' => '0',
'width' => '960px'
],
'block' => [
'backgroundBlockColor' => 'rgba(236, 239, 241, 1)',
'borderColor' => 'rgba(236, 239, 241, 1)'
],
'text' => [
'font' => 'Open+Sans',
'fontSize' => '13px',
'textColor' => 'rgba(33, 34, 35, 1)',
'linkTextColor' => 'rgba(74, 105, 189, 1)'
'linkColor' => 'rgba(74, 105, 189, 1)'
],
'title' => [
'font' => 'Oswald',
@ -174,7 +178,7 @@ class init extends common {
'backgroundColorButtonRed' => 'rgba(231, 76, 60, 1)',
'backgroundColorButtonGreen' => 'rgba(57, 112, 12, 1)',
'backgroundBlockColor' => 'rgba(236, 239, 241, 1)',
'borderBlockColor' => 'rgba(236, 239, 241, 1)',
'borderBlockColor' => 'rgba(236, 239, 241, 1)'
],
];

12
core/module/theme/theme.php

@ -568,18 +568,22 @@ class theme extends common {
'font' => $this->getInput('themeTextFont'),
'fontSize' => $this->getInput('themeTextFontSize'),
'textColor' => $this->getInput('themeTextTextColor'),
'linkTextColor'=> $this->getInput('themeTextLinkTextColor')
'linkColor'=> $this->getInput('themeTextLinkColor')
]]);
$this->setData(['theme', 'site', [
'backgroundColor' => $this->getInput('themeSiteBackgroundColor'),
'radius' => $this->getInput('themeSiteRadius'),
'shadow' => $this->getInput('themeSiteShadow'),
'width' => $this->getInput('themeSiteWidth'),
'margin' => $this->getInput('themeSiteMargin',helper::FILTER_BOOLEAN),
'margin' => $this->getInput('themeSiteMargin',helper::FILTER_BOOLEAN)
]]);
$this->setData(['theme', 'button', [
'backgroundColor' => $this->getInput('themeButtonBackgroundColor'),
]]);
'backgroundColor' => $this->getInput('themeButtonBackgroundColor')
]]);
$this->setData(['theme', 'block', [
'backgroundColor' => $this->getInput('themeBlockBackgroundColor'),
'borderColor' => $this->getInput('themeBlockBorderColor')
]]);
// Valeurs en sortie
$this->addOutput([
'notification' => 'Modifications enregistrées',

8
core/module/theme/view/admin/admin.php

@ -8,13 +8,7 @@
'value' => 'Retour'
]); ?>
</div>
<div class="col2">
<?php echo template::button('configHome', [
'href' => helper::baseUrl() ,
'value' => 'Accueil'
]); ?>
</div>
<div class="col2 offset4">
<div class="col2 offset6">
<?php echo template::button('configAdminReset', [
'class' => 'buttonRed',
'href' => helper::baseUrl() . 'theme/resetAdmin',

1
core/module/theme/view/menu/menu.js.php

@ -51,7 +51,6 @@ $("input, select").on("change", function() {
} else {
css += "nav a:hover{background-color:" + $("#themeMenuActiveColor").val() + ";color:" + $('#themeMenuActiveTextColor').val() + ";}";
}
console.log(css);
// Taille, hauteur, épaisseur et capitalisation de caractères du menu
css += "#toggle span,#menu a{padding:" + $("#themeMenuHeight").val() + ";font-family:'" + menuFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeMenuFontWeight").val() + ";font-size:" + $("#themeMenuFontSize").val() + ";text-transform:" + $("#themeMenuTextTransform").val() + "}";
// Alignement du menu

51
core/module/theme/view/menu/menu.php

@ -15,9 +15,9 @@
<div class="row">
<div class="col12">
<div class="block">
<h4>Couleurs</h4>
<h4>Couleur</h4>
<div class="row">
<div class="col3">
<div class="col6">
<?php echo template::text('themeMenuTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
@ -25,36 +25,43 @@
'value' => $this->getData(['theme', 'menu', 'textColor'])
]); ?>
</div>
<div class="col3">
<div class="col6">
<?php echo template::text('themeMenuBackgroundColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Fond',
'value' => $this->getData(['theme', 'menu', 'backgroundColor'])
]); ?>
</div>
<div class="col3">
<?php echo template::text('themeMenuActiveTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Texte page active',
'value' => $this->getData(['theme', 'menu', 'activeTextColor'])
]); ?>
</div>
<div class="col3 verticalAlignBottom">
<?php
echo template::checkbox('themeMenuActiveColorAuto', true, 'Fond automatique.', [
'checked' => $this->getData(['theme', 'menu', 'activeColorAuto']),
'help' => 'La couleur de fond de la page active peut être définie automatique ou selon une couleur définie, comme par exemple celle de fond des pages.'
]); ?>
</div>
</div>
</div>
<div class="row">
<div class="col3 offset9">
</div>
</div>
</div>
<div class="row">
<div class="col12">
<div class="block">
<h4>Page active</h4>
<div class="row">
<div class="col4">
<?php echo template::text('themeMenuActiveTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Texte',
'value' => $this->getData(['theme', 'menu', 'activeTextColor'])
]); ?>
</div>
<div class="col4 verticalAlignBottom">
<?php
echo template::checkbox('themeMenuActiveColorAuto', true, 'Couleur du fond automatique', [
'checked' => $this->getData(['theme', 'menu', 'activeColorAuto']),
'help' => 'La couleur de fond de la page active peut être définie automatique ou selon une couleur définie, comme par exemple celle de fond des pages.'
]); ?>
</div>
<div class="col4">
<?php echo template::text('themeMenuActiveColor', [
'class' => 'colorPicker',
'help' => 'Couleur de fond de la page sélectionnée dans le menu.<br>Le curseur horizontal règle le niveau de transparence.',
'label' => 'Fond active',
'label' => 'Fond',
'value' => $this->getData(['theme', 'menu', 'activeColor'])
]); ?>
</div>

150
core/module/theme/view/site/site.js.php

@ -14,13 +14,6 @@
* Chargement de l'aperçu
*/
$( document).ready(function() {
updateDOM();
});
/**
* Aperçu en direct
*/
$("input, select").on("change",function() {
/**
* Option de marge si la taille n'est pas fluide
*/
@ -30,77 +23,94 @@ $("input, select").on("change",function() {
} else {
$("#themeSiteMargin").addClass("enabled");
}
updateDOM();
var backgroundImage = <?php echo json_encode(helper::baseUrl(false) . self::FILE_DIR . 'source/' . $this->getData(['theme','body','image'])); ?>;
var backgroundcolor = <?php echo json_encode($this->getdata(['theme','body','backgroundColor'])); ?>;
css = "div.bodybackground{background-color:" + backgroundcolor + "; background-image: url(" + backgroundImage + ");background-size:cover;}";
css += "div.bgPreview{padding: 5px;background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
$("#themePreview").remove();
$("<style>")
.attr("type", "text/css")
.attr("id", "themePreview")
.text(css)
.appendTo("head");
});
/**
* Aperçu en direct
*/
$("input, select").on("change",function() {
function updateDOM() {
/**
* Aperçu dans la boîte
*/
/**
* Aperçu dans la boîte
*/
// Import des polices de caractères
var titleFont = $("#themeTitleFont").val();
var textFont = $("#themeTextFont").val();
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
// Couleurs des boutons
var colors = core.colorVariants($("#themeButtonBackgroundColor").val());
css += ".button.buttonSubmitPreview{background-color:" + colors.normal + ";}";
css += ".button.buttonSubmitPreview:hover{background-color:" + colors.darken + "}";
css += ".button.buttonSubmitPreview{color:" + colors.text + ";}";
// Import des polices de caractères
var titleFont = $("#themeTitleFont").val();
var textFont = $("#themeTextFont").val();
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
// Couleurs des boutons
var colors = core.colorVariants($("#themeButtonBackgroundColor").val());
css += ".button.buttonSubmitPreview{background-color:" + colors.normal + ";}";
css += ".button.buttonSubmitPreview:hover{background-color:" + colors.darken + "}";
css += ".button.buttonSubmitPreview{color:" + colors.text + ";}";
// Couleurs des liens
var colors = core.colorVariants($("#themeTextLinkColor").val());
css += "a.urlPreview{color:" + colors.normal + "}";
css += "a.urlPreview:hover{color:" + colors.darken + "}";
// Couleur, polices, épaisseur et capitalisation de caractères des titres
css += ".headerPreview,.headerPreview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
// Police de caractères
// Police + couleur
css += ".textPreview,.urlPreview{color:" + $("#themeTextTextColor").val() + ";font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif; font-size:" + $("#themeTextFontSize").val() + ";}";
// Couleur des liens
//css += "a.preview,.buttonSubmitPreview{font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif}";
// Couleurs des liens
colors = core.colorVariants($("#themeLinkTextColor").val());
css += "a.urlPreview{color:" + colors.normal + "}";
css += "a.urlPreview:hover{color:" + colors.darken + "}";
// Couleur, polices, épaisseur et capitalisation de caractères des titres
css += ".headerPreview,.headerPreview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
// Police de caractères
// Police + couleur
css += ".textPreview,.urlPreview{color:" + $("#themeTextTextColor").val() + ";font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif; font-size:" + $("#themeTextFontSize").val() + ";}";
// Couleur des liens
//css += "a.preview,.buttonSubmitPreview{font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif}";
// Taille du texte
// Couleur du texte
css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
// Taille du texte
// Couleur du texte
css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
/**
* Aperçu réel
*/
/**
* Aperçu réel
*/
// Taille du site
if ($("#themeSiteWidth").val() === "750px") {
css += ".button, button{font-size:0.8em;}";
} else {
css += ".button, button{font-size:1em;}";
}
// Largeur du site
var margin = $("#themeSiteMargin").is(":checked") ? 0 : '20px' ;
css += ".container{max-width:" + $("#themeSiteWidth").val() + "}";
if ($("#themeSiteWidth").val() === "100%") {
css += "#site{margin: 0px auto;} body{margin:0 auto;} #bar{margin:0 auto;} body > header{margin:0 auto;} body > nav {margin: 0 auto;} body > footer {margin:0 auto;}";
} else {
css += "#site{margin: " + margin + " auto !important;} body{margin:0px 10px;} #bar{margin: 0 -10px;} body > header{margin: 0 -10px;} body > nav {margin: 0 -10px;} body > footer {margin: 0 -10px;} ";
}
// Couleur du site, arrondi sur les coins du site et ombre sur les bords du site
//css += "#site{background-color:" + $("#themeSiteBackgroundColor").val() + ";border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
css += "#site{border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
var backgroundImage = <?php echo json_encode(helper::baseUrl(false) . self::FILE_DIR . 'source/' . $this->getData(['theme','body','image'])); ?>;
var backgroundcolor = <?php echo json_encode($this->getdata(['theme','body','backgroundColor'])); ?>;
css += "div.bodybackground{background-color:" + backgroundcolor + "; background-image: url(" + backgroundImage + ");background-size:cover;}";
css += "div.bgPreview{padding: 5px;background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
// Les blocs
// Taille du site
if ($("#themeSiteWidth").val() === "750px") {
css += ".button, button{font-size:0.8em;}";
} else {
css += ".button, button{font-size:1em;}";
}
// Largeur du site
var margin = $("#themeSiteMargin").is(":checked") ? 0 : '20px' ;
css += ".container{max-width:" + $("#themeSiteWidth").val() + "}";
if ($("#themeSiteWidth").val() === "100%") {
css += "#site{margin: 0px auto;} body{margin:0 auto;} #bar{margin:0 auto;} body > header{margin:0 auto;} body > nav {margin: 0 auto;} body > footer {margin:0 auto;}";
} else {
css += "#site{margin: " + margin + " auto !important;} body{margin:0px 10px;} #bar{margin: 0 -10px;} body > header{margin: 0 -10px;} body > nav {margin: 0 -10px;} body > footer {margin: 0 -10px;} ";
}
// Couleur du site, arrondi sur les coins du site et ombre sur les bords du site
//css += "#site{background-color:" + $("#themeSiteBackgroundColor").val() + ";border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
css += "#site{border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
var backgroundImage = <?php echo json_encode(helper::baseUrl(false) . self::FILE_DIR . 'source/' . $this->getData(['theme','body','image'])); ?>;
var backgroundcolor = <?php echo json_encode($this->getdata(['theme','body','backgroundColor'])); ?>;
css += "div.bodybackground{background-color:" + backgroundcolor + "; background-image: url(" + backgroundImage + ");background-size:cover;}";
css += "div.bgPreview{background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
var colors = core.colorVariants($("#themeBlockBackgroundColor").val());
css += ".block.preview {padding: 20px 20px 10px;margin: 20px 0; word-wrap: break-word;border-radius: 2px;border: 1px solid " + $("#themeBlockBorderColor").val() + ";}.block.preview h4.preview {background: " + colors.normal + ";color:" + colors.text + ";margin: -20px -20px 10px -20px; padding: 10px;}";
/**
* Injection dans le DOM
*/
// Ajout du css au DOM
$("#themePreview").remove();
$("<style>")
.attr("type", "text/css")
.attr("id", "themePreview")
.text(css)
.appendTo("head");
/**
* Injection dans le DOM
*/
// Ajout du css au DOM
$("#themePreview").remove();
$("<style>")
.attr("type", "text/css")
.attr("id", "themePreview")
.text(css)
.appendTo("head");
}
});

43
core/module/theme/view/site/site.php

@ -46,14 +46,32 @@
]); ?>
</div>
<div class="col6">
<?php echo template::text('themeTextLinkTextColor', [
<?php echo template::text('themeTextLinkColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Liens',
'value' => $this->getData(['theme', 'text', 'linkTextColor'])
'value' => $this->getData(['theme', 'text', 'linkColor'])
]); ?>
</div>
</div>
<div class="row">
<div class="col6">
<?php echo template::text('themeBlockBackgroundColor', [
'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(['theme', 'block', 'backgroundColor'])
]); ?>
</div>
<div class="col6">
<?php echo template::text('themeBlockBorderColor', [
'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(['theme', 'block', 'borderColor'])
]); ?>
</div>
</div>
<div class="row">
<div class="col6 offset3">
<?php echo template::text('themeButtonBackgroundColor', [
@ -66,23 +84,28 @@
</div>
</div>
<div class="col4 bodybackground">
<div class="bgPreview">
<div class="bgPreview">
<div class="row">
<div class="col12">
<h1 class="headerPreview">Titre </h1>
<div class="col8">
<h1 class="headerPreview">Aperçu </h1>
<h3 class="headerPreview">Sous-Titre </h3>
<p class="textPreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="urlPreview">Lorem ipsum dolor sit amet.</a></p>
</div>
</div>
<div class="row">
<div class="col4 offset8">
<div class="col4">
<?php echo template::button('themeSiteSubmitButtonPreview', [
'class' => 'buttonSubmitPreview',
'value' => 'Bouton'
]); ?>
</div>
</div>
<div class="row">
<div class="col12">
<div class="block preview">
<h4 class="preview">Block</h4>
<p class="textPreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="urlPreview">Lorem ipsum dolor sit amet.</a></p>
</div>
</div>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save