Menu un peu particulier

Version imprimable

29/05/2017, 22h31
paesportcomputing

Menu un peu particulier

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 :P

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

Merci d'avance.

Marc
30/05/2017, 02h13
bouye

É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 :aie:...

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.
31/05/2017, 00h41
paesportcomputing

1 pièce(s) jointe(s)

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).

Pièce jointe 280998
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

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:

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.

Citation:

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)

31/05/2017, 14h56
paesportcomputing

Merci pour ces renseignements mais toute cette masse de css sont un peu incompréhensibles.
Je vais essayer autrement.
01/06/2017, 02h53
bouye

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)
03/06/2017, 00h04
paesportcomputing
Pour info, j'ai trouvé comment supprimer le bord de l'onglet sélectionné :
Code:

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...
05/06/2017, 00h10
paesportcomputing

2 pièce(s) jointe(s)
J'ai également trouvé comment dimensionner le 'tab-header' de la même largeur que les 'tab' :
Code:

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'.

Pièce jointe 282361Pièce jointe 282365
Quelqu'un aurait une idée ?

Merci.
05/06/2017, 13h11
bouye

Y a peut-être un padding qui traine qq part sur un des sous-composants. Facile à trouver en explorant le graphe avec ScenicView.
05/06/2017, 18h06
paesportcomputing

Effectivement bouye, un padding d'un sous-composant !
Je te remercie, tu es une vraie encyclopédie :D
Je clôture ce ticket.

Merci pour tout.