From 4e6025a5dd0dc00fc68cea4a5ced9b2c17498e86 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Mon, 7 Apr 2025 11:27:58 +0800
Subject: [PATCH 1/8] Update ViewFileTreeItem.vue

---
 web_src/js/components/ViewFileTreeItem.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 69e26dbc33a15..96608d3d0f066 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -58,7 +58,7 @@ const doGotoSubModule = () => {
   >
     <!-- submodule -->
     <div class="item-content">
-      <SvgIcon class="text primary" name="octicon-file-submodule"/>
+      <span class="text primary content" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -70,7 +70,7 @@ const doGotoSubModule = () => {
   >
     <!-- symlink -->
     <div class="item-content">
-      <SvgIcon name="octicon-file-symlink-file"/>
+      <span class="text primary content" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -83,7 +83,7 @@ const doGotoSubModule = () => {
     <!-- file -->
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-html="item.entryIcon"/>
+      <span class="text primary content" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -101,7 +101,7 @@ const doGotoSubModule = () => {
     </div>
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span class="text primary" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
+      <span class="text primary content" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
       <span class="gt-ellipsis">{{ item.entryName }}</span>
     </div>
   </div>
@@ -158,4 +158,8 @@ const doGotoSubModule = () => {
   text-overflow: ellipsis;
   min-width: 0;
 }
+
+.item-content .content {
+  display: contents;
+}
 </style>

From 2b15fdd46b35bb20d90e2f1c5ab8aa4c31e84367 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Mon, 7 Apr 2025 05:47:51 +0000
Subject: [PATCH 2/8] fix

---
 web_src/css/base.css                       | 11 +++++++++++
 web_src/css/repo/home-file-list.css        | 11 -----------
 web_src/js/components/ViewFileTreeItem.vue | 12 +++++++-----
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index de656c0d958cd..e52ec986d017e 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1181,3 +1181,14 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
   flex-grow: 1;
   justify-content: space-between;
 }
+
+.svg.octicon-file-directory-fill,
+.svg.octicon-file-submodule {
+  color: var(--color-primary);
+}
+
+.svg.octicon-file,
+.svg.octicon-file-symlink-file,
+.svg.octicon-file-directory-symlink {
+  color: var(--color-secondary-dark-7);
+}
diff --git a/web_src/css/repo/home-file-list.css b/web_src/css/repo/home-file-list.css
index 46128457ede6a..f2ab052a54cf2 100644
--- a/web_src/css/repo/home-file-list.css
+++ b/web_src/css/repo/home-file-list.css
@@ -14,17 +14,6 @@
   }
 }
 
-#repo-files-table .svg.octicon-file-directory-fill,
-#repo-files-table .svg.octicon-file-submodule {
-  color: var(--color-primary);
-}
-
-#repo-files-table .svg.octicon-file,
-#repo-files-table .svg.octicon-file-symlink-file,
-#repo-files-table .svg.octicon-file-directory-symlink {
-  color: var(--color-secondary-dark-7);
-}
-
 #repo-files-table .repo-file-item {
   display: contents;
 }
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 96608d3d0f066..14442d0bb6972 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -58,7 +58,8 @@ const doGotoSubModule = () => {
   >
     <!-- submodule -->
     <div class="item-content">
-      <span class="text primary content" v-html="item.entryIcon"/>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span class="contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -70,7 +71,8 @@ const doGotoSubModule = () => {
   >
     <!-- symlink -->
     <div class="item-content">
-      <span class="text primary content" v-html="item.entryIcon"/>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span class="contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -83,7 +85,7 @@ const doGotoSubModule = () => {
     <!-- file -->
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span class="text primary content" v-html="item.entryIcon"/>
+      <span class="contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -101,7 +103,7 @@ const doGotoSubModule = () => {
     </div>
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span class="text primary content" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
+      <span class="contents" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
       <span class="gt-ellipsis">{{ item.entryName }}</span>
     </div>
   </div>
@@ -159,7 +161,7 @@ const doGotoSubModule = () => {
   min-width: 0;
 }
 
-.item-content .content {
+.item-content .contents {
   display: contents;
 }
 </style>

From 7008c0e2b247861fe9f499afea672c2abb3f45e5 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Mon, 7 Apr 2025 05:59:26 +0000
Subject: [PATCH 3/8] fix

---
 web_src/js/components/ViewFileTreeItem.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 14442d0bb6972..7bf2de9b797d0 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -59,7 +59,7 @@ const doGotoSubModule = () => {
     <!-- submodule -->
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span class="contents" v-html="item.entryIcon"/>
+      <span class="tw-contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -72,7 +72,7 @@ const doGotoSubModule = () => {
     <!-- symlink -->
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span class="contents" v-html="item.entryIcon"/>
+      <span class="tw-contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -85,7 +85,7 @@ const doGotoSubModule = () => {
     <!-- file -->
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span class="contents" v-html="item.entryIcon"/>
+      <span class="tw-contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
@@ -103,7 +103,7 @@ const doGotoSubModule = () => {
     </div>
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span class="contents" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
+      <span class="tw-contents" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
       <span class="gt-ellipsis">{{ item.entryName }}</span>
     </div>
   </div>
@@ -160,8 +160,4 @@ const doGotoSubModule = () => {
   text-overflow: ellipsis;
   min-width: 0;
 }
-
-.item-content .contents {
-  display: contents;
-}
 </style>

From 0715057ef72095f9e865111a39c81f2715fda5fa Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Mon, 7 Apr 2025 06:58:57 +0000
Subject: [PATCH 4/8] Extract job-status-rotate to global circular-spin
 animation class

---
 templates/repo/actions/status.tmpl          |  2 +-
 web_src/css/base.css                        | 10 ++++++++++
 web_src/js/components/ActionRunStatus.vue   |  2 +-
 web_src/js/components/RepoActionView.vue    | 13 +------------
 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  |  3 +--
 8 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl
index 64c25433028d8..f2020bc160f69 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 "octicon-meter" $size (printf "text yellow job-status-rotate %s" $className)}}
+	{{svg "octicon-meter" $size (printf "text yellow circular-spin %s" $className)}}
 {{else}}{{/*failure, unknown*/}}
 	{{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}}
 {{end}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index e52ec986d017e..8c60eac4449f2 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1192,3 +1192,13 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
 .svg.octicon-file-directory-symlink {
   color: var(--color-secondary-dark-7);
 }
+
+.circular-spin {
+  animation: circular-spin-keyframes 1s linear infinite;
+}
+
+@keyframes circular-spin-keyframes {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index 487d2460cc8f1..bc3b99ab893e3 100644
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -24,7 +24,7 @@ withDefaults(defineProps<{
     <SvgIcon name="octicon-stop" class="text yellow" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
     <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class="className" v-else-if="status === 'waiting'"/>
     <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
-    <SvgIcon name="octicon-meter" class="text yellow" :size="size" :class="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
+    <SvgIcon name="octicon-meter" class="text yellow" :size="size" :class="'circular-spin ' + className" v-else-if="status === 'running'"/>
     <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
   </span>
 </template>
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 640ad8341fafe..839083633860e 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -574,7 +574,7 @@ export default defineComponent({
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
-              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 job-status-rotate"/>
+              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 circular-spin"/>
               <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
 
@@ -895,17 +895,6 @@ export default defineComponent({
 </style>
 
 <style> /* eslint-disable-line vue-scoped-css/enforce-style-type */
-/* some elements are not managed by vue, so we need to use global style */
-.job-status-rotate {
-  animation: job-status-rotate-keyframes 1s linear infinite;
-}
-
-@keyframes job-status-rotate-keyframes {
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-
 .job-step-section {
   margin: 10px;
 }
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index 7696996cf6e6b..f04fc065b6f09 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -150,7 +150,7 @@ const options: ChartOptions<'line'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 job-status-rotate"/>
+          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 6ad2c848b1702..b725f272a70e5 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -375,7 +375,7 @@ export default defineComponent({
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 job-status-rotate"/>
+          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 10e1fdd70ce12..1b3d8fd459003 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -128,7 +128,7 @@ const options: ChartOptions<'bar'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 job-status-rotate"/>
+          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 7bf2de9b797d0..8bbb78d56e4a6 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -97,8 +97,7 @@ const doGotoSubModule = () => {
   >
     <!-- directory -->
     <div class="item-toggle">
-      <!-- FIXME: use a general and global class for this animation -->
-      <SvgIcon v-if="isLoading" name="octicon-sync" class="job-status-rotate"/>
+      <SvgIcon v-if="isLoading" name="octicon-sync" class="circular-spin"/>
       <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop="doLoadChildren"/>
     </div>
     <div class="item-content">

From 10e3c0b1fd99f4ac0749252e8f5b3b6e65cf3e1d Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Mon, 7 Apr 2025 07:09:14 +0000
Subject: [PATCH 5/8] fix

---
 web_src/css/base.css                     | 10 ----------
 web_src/css/modules/animations.css       | 10 ++++++++++
 web_src/js/components/RepoActionView.vue |  1 +
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 8c60eac4449f2..e52ec986d017e 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1192,13 +1192,3 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
 .svg.octicon-file-directory-symlink {
   color: var(--color-secondary-dark-7);
 }
-
-.circular-spin {
-  animation: circular-spin-keyframes 1s linear infinite;
-}
-
-@keyframes circular-spin-keyframes {
-  100% {
-    transform: rotate(-360deg);
-  }
-}
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 481e997d4fcd0..173ca733149a5 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -116,3 +116,13 @@ code.language-math.is-loading::after {
   animation-duration: 100ms;
   animation-timing-function: ease-in-out;
 }
+
+.circular-spin {
+  animation: circular-spin-keyframes 1s linear infinite;
+}
+
+@keyframes circular-spin-keyframes {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 839083633860e..5a4c22bc9007c 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -895,6 +895,7 @@ export default defineComponent({
 </style>
 
 <style> /* eslint-disable-line vue-scoped-css/enforce-style-type */
+/* some elements are not managed by vue, so we need to use global style */
 .job-step-section {
   margin: 10px;
 }

From d49eb9f2cc5dcf679c5586f3642703ca2d8de7b0 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Wed, 9 Apr 2025 09:38:30 +0800
Subject: [PATCH 6/8] Update web_src/css/base.css

Co-authored-by: silverwind <me@silverwind.io>
---
 web_src/css/base.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index e52ec986d017e..5a0579f356dc5 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1183,6 +1183,7 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
 }
 
 .svg.octicon-file-directory-fill,
+.svg.octicon-file-directory-open-fill,
 .svg.octicon-file-submodule {
   color: var(--color-primary);
 }

From 10686997d38954e14167ca1ca91cd64496ca7dae Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Wed, 9 Apr 2025 01:42:12 +0000
Subject: [PATCH 7/8] fix

---
 web_src/js/components/ViewFileTreeItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 8bbb78d56e4a6..ef4dda3960891 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -134,7 +134,7 @@ const doGotoSubModule = () => {
   display: grid;
   grid-template-columns: 16px 1fr;
   grid-template-areas: "toggle content";
-  gap: 0.25em;
+  gap: 0.5em;
   padding: 6px;
 }
 

From 780fead919cc7665fc110bc34ccaa6f3586c1bf1 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Wed, 9 Apr 2025 01:42:57 +0000
Subject: [PATCH 8/8] fix

---
 web_src/js/components/ViewFileTreeItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index ef4dda3960891..c39fa1f4aef16 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -134,7 +134,7 @@ const doGotoSubModule = () => {
   display: grid;
   grid-template-columns: 16px 1fr;
   grid-template-areas: "toggle content";
-  gap: 0.5em;
+  gap: 0.25em;
   padding: 6px;
 }
 
@@ -155,7 +155,7 @@ const doGotoSubModule = () => {
   grid-area: content;
   display: flex;
   align-items: center;
-  gap: 0.25em;
+  gap: 0.5em;
   text-overflow: ellipsis;
   min-width: 0;
 }