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

Archived lable highglight via linear gradient #30376

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

Conversation

6543
Copy link
Member

@6543 6543 commented Apr 9, 2024

image
image


Sponsored by Kithara Software GmbH

@6543 6543 added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI labels Apr 9, 2024
@6543 6543 requested a review from silverwind April 9, 2024 21:03
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 9, 2024
@pull-request-size pull-request-size bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Apr 9, 2024
@silverwind
Copy link
Member

silverwind commented Apr 9, 2024

This reduce/increases contrast depending on color. I think it could be made to always increase by adding dark stripes when text is white and light stripes when text is black, but you would likely need a classname to know which variant to apply.

@6543
Copy link
Member Author

6543 commented Apr 9, 2024

will the general concept work? (Yes/NO)

@silverwind
Copy link
Member

I'm undecided. Think at least the stripes need to be wider to make an impact on these small lables, maybe 2-3px per stripe.

@silverwind
Copy link
Member

silverwind commented Apr 9, 2024

Maybe like this:

/* label with black text */
repeating-linear-gradient(-45deg, transparent, transparent 6px, #fff5 6px, #fff5 12px)

/* label with white text */
repeating-linear-gradient(-45deg, transparent, transparent 6px, #0005 6px, #0005 12px)
image

@silverwind
Copy link
Member

silverwind commented Apr 10, 2024

So yes, I think it could work. You would need to use the CSS multiple backgrounds feature, and it could either be added as inline style like current color is or with a CSS class like light-text and dark-text and if we go that route, I would also move the current inline style for color to CSS.

background: <color>, <gradient>;

@silverwind
Copy link
Member

silverwind commented Apr 10, 2024

For testing one could do a very dirty kind of CSS selector:

.archived-label[style^="color: #fff"] {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, #0005 6px, #0005 12px);
}

.archived-label[style^="color: #000"] {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, #fff5 6px, #fff5 12px);
}

@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Apr 10, 2024
@silverwind
Copy link
Member

@delvh this is not ready yet 😆.

@silverwind silverwind marked this pull request as draft April 10, 2024 20:27
@pull-request-size pull-request-size bot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Oct 7, 2024
@6543 6543 marked this pull request as ready for review October 7, 2024 09:38
@6543
Copy link
Member Author

6543 commented Oct 7, 2024

@silverwind updated screnshoot

@lunny
Copy link
Member

lunny commented Oct 23, 2024

An archived label should not have a highlight UI. It should be grey or disabled. Maybe a dashed line border is better.

@6543
Copy link
Member Author

6543 commented Oct 23, 2024

I personally am for highlighting ... as:

  1. Normaly you dont interact with them
  2. They should be easy to spot or at least differentiate
  3. we already grey out atm ... but you can not see them easily as archived ... amd completly grey is just another color of lables so thats no good indicator

@lunny
Copy link
Member

lunny commented Oct 24, 2024

I personally am for highlighting ... as:

1. Normaly you dont interact with them

2. They should be easy to spot or at least differentiate

3. we already grey out atm ... but you can not see them easily as archived ... amd completly grey is just another color of lables so thats no good indicator

Since it's archived, it should not be highlighted. Isn't it?

@6543
Copy link
Member Author

6543 commented Nov 12, 2024

in this logic we should "highlight" the normal labels ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lgtm/need 1 This PR needs approval from one additional maintainer to be merged. size/S Denotes a PR that changes 10-29 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants