Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(tags): Make unreadable tags readable #9116

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

ChristophWurst
Copy link
Member

@ChristophWurst ChristophWurst commented Nov 30, 2023

Make bright on white and dark on black tag labels readable.

Before After
Bildschirmfoto vom 2023-12-01 18-14-07 Bildschirmfoto vom 2023-12-01 18-13-44

To do

  • Envelope list tags
  • Thread header tags
  • Tag modal tags

Fixes #5149

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
@ChristophWurst
Copy link
Member Author

/backport to stable3.5

@ChristophWurst
Copy link
Member Author

/backport to stable3.4

@ChristophWurst
Copy link
Member Author

cc @meichthys if you have a setup to test changes

@ChristophWurst
Copy link
Member Author

Envelope list needs a fix, too

@meichthys
Copy link

@ChristophWurst I'd be glad test, but i've always been confused on how to test these vue changes on a live instance since i can never find the .vue source files in my instance. Are these compiled or something?

How would i go about testing this?

@ChristophWurst
Copy link
Member Author

You'll need a dev env

@meichthys
Copy link

meichthys commented Nov 30, 2023

Ok, I figured as much. I'll find some time to get one setup. I've been putting it off too long anyway.

@ChristophWurst

This comment was marked as outdated.

@ChristophWurst ChristophWurst changed the title fix(tags): Invert unreadable tag labels fix(tags): Make unreadable tags readable Dec 1, 2023
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
@ChristophWurst
Copy link
Member Author

@nimishavijay pleaes see #9116 (comment). It's now always the same tag component and therefore has consistent styling. The pill radius is taken from the css variable for consistency with the rest of Nextcloud. Tags are more compact now to improve the information density.

@nimishavijay
Copy link
Member

Pill radius and height adjustment is great 🚀 I'm only not sure about the text color, the style with the colored text looked really nice! Perhaps we could use a darker version of the selected color for the text and a lighter version for the bg, what do you think?

@ChristophWurst
Copy link
Member Author

Perhaps we could use a darker version of the selected color for the text and a lighter version for the bg, what do you think?

Do you know a way to make this work with all possible RGB colors?

@nimishavijay
Copy link
Member

How about if you select a color, we use it darkened by 60% for text and lightened by 80% for bg? I used this tool to play around with it, contrast seems to be fine

Default tag colors and white and black look like this:

image

@ChristophWurst
Copy link
Member Author

Before After
Bildschirmfoto vom 2023-12-01 18-14-07 Bildschirmfoto vom 2023-12-01 18-13-44

like this?

@ChristophWurst ChristophWurst marked this pull request as ready for review December 27, 2023 12:32
@GretaD
Copy link
Contributor

GretaD commented Dec 27, 2023

I tested it with the junk tag that is autogenerated. the result is the one below. The dark theme is still shown white for me.
Screenshot from 2023-12-27 14-30-57
Screenshot from 2023-12-27 14-30-27

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Not all tags are readable due to background contrast
4 participants