Discussion :

[Zebulon777]

Bonjour tout le monde,

est-ce qu'il y a moyen de supprimer la poubelle présente dans le cartouche pour chaque couche ?

Merci d'avance.

[cmail]

Oui. Il y a deux moyens:
1/ Le plus facile pour moi est par CSS. Tu récupères l'identifiant de la div (via firebug) en question puis tu mets le "display" de cette div à "none" soit dans ton fichier css, soit par une instruction JS adhoc (en jquery tu peux faire un truc du genre $("#id_de_la_poubelle").hide(), voire $("#id_de_la_poubelle").css("display","none")). Comprends-tu mon charabia?
2/ L'autre moyen est de reconstituer en js la barre d'outils et d'ajouter le control sans la poubelle (Là, je laisse les experts de te montrer la méthode correcte de le faire, car chez moi c'est un peu bidouille!)

[acarme]

Bonjour,

oui il est tout à fait possible de la retirer, pour ce faire, il faut écraser le style par défaut avec ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.gpControlRemoveLayerItemInactive {
/* background-image: url("img/picto_layerDrop_off.gif"); */
background-repeat: no-repeat;
/* cursor: pointer; */
position: relative;
float: left;
left: 0%;
top: 0%;
width: 23px;
height: 23px;
display: none;
}

.gpControlLayerOpacityItemInactive {
background-color: transparent;
float: left;
position: relative;
top: 0%;
left: 0%;
width: 75px;
height: 20px;
margin-left: 23px;
}

Petite astuce : pour savoir quel élément de style il faut modifier, on peut utiliser l'outil "loupe" des outils de développement de Chrome (ou le "carré bleu avec un pointeur" avec firebug) puis cliquer sur l'élément en question.
Le style s'affiche alors et on peut tester en modifiant les valeurs et champs directement dans l'outil avant de reporter ce style dans notre code pour écraser celui par défaut.

[jrenard]

Bonjour,

Pour compléter la réponse d'Anaïs, ce qui est important dans les modifs CSS proposées dans la classe .gpControlRemoveLayerItemInactive:
- la mise en commentaire des propriétés background-image et cursor pour standardiser l'affichage de fond et au survol
- et surtout le display: none; qui va faire disparaître l'élément div contenant la poubelle
Pour assurer le coup, on peut aussi sur cette classe modifier la propriété width à 0px;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.gpControlRemoveLayerItemInactive {
    /* background-image: url("img/picto_layerDrop_off.gif"); */
    background-repeat: no-repeat;
    /* cursor: pointer; */
    position: relative;
    float: left;
    left: 0%;
    top: 0%;
    width: 0px; /* Modification de la valeur */
    height: 23px;
    display: none; /* Ajout */
}

Néanmoins ce display:none; provoque un biais qui est le décalage vers la gauche du slider d'opacité (puisque la div de la poubelle a disparu, vous me suivez?). C'est pour cela que dans un deuxième temps une modif est proposée dans la class .gpControlLayerOpacityItemInactive avec une marge à gauche de 23px (margin-left:23px), les 23 pixels étant la largeur de la div de poubelle que l'on a fait disparaître.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.gpControlLayerOpacityItemInactive {
    background-color: transparent;
    float: left;
    position: relative;
    top: 0%;
    left: 0%;
    width: 75px;
    height: 20px;
    margin-left: 23px; /*Ajout*/
}

Dernier biais, et c'est là que je complète un peu, un tel mécanisme va également décaler les sliders d'opacité sur les couches qui n'avaient pas au départ de symbole de poubelle, à savoir les couches IGN que l'on ne pas enlever de la visu. Et du coup tous les sliders ne vont plus être alignés verticalement. Pour contrecarre cet effet, on va attribuer à des éléments div particuliers (.gpControlRemoveLayerNoneItemInactive) le même comportement que que ceux qui contenaient les poubelles en leur ajoutant une propriété display:none; et une width à 0px.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.gpControlRemoveLayerNoneItemInactive {
    cursor: default;
    display: none;
    float: left;
    height: 23px;
    left: 0;
    position: relative;
    top: 0;
    width: 0px; /* Modification de la valeur */
}

N'hésitez pas à dire si le résultat attendu est le bon.

[Zebulon777]

Merci, je vais m'y atteler et je reviendrai vers vous au cas où...