1
0
mirror of https://gitcode.com/gitea/gitea.git synced 2025-07-05 12:19:55 +08:00

Dont show expansion for empty actions steps ()

This hides the chevron icon and makes the step header unclickable for
skipped steps because there is no content to expand on those.

Before:

<img width="272" alt="Screenshot 2024-03-21 at 20 06 47"
src="https://github.com/go-gitea/gitea/assets/115237/9bb328d1-6f74-48a9-af19-de9b351e3707">

After:
<img width="295" alt="Screenshot 2024-03-21 at 20 03 07"
src="https://github.com/go-gitea/gitea/assets/115237/72a26e14-5a28-4606-8c3c-184b405872c8">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
2024-03-24 14:38:10 +01:00
committed by GitHub
parent f22fe4e194
commit 5bd0773741

@ -268,6 +268,10 @@ const sfc = {
return ['success', 'skipped', 'failure', 'cancelled'].includes(status); return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
}, },
isExpandable(status) {
return ['success', 'running', 'failure', 'cancelled'].includes(status);
},
closeDropdown() { closeDropdown() {
if (this.menuVisible) this.menuVisible = false; if (this.menuVisible) this.menuVisible = false;
}, },
@ -459,12 +463,12 @@ export function initRepositoryActionView() {
</div> </div>
<div class="job-step-container" ref="steps" v-if="currentJob.steps.length"> <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
<div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i"> <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
<div class="job-step-summary" @click.stop="toggleStepLogs(i)" :class="currentJobStepsStates[i].expanded ? 'selected' : ''"> <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
<!-- If the job is done and the job step log is loaded for the first time, show the loading icon <!-- 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 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="gt-mr-3 job-status-rotate"/> <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
<SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/> <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['gt-mr-3', !isExpandable(jobStep.status) && 'tw-invisible']"/>
<ActionRunStatus :status="jobStep.status" class="gt-mr-3"/> <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
<span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span> <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
@ -715,13 +719,21 @@ export function initRepositoryActionView() {
} }
.job-step-container .job-step-summary { .job-step-container .job-step-summary {
cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.job-step-container .job-step-summary.step-expandable {
cursor: pointer;
}
.job-step-container .job-step-summary.step-expandable:hover {
color: var(--color-console-fg);
background-color: var(--color-console-hover-bg);
}
.job-step-container .job-step-summary .step-summary-msg { .job-step-container .job-step-summary .step-summary-msg {
flex: 1; flex: 1;
} }
@ -730,12 +742,6 @@ export function initRepositoryActionView() {
margin-left: 16px; margin-left: 16px;
} }
.job-step-container .job-step-summary:hover {
color: var(--color-console-fg);
background-color: var(--color-console-hover-bg);
}
.job-step-container .job-step-summary.selected { .job-step-container .job-step-summary.selected {
color: var(--color-console-fg); color: var(--color-console-fg);
background-color: var(--color-console-active-bg); background-color: var(--color-console-active-bg);