J’ai appliqué le remplacement des icônes dans les modes ça fonctionne (au passage dommage qu’on ne puisse pas sélectionner une image également, voire encore mieux, une image actif/inactif)…
Par contre j’ai pas réussi à faire fonctionner la couleur, que ce soit en mode texte, ou icone …
Il faut activer icônes widgets colorése dans reglages/conf/interface
sinon en css personnalisé:
[data-eqtype="mode"] .icon_blue { color: var(--al-info-color) !important; }
[data-eqtype="mode"] .icon_green { color: var(--bt-success-color) !important; }
[data-eqtype="mode"] .icon_orange { color: var(--al-warning-color) !important; }
[data-eqtype="mode"] .icon_red { color: var(--al-danger-color) !important; }
[data-eqtype="mode"] .icon_yellow { color: var(--lb-yellow-color) !important; }
1 « J'aime »
Merci, donc ça colorise le « Mode » … Dommage que ce ne soit pas pareil pour le bouton.
Perso le « Mode », je le masque tout le temps, et avec la couleur sur le bouton, ça indique celui qui est actif…
J’avais 3 petits widgets qui marchaient bien mais ils sont à refaire :
Couleur
<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<span style="font-size: 2em;font-weight: bold;margin-top: 5px;" class="state"></span><br/>
<span style="color: #666666;font-weight: bold;">#unite#</span>
</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]').css('background-color', '#activecolor#');
$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName:not([title="'+val+'"])').css('background-color', '#cmdColor#');
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
// $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
$('.cmd[data-cmd_id=#id#]').hide();
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
image
<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<span style="font-size: 2em;font-weight: bold;margin-top: 0px;margin-bottom: 0px;" class="state"></span><br/>
<span style="color: #666666;font-weight: bold;">#unite#</span>
</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return $(el).attr('title')}).get();
modes.forEach(function(mode) {
var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+mode+']');
if(mode != val){
item.empty().html('<span><img src="plugins/widget/core/images/#dir#/'+mode+'-nb.png" width=#width# height=#height#/></span>');
item.css('background-color', '#cmdColor#');
}else{
item.empty().html('<span><img src="plugins/widget/core/images/#dir#/'+val+'-couleur.png" width=#width# height=#height#/></span>');
item.css('background-color', '#activecolor#');
//item.attr('tooltips',mode+' depuis '+_options.valueDate+);
}
});
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
$('.cmd[data-cmd_id=#id#]').hide();
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Toogle
<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<span style="font-size: 2em;font-weight: bold;margin-top: 0px;margin-bottom: 0px;" class="state"></span><br/>
<span style="color: #666666;font-weight: bold;">#unite#</span>
</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
var modepre='Retour mode précedent';
var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return "'"+$(el).attr('title')+"'"}).get();
modes.forEach(function(mode) {
var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+mode+']');
if(mode != "'"+modepre+"'"){
item.hide();
}else{
item.empty().html('<span><img src="plugins/widget/core/images/#dir#/'+val+'.png" width=#width# height=#height#></span>');
item.css('background-color', '#activecolor#');
//item.attr('title',mode+' depuis '+_options.valueDate+);
}
});
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Je vais voir ce que je peux faire avec les css perso
Je vais regarder du coté des CSS que tu proposes
Le css fait la même chose sans nécessiter de colorer toutes les icônes.
Pour tes widgets essaye de les refaire avec outils/widgets ?
il faut quand même que je refasse un peu d’analyse, l’import copié/collé n’est pas suffisant