Add `Hide/Show all checks` button to commit status check #26284

yp05327 · 2023-08-02T01:47:06Z

Step one for a GitHub like commit status check ui:

Step two:

The design now will list all commit status checks which takes too much space.
This is a pre-improve for #26247

yp05327 · 2023-08-02T07:33:43Z

If there's only one commit status, there's no scrollbar. But if I click hide all checks, the scrollbar will disappear during the animation.🤔

Edited:
GitHub has the same problem:
yp05327/test2#4

yp05327 · 2023-08-02T07:54:45Z

And there's two border lines here. 🤔

Edited:
Maybe fixed in 97e60b3

a1012112796 · 2023-08-02T08:30:24Z

looks we should consider about the poping up list ui also.

yp05327 · 2023-08-02T08:36:16Z

looks we should consider about the poping up list ui also.

Yeah, this is step two, and I wish I can also fix #25279 in step two. (But I'm not good at frontend 😢)

Edited:
Emm, the improve of this has been also added into this PR.

yp05327 · 2023-08-03T01:35:15Z

It seems that it is possible to reuse the template here: (not push the changes yet, just having a try)

yp05327 · 2023-08-03T06:06:56Z

@silverwind

Can I change the max-width in L9 directly? It seems that this comes from tippy, not sure whether we can change it manually.

It seems that it is not correct, it should be at least -15px:
this will cause a horizontal scrollbar

And it will disappear if I change it to -15px.
URL: https://gitea.com/yp05327/testrepo/branches

silverwind · 2023-08-04T13:48:46Z

It is a original tippy.js rule:

https://github.com/atomiks/tippyjs/blob/ad85f6feb79cf6c5853c43bf1b2a50c4fa98e7a1/src/scss/index.scss#L6-L8

It seems to be a way to prevent a tippy instances from becoming wider than the page, and therefore go partially off-screen. It should not influence such dropdowns that are not nearly as wide as the page (vw unit is based on page width).

I think your issue is related to something different than that rule.

templates/repo/pulls/status.tmpl

web_src/js/features/repo-issue-pr-status.js

templates/repo/commit_statuses.tmpl

templates/repo/issue/view_content/pull.tmpl

templates/repo/pulls/status.tmpl

Co-authored-by: delvh <dev.lh@web.de>

silverwind · 2023-11-02T11:03:03Z

It's supposed to look like this:

But currently it's:

Don't know how the class is related to truncation but it definitely changes it.

Rendering should be exactly the same in popup and PR view, so a shared style would be prefferred.

wxiaoguang · 2023-11-02T11:15:20Z

It looks right on my side:

silverwind · 2023-11-02T11:16:28Z

It's right in the PR page but not in the popup because of the missing parent class.

wxiaoguang · 2023-11-02T11:37:08Z

It's right in the PR page but not in the popup because of the missing parent class.

It's not related to .ui.segment, but it is a bad design from .ui .text.truncate. If there is no .ui on parent class, the text truncate is a no-op.

Clarifying the root problem would always help the code quality.

silverwind · 2023-11-02T11:38:35Z

We should replace it with gt-ellipsis, ideally later replace all .text.truncate with it.

wxiaoguang · 2023-11-02T11:46:13Z

And there was another bug in code: the newly added .status-context display:flex is also a no-op, because the old .ui.segment also override its style.

I remove some styles of the status-context class, they are not needed either. The "text color" problem is also fixed.

silverwind · 2023-11-02T12:42:29Z

The background color of .commit-status-panel is still incorrect in the popup, it should be var(--color-box-body) which previously came from .ui.attached.segment but is now missing.

wxiaoguang · 2023-11-02T12:59:57Z

it should be var(--color-box-body)

Why not use var(--color-box-body) as the tippy's default background color?

silverwind · 2023-11-02T13:12:15Z

it should be var(--color-box-body)

Why not use var(--color-box-body) as the tippy's default background color?

We can do this for the box-with-header theme.

Edit: done in 5b8a735.

silverwind · 2023-11-02T13:46:47Z

@wxiaoguang unblock?

