From c5ed7e157915faf547506467d008fe834f7f406a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B2=81=E6=B1=80?= <131967983+lutinglt@users.noreply.github.com> Date: Sun, 2 Nov 2025 16:30:13 +0800 Subject: [PATCH] Fix circular spin animation direction (#35785) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wait for the status icon to rotate clockwise instead of counterclockwise before: ![GIF 2025-10-30 10-50-07](https://github.com/user-attachments/assets/3771b0bf-44e4-45a0-bde5-1b2b3dd8ba2a) after: ![GIF 2025-10-30 10-50-43](https://github.com/user-attachments/assets/c45307fe-39a4-4e60-b48e-9d922c407565) --------- Signed-off-by: 鲁汀 <131967983+lutinglt@users.noreply.github.com> Signed-off-by: wxiaoguang Co-authored-by: lutinglt Co-authored-by: wxiaoguang --- templates/repo/actions/status.tmpl | 2 +- templates/repo/issue/view_content/pull_merge_box.tmpl | 2 +- web_src/css/modules/animations.css | 10 ++++------ web_src/js/components/ActionRunStatus.vue | 2 +- web_src/js/components/RepoActionView.vue | 2 +- web_src/js/components/RepoCodeFrequency.vue | 2 +- web_src/js/components/RepoContributors.vue | 2 +- web_src/js/components/RepoRecentCommits.vue | 2 +- web_src/js/components/ViewFileTreeItem.vue | 2 +- 9 files changed, 12 insertions(+), 14 deletions(-) diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl index 055bc714c947c..1e5465a97fbd6 100644 --- a/templates/repo/actions/status.tmpl +++ b/templates/repo/actions/status.tmpl @@ -16,7 +16,7 @@ {{else if eq .status "blocked"}} {{svg "octicon-blocked" $size (printf "text yellow %s" $className)}} {{else if eq .status "running"}} - {{svg "gitea-running" $size (printf "text yellow circular-spin %s" $className)}} + {{svg "gitea-running" $size (printf "text yellow rotate-clockwise %s" $className)}} {{else}}{{/*failure, unknown*/}} {{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}} {{end}} diff --git a/templates/repo/issue/view_content/pull_merge_box.tmpl b/templates/repo/issue/view_content/pull_merge_box.tmpl index 4de67be698502..53375d3ab011e 100644 --- a/templates/repo/issue/view_content/pull_merge_box.tmpl +++ b/templates/repo/issue/view_content/pull_merge_box.tmpl @@ -103,7 +103,7 @@ {{template "repo/issue/view_content/update_branch_by_merge" $}} {{else if .Issue.PullRequest.IsChecking}}
- {{svg "octicon-sync" 16 "circular-spin"}} + {{svg "gitea-running" 16 "rotate-clockwise"}} {{ctx.Locale.Tr "repo.pulls.is_checking"}}
{{else if .Issue.PullRequest.IsAncestor}} diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index deaaf83680bcb..779339c46b39d 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -116,14 +116,12 @@ code.language-math.is-loading::after { animation-timing-function: ease-in-out; } -/* FIXME: `octicon-sync` is counterclockwise, so this animation is also counterclockwise, it looks somewhat strange. -Ideally in the future we should use a better image for clockwise animation. */ -.circular-spin { - animation: circular-spin-keyframes 1s linear infinite; +.rotate-clockwise { + animation: rotate-clockwise-keyframes 1s linear infinite; } -@keyframes circular-spin-keyframes { +@keyframes rotate-clockwise-keyframes { 100% { - transform: rotate(-360deg); + transform: rotate(360deg); } } diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue index 22f79384e30fa..24fae920a8bf0 100644 --- a/web_src/js/components/ActionRunStatus.vue +++ b/web_src/js/components/ActionRunStatus.vue @@ -24,7 +24,7 @@ withDefaults(defineProps<{ - + diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 24c0f5300c480..300f635793456 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -608,7 +608,7 @@ export default defineComponent({ - + diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue index 9afacbbf24948..efdf2bae713b8 100644 --- a/web_src/js/components/RepoCodeFrequency.vue +++ b/web_src/js/components/RepoCodeFrequency.vue @@ -150,7 +150,7 @@ const options: ChartOptions<'line'> = {
- + {{ locale.loadingInfo }}
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue index c3a32fe3fc462..08d63540e280b 100644 --- a/web_src/js/components/RepoContributors.vue +++ b/web_src/js/components/RepoContributors.vue @@ -381,7 +381,7 @@ export default defineComponent({
- + {{ locale.loadingInfo }}
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue index 8ca825993b2d2..39e86781d112d 100644 --- a/web_src/js/components/RepoRecentCommits.vue +++ b/web_src/js/components/RepoRecentCommits.vue @@ -128,7 +128,7 @@ const options: ChartOptions<'bar'> = {
- + {{ locale.loadingInfo }}
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue index 5173c7eb46c19..06d761dd65311 100644 --- a/web_src/js/components/ViewFileTreeItem.vue +++ b/web_src/js/components/ViewFileTreeItem.vue @@ -62,7 +62,7 @@ const onItemClick = (e: MouseEvent) => { @click.stop="onItemClick" >
- +