Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[Widget] Liste déroulante

Réservé à l'utilisation et la création de widgets dans JEEDOM
rootard
Timide
Messages : 119
Inscription : 02 nov. 2018, 19:52

[Widget] Liste déroulante

Message par rootard » 10 oct. 2019, 20:36

Salut

Le widget liste par défaut n'étant pas très beau j'ai cherché en vain un remplacant sur le market.
Au final j'ai utilisé le joli widget de @winhex disponible ici:
viewtopic.php?f=30&t=43849&p=767790#p764615

Problème le rendu dépend du navigateur utilisé...
Sous windows c'est très chouette sur Chrome
Image
mais c'est pas beau sous Firefox
Image
et il manque le triangle de sélection sous Safari (iOS)
Image

Des suggestions pour l'améliorer?
Merci :D

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [Widget] Liste déroulante

Message par winhex » 11 oct. 2019, 02:25

bonjour spécificité css des navigateurs
https://developer.mozilla.org/fr/docs/W ... appearance

rootard
Timide
Messages : 119
Inscription : 02 nov. 2018, 19:52

Re: [Widget] Liste déroulante

Message par rootard » 13 oct. 2019, 10:59

merci @winhex

J'ai testé plusieurs paramètres j'arrive seulement a faire disparaitre le carré de droite, il manque tjs le triangle de sélection:

Code : Tout sélectionner

-moz-appearance: none;
Image
Est ce que c'est possible d'avoir ce widget Chrome sur Firefox et Safari?

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [Widget] Liste déroulante

Message par winhex » 13 oct. 2019, 12:18

de mémoire la flèche se nomme arrow
donc input list arrow safari en recherche
et tu tombes sur plein de trucs

à tester sur tes navigateur
https://www.sitepoint.com/community/t/s ... one/114625
tu as un codepen pour test

si ok

tu créés un html en design test

(thème, dépendance, librairie sur jeedom qui changerai le comportement )

si le comportement est encore ok
tu adaptes au widget

rootard
Timide
Messages : 119
Inscription : 02 nov. 2018, 19:52

Re: [Widget] Liste déroulante

Message par rootard » 13 oct. 2019, 20:30

merci pour le lien @winhex
j'ai réussi à adapter mon widget, il marche sur mes 3 navigateurs 8-)
Image
Image
Si ca intéresse quelqu'un je posterai le code

winhex
Actif
Messages : 3781
Inscription : 23 janv. 2015, 01:41

Re: [Widget] Liste déroulante

Message par winhex » 13 oct. 2019, 21:37

bien sûr
puisque en janvier le forum sera qu'en lecture
tu imagines la frustration d'un lecteur.

pose le sur le futur forum serait mieux
ou ici à minima

rootard
Timide
Messages : 119
Inscription : 02 nov. 2018, 19:52

Re: [Widget] Liste déroulante

Message par rootard » 04 nov. 2019, 21:59

salut

Voici le code du widget ci dessus, sur la base des inputs de @winhex (merci à toi).
Il fonctionne bien en v3 dans Chrome, Firefox et Safari (testé sur iPad).
Je le posterai dans le market quand j'aurai le temps

Code : Tout sélectionner

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="select" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="display: table; width: 56px;height: 20px;">
    <span class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</span>

      <div class="select-style#id#">
      <select class="select-style#id# selectCmd" >#listValue#</select>
 </div>
<style>
/* couleurs par defaut avant selection */
:root{
--color: black;
--background: white;
--border-color:#cmdColor#;
--radius:25px;  
} 
/* couleur fond selectionné */
.select-style#id# {
   	border: 1px solid var(--border-color);
	border-radius: var(--radius);
  	background: var(--background); 
    width: 120px;
	height: 25px;
    appearance: menulist;
  	-moz-appearance: none ;
	-webkit-appearance: none;  
}
/* couleur texte selectionné */
.select-style#id# select {
  	color: var(--color);
   	padding: 0px 5px;
    border: none;
    box-shadow: none;
   	background: transparent;
    background-image: none;
}
/* couleurs drop-down */
  .select-style#id# select:focus {
    background: var(--color);
  	color: var(--background) ;
}
/* triangle de selection */
.select-style#id#:after {
	content:"";
	position:absolute;
	z-index:2;
	right:8px;
	top:50%;
	margin-top:-3px;
	height:0;
	width:0;
	border-top:6px solid var(--color);
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	pointer-events:none;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
  // customisation de mes couleurs
    $(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--background', '#0080ff');
    $(".cmd[data-cmd_uid=#uid#] .selectCmd").css('--color', 'white');
    $(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--border-color', 'lightgray');
    $(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--color', 'white');
 }
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>

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités