From c5b637e9021953fb550a59872f1e73923d7f763a Mon Sep 17 00:00:00 2001 From: fredtempez Date: Fri, 23 Jul 2021 19:34:23 +0200 Subject: [PATCH] Nouveau style des articles de news --- CHANGES.md | 3 +- module/news/news.php | 107 ++++++++++++++++---------- module/news/ressource/defaultdata.php | 13 ++-- module/news/view/config/config.php | 47 +++++++++-- module/news/view/index/index.css | 22 ------ module/news/view/index/index.php | 2 +- 6 files changed, 118 insertions(+), 76 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index a2353525..d916e304 100755 --- a/CHANGES.md +++ b/CHANGES.md @@ -19,7 +19,8 @@ - Nouvelle option permettant de transférer les fichiers de sauvegarde automatiques dans le gestionnaire de fichiers. - Module News 3.4 : - Changement de nom, Actualités -> News - - La version courte des articles dépend du nombre de caractères au lieu de la hauteur de la div. L'effet flou inutile est aussi supprimé. + - La version abrégée des articles dépend du nombre de caractères au lieu de la hauteur de la div. L'effet flou inutile est aussi supprimé. + - Personnalisation du style, encadrement, et couleur de fond des blocs d'articles. ## version 10.6.03 diff --git a/module/news/news.php b/module/news/news.php index d3527ea6..48812986 100755 --- a/module/news/news.php +++ b/module/news/news.php @@ -49,24 +49,41 @@ class news extends common { 8 => '8 articles', 12 => '12 articles', 16 => '16 articles', - 22 => '22 articles' + 22 => '22 articles' ]; // Nombre de colone par page public static $columns = [ - 12 => '1 Colonne', - 6 => '2 Colonnes', - 4 => '3 Colonnes', - 2 => '4 Colonnes' + 12 => '1 colonne', + 6 => '2 colonnes', + 4 => '3 colonnes', + 3 => '4 colonnes' ]; public static $nbrCol = 1; public static $height = [ - 200 => '200 caractères', - 400 => '400 caractères', - 600 => '600 caractères', - 500 => '800 caractères', + -1 => 'Article complet', 1000 => '1000 caractères', - -1 => 'Article complet' + 800 => '800 caractères', + 600 => '600 caractères', + 400 => '400 caractères', + 200 => '200 caractères', + ]; + + public static $borderWidth = [ + 0 => 'Aucune', + '0.1em' => 'Très fine', + '0.15em' => 'Fine', + '0.2em' => 'Très petite', + '0.25em' => 'Petite', + ]; + + public static $borderStyle =[ + 'none' => 'Aucune', + 'solid' => 'Tiret', + 'inset' => '3D enfoncé', + 'outset'=> '3D surélevé', + 'ridge' => 'Relief 1', + 'groove'=> 'Relief 2' ]; // Signature de l'article @@ -178,13 +195,12 @@ class news extends common { // Soumission du formulaire if($this->isPost()) { + // Générer la feuille de CSS - //$style = '.newsContent {height:' . $this->getInput('newsConfigItemsHeight',helper::FILTER_STRING_SHORT) . ';}'; - //if ($this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) !== '100%') { - // $style = '.newsBlur {height: ' . $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) . ';}'; - //$style .= '.newsBlur {background: linear-gradient(' . $this->getData(['theme', 'text', 'textColor']) . ' ' . $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) . ',rgba(255,255,255,0) );'; - //$style .= ' background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}'; - //} + $style = '.newsFrame {'; + $style .= 'border:' . $this->getInput('newsThemeBorderStyle',helper::FILTER_STRING_SHORT) . ' ' . $this->getInput('newsThemeBorderColor') . ' ' . $this->getInput('newsThemeBorderWidth',helper::FILTER_STRING_SHORT) . ';'; + $style .= 'background-color:' . $this->getInput('newsThemeBackgroundColor') . ';'; + $style .= '}'; // Dossier de l'instance if (!is_dir(self::DATADIRECTORY . $this->getUrl(0))) { @@ -196,9 +212,11 @@ class news extends common { // Fin feuille de style $this->setData(['module', $this->getUrl(0), 'theme',[ - 'style' => $success ? self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' : '', - //'itemsHeight' => $this->getInput('newsConfigItemsHeight',helper::FILTER_STRING_SHORT), - //'itemsBlur' => $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) + 'style' => $success ? self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' : '', + 'borderStyle' => $this->getInput('newsThemeBorderStyle',helper::FILTER_STRING_SHORT), + 'borderColor' => $this->getInput('newsThemeBorderColor'), + 'borderWidth' => $this->getInput('newsThemeBorderWidth',helper::FILTER_STRING_SHORT), + 'backgroundColor' => $this->getInput('newsThemeBackgroundColor') ]]); $this->setData(['module', $this->getUrl(0), 'config',[ @@ -209,6 +227,8 @@ class news extends common { 'height' => $this->getInput('newsConfigHeight', helper::FILTER_INT,true), 'versionData' => $this->getData(['module', $this->getUrl(0), 'config', 'versionData']) ]]); + + // Valeurs en sortie $this->addOutput([ 'redirect' => helper::baseUrl() . $this->getUrl(0) . '/config', @@ -262,7 +282,10 @@ class news extends common { // Valeurs en sortie $this->addOutput([ 'title' => 'Configuration du module', - 'view' => 'config' + 'view' => 'config', + 'vendor' => [ + 'tinycolorpicker' + ] ]); } } @@ -512,10 +535,11 @@ class news extends common { } // Mise à jour 3.4 if (version_compare($versionData, '3.4', '<') ) { - $this->deleteData(['module',$this->getUrl(0),'theme']); - if (is_dir(self::DATADIRECTORY . $this->getUrl(0) )) { - $this->removeDir(self::DATADIRECTORY . $this->getUrl(0)); - } + // Effacer le style précédent + unlink(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css'); + $this->deleteData(['module', $this->getUrl(0), 'theme' ]); + // Le générer + $this->init(); // Mettre à jour la version $this->setData(['module',$this->getUrl(0),'config', 'versionData', '3.4' ]); } @@ -526,35 +550,36 @@ class news extends common { */ private function init() { - - //$fileCSS = self::DATADIRECTORY . $this->getUrl(0) . '/theme.css'; + $fileCSS = self::DATADIRECTORY . $this->getUrl(0) . '/theme.css'; // Données du module absentes + require_once('module/news/ressource/defaultdata.php'); if ($this->getData(['module', $this->getUrl(0), 'config' ]) === null) { - require_once('module/news/ressource/defaultdata.php'); $this->setData(['module', $this->getUrl(0), 'config', init::$defaultData]); + } + if ($this->getData(['module', $this->getUrl(0), 'theme' ]) === null) { // Données de thème - //$this->setData(['module', $this->getUrl(0), 'theme', init::$defaultTheme]); - //$this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' ]); + $this->setData(['module', $this->getUrl(0), 'theme', init::$defaultTheme]); + $this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' ]); } // Dossier de l'instance - //if (!is_dir(self::DATADIRECTORY . $this->getUrl(0) )) { - // mkdir (self::DATADIRECTORY . $this->getUrl(0) , 0777, true); - //} + if (!is_dir(self::DATADIRECTORY . $this->getUrl(0) )) { + mkdir (self::DATADIRECTORY . $this->getUrl(0) , 0777, true); + } // Check la présence de la feuille de style - //if ( !file_exists(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css')) { + if ( !file_exists(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css')) { // Générer la feuille de CSS - // Supprimé dans 3.4 - // $style = '.newsContent {height: ' . $this->getData([ 'module', $this->getUrl(0), 'theme', 'itemsHeight' ]) .';}'; - // Pas d'effet flou à l'initialisation - //$style .= '.newsBlur {background: linear-gradient(' . $this->getData(['theme', 'text', 'textColor']) . ' ' . $this->getData([ 'module', $this->getUrl(0), 'theme', 'itemsBlur' ]) . ',rgba(255,255,255,0) );'; - //$style .= ' background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}'; + $style = '.newsFrame {'; + $style .= 'border:' . $this->getData(['module', $this->getUrl(0), 'theme', 'borderStyle' ]) . ' ' .$this->getData(['module', $this->getUrl(0), 'theme', 'borderColor' ]) . ' ' . $this->getData(['module', $this->getUrl(0), 'theme', 'borderWidth' ]) . ';'; + $style .= 'background-color:' . $this->getData(['module', $this->getUrl(0), 'theme', 'backgroundColor' ]) . ';'; + $style .= '}'; + // Sauver la feuille de style - //file_put_contents(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' , $style ); + file_put_contents(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' , $style ); // Stocker le nom de la feuille de style - //$this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css']); - //} + $this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css']); + } } } diff --git a/module/news/ressource/defaultdata.php b/module/news/ressource/defaultdata.php index 3014dd10..f9a244da 100644 --- a/module/news/ressource/defaultdata.php +++ b/module/news/ressource/defaultdata.php @@ -5,13 +5,16 @@ class init extends search { 'feedsLabel' => '', 'itemsperPage' => 8, 'itemsperCol' => 12, - 'height' => 1000, + 'height' => -1, 'versionData' => '3.4' ]; - /* + public static $defaultTheme = [ - 'itemsHeight' => 'auto', - 'itemsBlur' => '0%' + 'style' => '', + 'borderStyle' => 'none', + 'borderColor' => 'rgba(33, 34, 35, 1)', + 'backgroundColor' => 'rgba(255, 255, 255, 1)', + 'borderWidth' => '0' ]; - */ + } \ No newline at end of file diff --git a/module/news/view/config/config.php b/module/news/view/config/config.php index f274d8b1..873c9a66 100755 --- a/module/news/view/config/config.php +++ b/module/news/view/config/config.php @@ -40,9 +40,8 @@
'Pagination', - 'selected' => $this->getData(['module', $this->getUrl(0),'config', 'itemsperCol']), - 'help' => 'Nombre de colonnes par page' + 'label' => 'Nombre de colonnes', + 'selected' => $this->getData(['module', $this->getUrl(0),'config', 'itemsperCol']) ]); ?>
@@ -53,9 +52,45 @@
'Hauteur', - 'selected' => $this->getData(['module', $this->getUrl(0),'config', 'height']), - 'help' => 'Limite la hauteur de l\'article, cette option est utile lorsque la pagination en colonnes est activée.' + 'label' => 'Abrégé de l\'article', + 'selected' => $this->getData(['module', $this->getUrl(0),'config', 'height']) + ]); ?> +
+
+ + + +
+
+
+

Thème du module

+
+
+ 'Bordure', + 'selected' => $this->getData(['module', $this->getUrl(0),'theme', 'borderStyle']) + ]); ?> +
+
+ 'Epaisseur', + 'selected' => $this->getData(['module', $this->getUrl(0),'theme', 'borderWidth']) + ]); ?> +
+
+ 'colorPicker', + 'help' => 'Couleur visible en l\'absence d\'une image.
Le curseur horizontal règle le niveau de transparence.', + 'label' => 'Couleur de la bordure', + 'value' => $this->getData(['module', $this->getUrl(0),'theme', 'borderColor']) + ]); ?> +
+
+ 'colorPicker', + 'help' => 'Couleur visible en l\'absence d\'une image.
Le curseur horizontal règle le niveau de transparence.', + 'label' => 'Couleur du fond', + 'value' => $this->getData(['module', $this->getUrl(0),'theme', 'backgroundColor']) ]); ?>
diff --git a/module/news/view/index/index.css b/module/news/view/index/index.css index 51577d9a..f17591dd 100755 --- a/module/news/view/index/index.css +++ b/module/news/view/index/index.css @@ -51,27 +51,5 @@ display: inline; vertical-align: top; } -/* -@media (min-width: 769px) -{ - .col2 {width: 20%;} - .col3 {width: 24%;} - .col4 {width: 32%;} - .col6 {width: 49%;} - .col12 {width: 100%;} -} -@media (max-width: 768px) -{ - .col2 {width: 49%;} - .col3 {width: 49%;} - .col4 {width: 49%;} -} -@media (max-width: 480px) -{ - .col2 {width: 100%;} - .col3 {width: 100%;} - .col4 {width: 100%;} -} -*/ diff --git a/module/news/view/index/index.php b/module/news/view/index/index.php index d61d5c98..c3f06700 100644 --- a/module/news/view/index/index.php +++ b/module/news/view/index/index.php @@ -1,7 +1,7 @@
$news): ?> -
+

getUrl(0) . '/' . $newsId . '">' . $news['title'] . ''; ?>