Skip to content

Commit 74dfadb

Browse files
GiteaBotlutingltwxiaoguang
authored
Fix circular spin animation direction (#35785) (#35823)
Backport #35785 by @lutinglt 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) This can be merged to 1.25 Signed-off-by: 鲁汀 <131967983+lutinglt@users.noreply.github.com> Signed-off-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: 鲁汀 <131967983+lutinglt@users.noreply.github.com> Co-authored-by: lutinglt <lutinglt@users.noreply.github.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
1 parent 8ffc1fb commit 74dfadb

File tree

9 files changed

+12
-14
lines changed

9 files changed

+12
-14
lines changed

‎templates/repo/actions/status.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
{{else if eq .status "blocked"}}
1717
{{svg "octicon-blocked" $size (printf "text yellow %s" $className)}}
1818
{{else if eq .status "running"}}
19-
{{svg "gitea-running" $size (printf "text yellow circular-spin %s" $className)}}
19+
{{svg "gitea-running" $size (printf "text yellow rotate-clockwise %s" $className)}}
2020
{{else}}{{/*failure, unknown*/}}
2121
{{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}}
2222
{{end}}

‎templates/repo/issue/view_content/pull_merge_box.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
{{template "repo/issue/view_content/update_branch_by_merge" $}}
104104
{{else if .Issue.PullRequest.IsChecking}}
105105
<div class="item">
106-
{{svg "octicon-sync" 16 "circular-spin"}}
106+
{{svg "gitea-running" 16 "rotate-clockwise"}}
107107
{{ctx.Locale.Tr "repo.pulls.is_checking"}}
108108
</div>
109109
{{else if .Issue.PullRequest.IsAncestor}}

‎web_src/css/modules/animations.css‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,12 @@ code.language-math.is-loading::after {
116116
animation-timing-function: ease-in-out;
117117
}
118118

119-
/* FIXME: `octicon-sync` is counterclockwise, so this animation is also counterclockwise, it looks somewhat strange.
120-
Ideally in the future we should use a better image for clockwise animation. */
121-
.circular-spin {
122-
animation: circular-spin-keyframes 1s linear infinite;
119+
.rotate-clockwise {
120+
animation: rotate-clockwise-keyframes 1s linear infinite;
123121
}
124122

125-
@keyframes circular-spin-keyframes {
123+
@keyframes rotate-clockwise-keyframes {
126124
100% {
127-
transform: rotate(-360deg);
125+
transform: rotate(360deg);
128126
}
129127
}

‎web_src/js/components/ActionRunStatus.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ withDefaults(defineProps<{
2424
<SvgIcon name="octicon-stop" class="text grey" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
2525
<SvgIcon name="octicon-circle" class="text grey" :size="size" :class="className" v-else-if="status === 'waiting'"/>
2626
<SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
27-
<SvgIcon name="gitea-running" class="text yellow" :size="size" :class="'circular-spin ' + className" v-else-if="status === 'running'"/>
27+
<SvgIcon name="gitea-running" class="text yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
2828
<SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
2929
</span>
3030
</template>

‎web_src/js/components/RepoActionView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -608,7 +608,7 @@ export default defineComponent({
608608
<!-- If the job is done and the job step log is loaded for the first time, show the loading icon
609609
currentJobStepsStates[i].cursor === null means the log is loaded for the first time
610610
-->
611-
<SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 circular-spin"/>
611+
<SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
612612
<SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/>
613613
<ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
614614

‎web_src/js/components/RepoCodeFrequency.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ const options: ChartOptions<'line'> = {
150150
<div class="tw-flex ui segment main-graph">
151151
<div v-if="isLoading || errorText !== ''" class="tw-m-auto">
152152
<div v-if="isLoading">
153-
<SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
153+
<SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
154154
{{ locale.loadingInfo }}
155155
</div>
156156
<div v-else class="text red">

‎web_src/js/components/RepoContributors.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,7 @@ export default defineComponent({
381381
<div class="tw-flex ui segment main-graph">
382382
<div v-if="isLoading || errorText !== ''" class="tw-m-auto">
383383
<div v-if="isLoading">
384-
<SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
384+
<SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
385385
{{ locale.loadingInfo }}
386386
</div>
387387
<div v-else class="text red">

‎web_src/js/components/RepoRecentCommits.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ const options: ChartOptions<'bar'> = {
128128
<div class="tw-flex ui segment main-graph">
129129
<div v-if="isLoading || errorText !== ''" class="tw-m-auto">
130130
<div v-if="isLoading">
131-
<SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
131+
<SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
132132
{{ locale.loadingInfo }}
133133
</div>
134134
<div v-else class="text red">

‎web_src/js/components/ViewFileTreeItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const onItemClick = (e: MouseEvent) => {
6262
@click.stop="onItemClick"
6363
>
6464
<div v-if="item.entryMode === 'tree'" class="item-toggle">
65-
<SvgIcon v-if="isLoading" name="octicon-sync" class="circular-spin"/>
65+
<SvgIcon v-if="isLoading" name="gitea-running" class="rotate-clockwise"/>
6666
<SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop.prevent="doLoadChildren"/>
6767
</div>
6868
<div class="item-content">

0 commit comments

Comments
 (0)