Base Dropdown - Custom component

[dtonon]

This is the most used base dropdown, containing only buttons.

It has a single style for the light and the dark mode. The shadow on the background should be really soft. If it complex to achieve we can try without it.

The position should be dynamic, so the arrow should be placed top/bottom - right/left so that the dropdown is always totally visible in the view.

PS: the top border of the hovered item should not be thinner, it's a bug in the rendering.

[mikedilger]

nostr:nevent1qqsrg5k0a0ljkz3e3lql9spqvc4rszfpd6c3srcgj7h9alnh4h6q8ycppemhxue69uhkummn9ekx7mp0qyg8wumn8ghj7mn0wd68ytnddakj7qg4waehxw309aex2mrp0yhxgctdw4eju6t09ukszv79

[dtonon]

I don't like shadows in flat design. Here it is just an hack in a very light and sparse form, to manage the overlap of the dropdown with unknown backgrounds. Because I don't like borders either. Think them like a faded lightbox. If you remove it, the design still works fine, you could just have a poor contrast on the hover state. Finally, you see the shadow only in quick interactions, so the interface remains clean overall.

What he is probably talking about is neumorphism, derived from skeuomorphism, that is a completely different level.

[dtonon]

Btw, @mikedilger do you dislike it?

[mikedilger]

No, I have no opinion. Looks fine to me. I just saw Karnage's comment about the same time I read this issue and thought I'd make the connection.

[dtonon]

@bu5hm4nn I reviewed the menu shadows applying a lighter version (on 93b21a4d) and increased the items padding (23f8970b), both pushed on unstable.

I would like that the triangular pointer will cover more the underlying button, touching the center of the element. I tried to tweak DROPDOWN_DISTANCE but this break the triangle itself.

Another solution, probably quicker, is to entirely remove the triangle, and attach the popover corner to the center of the element (or the pointer x position, and y center, for not square elements). Something like this (but increasing the overlap):

This as an interesting side effect: the popover move a little to the left and is not aligned to the right edge, increasing its readability. If it's ok for you we can try this path.

[dtonon]

This would be the updated version. We can also add a little dot where the popover is pinned. I like it.