Bonjour à tous,
Suite au sujet Nouveau widget Bouton Action (), j’ai travaillé un peu le sujet de paramétrage du widget.
Je suis assez content de mon résultat bien qu’il peut certainement être retravaillé/optimisé car j’ai beaucoup tâtonné avec mon peu d’expérience…
Le résultat donne un bouton assez paramétrable permettant de faire des design je pense assez sympa…
Le « Mode 6 » est le paramétrage par défaut.
Le « Mode 1 » à « Mode 4 » est le résultat de 4 boutons en jouant sur les radius et offsets…
Un point que je n’ai pas réussi a faire et de paramétrer un décalage par offset du texte pour mieux le positionner visuellement sur le bouton (cf modes 1 à 4).
Si quelqu’un y arrive ou peut me donner une piste 
<!-- ################ ActionNeonButton-V2 #xxxxxxx###############
-->
<!-- # ********** Credits ********** #
- @noodom inspiré par https://codepen.io/Stockin/pen/qJqVYy
- @Eridiani
- @Silkarion
-->
<template>
<div>** Parametres Texte **</div>
<div>Label : Label displayed in the button (default : #name_display#)</div>
<div>LabelColor : Label color (default : inherit)</div>
<div>LabelScale : Label scale (default : 1.0)</div>
<!--
POUR PLUS TARD...
<div>LabelOffsetX : Label offset en X par rapport au centre du bouton (default : 0px)</div>
<div>LabelOffsetY : Label offset en Y par rapport au centre du bouton (default : 0px)</div>
-->
<div></div>
<div>** Parametres Bouton **</div>
<div>ButtonWidth : Width of the button (default : 120px)</div>
<div>ButtonHeight : Height of the button (default : 40px)</div>
<div>ButtonScale : Button size reduction factor (default : 1.0 - half-size : 0.5)</div>
<div>ButtonOffsetX : Button offset en X (default : 0px)</div>
<div>ButtonOffsetY : Button offset en Y (default : -8px)</div>
<div>ButtonRadius : Arrondi bouton en px ou en % (defaut : 20px)</div>
<div> ou si présents, utiliser les radius individuels...</div>
<div>ButtonRadius1 : Arrondi bouton en px ou en % (defaut : ButtonRadius)</div>
<div>ButtonRadius2 : Arrondi bouton en px ou en % (defaut : ButtonRadius)</div>
<div>ButtonRadius3 : Arrondi bouton en px ou en % (defaut : ButtonRadius)</div>
<div>ButtonRadius4 : Arrondi bouton en px ou en % (defaut : ButtonRadius)</div>
<div></div>
<div>ButtonColor1 : Couleur initiale dégradé (defaut : #6b6b6b)</div>
<div>ButtonColor2 : Couleur finale dégradé (defaut : #000000)</div>
<div></div>
<div>** Parametres Bordure **</div>
<div>BorderColor1 : Couleur centrale (defaut : #353535)</div>
<div>BorderColor2 : Couleur externe (defaut : #3e3e3e)</div>
<div></div>
</template>
<div style="min-width:5px; min-height:5px; margin-right:0px; margin-left:0px; padding:0px !important;"
class="cmd cmd-widget #history# container-fluid reportModeHidden" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_uid="#uid#" data-version="#version#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="contMain#uid#">
<div class="actionButton">
<div class="content-xs">
<a class="btn btn-sm btn-default action tooltips actionInput"></a>
</div>
</div>
</div>
<script>
// Option management
var label#uid# = ('#Label#' != '#'+'Label#') ? "#Label#" : "#name_display#";
document.documentElement.style.setProperty('--label#uid#', JSON.stringify(label#uid#));
var labelColor#uid# = ('#LabelColor#' != '#'+'LabelColor#') ? "#LabelColor#" : "inherit";
if (labelColor#uid# != '') {
document.documentElement.style.setProperty('--labelColor#uid#', labelColor#uid#);
} else {
document.documentElement.style.setProperty('--labelColor#uid#', "inherit");
}
var labelScale#uid# = ('#LabelScale#' != '#'+'LabelScale#') ? "#LabelScale#" : "1.0";
if (labelScale#uid# != '') {
document.documentElement.style.setProperty('--labelScale#uid#', labelScale#uid#);
} else {
document.documentElement.style.setProperty('--labelScale#uid#', "1.0");
}
var labelOffsetX#uid# = ('#LabelOffsetX#' != '#'+'LabelOffsetX#') ? "#LabelOffsetX#" : "0px";
if (labelOffsetX#uid# != '') {
document.documentElement.style.setProperty('--labelOffsetX#uid#', labelOffsetX#uid#);
} else {
document.documentElement.style.setProperty('--labelOffsetX#uid#', "0px");
}
var labelOffsetY#uid# = ('#LabelOffsetY#' != '#'+'LabelOffsetY#') ? "#LabelOffsetY#" : "0px";
if (labelOffsetY#uid# != '') {
document.documentElement.style.setProperty('--labelOffsetY#uid#', buttonOffsetY#uid#);
} else {
document.documentElement.style.setProperty('--labelOffsetY#uid#', "0px");
}
var buttonWidth#uid# = ('#ButtonWidth#' != '#'+'ButtonWidth#') ? "#ButtonWidth#" : "120px";
if (buttonWidth#uid# != '') {
document.documentElement.style.setProperty('--buttonWidth#uid#', buttonWidth#uid#);
} else {
document.documentElement.style.setProperty('--buttonWidth#uid#', "120px");
}
var buttonHeight#uid# = ('#ButtonHeight#' != '#'+'ButtonHeight#') ? "#ButtonHeight#" : "40px";
if (buttonHeight#uid# != '') {
document.documentElement.style.setProperty('--buttonHeight#uid#', buttonHeight#uid#);
} else {
document.documentElement.style.setProperty('--buttonHeight#uid#', "40px");
}
var buttonOffsetX#uid# = ('#ButtonOffsetX#' != '#'+'ButtonOffsetX#') ? "#ButtonOffsetX#" : "0px";
if (buttonOffsetX#uid# != '') {
document.documentElement.style.setProperty('--buttonOffsetX#uid#', buttonOffsetX#uid#);
} else {
document.documentElement.style.setProperty('--buttonOffsetX#uid#', "0px");
}
var buttonOffsetY#uid# = ('#ButtonOffsetY#' != '#'+'ButtonOffsetY#') ? "#ButtonOffsetY#" : "-8px";
if (buttonOffsetY#uid# != '') {
document.documentElement.style.setProperty('--buttonOffsetY#uid#', buttonOffsetY#uid#);
} else {
document.documentElement.style.setProperty('--buttonOffsetY#uid#', "-8px");
}
var buttonRadius#uid# = ('#ButtonRadius#' != '#'+'ButtonRadius#') ? "#ButtonRadius#" : "20px";
if (buttonRadius#uid# != '') {
document.documentElement.style.setProperty('--buttonRadius#uid#', buttonRadius#uid#);
} else {
document.documentElement.style.setProperty('--buttonRadius#uid#', "20px");
}
var buttonRadius1#uid# = ('#ButtonRadius1#' != '#'+'ButtonRadius1#') ? "#ButtonRadius1#" : buttonRadius#uid#;
if (buttonRadius1#uid# != '') {
document.documentElement.style.setProperty('--buttonRadius1#uid#', buttonRadius1#uid#);
} else {
document.documentElement.style.setProperty('--buttonRadius1#uid#', buttonRadius#uid#);
}
var buttonRadius2#uid# = ('#ButtonRadius2#' != '#'+'ButtonRadius2#') ? "#ButtonRadius2#" : buttonRadius#uid#;
if (buttonRadius2#uid# != '') {
document.documentElement.style.setProperty('--buttonRadius2#uid#', buttonRadius2#uid#);
} else {
document.documentElement.style.setProperty('--buttonRadius2#uid#', buttonRadius#uid#);
}
var buttonRadius3#uid# = ('#ButtonRadius3#' != '#'+'ButtonRadius3#') ? "#ButtonRadius3#" : buttonRadius#uid#;
if (buttonRadius3#uid# != '') {
document.documentElement.style.setProperty('--buttonRadius3#uid#', buttonRadius3#uid#);
} else {
document.documentElement.style.setProperty('--buttonRadius3#uid#', buttonRadius#uid#);
}
var buttonRadius4#uid# = ('#ButtonRadius4#' != '#'+'ButtonRadius4#') ? "#ButtonRadius4#" : buttonRadius#uid#;
if (buttonRadius4#uid# != '') {
document.documentElement.style.setProperty('--buttonRadius4#uid#', buttonRadius4#uid#);
} else {
document.documentElement.style.setProperty('--buttonRadius4#uid#', buttonRadius#uid#);
}
var buttonColor1#uid# = ('#ButtonColor1#' != '#'+'ButtonColor1#') ? "#ButtonColor1#" : "#6b6b6b";
if (buttonColor1#uid# != '') {
document.documentElement.style.setProperty('--buttonColor1#uid#', buttonColor1#uid#);
} else {
document.documentElement.style.setProperty('--buttonColor1#uid#', "#6b6b6b");
}
var buttonColor2#uid# = ('#ButtonColor2#' != '#'+'ButtonColor2#') ? "#ButtonColor2#" : "#000000";
if (buttonColor2#uid# != '') {
document.documentElement.style.setProperty('--buttonColor2#uid#', buttonColor2#uid#);
} else {
document.documentElement.style.setProperty('--buttonColor2#uid#', "#000000");
}
var buttonScale#uid# = ('#ButtonScale#' != '#'+'ButtonScale#') ? "#ButtonScale#" : "1.0";
if (buttonScale#uid# != '') {
document.documentElement.style.setProperty('--buttonScale#uid#', buttonScale#uid#);
} else {
document.documentElement.style.setProperty('--buttonScale#uid#', "1.0");
}
var borderColor1#uid# = ('#BorderColor1#' != '#'+'BorderColor1#') ? "#BorderColor1#" : "#353535";
if (borderColor1#uid# != '') {
document.documentElement.style.setProperty('--borderColor1#uid#', borderColor1#uid#);
} else {
document.documentElement.style.setProperty('--borderColor1#uid#', "#353535");
}
var borderColor2#uid# = ('#BorderColor2#' != '#'+'BorderColor2#') ? "#BorderColor2#" : "#3e3e3e";
if (borderColor2#uid# != '') {
document.documentElement.style.setProperty('--borderColor2#uid#', borderColor2#uid#);
} else {
document.documentElement.style.setProperty('--borderColor2#uid#', "#3e3e3e");
}
// Program
$('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
jeedom.cmd.execute({id: '#id#'});
});
if ($('.cmd[data-cmd_uid=#uid#]').last().prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]').last().prev().data('subtype') != 'other' && $('.cmd[data-cmd_uid=#uid#]').last().prev().css('display') != 'block') {
$('.cmd[data-cmd_uid=#uid#]').last().prepend('<br/>');
}
if("#name#" != '#name_display#'){
$('.cmd[data-cmd_uid=#uid#]:last .action').attr('title',"#name#")
}
</script>
<style>
/* --- CSS Variable --- */
:root {
--buttonScale#uid#: 1.0;
/* Couleur de la zone bouton fixe (zone cachée par le bouton mobile */
--background-color-from-off#uid#: #333;
--background-color-to-off#uid#: #000;
}
/* --- Main Container --- */
.contMain#uid# {
/* Container du bouton*/
background-color: var(--widget-bg-color);
min-width: var(--buttonWidth#uid#);
min-height: var(--buttonHeight#uid#);
margin: 5px !important;
display: grid !important;
align-content: center !important; /* Vertical : start, center, end */
}
/* --- Button Overall --- */
.contMain#uid# .actionButton {
transform: scale(var(--buttonScale#uid#));
position: relative;
/*top: -14px;*/
left: var(--buttonOffsetX#uid#) !important;
top: var(--buttonOffsetY#uid#) !important;
height: var(--buttonHeight#uid#) !important;
width: var(--buttonWidth#uid#) !important;
margin: 5px !important;
}
/* --- Button Fixed Part --- */
.contMain#uid# .actionInput {
/* Bouton externe > encadrement */
margin: 0px !important; /* se positionne sans marge vs container*/
display: grid !important;
align-content: center !important; /* Vertical : start, center, end */
position: relative !important;
min-width: var(--buttonWidth#uid#) !important;
min-height: var(--buttonHeight#uid#) !important;
height: var(--buttonHeight#uid#) !important;
width: var(--buttonWidth#uid#) !important;
-webkit-appearance: none !important;
/* Couleur du contenu du boun fixe*/
background: linear-gradient(0deg, var(--background-color-from-off#uid#), var(--background-color-to-off#uid#)) !important;
outline: none !important;
border-radius: var(--buttonRadius1#uid#) var(--buttonRadius2#uid#) var(--buttonRadius3#uid#) var(--buttonRadius4#uid#) !important;
/* box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1) !important;
*/
box-shadow: 0 0 0 4px var(--borderColor1#uid#), 0 0 0 5px var(--borderColor2#uid#), inset 0 0 10px rgba(0, 0, 0, 1) !important;
}
/* --- Button Moving Part --- */
.contMain#uid# .actionInput::before {
content: var(--label#uid#) !important;
color: var(--labelColor#uid#);
font-size: calc(100% * (var(--labelScale#uid#)/var(--buttonScale#uid#)));
display: grid;
align-content: center; /* Vertical : start, center, end */
justify-content: center; /* Horizontal : start, center, end */
position: absolute;
top: 0;
left: 0;
width: var(--buttonWidth#uid#) !important;
height: var(--buttonHeight#uid#) !important;
/* Couleur du contenu */
background: linear-gradient(0deg, var(--buttonColor2#uid#), var(--buttonColor1#uid#));
border-radius: var(--buttonRadius1#uid#) var(--buttonRadius2#uid#) var(--buttonRadius3#uid#) var(--buttonRadius4#uid#) !important;
box-shadow: 0 0 0 1px #232323;
transform: scale(.98, .96);
}
/* Action lors du Click mais avant de lancer l'action */
.contMain#uid# .actionInput:active::before {
/* On décale le bouton/texte mobile de 1 vers la droite et le bas pour donner un effet*/
left: 1px;
top: 1px;
/* Couleur appliquée lors du Click */
/*
background: linear-gradient(0deg, #000000, #595959);*/
background: linear-gradient(0deg, var(--buttonColor2#uid#), var(--buttonColor1#uid#));
}
</style>
</div>