-
-
Notifications
You must be signed in to change notification settings - Fork 5.7k
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
Transparency in project boards stops javascript due to kanban sorting. #22091
Comments
lunny
added a commit
that referenced
this issue
Dec 21, 2022
…2091) (#22092) As described in the linked issue (#22091), semi-transparent UI elements would result in JS errors due to the fact that the CSS `backgroundColor` element was being matched by the pattern `^rgb\((\d+),\s*(\d+),\s*(\d+)\)$`, which does not take the alpha channel into account. I changed the pattern to `^rgba?\((\d+),\s*(\d+),\s*(\d+).*\)$`. This new pattern accepts both `rgb` and `rgba` tuples, and ignores the alpha channel (that little `.*` at the end) from the sorting criteria. The reason why I chose to ignore alpha is because when it comes to kanban colour sorting, only the hue is important; the order of the panels should stay the same, even if some of them are transparent. Alternative solutions were discussed in the bug report and are included here for completeness: 1. Change the regex from ^rgb\((\d+),\s*(\d+),\s*(\d+)\)$ to ^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*(\d+(\.\d+)?))?\)$ (alpha channel is a float or NaN on 5th group) and include the alpha channel in the sorting criteria. 2. Rethink on why you're reading colours out of the CSS in the first place, then reformat this sorting procedure. Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
zjjhot
added a commit
to zjjhot/gitea
that referenced
this issue
Dec 23, 2022
* giteaoffical/main: (32 commits) Hide file borders on sticky diff box (go-gitea#22217) Test views of LFS files (go-gitea#22196) update docs latest to 1.17.4 Frontport 1.17.4 changelog (go-gitea#22216) Remove test session cache to reduce possible concurrent problem (go-gitea#22199) Upgrade hugo to 0.82 (go-gitea#22209) Fix container layer display overflow (go-gitea#22208) Run hugo via `go run` and lock its version (go-gitea#22206) Update bleve and zapx to fix unaligned atomic (go-gitea#22031) Allow empty assignees on pull request edit (go-gitea#22150) Add Feed for Releases and Tags (go-gitea#21696) fix: update libcurl in docs pipeline (go-gitea#22203) Fixed colour transparency regex matching in project board sorting (go-gitea#22091) (go-gitea#22092) Mobile fix for Project view: Add delay to Sortable.js on mobile, to ensure scrolling is possible. (go-gitea#22152) Normalize NuGet package version on upload (go-gitea#22186) Attempt to fix TestExportUserGPGKeys (go-gitea#22159) Specify ID in `TestAPITeam` (go-gitea#22192) Repair LFS web rendering. (go-gitea#22195) Fix misc whitespace issues in install docs (go-gitea#22189) Update JS dependencies and eslint (go-gitea#22190) ...
zeripath
pushed a commit
to zeripath/gitea
that referenced
this issue
Jan 13, 2023
…-gitea#22091) (go-gitea#22092) Backport go-gitea#22092 As described in the linked issue (go-gitea#22091), semi-transparent UI elements would result in JS errors due to the fact that the CSS `backgroundColor` element was being matched by the pattern `^rgb\((\d+),\s*(\d+),\s*(\d+)\)$`, which does not take the alpha channel into account. I changed the pattern to `^rgba?\((\d+),\s*(\d+),\s*(\d+).*\)$`. This new pattern accepts both `rgb` and `rgba` tuples, and ignores the alpha channel (that little `.*` at the end) from the sorting criteria. The reason why I chose to ignore alpha is because when it comes to kanban colour sorting, only the hue is important; the order of the panels should stay the same, even if some of them are transparent. Alternative solutions were discussed in the bug report and are included here for completeness: 1. Change the regex from ^rgb\((\d+),\s*(\d+),\s*(\d+)\)$ to ^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*(\d+(\.\d+)?))?\)$ (alpha channel is a float or NaN on 5th group) and include the alpha channel in the sorting criteria. 2. Rethink on why you're reading colours out of the CSS in the first place, then reformat this sorting procedure. Fix go-gitea#22091 Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
zeripath
added a commit
that referenced
this issue
Jan 15, 2023
…2092) (#22437) Backport #22092 As described in the linked issue (#22091), semi-transparent UI elements would result in JS errors due to the fact that the CSS `backgroundColor` element was being matched by the pattern `^rgb\((\d+),\s*(\d+),\s*(\d+)\)$`, which does not take the alpha channel into account. I changed the pattern to `^rgba?\((\d+),\s*(\d+),\s*(\d+).*\)$`. This new pattern accepts both `rgb` and `rgba` tuples, and ignores the alpha channel (that little `.*` at the end) from the sorting criteria. The reason why I chose to ignore alpha is because when it comes to kanban colour sorting, only the hue is important; the order of the panels should stay the same, even if some of them are transparent. Alternative solutions were discussed in the bug report and are included here for completeness: 1. Change the regex from ^rgb\((\d+),\s*(\d+),\s*(\d+)\)$ to ^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*(\d+(\.\d+)?))?\)$ (alpha channel is a float or NaN on 5th group) and include the alpha channel in the sorting criteria. 2. Rethink on why you're reading colours out of the CSS in the first place, then reformat this sorting procedure. Fix #22091 Co-authored-by: MisterCavespider <deler.urist@tutanota.de>
Fixed in #22092. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Description
When using a theme that contains semi-transparent backgrounds for UI elements, Gitea will throw a JS error due to the way the cards are sorted (see screenshot 1).
Due to this JS error, most functionality dependent on JS fails, such as edit or delete buttons.
The error (in the source code) leads to the file
web_src/js/features/repo-projects.js
, lines59
and203
.The error occurs because of the following reasons:
background-color: rgba(0, 0, 0, 0.15);
, for example.repo_projects.js
wants to sort cards by colour.rgb(x, y, z)
, which does not take into account that themes may define colours asrgba(x, y, z, a)
.Proposed Solutions
^rgb\((\d+),\s*(\d+),\s*(\d+)\)$
to^rgba?\((\d+),\s*(\d+),\s*(\d+)(.*)?\)$
and ignore the alpha channel from the sorting criteria.^rgb\((\d+),\s*(\d+),\s*(\d+)\)$
to^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*(\d+(\.\d+)?))?\)$
(alpha channel is a float orNaN
on 5th group) and include the alpha channel in the sorting criteria.History
Going back in the git history, this bug was implemented in commit ecfac78 with merge request #16647 on 17/08/2021 in order to get Kanban colour sorting.
Reproduce
data/gitea/templates/custom/body_outer_pre.tmpl
with body:data/gitea/conf/app.ini
:.ui.segment { background: rgba(0, 0, 0, 0.28) !important; }
.Projects
tab, and open a project.Gitea Version
latest, v1.9.6
Can you reproduce the bug on the Gitea demo site?
Yes
Log Gist
No response
Screenshots
Screenshot 1 (JavaScript error)

Screenshot 2 (Semi-transparent UI elements)

Git Version
No response
Operating System
default docker image; Void Linux on
Linux m-desktop 6.0.10_1 #1 SMP PREEMPT_DYNAMIC Mon Nov 28 03:42:58 UTC 2022 x86_64 GNU/Linux
How are you running Gitea?
This issue can be replicated on both the default Docker image and when building Gitea from source.
Database
None
The text was updated successfully, but these errors were encountered: