Menu un peu particulier

**paesportcomputing** · 29/05/2017, 22h31

Bonjour,

J'aimerais implémenter un menu que l'on peut voir ici :
https://adica.avocat-24h.fr/

--> Menu vertical - icones à gauche - quand on passe la souris sur une icone, un texte apparaît. La possibilité de visualiser la totalité du menu à l'aide de la flèche ne m'est pas nécessaire

Est-ce que quelqu'un à une idée pour m'aider ?

Merci d'avance.

Marc

**bouye** · 30/05/2017, 02h13

Évidement ils ont toujours pas corrigé le bug qui fait que même en effectuant une rotation sur le graphic de chaque onglet d'un TabPane en orientation verticale (side = Side.LEFT ou Side.RIGHT), ces derniers ne agrandissement pas horizontalement

...

Bon du coup je pense, qu'une simple HBox avec des labels dedans fera très bien l'affaire (la bordure colorée sur le coté peut se faire avec CSS, de même que l'ombre lors du survol), le texte surgissant c'est juste une infobulle (label.setTooltip(tooltip) ou Tooltip.install(label, tooltip)) et il faudra mettre des écouteurs souris pour changer le contenu du panneau central.

**paesportcomputing** · 31/05/2017, 00h41

J'ai voulu essayer avec un TabPane car c'est plus pratique pour changer de panneau et je n'ai pas de problème d'orientation des icones.
Par contre, Je ne parviens pas à dimensionner le 'tab-header-area' de la même largeur que les 'tab' (voir image, grande flèche rouge). De plus, un cadre/bordure est présent sur le 'tab' sélectionné (petite flèche rouge).

Nom : css.png
Affichages : 590
Taille : 2,2 Ko

Et concernant l'infobulle, son apparition est bcp trop lente. Et son positionnement est décalé par rapport au tab. Dans l'exemple du site https://adica.avocat-24h.fr/, le rectangle est bien en face du 'tab'...

Est-ce que tout ces ''problèmes'' peuvent être réglés par les CSS ?

Marc

**bouye** · 31/05/2017, 03h49

Le soucis avec TabPane c'est que le texte de base reste vertical. Et si tu mets ce texte à null et que tu places un texte sur le graphic alors celui-ci est trop grand et donc est coupé. Donc on ne peut pas ainsi faire ce que tu as montré sur le site que tu as indiqué. C'est pour cela que j'ai indiqué une autre solution.

Après... oui il est peut-être possible de forcer le header à être plus grand via CSS.
Voici la partie qui définie le TabPane dans Modena : https://gist.github.com/maxd/63691840fc372f22f470

Code CSS :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/*******************************************************************************
 *                                                                             *
 * TabPane                                                                     *
 *                                                                             *
 ******************************************************************************/
 
.tab-pane {
    -fx-tab-min-height: 1.8333em; /* 22 */
    -fx-tab-max-height: 1.8333em; /* 22 */
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: -fx-text-base-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
    -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
    -fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */
}
.tab-pane > .tab-header-area > .headers-region > .tab:top {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab:right {
    -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab-pane > .tab-header-area > .headers-region > .tab:bottom {
    -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab-pane > .tab-header-area > .headers-region > .tab:left {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab:hover {
    -fx-color: -fx-hover-base;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-background;
    -fx-background-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:bottom:selected .focus-indicator {
    -fx-border-insets: -6 -5 -4 -4, -5 -3 -2 -2;
}
.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
    -fx-color: -fx-base;
}
.tab-pane > .tab-header-area > .tab-header-background {
    /* TODO should not be using text-box-border I think? */
    -fx-background-color:
        -fx-outer-border,
        -fx-text-box-border,
        linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%));
}
.tab-pane:top > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 0 1 0, 1;
}
.tab-pane:bottom > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 1 0 0 0, 1;
}
.tab-pane:left > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 1 0 0, 1;
}
.tab-pane:right > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 0 0 1, 1;
}
.tab-pane:top > .tab-header-area {
    /*-fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; *//* 5 2 0 5 */
    -fx-padding: 0.416667em 5 0.0em 0.416667em; /* 5 2 0 5 */
}
.tab-pane:bottom > .tab-header-area {
    -fx-padding: 0 0.166667em 0.416667em 0.416667em; /* 0 2 5 5 */
}
.tab-pane:left > .tab-header-area {
    -fx-padding: 0.416667em 0.0em 0.166667em 0.416667em; /* 5 0 2 5 */
}
.tab-pane:right > .tab-header-area {
    -fx-padding: 0.416667em 0.416667em 0.166667em 0.0em; /* 5 5 2 0 */
}
/* TODO: scaling the shape seems to make it way too large */
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
    -fx-background-color: -fx-mark-color;
    -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
    -fx-scale-shape: false;
    -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
    -fx-background-color: derive(-fx-mark-color, -30%);
}
/* CONTROL BUTTONS */
.tab-pane > .tab-header-area > .control-buttons-tab > .container {
    -fx-padding: 3 0 0 0;
}
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: -1 0 5 0, 0 1 6 1, 1 2 7 2;
    -fx-padding: 4 4 9 4;
    -fx-background-radius: 10;
}
.tab-pane:bottom > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
    -fx-padding: -5 4 4 4; /* TODO convert to ems */
}
/* FLOATING TABS CUSTOMISATION */
.tab-pane.floating > .tab-header-area > .tab-header-background {
    -fx-background-color: null;
}
.tab-pane.floating > .tab-header-area {
    -fx-background-color: null;
}
.tab-pane.floating > .tab-content-area {
    -fx-background-color: -fx-outer-border, -fx-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2, 0;
    -fx-padding: 2;
}