* upstream/main: Refactor Find Sources and fix bug when view a user who belongs to an unactive auth source (go-gitea#27798) [skip ci] Updated translations via Crowdin Add `Hide/Show all checks` button to commit status check (go-gitea#26284) Fix http protocol auth (go-gitea#27875) Display issue task list on project cards (go-gitea#27865) Reduce margin/padding on flex-list items and divider (go-gitea#27872)

) Step one for a GitHub like commit status check ui: ![image](https://github.com/go-gitea/gitea/assets/18380374/22953b88-1f91-4d19-bc57-ad92d33fa11f) ![image](https://github.com/go-gitea/gitea/assets/18380374/78572a49-c9b0-472b-86a8-8293197e807b) ![image](https://github.com/go-gitea/gitea/assets/18380374/bc5c8d1c-2ab5-4b03-b8c6-20c34b86d856) Step two: ![image](https://github.com/go-gitea/gitea/assets/18380374/938b359e-8823-4192-b82d-55fa40b986fd) ![image](https://github.com/go-gitea/gitea/assets/18380374/2de5bb8f-40f5-462a-8d6d-bac13a32bc2a) The design now will list all commit status checks which takes too much space. This is a pre-improve for go-gitea#26247 --------- Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

improve

7f433d2

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Aug 2, 2023

pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Aug 2, 2023

yp05327 added the topic/ui Change the appearance of the Gitea UI label Aug 2, 2023

yp05327 added 3 commits August 2, 2023 04:27

fix lint

b56220e

improve

5303f8f

improve

bd2214f

improve

97e60b3

improve tiddy commit status

4a189a5

pull-request-size bot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. and removed size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Aug 3, 2023

Merge branch 'main' into improve-commit-status-ui

5efcc51

delvh reviewed Sep 27, 2023

View reviewed changes

yp05327 and others added 6 commits September 28, 2023 02:13

convert to ctx.Locale.Tr

a2cf202

Update web_src/js/features/repo-issue-pr-status.js

711c2f8

Co-authored-by: delvh <dev.lh@web.de>

Update templates/repo/commit_statuses.tmpl

aead5a5

Co-authored-by: delvh <dev.lh@web.de>

Update templates/repo/issue/view_content/pull.tmpl

339dad1

Co-authored-by: delvh <dev.lh@web.de>

Merge branch 'main' into improve-commit-status-ui

6c38900

rename IsTippy into IsPopup

e8ddbc9

yp05327 force-pushed the improve-commit-status-ui branch from 37006a2 to e8ddbc9 Compare September 28, 2023 02:35

delvh approved these changes Sep 28, 2023

View reviewed changes

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 Sep 28, 2023

wxiaoguang force-pushed the improve-commit-status-ui branch from 14c9688 to 46e528b Compare November 2, 2023 11:53

fix

a5f5953

wxiaoguang force-pushed the improve-commit-status-ui branch from 46e528b to a5f5953 Compare November 2, 2023 11:55

add background color to box-with-header theme

5b8a735

silverwind approved these changes Nov 2, 2023

View reviewed changes

update comment

222faec

wxiaoguang approved these changes Nov 2, 2023

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged labels Nov 2, 2023

silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Nov 2, 2023

silverwind enabled auto-merge (squash) November 2, 2023 14:09

Merge branch 'main' into improve-commit-status-ui

0bf56ed

silverwind merged commit dcb648e into go-gitea:main Nov 2, 2023
25 checks passed

GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Nov 2, 2023

yp05327 deleted the improve-commit-status-ui branch November 6, 2023 00:49

lng2020 mentioned this pull request Nov 6, 2023

After hiding and unhiding commit checks, there are only four checks available #27928

Closed

yp05327 mentioned this pull request Nov 15, 2023

Some problem about commit status #25279

Closed

go-gitea locked as resolved and limited conversation to collaborators Jan 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `Hide/Show all checks` button to commit status check #26284

Add `Hide/Show all checks` button to commit status check #26284

yp05327 commented Aug 2, 2023 •

edited

yp05327 commented Aug 2, 2023 •

edited

yp05327 commented Aug 2, 2023 •

edited

a1012112796 commented Aug 2, 2023

yp05327 commented Aug 2, 2023 •

edited

yp05327 commented Aug 3, 2023

yp05327 commented Aug 3, 2023 •

edited

silverwind commented Aug 4, 2023 •

edited

silverwind commented Nov 2, 2023 •

edited

wxiaoguang commented Nov 2, 2023

silverwind commented Nov 2, 2023 •

edited

wxiaoguang commented Nov 2, 2023

silverwind commented Nov 2, 2023 •

edited

wxiaoguang commented Nov 2, 2023 •

edited

silverwind commented Nov 2, 2023

wxiaoguang commented Nov 2, 2023

silverwind commented Nov 2, 2023 •

edited

silverwind commented Nov 2, 2023

Add Hide/Show all checks button to commit status check #26284

Add Hide/Show all checks button to commit status check #26284

Conversation

yp05327 commented Aug 2, 2023 • edited

yp05327 commented Aug 2, 2023 • edited

yp05327 commented Aug 2, 2023 • edited

a1012112796 commented Aug 2, 2023

yp05327 commented Aug 2, 2023 • edited

yp05327 commented Aug 3, 2023

yp05327 commented Aug 3, 2023 • edited

silverwind commented Aug 4, 2023 • edited

silverwind commented Nov 2, 2023 • edited

wxiaoguang commented Nov 2, 2023

silverwind commented Nov 2, 2023 • edited

wxiaoguang commented Nov 2, 2023

silverwind commented Nov 2, 2023 • edited

wxiaoguang commented Nov 2, 2023 • edited

silverwind commented Nov 2, 2023

wxiaoguang commented Nov 2, 2023

silverwind commented Nov 2, 2023 • edited

silverwind commented Nov 2, 2023

Add `Hide/Show all checks` button to commit status check #26284

Add `Hide/Show all checks` button to commit status check #26284

yp05327 commented Aug 2, 2023 •

edited

yp05327 commented Aug 2, 2023 •

edited

yp05327 commented Aug 2, 2023 •

edited

yp05327 commented Aug 2, 2023 •

edited

yp05327 commented Aug 3, 2023 •

edited

silverwind commented Aug 4, 2023 •

edited

silverwind commented Nov 2, 2023 •

edited

silverwind commented Nov 2, 2023 •

edited

silverwind commented Nov 2, 2023 •

edited

wxiaoguang commented Nov 2, 2023 •

edited

silverwind commented Nov 2, 2023 •

edited