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

Rework and fix stopwatch #30732

Merged
merged 21 commits into from
Apr 30, 2024
Merged

Rework and fix stopwatch #30732

merged 21 commits into from
Apr 30, 2024

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Apr 27, 2024 •
edited
Loading

Fixes #30721 and overhauls the stopwatch. Time is now shown inside the "dot" icon and on both mobile and desktop. All rendering is now done by <relative-time>, the pretty-ms dependency is dropped.

Desktop:
Screenshot 2024-04-29 at 22 33 27

Mobile:
Screenshot 2024-04-29 at 22 34 19

Note for tippy:
Previously, tippy instances defaulted to "menu" theme, but that theme is really only meant for .ui.menu, so it was not optimal for the stopwatch popover.

This introduces a unopinionated default theme that has no padding and should be suitable for all content. I reviewed all existing uses and explicitely set the desired theme on all of them.

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 27, 2024
@pull-request-size pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Apr 27, 2024
@github-actions github-actions bot added modifies/templates This PR modifies the template files modifies/js labels Apr 27, 2024
@silverwind silverwind added type/bug and removed modifies/templates This PR modifies the template files modifies/js labels Apr 27, 2024
@github-actions github-actions bot added modifies/templates This PR modifies the template files modifies/js labels Apr 27, 2024
@silverwind silverwind added the backport/v1.22 This PR should be backported to Gitea 1.22 label Apr 29, 2024
@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 29, 2024
@silverwind
Copy link
Member Author

Doing some more tweaks...

@pull-request-size 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 Apr 29, 2024
@silverwind
Copy link
Member Author

silverwind commented Apr 29, 2024 •
edited
Loading

Ended up reworking this whole thing to <relative-time> and moved the time into the dot so it always shows:

Screenshot 2024-04-29 at 22 33 27

@silverwind silverwind requested a review from delvh April 29, 2024 20:26
@GiteaBot GiteaBot added lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Apr 29, 2024
@lunny
Copy link
Member

lunny commented Apr 30, 2024

Looks like the time should not be translated, otherwise
image

What do these symbols translate to?

It means minutes but in English it's 1m. So I think they should not be translated. I think other languages will have the same problems.

@silverwind
Copy link
Member Author

silverwind commented Apr 30, 2024 •
edited
Loading

Yeah I guess chinese might work in the limited space available with disabled wrapping but we are probably better off not translating in this case because some languages might get too long.

@wxiaoguang
Copy link
Contributor

Could we simply fix the bug and backport, instead of introducing too many unrelated changes?

Or use a separate (simple, pure-css) fix for backporting?

@silverwind
Copy link
Member Author

silverwind commented Apr 30, 2024 •
edited
Loading

Could we simply fix the bug and backport, instead of introducing too many unrelated changes?

Or use a separate (simple, pure-css) fix for backporting?

I see this as a low-risk backport still. I did test all the other tippy instances.

@wxiaoguang
Copy link
Contributor

Could we simply fix the bug and backport, instead of introducing too many unrelated changes?
Or use a separate (simple, pure-css) fix for backporting?

I see this as a low-risk backport still. I did test all the other tippy instances.

But I can still see bugs

@silverwind
Copy link
Member Author

silverwind commented Apr 30, 2024 •
edited
Loading

Looks like the time should not be translated, otherwise
image

Fixed by setting english lang and disabling wrap:

Screenshot 2024-04-30 at 15 47 27

For the record, this is how it looked with zh-CN lang with no wrap:

Screenshot 2024-04-30 at 15 46 10

@wxiaoguang
Copy link
Contributor

I still do not think it is safe to backport.

@silverwind
Copy link
Member Author

silverwind commented Apr 30, 2024 •
edited
Loading

Even if there are issues, they would not world-breaking and I'm sure we can fix them quickly.

wxiaoguang
wxiaoguang approved these changes Apr 30, 2024
View reviewed changes
Copy link
Contributor

@wxiaoguang wxiaoguang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still I believe it should avoid unnecessary changes.

@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 30, 2024
@silverwind silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 30, 2024
@silverwind silverwind enabled auto-merge (squash) April 30, 2024 14:25
@silverwind silverwind merged commit 564102c into go-gitea:main Apr 30, 2024
26 checks passed
@GiteaBot GiteaBot added this to the 1.23.0 milestone Apr 30, 2024
GiteaBot pushed a commit to GiteaBot/gitea that referenced this pull request Apr 30, 2024
@silverwind @GiteaBot
Rework and fix stopwatch (go-gitea#30732)
b2333fa 
Fixes go-gitea#30721 and overhauls the
stopwatch. Time is now shown inside the "dot" icon and on both mobile
and desktop. All rendering is now done by `<relative-time>`, the
`pretty-ms` dependency is dropped.

Desktop:
<img width="557" alt="Screenshot 2024-04-29 at 22 33 27"
src="https://github.com/go-gitea/gitea/assets/115237/3a46cdbf-6af2-4bf9-b07f-021348badaac">

Mobile:
<img width="640" alt="Screenshot 2024-04-29 at 22 34 19"
src="https://github.com/go-gitea/gitea/assets/115237/8a2beea7-bd5d-473f-8fff-66f63fd50877">

Note for tippy:
Previously, tippy instances defaulted to "menu" theme, but that theme is
really only meant for `.ui.menu`, so it was not optimal for the
stopwatch popover.

This introduces a unopinionated `default` theme that has no padding and
should be suitable for all content. I reviewed all existing uses and
explicitely set the desired `theme` on all of them.
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 30, 2024
@GiteaBot GiteaBot mentioned this pull request Apr 30, 2024
Merged
@GiteaBot GiteaBot added the backport/done All backports for this PR have been created label Apr 30, 2024
@silverwind silverwind deleted the tippyfix branch April 30, 2024 14:53
silverwind added a commit that referenced this pull request Apr 30, 2024
@GiteaBot @silverwind
Rework and fix stopwatch (#30732) (#30787)
ab344a3 
Backport #30732 by @silverwind

Fixes #30721 and overhauls the
stopwatch. Time is now shown inside the "dot" icon and on both mobile
and desktop. All rendering is now done by `<relative-time>`, the
`pretty-ms` dependency is dropped.

Desktop:
<img width="557" alt="Screenshot 2024-04-29 at 22 33 27"
src="https://github.com/go-gitea/gitea/assets/115237/3a46cdbf-6af2-4bf9-b07f-021348badaac">

Mobile:
<img width="640" alt="Screenshot 2024-04-29 at 22 34 19"
src="https://github.com/go-gitea/gitea/assets/115237/8a2beea7-bd5d-473f-8fff-66f63fd50877">

Note for tippy:
Previously, tippy instances defaulted to "menu" theme, but that theme is
really only meant for `.ui.menu`, so it was not optimal for the
stopwatch popover.

This introduces a unopinionated `default` theme that has no padding and
should be suitable for all content. I reviewed all existing uses and
explicitely set the desired `theme` on all of them.

Co-authored-by: silverwind <[email protected]>
@wxiaoguang wxiaoguang mentioned this pull request May 2, 2024
Closed
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Jul 29, 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
backport/done All backports for this PR have been created backport/v1.22 This PR should be backported to Gitea 1.22 lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/dependencies 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.23.0
Development

Successfully merging this pull request may close these issues.

Stopwatch UI regression
5 participants
@silverwind @lunny @wxiaoguang @delvh @GiteaBot