Menu macro changed - LTS 14.10.20 to 15.10.5

Help / Discuss
#1

Upon moving from XWiki LTS 14.10.20 to 15.10.5 (also on 15.10.6) notice the following problems with the Menu macro, my case horizontal top menus, the sub-menu arrows changed direction (from pointing down to left) and flyout sub-menus have extra lines where they didn’t before:

Before 14.10.20
Menu-14.10.20

After 15.10.5 (or 15.10.6)
Menu-15.10.6

Info: Not sure if these were the arrows used before but during the upgrade the following were flagged as removed:

  • https://…/xwiki/bin/download/Main/SolrSearch/dark-grey-disclosure-arrow-left.png?rev=1.1
  • https://…/xwiki/bin/download/Main/SolrSearch/dark-grey-disclosure-arrow-down.png?rev=1.1
  • https://…//xwiki/bin/download/Main/SolrSearch/light-grey-disclosure-arrow-left.png?rev=1.1
  • https://…//xwiki/bin/download/Main/SolrSearch/light-grey-disclosure-arrow-down.png?rev=1.1

Help please it makes my site look unprofessional.

#2

Hello,

that is a Bug I reported on Jira a few days ago.
[XWIKI-21864] Menu Application: If a list element is a link, the xDropdown-header-toggle drops to a new line and other weirdness - XWiki.org JIRA

It happens if a menu element that has sub-elements is also a link.
If you remove the link from for example “Computer Education” in the Menu-Navigation page, the Dropdown symbol that is currently below “Computer Education” should go back up inline.
But obviously it is often desired to have that page also as a link.

#3

Thanks I’ll watch that bug report.

#4

Can you confirm the same behaviour when removing the links from the elements that have sub-elements?

#5

I just noticed in my images the extra space at the start of the Menu line, its also has it at the end (not shown) reducing usable line width.

#6

Removing the link for me didn’t help, “Computer Education” is just too long so it wraps to the next line. I now think its a sizing issue which I compensated for when fist created my menu but now something changed. See my other post about space before and after.

#7

But in that case the arrow symbol should theoretically still be inline after education once it is not a link.

#8

I tried to find a better solution in XWIKI-21864: Menu Application: If list element is a link, the xDropdown-header-toggle drops to a new line and other weirdness by Sereza7 · Pull Request #2893 · xwiki/xwiki-platform · GitHub
The changes are pretty easy to move to your distrib, so feel free to try them on your real use cases by updating the SSX in Menu.MenuMacro :slight_smile:
Here is a video demo: https://youtu.be/QU14vb_BkV4.

Let me know what you think of this proposal.

Waiting for your feedback on UI to ask for developer review and eventually a merge on LTS :slight_smile:

1 Like
#9

Wow, thank you that was quick! In your Youtube Video everything looks very good now!
However I am probably doing something wrong when testing (on a normal stable release 16.0 Server).
If I go to /xwiki/bin/edit/Menu/MenuMacro?editor=object&force=1 and edit the SSX for Flamingo and at the very bottom paste this:

.xDropdown-header span a {
  padding: 0;
  display: inherit;
}
            /* Reposition the toggle when in a dropdown of fixed size
              to avoid eating away at the bit of space we have for the text. */
.xDropdown-header .xDropdown-header-toggle {
  position: absolute;
  right: 0;
  top: 0;
}

This is what happens:
image

The arrow always is on the top right position (even on the “top level”) and also the weird place in front of the link-text still exists. However the arrow is no longer on another line.

Do I also need tho include the changes in the SSX that are mentioned in XWIKI-19725: Menu are not accessible using a screen reader by Sereza7 · Pull Request #2078 · xwiki/xwiki-platform · GitHub as your changes are “an extra patch upon the changes” for it to work like in the Youtube Video?

Also what is kinda weird generally is that the dropdown arrow is looking left when not hovered over and down when “opened”. This is probably as both the top level and the levels below it use the same button / icons, but levels below the top level open to the right instead to the bottom. But that is just a tiny non important flaw.

#10

When also adding

.menu.menu-horizontal>ul ul li.xDropdown {
    padding: 0px 0px;
}

The result is now:
image

The arrow on the “top-level” are still looking not fittingly, but the weird space before the link goes away. But I guess this addition is quite an “dirty hack” as I don’t really understand CSS too well and found that by try and error. That is simply the workaround we are using on our productive server for that space to go away.

#11

It took me awhile to find where to make the changes (SSX?), but after seeing TomTheWise reply I figured it out and now I’m good. My menu is working acceptably well now.

1 Like
#12

Hello!
The code block you got should not be positioned at the end. The position is important because it is nested into other code blocks and its effects change depending on this nesting.

Here is a conversion to an “independant” block you can paste at the end of the StyleSheetExtension:

.menu.menu-horizontal>ul ul li.xDropdown>.xDropdown-header>span>a {
  padding:0;
  display:inherit
}
.menu.menu-horizontal>ul ul li.xDropdown>.xDropdown-header>.xDropdown-header-toggle {
  position:absolute;
  right:0;
  top:0
}

Those changes got merged to the project in March 2023, so you should already have it if you move to LTS :slight_smile:

Can you elaborate on why this looks weird?
This is inconsistent with former versions of XWiki, but this is more consistent with other dropdowns available, for example: the navigation tree, the facet picker in advanced search.
I’ve been trying to make it more consistent across different UIs (there’s a project of adding some for the admin section clarity), and I’m interested to know what makes you feel like it’s weird :slight_smile:

Sorry, my answer was a bit technical ^^’

SSX => StyleSheetExtension
I’m glad I could help :slight_smile:

1 Like
#13

Thank you!! That new “independant” block works perfectly and very good!

What I mean with the dropdown direction: behaviour, every dropdown thing (also children macros and everything) opens the content below it.
But the content for example that opens when you hover over “Take a Tour” opens to the right, so it would make a tiny bit more sense if it would look to the right if opened. But this is quite unimportant and probably not worth the effort.

Thank you very much for your quick fix!

#14

To be honest I agree with the notion that these arrows look strange, they don’t feel natural. Maybe our designers @tkrieck or @amilica could provide some feedback and suggestions for improvement here?

#15

It is a bit strange, yes. The main menu in the header can use a down faced arrow, no problem. However, inside the menu, a right arrow is more descriptive of the action because the fly-out opens in that direction. Other software and OSes also follow the right arrow convention inside contextual menus.

MacOS
Screenshot 2024-02-16 at 09.55.05

Windows
Screenshot 2024-02-16 at 09.55.59

Chrome
Screenshot 2024-02-16 at 09.55.20

Firefox
Screenshot 2024-02-16 at 09.56.16

#16

I created an improvement ticket :ok_hand:
https://jira.xwiki.org/browse/XWIKI-21892

Feel free to complete it with any additional feedback :slight_smile:

1 Like