search

foundryvtt / dnd5e

An implementation of the 5th Edition game system for Foundry Virtual Tabletop (http://foundryvtt.com).
MIT License
331 stars 219 forks source link

Improve visibility of active spellbook filters #1310

Closed aaclayton closed 3 months ago

aaclayton commented 3 years ago

Originally in GitLab by @MaxPat931

The small line under the filter options can be difficult to see, or may not be pronounced enough to call attention that it is active. I would recommend additional visual indicators to inform users when a filter is active, such as bolding the text and/or highlighting the background area of that filter:

current image

Proposed image

slightly related to https://gitlab.com/foundrynet/dnd5e/-/issues/1281

aaclayton commented 3 years ago

Originally in GitLab by @MaxPat931

Yea, I would say that the Bold is not quite different enough, but I think that the red Glow would be the most minimal but noticeable change, and it would be consistent with how the Inventory/Features/Spellbook/etc tabs display which one is in focus. Also since the filters Glow when hovered over, it makes sense that it would stick once clicked.

aaclayton commented 3 years ago

I don't (personally) like the side and top borders. I suppose of the different suggestsed options I prefer simply bolding the text (in addition to the emphasized bottom border), but I understand arguments that it's not noticeable enough.

aaclayton commented 3 years ago

Originally in GitLab by @MaxPat931

So something more like this?

image

I think it looks pretty good

aaclayton commented 3 years ago

I'm not personally fond of the inset, one thing we could consider is placing a faint border around the active filters so instead of just an underline they have more emphasis

aaclayton commented 3 years ago

Originally in GitLab by @MaxPat931

Why not both?

image

If the Inset (or any of the background options) is chosen, might want to include the same change to the Inventory/Features/Spellbook/etc. tabs as well

aaclayton commented 3 years ago

Originally in GitLab by @arbron

Here are a couple of more experiments:

Glow image

Inset image

aaclayton commented 3 years ago

Originally in GitLab by @MaxPat931

I think the light background is still quite subtle, but I agree it fits a bit better than the dark background. Maybe the red shadow like we see for Spellbook would be a good choice that maintains consistency?

aaclayton commented 3 years ago

Originally in GitLab by @arbron

Here are a couple of mockups I've made to see what people think:

Existing image

Bold Text image

Dark Background image

Light Background image

Color Background image

Personally, I like the way the light background looks. It helps set the selected filters apart from the others without deviating too far from the existing look of the sheet.

Fyorl commented 3 months ago

Closing this for now. We won't be making UI changes to the legacy sheets, and the v2 sheets use different filter styles now.