diff options
| author | silverwind <me@silverwind.io> | 2024-04-07 18:19:25 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-04-07 16:19:25 +0000 |
| commit | 36887ed3921d03f1864360c95bd2ecf853bfbe72 (patch) | |
| tree | 9b61936f24674ed4ef14f21b30c8040f5e528e78 /templates/projects | |
| parent | 019857a7015cae32c12b5eac0b895c05f0264b77 (diff) | |
| download | gitea-36887ed3921d03f1864360c95bd2ecf853bfbe72.tar.gz gitea-36887ed3921d03f1864360c95bd2ecf853bfbe72.zip | |
Fix and rewrite contrast color calculation, fix project-related bugs (#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>
Diffstat (limited to 'templates/projects')
| -rw-r--r-- | templates/projects/view.tmpl | 8 |
1 files changed, 3 insertions, 5 deletions
diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index 33dd758c79..f9b85360e0 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -66,13 +66,13 @@ <div id="project-board"> <div class="board {{if .CanWriteProjects}}sortable{{end}}"> {{range .Columns}} - <div class="ui segment project-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}"> + <div class="ui segment project-column"{{if .Color}} style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}"> <div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}"> <div class="ui large label project-column-title tw-py-1"> <div class="ui small circular grey label project-column-issue-count"> {{.NumIssues ctx}} </div> - {{.Title}} + <span class="project-column-title-label">{{.Title}}</span> </div> {{if $canWriteProject}} <div class="ui dropdown jump item"> @@ -153,9 +153,7 @@ </div> {{end}} </div> - - <div class="divider"></div> - + <div class="divider"{{if .Color}} style="color: {{ContrastColor .Color}} !important"{{end}}></div> <div class="ui cards" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}"> {{range (index $.IssuesMap .ID)}} <div class="issue-card gt-word-break {{if $canWriteProject}}tw-cursor-grab{{end}}" data-issue="{{.ID}}"> |