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.

Sign up for GitHub

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

Jump to bottom

Fix and rewrite contrast color calculation, fix project-related bugs #30237

Merged
merged 34 commits into from
Apr 7, 2024
Merged

Fix and rewrite contrast color calculation, fix project-related bugs #30237

merged 34 commits into from
Apr 7, 2024

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Apr 1, 2024 •
edited
Loading

  1. The previous color contrast calculation function was incorrect at least for the #84b6eb where it output low-contrast white instead of black. I've rewritten these functions now to accept hex colors and to match GitHub's calculation and to output pure white/black for maximum contrast. Before and after:
    Screenshot 2024-04-02 at 01 53 46Screenshot 2024-04-02 at 01 51 30

  2. Fix project-related issues:

  • Expose the new ContrastColor function as template helper and use it for project cards, replacing the previous JS solution which eliminates a flash of wrong color on page load.
  • Fix a bug where if editing a project title, the counter would get lost.
  • Move rgbToHex function to color utils.

@HesterG fyi

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 1, 2024
@pull-request-size pull-request-size bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Apr 1, 2024
@silverwind silverwind added the backport/v1.22 This PR should be backported to Gitea 1.22 label Apr 1, 2024
@silverwind silverwind marked this pull request as draft April 1, 2024 23:58
@github-actions github-actions bot added modifies/go Pull requests that update Go code modifies/js labels Apr 1, 2024
@silverwind
Copy link
Member Author

I'm not exactly sure how the current formula is called but if we eventually switch it to the APCA formula it'll be good to distinguish that the passed-in color is a background color, because that formula is not symmetric:

The APCA formula requires the text color and the foreground color to be distinguished. Swapping them gives a somewhat different, and incorrect, result.

delvh
delvh reviewed Apr 2, 2024
View reviewed changes
web_src/js/utils/color.test.js Outdated Show resolved Hide resolved
modules/util/color.go Show resolved Hide resolved
@github-actions github-actions bot added the modifies/templates This PR modifies the template files label Apr 2, 2024
@silverwind silverwind marked this pull request as ready for review April 2, 2024 20:08
@silverwind
Copy link
Member Author

silverwind commented Apr 2, 2024 •
edited
Loading

Ready again. I took the opportunity to fix two more related bugs in projects:

  1. The project column color is now calculated on backend via ContrastColor helper, removing a flash of wrong text color on the projects column and removing the JS that did that before.
  2. When renaming a column, the JS would remove the issue counter because it set textContent on the wrong node. Fixed that by adding a new class name on where to set.

@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Apr 7, 2024
@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 7, 2024
@lunny lunny enabled auto-merge (squash) April 7, 2024 08:47
@wxiaoguang wxiaoguang removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 7, 2024
@wxiaoguang wxiaoguang disabled auto-merge April 7, 2024 08:47
@silverwind silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 7, 2024
@silverwind silverwind enabled auto-merge (squash) April 7, 2024 15:28
@silverwind silverwind merged commit 36887ed into go-gitea:main Apr 7, 2024
26 checks passed
@GiteaBot GiteaBot added this to the 1.23.0 milestone Apr 7, 2024
@GiteaBot
Copy link
Contributor

GiteaBot commented Apr 7, 2024

I was unable to create a backport for 1.22. @silverwind, please send one manually. 🍵

go run ./contrib/backport 30237
...  // fix git conflicts if any
go run ./contrib/backport --continue

@GiteaBot GiteaBot added backport/manual No power to the bots! Create your backport yourself! and removed reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. labels Apr 7, 2024
@silverwind silverwind deleted the labcol branch April 7, 2024 17:03
This was referenced Apr 7, 2024
Merged
Merged
zjjhot added a commit to zjjhot/gitea that referenced this pull request Apr 8, 2024
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
aa3428f 
* giteaofficial/main: (26 commits)
  Fix oauth2 builtin application logic (go-gitea#30304)
  [skip ci] Updated licenses and gitignores
  Some NuGet package enhancements (go-gitea#30280)
  Fix and rewrite contrast color calculation, fix project-related bugs (go-gitea#30237)
  Add `--page-spacing` variable, fix admin dashboard notice (go-gitea#30302)
  Action view mobile improvements and fixes (go-gitea#30309)
  Fix checkboxes on mobile view, remove some dead css (go-gitea#30308)
  Clean up log messages (go-gitea#30313)
  Fix right-aligned input icons (go-gitea#30301)
  Refactor startup deprecation messages (go-gitea#30305)
  [skip ci] Updated translations via Crowdin
  Remove fomantic list module (go-gitea#30281)
  Markup color and font size fixes (go-gitea#30282)
  Fix code block style for code preview (go-gitea#30298)
  Always use `octicon-eye` on watch button (go-gitea#30288)
  Fix view commit link (go-gitea#30297)
  Add gap to commit status details (go-gitea#30284)
  Update JS dependencies and add new eslint rules (go-gitea#30279)
  Upgrade `golang.org/x/net` to v0.24.0 (go-gitea#30283)
  Commit-Dropdown: Show Author of commit if available (go-gitea#30272)
  ...

# Conflicts:
#	templates/base/footer_content.tmpl
AvengerMoJo pushed a commit to AvengerMoJo/gitea that referenced this pull request Apr 8, 2024
@silverwind @delvh
@GiteaBot @AvengerMoJo
Fix and rewrite contrast color calculation, fix project-related bugs (g…
4975732 
…o-gitea#30237)

1. The previous color contrast calculation function was incorrect at
least for the `#84b6eb` where it output low-contrast white instead of
black. I've rewritten these functions now to accept hex colors and to
match GitHub's calculation and to output pure white/black for maximum
contrast. Before and after:
<img width="94" alt="Screenshot 2024-04-02 at 01 53 46"
src="https://github.com/go-gitea/gitea/assets/115237/00b39e15-a377-4458-95cf-ceec74b78228"><img
width="90" alt="Screenshot 2024-04-02 at 01 51 30"
src="https://github.com/go-gitea/gitea/assets/115237/1677067a-8d8f-47eb-82c0-76330deeb775">

2. Fix project-related issues:

- Expose the new `ContrastColor` function as template helper and use it
for project cards, replacing the previous JS solution which eliminates a
flash of wrong color on page load.
- Fix a bug where if editing a project title, the counter would get
lost.
- Move `rgbToHex` function to color utils.

@HesterG fyi

---------

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
silverwind added a commit that referenced this pull request Apr 9, 2024
@silverwind @GiteaBot
Fix and rewrite contrast color calculation, fix project-related bugs (#…
b8e9d3c 
…30326)

Backport #30237 to 1.22. Also
includes #30183. Both were clean
cherry-picks.

Co-authored-by: Giteabot <teabot@gitea.io>
@wxiaoguang wxiaoguang modified the milestones: 1.23.0, 1.22.0 Apr 27, 2024
@wxiaoguang wxiaoguang removed backport/manual No power to the bots! Create your backport yourself! backport/v1.22 This PR should be backported to Gitea 1.22 labels Jun 20, 2024
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Jul 7, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@delvh delvh delvh approved these changes

@wxiaoguang wxiaoguang wxiaoguang approved these changes

Assignees
No one assigned
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/go Pull requests that update Go code modifies/js modifies/templates This PR modifies the template files size/L Denotes a PR that changes 100-499 lines, ignoring generated files. type/bug
Projects
None yet
Milestone
1.22.0
Development

Successfully merging this pull request may close these issues.
5 participants
@silverwind @GiteaBot @wxiaoguang @delvh @lunny