Couleur des ombres + valeurs par défaut plus faibles

This commit is contained in:
Fred Tempez 2020-04-19 19:43:37 +02:00
parent 6b62351cd7
commit b9e5c6fb3a
7 changed files with 75 additions and 55 deletions

View File

@ -84,10 +84,10 @@ class gallery extends common {
public static $galleryThemeBorder = [ public static $galleryThemeBorder = [
'0em' => 'Aucune', '0em' => 'Aucune',
'.1em' => 'Très fine', '.1em' => 'Très fine',
'.2em' => 'Fine', '.3em' => 'Fine',
'.4em' => 'Moyenne', '.5em' => 'Moyenne',
'.8em' => 'Epaisse', '.7em' => 'Epaisse',
'1em' => 'Epaisse' '.9em' => 'Epaisse'
]; ];
public static $galleryThemeOpacity = [ public static $galleryThemeOpacity = [
@ -102,10 +102,10 @@ class gallery extends common {
public static $galleryThemeMargin = [ public static $galleryThemeMargin = [
'0em' => 'Aucune', '0em' => 'Aucune',
'.1em' => 'Très petite', '.1em' => 'Très petite',
'.4em' => 'Petite', '.3em' => 'Petite',
'.6em' => 'Moyenne', '.5em' => 'Moyenne',
'1em' => 'Grande', '.7em' => 'Grande',
'2.5em' => 'Très grande' '.9em' => 'Très grande'
]; ];
public static $galleryThemeRadius = [ public static $galleryThemeRadius = [
@ -595,19 +595,20 @@ class gallery extends common {
if($this->isPost()) { if($this->isPost()) {
$this->setData(['theme', $this->getUrl(0), [ $this->setData(['theme', $this->getUrl(0), [
'thumbAlign' => $this->getinput('galleryThemeThumbAlign'), 'thumbAlign' => $this->getinput('galleryThemeThumbAlign'),
'thumbWidth' => $this->getinput('galleryThemeThumbWidth'), 'thumbWidth' => $this->getinput('galleryThemeThumbWidth'),
'thumbHeight' => $this->getinput('galleryThemeThumbHeight'), 'thumbHeight' => $this->getinput('galleryThemeThumbHeight'),
'thumbMargin' => $this->getinput('galleryThemeThumbMargin'), 'thumbMargin' => $this->getinput('galleryThemeThumbMargin'),
'thumbBorder' => $this->getinput('galleryThemeThumbBorder'), 'thumbBorder' => $this->getinput('galleryThemeThumbBorder'),
'thumbBorderColor'=> $this->getinput('galleryThemeThumbBorderColor'), 'thumbBorderColor' => $this->getinput('galleryThemeThumbBorderColor'),
'thumbOpacity' => $this->getinput('galleryThemeThumbOpacity'), 'thumbOpacity' => $this->getinput('galleryThemeThumbOpacity'),
'thumbShadows' => $this->getinput('galleryThemeThumbShadows'), 'thumbShadows' => $this->getinput('galleryThemeThumbShadows'),
'thumbRadius' => $this->getinput('galleryThemeThumbRadius'), 'thumbShadowsColor' => $this->getinput('galleryThemeThumbShadowsColor'),
'legendHeight' => $this->getinput('galleryThemeLegendHeight'), 'thumbRadius' => $this->getinput('galleryThemeThumbRadius'),
'legendAlign' => $this->getinput('galleryThemeLegendAlign'), 'legendHeight' => $this->getinput('galleryThemeLegendHeight'),
'legendTextColor' => $this->getinput('galleryThemeLegendTextColor'), 'legendAlign' => $this->getinput('galleryThemeLegendAlign'),
'legendBgColor' => $this->getinput('galleryThemeLegendBgColor') 'legendTextColor' => $this->getinput('galleryThemeLegendTextColor'),
'legendBgColor' => $this->getinput('galleryThemeLegendBgColor')
] ]
]); ]);
// Création des fichiers CSS // Création des fichiers CSS
@ -622,6 +623,7 @@ class gallery extends common {
$content = str_replace('#thumbBorderColor#',$this->getinput('galleryThemeThumbBorderColor'),$content ); $content = str_replace('#thumbBorderColor#',$this->getinput('galleryThemeThumbBorderColor'),$content );
$content = str_replace('#thumbOpacity#',$this->getinput('galleryThemeThumbOpacity'),$content ); $content = str_replace('#thumbOpacity#',$this->getinput('galleryThemeThumbOpacity'),$content );
$content = str_replace('#thumbShadows#',$this->getinput('galleryThemeThumbShadows'),$content ); $content = str_replace('#thumbShadows#',$this->getinput('galleryThemeThumbShadows'),$content );
$content = str_replace('#thumbShadowsColor#',$this->getinput('galleryThemeThumbShadowsColor'),$content );
$content = str_replace('#thumbRadius#',$this->getinput('galleryThemeThumbRadius'),$content ); $content = str_replace('#thumbRadius#',$this->getinput('galleryThemeThumbRadius'),$content );
$content = str_replace('#legendAlign#',$this->getinput('galleryThemeLegendAlign'),$content ); $content = str_replace('#legendAlign#',$this->getinput('galleryThemeLegendAlign'),$content );
$content = str_replace('#legendHeight#',$this->getinput('galleryThemeLegendHeight'),$content ); $content = str_replace('#legendHeight#',$this->getinput('galleryThemeLegendHeight'),$content );
@ -632,13 +634,13 @@ class gallery extends common {
// Valeurs en sortie // Valeurs en sortie
$this->addOutput([ $this->addOutput([
'redirect' => helper::baseUrl() . $this->getUrl() . '/theme', 'redirect' => helper::baseUrl() . $this->getUrl() . '/theme',
'notification' => $succes ? 'Modifications enregistrées' : 'Modifications non enregistées !', 'notification' => $success ? 'Modifications enregistrées' : 'Modifications non enregistées !',
'state' => $success 'state' => $success
]); ]);
} }
// Valeurs en sortie // Valeurs en sortie
$this->addOutput([ $this->addOutput([
'title' => "Thème du module", 'title' => "Thème",
'view' => 'theme', 'view' => 'theme',
'vendor' => [ 'vendor' => [
'tinycolorpicker' 'tinycolorpicker'

View File

@ -4,12 +4,13 @@ class theme extends gallery {
'thumbAlign' => 'center', 'thumbAlign' => 'center',
'thumbWidth' => '18em', 'thumbWidth' => '18em',
'thumbHeight' => '15em', 'thumbHeight' => '15em',
'thumbMargin' => '.6em', 'thumbMargin' => '.5em',
'thumbBorder' => '.1em', 'thumbBorder' => '.1em',
'thumbOpacity' => '.7', 'thumbOpacity' => '.7',
'thumbBorderColor' => 'rgba(221, 221, 221, 1)', 'thumbBorderColor' => 'rgba(221, 221, 221, 1)',
'thumbRadius' => '.3em', 'thumbRadius' => '.3em',
'thumbShadows' => '1px 1px 10px', 'thumbShadows' => '1px 1px 10px',
'thumbShadowsColor'=> 'rgba(125, 125, 125, 1)',
'legendHeight' => '.375em', 'legendHeight' => '.375em',
'legendAlign' => 'center', 'legendAlign' => 'center',
'legendTextColor' => 'rgba(255, 255, 255, 1)', 'legendTextColor' => 'rgba(255, 255, 255, 1)',

View File

@ -10,7 +10,9 @@
-webkit-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
border-radius: var(--thumbRadius); border-radius: var(--thumbRadius);
box-shadow: var(--thumbShadows) ; box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
-webkit-box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
-moz-box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
} }
.galleryPicture:hover, .galleryPicture:hover,
.galleryGalleryPicture:hover { .galleryGalleryPicture:hover {

View File

@ -12,6 +12,7 @@
--thumbBorderColor: #thumbBorderColor#; --thumbBorderColor: #thumbBorderColor#;
--thumbRadius: #thumbRadius#; --thumbRadius: #thumbRadius#;
--thumbShadows: #thumbShadows#; --thumbShadows: #thumbShadows#;
--thumbShadowsColor: #thumbShadowsColor#;
} }
.galleryName, .galleryName,
.galleryGalleryName { .galleryGalleryName {

19
module/gallery/view/gallery/gallery.css Normal file → Executable file
View File

@ -1,17 +1,18 @@
.galleryRow { .galleryRow {
--thumbAlign: center; --thumbAlign: space-around;
} }
.colPicture { .colPicture {
--thumbWidth: 18em; --thumbWidth: 21em;
--thumbMargin: .6em; --thumbMargin: .9em;
} }
.galleryPicture, .galleryPicture,
.galleryGalleryPicture { .galleryGalleryPicture {
--thumbHeight: 15em; --thumbHeight: 12em;
--thumbBorder: .1em; --thumbBorder: .1em;
--thumbBorderColor: rgba(221, 221, 221, 1); --thumbBorderColor: rgba(251, 1, 1, 0.48);
--thumbRadius: .6em; --thumbRadius: 0em;
--thumbShadows: 1px 1px 5px; --thumbShadows: 1px 1px 25px;
--thumbShadowsColor: rgba(253, 16, 16, 0.37);
} }
.galleryName, .galleryName,
.galleryGalleryName { .galleryGalleryName {
@ -36,7 +37,9 @@
-webkit-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
border-radius: var(--thumbRadius); border-radius: var(--thumbRadius);
box-shadow: var(--thumbShadows) ; box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
-webkit-box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
-moz-box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
} }
.galleryPicture:hover, .galleryPicture:hover,
.galleryGalleryPicture:hover { .galleryGalleryPicture:hover {

19
module/gallery/view/index/index.css Normal file → Executable file
View File

@ -1,17 +1,18 @@
.galleryRow { .galleryRow {
--thumbAlign: center; --thumbAlign: space-around;
} }
.colPicture { .colPicture {
--thumbWidth: 18em; --thumbWidth: 21em;
--thumbMargin: .6em; --thumbMargin: .9em;
} }
.galleryPicture, .galleryPicture,
.galleryGalleryPicture { .galleryGalleryPicture {
--thumbHeight: 15em; --thumbHeight: 12em;
--thumbBorder: .1em; --thumbBorder: .1em;
--thumbBorderColor: rgba(221, 221, 221, 1); --thumbBorderColor: rgba(251, 1, 1, 0.48);
--thumbRadius: .6em; --thumbRadius: 0em;
--thumbShadows: 1px 1px 5px; --thumbShadows: 1px 1px 25px;
--thumbShadowsColor: rgba(253, 16, 16, 0.37);
} }
.galleryName, .galleryName,
.galleryGalleryName { .galleryGalleryName {
@ -36,7 +37,9 @@
-webkit-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
border-radius: var(--thumbRadius); border-radius: var(--thumbRadius);
box-shadow: var(--thumbShadows) ; box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
-webkit-box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
-moz-box-shadow: var(--thumbShadows) var(--thumbShadowsColor);
} }
.galleryPicture:hover, .galleryPicture:hover,
.galleryGalleryPicture:hover { .galleryGalleryPicture:hover {

View File

@ -37,7 +37,7 @@
</div> </div>
<div class="col2"> <div class="col2">
<?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [ <?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [
'label' => 'Marges', 'label' => 'Marge',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbMargin']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbMargin'])
]); ?> ]); ?>
</div> </div>
@ -45,7 +45,7 @@
<div class="row"> <div class="row">
<div class="col4"> <div class="col4">
<?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [ <?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [
'label' => 'Bordures', 'label' => 'Bordure',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbBorder']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbBorder'])
]); ?> ]); ?>
</div> </div>
@ -59,24 +59,32 @@
</div> </div>
<div class="col4"> <div class="col4">
<?php echo template::select('galleryThemeThumbRadius', $module::$galleryThemeRadius, [ <?php echo template::select('galleryThemeThumbRadius', $module::$galleryThemeRadius, [
'label' => 'Bords arrondis', 'label' => 'Arrondi des angles',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbRadius']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbRadius'])
]); ?> ]); ?>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col5 offset1"> <div class="col4">
<?php echo template::select('galleryThemeThumbShadows', $module::$galleryThemeShadows, [
'label' => 'Ombre',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbShadows'])
]); ?>
</div>
<div class="col4">
<?php echo template::text('galleryThemeThumbShadowsColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Couleur de l\'ombre',
'value' => $this->getData(['theme', $this->getUrl(0),'thumbShadowsColor'])
]); ?>
</div>
<div class="col4">
<?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [ <?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [
'label' => 'Opacité au survol', 'label' => 'Opacité au survol',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity'])
]); ?> ]); ?>
</div> </div>
<div class="col5">
<?php echo template::select('galleryThemeThumbShadows', $module::$galleryThemeShadows, [
'label' => 'Ombres',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbShadows'])
]); ?>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -110,7 +118,7 @@
</div> </div>
<div class="col3"> <div class="col3">
<?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [ <?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [
'label' => 'Alignement:', 'label' => 'Alignement',
'selected' => $this->getData(['theme', $this->getUrl(0),'legendAlign']) 'selected' => $this->getData(['theme', $this->getUrl(0),'legendAlign'])
]); ?> ]); ?>
</div> </div>