Mark the current heading in the dropdown list

[Reinmar]

Currently, the current option is only visible in the dropdown button. It should also be marked inside the panel.

[oleq]

What would you say about it?

[Reinmar]

I always have problems with active/inactive states. If you have just two options to choose from and one of them is active in a lot of apps you have no idea which of these options is the active one and which is inactive.

One notable example here – Sublime Text:

I'm working with this app every day and I still don't know which option is selected.

What's worse – this happens to me even if there are more options than 2. Since the style itself is pretty indistinguishable there's no mental "tick" when I notice it. It usually takes me a couple of arrow down/up key presses to figure out where the damn selection is in Sublime's panel.

In the example you showed the focus is clearly marked using an intuitive glow, so that's, I think, ok.

However, the active/inactive styling would fail the same test which Sublime fails. This isn't too important now because most of the time you'll have more than 2 options in that panel, but if you have a better idea for that style, I'd be happy to see it :D.

PS. There's also https://github.com/ckeditor/ckeditor5-heading/issues/55 to fix (I mention it because it's visible on the screencast).

[oleq]

We could invert active selection. This is what OSs usually do:

[Reinmar]

Slack uses similar styling (color for active, slight shade change for hover) in its channel list and I think I like it. But macOS uses a bit different styling for its top menu AFAICS – hover is color and active has a check mark :D. But a similar to Slack's styling is used e.g. in Messages (on the left) and it's fine.

OTOH, personally, I'll have to get used to this blue background. ATM, it stands out pretty strongly. I guess that I'd just need time.

[oleq]

Some experiments with ticks

[oleq]

And hued color without text inversion

TBH, this is the one I like the most.

[oleq]

Combined:

[Reinmar]

All fine for me. Maybe just small doubt about the tick – that it moves the text to the right. In native macOS menus it has a reserved space on the left, so adding the check mark doesn't move the item.

[oleq]

A good point.

Needs some tuning though.

---

Edit:

[Reinmar]

I noticed on the early screenshots that the items are not aligned well. Is this some styling issue?

[oleq]

Needs some tuning though.

I updated my response.

[Reinmar]

So, I like:

And:

And (if the items were aligned):

In the first solution, I'm not sure about the bright, panty color (maybe if it was the same as the focused border of the editable?). E.g. the stronger one in the second solution looks better to me, though, it may stand out too much. In the 3rd option there's no problem with color, cause it's grey so it may be the easiest option :D.

[oleq]

In the first solution, I'm not sure about the bright, panty color (maybe if it was the same as the focused border of the editable?). E.g. the stronger one in the second solution looks better to me, though, it may stand out too much.

This one is pretty rough IMO, but it also makes sense.

I'll make up my mind and create a PR ;-)