#686 - Base Dropdown - Custom component - nostr/gossip

dtonon commented

2024-03-21 10:10:04 +13:00

(Migrated from github.com)

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.

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. ![image](https://github.com/mikedilger/gossip/assets/89577423/41538d1e-1d57-4193-b0e0-102b0e98bf5f) ![image](https://github.com/mikedilger/gossip/assets/89577423/5791e28e-2745-4ced-85e7-7cdbd8799aac)

mikedilger commented

2024-03-21 17:43:40 +13:00

(Migrated from github.com)

nostr:nevent1qqsrg5k0a0ljkz3e3lql9spqvc4rszfpd6c3srcgj7h9alnh4h6q8ycppemhxue69uhkummn9ekx7mp0qyg8wumn8ghj7mn0wd68ytnddakj7qg4waehxw309aex2mrp0yhxgctdw4eju6t09ukszv79

dtonon commented

2024-03-21 20:04:59 +13:00

(Migrated from github.com)

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.

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 commented

2024-03-21 20:24:36 +13:00

(Migrated from github.com)

Btw, @mikedilger do you dislike it?

mikedilger commented

2024-03-22 10:12:07 +13:00

(Migrated from github.com)

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.

👍 1

dtonon commented

2024-05-02 11:22:50 +12:00

(Migrated from github.com)

@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.

@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): <img width="774" alt="image" src="https://github.com/mikedilger/gossip/assets/89577423/5694bd5c-2952-4e86-8ff0-cc9104da6005"> <br/><br/> 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 commented

2024-05-02 11:26:25 +12:00

(Migrated from github.com)

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

This would be the updated version. We can also add a little dot where the popover is pinned. I like it. ![image](https://github.com/mikedilger/gossip/assets/89577423/91f6ce72-397f-4954-84f4-ad82f3dcf881)

Rows
Columns

Base Dropdown - Custom component #686