fait un dessin
sinon je comprend :
une image off
si je clic dessus (modal, pop ip, …)
et un choix list
hors un choix list ne prend pas tant de place si on le trifouille
exemple pousser et non fini
info en dur pour l’instant « oui ou non »
toutes les couleurs changent
<div style="width: 120px;" class="cmd cmd-widget" data-type="action" data-subtype="select" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div style="text-align: center;" class="cmdName">#name_display#</div>
</div>
<div class="select-style">
<select class="selectCmd">#listValue#</select>
</div>
<style>
:root{
--background: black;
--radius:25px;
--arrows-color: white;
}
.cmd[data-cmd_id="#id#"] .select-style {
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--background);
width: 66px;
height: 25px;
}
.cmd[data-cmd_id="#id#"] select {
/* background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(115, 115, 115)'><polygon points='0,0 100,0 50,50'/></svg>) !important;
linear-gradient(to bottom, transparent 0%,transparent 100%)!important;
background-position: calc(100% - 25px) !important;
*/
background-image:
linear-gradient(45deg, transparent 50%, var(--arrows-color) 60%),
linear-gradient(135deg, var(--arrows-color) 40%, transparent 50%) !important;
background-position:
calc(100% - 13px) 7px,
calc(100% - 5px) 7px,
100% 0!important;
background-size:
8px 8px,
8px 8px!important;
background-repeat: no-repeat!important;
-webkit-appearance: none!important;
-moz-appearance: none!important;
}
.cmd[data-cmd_id="#id#"] .selectCmd {
/* --link-color:white; */
--link-color:var(--arrows-color);
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
if (_options.display_value == "Oui" ) {
$(".cmd[data-cmd_id=#id#] .select-style").css('--background', 'green').css('--border-color', 'red')
$(".cmd[data-cmd_id=#id#] select").css('--arrows-color', 'white');
} else if (_options.display_value == "Non" ) {
$(".cmd[data-cmd_id=#id#] .select-style").css('--background', 'white').css('--border-color', 'rgb(255,128,0)');
$(".cmd[data-cmd_id=#id#] select").css('--arrows-color', 'rgb(255,128,0)');
} else {
$(".cmd[data-cmd_id=#id#] .select-style").css('--background', 'black').css('--border-color', 'rgb(255,255,0)');
$(".cmd[data-cmd_id=#id#] select").css('--arrows-color', 'rgb(255,255,0)');
}}
jeedom.cmd.update['#id#']({display_value: '#state#'});
$(".cmd[data-cmd_uid=#uid#] .selectCmd").on('change', function () {
jeedom.cmd.execute({id: '#id#', value: {select: $(this).value()}});
});
</script>
</div>
je viens de relire tu veux une image !
je joue avec list en se moment je regarderai