Skip to Content
0 Votes

Changes for page Menu Macro

Last modified by Сергей Коршунов on 2025/09/03 12:19
From version 7.1
edited by Сергей Коршунов
on 2023/05/31 15:09
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/15.4]
To version 15.1
edited by Сергей Коршунов
on 2025/09/03 12:19
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/17.7.0]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -70,6 +70,18 @@
70 70   $(dropDownHeader).next().addClass('xDropdown-menu');
71 71   });
72 72  
73 + $('.xDropdown-menu').each(function() {
74 + this.addEventListener('keyup', function(event) {
75 + if (event.key === 'Escape') {
76 + // We change the state of the parent xDropdown
77 + this.parentNode.classList.remove('open');
78 + // We set the focus on the toggle button of the section we just collapsed
79 + this.parentNode.querySelector(':scope > .xDropdown-header > .xDropdown-header-toggle').focus();
80 + }
81 + event.stopPropagation();
82 + });
83 + });
84 +
73 73   $('.menu-horizontal .xDropdown').each(function() {
74 74   // In case of horizontal menus, make it so that a class is added on hover, instead of using the :hover pseudo-class
75 75   this.addEventListener("mouseover", function() {
XWiki.StyleSheetExtension[1]
Code
... ... @@ -60,11 +60,9 @@
60 60   &.menu-horizontal {
61 61   /* Stylization: Navbars */
62 62   .clearfix;
63 - background-color: @navbar-default-bg;
64 - border-color: @navbar-default-border;
65 - /* Custom styling */
66 - .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
67 - min-height: @navbar-height;
63 + background-color: @menu-default-bg;
64 + border-color: @menu-default-border;
65 + min-height: @menu-height;
68 68   padding-left: 25px;
69 69   .xDropdown.open {
70 70   > .xDropdown-header > .xDropdown-header-toggle:before {
... ... @@ -78,7 +78,7 @@
78 78   padding-left: 0;
79 79   list-style-type: none;
80 80   margin: 0;
81 - min-height: 50px;
79 + min-height: @menu-height;
82 82   display: flex;
83 83   align-items: stretch;
84 84   & > li {
... ... @@ -92,22 +92,21 @@
92 92   @media (min-width: @grid-float-breakpoint) {
93 93   float: left;
94 94   }
95 - line-height: @line-height-computed;
96 - color: @navbar-default-link-color;
93 + color: @menu-default-link-color;
97 97   &:hover, &:focus-within {
98 - color: @navbar-default-link-hover-color;
99 - background-color: @navbar-default-link-hover-bg;
100 - background-color: @navbar-default-link-active-bg;
101 - color: @navbar-default-link-active-color;
95 + color: @menu-default-link-hover-color;
96 + background-color: @menu-default-link-hover-bg;
97 + background-color: @menu-default-link-active-bg;
98 + color: @menu-default-link-active-color;
102 102   /* When hovering, have the same color for text and link usage */
103 103   & > span > a {
104 - background-color: @navbar-default-link-active-bg;
105 - color: @navbar-default-link-active-color;
101 + background-color: @menu-default-link-active-bg;
102 + color: @menu-default-link-active-color;
106 106   }
107 107   }
108 108   /* Links inside menu */
109 109   a {
110 - color: @navbar-default-link-color;
107 + color: @menu-default-link-color;
111 111   &:hover, &:focus-within {
112 112   text-decoration: none;
113 113   }
... ... @@ -115,7 +115,7 @@
115 115   /* Containers, images inside menu */
116 116   div, img {
117 117   /* Limit the height to the nav height minus the padding and minus border */
118 - max-height: @navbar-height - (2 * @navbar-padding-vertical) - 2px;
115 + max-height: @menu-height - (2 * @navbar-padding-vertical) - 2px;
119 119   overflow: hidden;
120 120   &.xDropdown-header{
121 121   /* No border on the dropdown header */
... ... @@ -126,15 +126,15 @@
126 126   & > .xDropdown-header > .xDropdown-header-toggle {
127 127   &:hover, &:focus-within {
128 128   /* Change background color of the caret when hovering on the navbar. */
129 - background-color: @navbar-default-bg;
126 + background-color: @menu-default-bg;
130 130   }
131 131   }
132 132   /* Separator vertical inside menu */
133 133   &:empty {
134 - height: @navbar-height;
131 + height: @menu-height;
135 135   margin: 0 ((@line-height-computed / 2) - 1);
136 136   padding: 0;
137 - border-right: 1px solid @navbar-default-border;
134 + border-right: 1px solid @menu-default-border;
138 138   }
139 139   }
140 140   /* Stylization: Dropdowns */
... ... @@ -154,24 +154,26 @@
154 154   background-color: @dropdown-bg;
155 155   border: 1px solid @dropdown-border;
156 156   border-radius: @border-radius-base;
154 + /* On this element, the box-shadow is very useful since it appears in front of other elements.
155 + We don't want to remove it despite the Flamingo theme now using flat designs almost everywhere. */
157 157   .box-shadow(0 6px 12px rgba(0,0,0,.175));
158 158   background-clip: padding-box;
159 159   margin-top: 0;
160 160   border-top-right-radius: 0;
161 161   border-top-left-radius: 0;
161 + overflow-wrap: break-word;
162 + hyphens: auto;
162 162   li {
163 163   /* Text inside menu */
164 164   color: @dropdown-link-color;
166 + padding: 3px 20px;
165 165   /* Links inside menu */
166 166   a {
167 167   display: block;
168 - padding: 3px 20px;
169 169   clear: both;
170 170   font-weight: normal;
171 171   line-height: @line-height-base;
172 172   color: @dropdown-link-color;
173 - overflow: hidden;
174 - text-overflow: ellipsis; // Displaying ... if the text is too long
175 175   &:hover, &:focus-within {
176 176   /* &:extend(.dropdown-menu>li>a:hover); */
177 177   text-decoration: none;
... ... @@ -189,7 +189,7 @@
189 189   line-height: @line-height-base;
190 190   color: @dropdown-link-color;
191 191   /* Empty dropdowns should have height in order to display the arrow */
192 - min-height: 2 * @font-size-base;
191 + min-height: 1lh;
193 193   &:hover, &:focus-within {
194 194   text-decoration: none;
195 195   color: @dropdown-link-hover-color;
... ... @@ -200,10 +200,17 @@
200 200   }
201 201   }
202 202   /* When in dropdown we also have a link, reset the duplicated padding */
203 - & > span > a {
202 + & > .xDropdown-header > span > a {
204 204   padding: 0;
205 205   display: inherit;
206 206   }
206 + /* Reposition the toggle when in a dropdown of fixed size
207 + to avoid eating away at the bit of space we have for the text. */
208 + & > .xDropdown-header > .xDropdown-header-toggle {
209 + position: absolute;
210 + right: 0;
211 + top: 0;
212 + }
207 207   }
208 208   /* Separator horizontal inside menu */
209 209   &:empty {
... ... @@ -244,7 +244,7 @@
244 244   margin: 0 0 0 -25px; /* Remove padding added in normal view */
245 245   > li {
246 246   &:empty {
247 - .nav-divider(@navbar-default-border);
253 + .nav-divider(@menu-default-border);
248 248   }
249 249   }
250 250   ul {
... ... @@ -258,14 +258,14 @@
258 258   box-shadow: none;
259 259   li {
260 260   /* Text inside menu */
261 - color: @navbar-default-link-color;
267 + color: @menu-default-link-color;
262 262   /* Links inside menu */
263 263   a {
264 - color: @navbar-default-link-color;
270 + color: @menu-default-link-color;
265 265   }
266 266   /* Submenus inside menu */
267 267   &.xDropdown {
268 - color: @navbar-default-link-color;
274 + color: @menu-default-link-color;
269 269   &.open {
270 270   background-color: transparent;
271 271   color: inherit;
... ... @@ -272,11 +272,11 @@
272 272   }
273 273   /* When in dropdown we also have a link */
274 274   > span > a {
275 - color: @navbar-default-link-color;
281 + color: @menu-default-link-color;
276 276   }
277 277   }
278 278   &:empty {
279 - .nav-divider(@navbar-default-border);
285 + .nav-divider(@menu-default-border);
280 280   }
281 281   }
282 282   }
... ... @@ -306,15 +306,16 @@
306 306  
307 307  .menu-horizontal-toggle {
308 308   .clearfix;
309 - background-color: @navbar-default-bg;
310 - border-color: @navbar-default-border;
311 - .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
312 - min-height: @navbar-height;
315 + background-color: @menu-default-bg;
316 + border-color: @menu-default-border;
317 + min-height: @menu-height;
313 313   & .navbar-toggle {
314 314   float: left;
315 315   padding-left: 15px;
321 + padding-top: 0;
322 + padding-bottom: 0;
316 316   & .icon-bar {
317 - background-color: @navbar-default-link-color;
324 + background-color: @menu-default-link-color;
318 318   transition: .3s ease all;
319 319   &:nth-of-type(2) {
320 320   opacity: 0;
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -22,8 +22,11 @@
22 22   aria-label="${services.rendering.escape($label, 'xwiki/2.1')}" %)(((
23 23   (% class="navbar-header" %)(((
24 24   {{html}}
25 - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#$!{escapetool.xml($id)}" aria-expanded="false">
26 - <span class="sr-only"></span>
25 + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#$!{escapetool.xml($id)}"
26 + aria-expanded="false" aria-controls="$!{escapetool.xml($id)}">
27 + <span class="sr-only">
28 + $escapetool.xml($services.localization.render('menu.ui.horizontal.toggler.description'))
29 + </span>
27 27   <span class="icon-bar"></span>
28 28   <span class="icon-bar"></span>
29 29   <span class="icon-bar"></span>