Bonjour,
J’utilise depuis peu l’excellent widget nooNeonButton mis en ligne par @noodom comme bouton pour une action de type Toogle.
J’avais besoin dans le même esprit design d’un bouton pour une action simple (pour remplacer le bouton action defaut du core).
Je le partage ici pour la communauté (exemple de 4 boutons …)
Les paramètres sont les suivants :
- Label : Label displayed in the button (default : #name_display#)|
- LabelColor : Label color (default : inherit)|
- LabelScale : Label scale (default : 1.0)|
- ButtonScale : Button size reduction factor (default : 1.0 - example half-size : 0.5)|
Et le fichier html " cmd.action.other.ActionButton.html " a installer en utilisant JeeXplorer par exemple dans le répertoire " html/data/customTemplates/dashboard/ "
<!-- file: /var/www/html/data/customTemplates/dashboard/cmd.action.other.ActionButton.html -->
<!-- @Eridani78 2021 04 20 -->
<div style="min-width:10px; min-height:10px; 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#">
<!-- # ********** Optional Attribut List ********** #
- Label : Label displayed in the button (default : #name_display#)
- LabelColor : Label color (default : inherit)
- LabelScale : Label scale (default : 1.0)
- ButtonScale : Button size reduction factor (default : 1.0 - half-size : 0.5)
<!-- # ********** Credits ********** #
- @noodom inspiré par https://codepen.io/Stockin/pen/qJqVYy
-->
<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 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");
}
// 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;
--background-color-from-off#uid#: #333;
--background-color-to-off#uid#: #000;
}
/* --- Main Container --- */
.contMain#uid# {
background-color: var(--widget-bg-color);
min-width: var(--widget-width);
min-height: var(--widget-height);
}
/* --- Button Overall --- */
.contMain#uid# .actionButton {
transform: scale(var(--buttonScale#uid#));
/* -webkit-transform-origin-x: left;*/
/* -webkit-transform-origin-y: top;*/
}
/* --- Button Fixed Part --- */
.contMain#uid# .actionInput {
margin: 0px !important;
position: relative !important;
width: 120px !important;
height: 40px !important;
-webkit-appearance: none !important;
background: linear-gradient(0deg, var(--background-color-from-off#uid#), var(--background-color-to-off#uid#)) !important;
outline: none !important;
border-radius: 20px !important;
box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, 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: 120px;
height: 30px;
background: linear-gradient(0deg, #000000, #6b6b6b);
border-radius: 20px;
box-shadow: 0 0 0 1px #232323;
transform: scale(.98, .96);
}
.contMain#uid# .actionInput:active::before {
left: 1px;
background: linear-gradient(0deg, #000000, #595959);
}
</style>
</div>
Encore merci a @noodom pour tous ses partages.