Pour l'infobulle, ça ne sera possible de modifier le délai d'apparition, la durée d'apparition et la durée de disparition qu'avec le JDK 9 : [JDK-8090477] Customizable visibility timing for Tooltip.

Envoyé par http://download.java.net/java/jdk9/docs/api/javafx/scene/control/Tooltip.html#showDelayProperty

public final ObjectProperty<Duration> showDelayProperty
The delay between the mouse entering the hovered node and when the associated tooltip will be shown to the user. The default delay is 1000ms.

Default value:
1000ms

Since:
9

See Also:
getShowDelay(), setShowDelay(Duration)

**paesportcomputing** · 31/05/2017, 14h56

Merci pour ces renseignements mais toute cette masse de css sont un peu incompréhensibles.
Je vais essayer autrement.

**bouye** · 01/06/2017, 02h53

Si tu explores comment est fait le TabPane via ScenicView ou via SceneBuilder en général la structure interne devient plus aisément compréhensible. En gros .tab-pane > .tab-header-area concerne l'entête du contrôle. Par contre il semble que la pseudo-classe indiquant la position est placée sur les onglets (ex : .tab:left)

**paesportcomputing** · 03/06/2017, 00h04

Pour info, j'ai trouvé comment supprimer le bord de l'onglet sélectionné :

Code :

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

1
2
3
4
 
.tabPane > .tab-header-area > .headers-region > .tab:selected {
    -fx-focus-color:  transparent;
}

Mais je n'ai tjrs pas trouvé pour que l'onglet ait la même dimension que le tab-header...

**paesportcomputing** · 05/06/2017, 00h10

J'ai également trouvé comment dimensionner le 'tab-header' de la même largeur que les 'tab' :

Code :

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

1
2
3
4
 
.tabPane .tab-header-area {
    -fx-padding: 0 0 0 0;
}

Mais il me reste une inconnue. Comment supprimer le bord, dans mon cas blanc, autour du 'tab-header' ?
Quand mon tabPane est à gauche de ma fenêtre, ce bord est en bas, à gauche et au dessus du 'tab-header'.