[UX] Replace double dashes with middot in menu parent select list

[quicksketch]

Description of the need
Currently when selecting a menu item, we use two dashes to indicate a level in the hierarchy:

The double-dashes can be difficult to determine exactly how many levels something is in the hierarchy (number of dashes divided by two).

Proposed solution

It might make things easier to read if we used a single character per hierarchical level, such as a square bullet.

---

PR by @verygladden: backdrop/backdrop#3078

[olafgrabienski]

Interesting! As an experiment, I've replaced the double dashes using my browser's dev tools with different signs, e.g.

• – (n dash)
• >
• · (middot)

The middots, separated by a space, gave the best result so far. Here's a screenshot:

[klonos]

I like the middots better @olafgrabienski 👍 ...will you be able to file a PR for it?

PS: I would like us to eventually implement a more user-friendly and familiar way (reuse UI patterns) for selecting menus. What is proposed in #3029 basically. That would provide the best UX; but this is a nice improvement in the interim.

[olafgrabienski]

Thanks for your feedback @klonos ! I'm still short of time and the issue doesn't seem to be urgent, so unfortunately no PR from me.

Apart of that, I'm indecisive about the middots: They look good but at the same time uncommon. Are (single) dashes maybe better because more common? Here's a comparison:

Single dashes:

Middots:

[olafgrabienski]

As a side note, looking at the select list, I noticed the angle brackets around top level items, e.g. <Primary navigation>. Do we need those brackets? In my opinion, the list is better readable without. Have a look at the following comparison:

<Primary navigation>
- Home
- About
-- History
- Portfolio
- Contact

Primary navigation
- Home
- About
-- History
- Portfolio
- Contact

[quicksketch]

I'm in favor of removing the angle brackets. A lot of sites only have a single menu available (like the out-of-box functionality).

As for middot vs. dashes, I think the middot is a lot more readable than the dash. It's easy to count the level of indentation, as opposed to dashes where they all run together.

[olafgrabienski]

Thanks for your feedback, @quicksketch! I'd like to make a last comparison between middots, separated by a space (as above) vs. middots without separation:

(1) Middot + space:

Primary navigation
· Home
· About
· · History
· · · 2019
· · · 2018
· · · 2017
· Portfolio
· Contact

(2) Just middot:

Primary navigation
· Home
· About
·· History
··· 2019
··· 2018
··· 2017
· Portfolio
· Contact

Okay, in my opinion it looks better with space.

[olafgrabienski]

will you be able to file a PR for it?

@klonos I might find some time soon but have not the minimal idea where the characters for the menu item select list are defined. Do you have an idea or can you give me a hint where to look?

[indigoxela]

@olafgrabienski this hides in function _menu_get_options

[verygladden]

I made a PR that should fix this issue. backdrop/backdrop#3078

[olafgrabienski]

@verygladden Thanks for the PR, and welcome to Backdrop!

I've tested the PR in the sandbox website (http://3078.backdrop.backdrop.qa.backdropcms.org), looks good to me! Here's a screenshot from the sandbox site:

I'd be happy if someone else could make the code review.

[ghost]

Merged backdrop/backdrop#3078 into 1.x. Thanks @quicksketch for the suggestion, and to @olafgrabienski & @herbdool for the reviews and feedback! And a very big thank you to @verygladden for the PR! Congrats on your first official contribution to Backdrop core 😃