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 = [
'0em' => 'Aucune',
'.1em' => 'Très fine',
'.2em' => 'Fine',
'.4em' => 'Moyenne',
'.8em' => 'Epaisse',
'1em' => 'Epaisse'
'.3em' => 'Fine',
'.5em' => 'Moyenne',
'.7em' => 'Epaisse',
'.9em' => 'Epaisse'
];
public static $galleryThemeOpacity = [
@ -102,10 +102,10 @@ class gallery extends common {
public static $galleryThemeMargin = [
'0em' => 'Aucune',
'.1em' => 'Très petite',
'.4em' => 'Petite',
'.6em' => 'Moyenne',
'1em' => 'Grande',
'2.5em' => 'Très grande'
'.3em' => 'Petite',
'.5em' => 'Moyenne',
'.7em' => 'Grande',
'.9em' => 'Très grande'
];
public static $galleryThemeRadius = [
@ -600,9 +600,10 @@ class gallery extends common {
'thumbHeight' => $this->getinput('galleryThemeThumbHeight'),
'thumbMargin' => $this->getinput('galleryThemeThumbMargin'),
'thumbBorder' => $this->getinput('galleryThemeThumbBorder'),
'thumbBorderColor'=> $this->getinput('galleryThemeThumbBorderColor'),
'thumbBorderColor' => $this->getinput('galleryThemeThumbBorderColor'),
'thumbOpacity' => $this->getinput('galleryThemeThumbOpacity'),
'thumbShadows' => $this->getinput('galleryThemeThumbShadows'),
'thumbShadowsColor' => $this->getinput('galleryThemeThumbShadowsColor'),
'thumbRadius' => $this->getinput('galleryThemeThumbRadius'),
'legendHeight' => $this->getinput('galleryThemeLegendHeight'),
'legendAlign' => $this->getinput('galleryThemeLegendAlign'),
@ -622,6 +623,7 @@ class gallery extends common {
$content = str_replace('#thumbBorderColor#',$this->getinput('galleryThemeThumbBorderColor'),$content );
$content = str_replace('#thumbOpacity#',$this->getinput('galleryThemeThumbOpacity'),$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('#legendAlign#',$this->getinput('galleryThemeLegendAlign'),$content );
$content = str_replace('#legendHeight#',$this->getinput('galleryThemeLegendHeight'),$content );
@ -632,13 +634,13 @@ class gallery extends common {
// Valeurs en sortie
$this->addOutput([
'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
]);
}
// Valeurs en sortie
$this->addOutput([
'title' => "Thème du module",
'title' => "Thème",
'view' => 'theme',
'vendor' => [
'tinycolorpicker'

View File

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

View File

@ -10,7 +10,9 @@
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
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,
.galleryGalleryPicture:hover {

View File

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

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

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

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

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

View File

@ -37,7 +37,7 @@
</div>
<div class="col2">
<?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [
'label' => 'Marges',
'label' => 'Marge',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbMargin'])
]); ?>
</div>
@ -45,7 +45,7 @@
<div class="row">
<div class="col4">
<?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [
'label' => 'Bordures',
'label' => 'Bordure',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbBorder'])
]); ?>
</div>
@ -59,24 +59,32 @@
</div>
<div class="col4">
<?php echo template::select('galleryThemeThumbRadius', $module::$galleryThemeRadius, [
'label' => 'Bords arrondis',
'label' => 'Arrondi des angles',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbRadius'])
]); ?>
</div>
</div>
<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, [
'label' => 'Opacité au survol',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity'])
]); ?>
</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>
@ -110,7 +118,7 @@
</div>
<div class="col3">
<?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [
'label' => 'Alignement:',
'label' => 'Alignement',
'selected' => $this->getData(['theme', $this->getUrl(0),'legendAlign'])
]); ?>
</div>