Applied-Software/gitea
5
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-04-12 10:48:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix vertical centering of file tree icons and use entryIcon for submodules/symlinks (#34137)

Browse Source 
In the file tree, the icons are not vertically centered, which affects
the overall visual consistency.
Currently, the icons of submodules and symlinks do not adopt the value
of entryIcon, resulting in inconsistent icon display.

before:
![3000-gogitea-gitea-y4ulxr46c4k ws-us118 gitpod io_test_test
gitea_src_branch_main_README md
(3)](https://github.com/user-attachments/assets/d521b89f-909a-43f9-8f39-787b0243b159)

after:
![3000-gogitea-gitea-y4ulxr46c4k ws-us118 gitpod io_test_test
gitea_src_branch_main_README md
(2)](https://github.com/user-attachments/assets/4866807f-c890-4709-b595-7086011e5231)

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Kerwin Bryant
2025-04-10 09:10:16 +08:00
committed by GitHub
parent fac6b87dd2
commit 02e49a0f47
10 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/actions/status.tmpl
View File

@ -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}}

12
web_src/css/base.css
View File

@ -1181,3 +1181,15 @@ 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-directory-open-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);
}

10
web_src/css/modules/animations.css
View File

@ -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);
}
}

11
web_src/css/repo/home-file-list.css
View File

@ -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;
}

2
web_src/js/components/ActionRunStatus.vue
View File

@ -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>

12
web_src/js/components/RepoActionView.vue
View File

@ -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"/>
@ -896,16 +896,6 @@ export default defineComponent({
<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;
}

2
web_src/js/components/RepoCodeFrequency.vue
View File

@ -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">

2
web_src/js/components/RepoContributors.vue
View File

@ -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">

2
web_src/js/components/RepoRecentCommits.vue
View File

@ -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">

15
web_src/js/components/ViewFileTreeItem.vue
View File

@ -58,7 +58,8 @@ const doGotoSubModule = () => {
>
<!-- submodule -->
<div class="item-content">
<SvgIcon class="text primary" name="octicon-file-submodule"/>
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="tw-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">
<SvgIcon name="octicon-file-symlink-file"/>
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="tw-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 v-html="item.entryIcon"/>
<span class="tw-contents" v-html="item.entryIcon"/>
<span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
</div>
</div>
@ -95,13 +97,12 @@ 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">
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="text primary" 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>
@ -154,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;
}