yan/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-04-21 18:24:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Enhance styling in actions page (#37323)

Browse Source 
- Adjust workflow graph for better visualization
- change summary icon to home icon
- use octicon-file-removed for expired artifacts
This commit is contained in:
Nicolas
2026-04-21 09:22:11 +02:00
committed by GitHub
parent 63db5972a1
commit 3db3127655
4 changed files with 44 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
routers/web/devtest/mock_actions.go
View File

@@ -126,10 +126,10 @@ func MockActionsRunsJobs(ctx *context.Context) {
resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
ID: runID * 10,
JobID: "job-100",
Name: "job 100",
Name: "job 100 (testsubname)",
Status: actions_model.StatusRunning.String(),
CanRerun: true,
Duration: "1h",
Duration: "1h23m45s",
})
resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
ID: runID*10 + 1,

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

@@ -95,7 +95,7 @@ async function deleteArtifact(name: string) {
<div class="action-view-left">
<!-- summary -->
<a class="job-brief-item silenced" :href="run.link" :class="!props.jobId ? 'selected' : ''">
<SvgIcon name="octicon-list-unordered"/>
<SvgIcon name="octicon-home"/>
<span class="gt-ellipsis">{{ locale.summary }}</span>
</a>
@@ -136,7 +136,7 @@ async function deleteArtifact(name: string) {
</a>
</template>
<span v-else class="flex-text-block tw-flex-1 tw-text-text-light-2">
<SvgIcon name="octicon-file"/>
<SvgIcon name="octicon-file-removed"/>
<span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
<span class="ui label tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
</span>

63
web_src/js/components/WorkflowGraph.vue
View File

@@ -83,9 +83,11 @@ const saveState = () => {
localUserSettings.setJsonObject(settingKeyStates, Object.fromEntries(sortedStates));
};
const minNodeWidth = 168;
const maxNodeWidth = 232;
const nodeWidth = computed(() => {
const maxNameLength = Math.max(...props.jobs.map(j => j.name.length));
return Math.min(Math.max(140, maxNameLength * 8), 180);
const maxNameLength = Math.max(...props.jobs.map(j => j.name.length), 0);
return Math.min(Math.max(minNodeWidth, maxNameLength * 8), maxNodeWidth);
});
const horizontalSpacing = computed(() => nodeWidth.value + 84);
@@ -342,8 +344,8 @@ const graphMetrics = computed(() => {
};
})
const nodeHeight = 48;
const verticalSpacing = 88;
const nodeHeight = 52;
const verticalSpacing = 90;
const margin = 40;
const minScale = 0.3;
@@ -589,7 +591,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
:d="edge.path"
fill="none"
stroke="var(--color-secondary-alpha-50)"
stroke-width="1.75"
stroke-width="1.5"
:class="['node-edge', { 'highlighted-edge': isEdgeHighlighted(edge) }]"
/>
@@ -608,10 +610,10 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
:y="job.y"
:width="nodeWidth"
:height="nodeHeight"
rx="10"
fill="var(--color-button)"
stroke="var(--color-light-border)"
stroke-width="1.25"
rx="8"
fill="var(--color-box-body)"
stroke="var(--color-secondary)"
stroke-width="1"
class="job-rect"
/>
@@ -619,7 +621,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
v-if="nodesWithIncomingEdge.has(job.id)"
:cx="job.x"
:cy="job.y + nodeHeight / 2"
r="6"
r="4.5"
class="node-port"
/>
@@ -627,13 +629,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
v-if="nodesWithOutgoingEdge.has(job.id)"
:cx="job.x + nodeWidth"
:cy="job.y + nodeHeight / 2"
r="6"
r="4.5"
class="node-port"
/>
<foreignObject
:x="job.x + 10"
:y="job.y + 14"
:y="job.y + 16"
width="20"
height="20"
class="job-status-fg-obj"
@@ -644,10 +646,10 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
</foreignObject>
<foreignObject
:x="job.x + 36"
:y="job.y"
:width="nodeWidth - 40"
:height="nodeHeight"
:x="job.x + 38"
:y="job.y + 2"
:width="nodeWidth - 44"
:height="nodeHeight - 4"
>
<div class="job-text-wrap">
<span class="job-name">{{ job.name }}</span>
@@ -707,7 +709,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
.graph-container {
flex: 1;
overflow: hidden;
padding: 12px 16px 20px;
padding: 10px 14px 18px;
border-radius: 0 0 var(--border-radius) var(--border-radius);
cursor: grab;
position: relative;
@@ -730,7 +732,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
}
.highlighted-edge {
stroke-width: 2.25 !important;
stroke-width: 2 !important;
stroke: var(--color-workflow-edge-hover) !important;
}
@@ -749,18 +751,20 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
padding-right: 8px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1px;
padding: 4px 8px 4px 0;
overflow: hidden;
}
.job-name {
flex: 1;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
font-size: 12px;
font-weight: var(--font-weight-semibold);
color: var(--color-text);
user-select: none;
@@ -768,10 +772,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
}
.job-duration {
font-size: 11px;
font-size: 10px;
line-height: 1.2;
color: var(--color-text-light-2);
white-space: nowrap;
flex-shrink: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
pointer-events: none;
}
@@ -792,11 +799,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
.node-port {
fill: var(--color-box-body);
stroke: var(--color-light-border);
stroke-width: 1.5;
stroke-width: 1.25;
opacity: 0.85;
pointer-events: none;
}
.node-edge {
transition: stroke-width 0.2s ease, opacity 0.2s ease;
opacity: 0.75;
}
</style>

4
web_src/js/svg.ts
View File

@@ -32,6 +32,7 @@ import octiconFile from '../../public/assets/img/svg/octicon-file.svg';
import octiconFileCode from '../../public/assets/img/svg/octicon-file-code.svg';
import octiconFileDirectoryFill from '../../public/assets/img/svg/octicon-file-directory-fill.svg';
import octiconFileDirectoryOpenFill from '../../public/assets/img/svg/octicon-file-directory-open-fill.svg';
import octiconFileRemoved from '../../public/assets/img/svg/octicon-file-removed.svg';
import octiconFileSubmodule from '../../public/assets/img/svg/octicon-file-submodule.svg';
import octiconFileSymlinkFile from '../../public/assets/img/svg/octicon-file-symlink-file.svg';
import octiconFilter from '../../public/assets/img/svg/octicon-filter.svg';
@@ -45,6 +46,7 @@ import octiconGitPullRequestDraft from '../../public/assets/img/svg/octicon-git-
import octiconGrabber from '../../public/assets/img/svg/octicon-grabber.svg';
import octiconHeading from '../../public/assets/img/svg/octicon-heading.svg';
import octiconHorizontalRule from '../../public/assets/img/svg/octicon-horizontal-rule.svg';
import octiconHome from '../../public/assets/img/svg/octicon-home.svg';
import octiconImage from '../../public/assets/img/svg/octicon-image.svg';
import octiconIssueClosed from '../../public/assets/img/svg/octicon-issue-closed.svg';
import octiconIssueOpened from '../../public/assets/img/svg/octicon-issue-opened.svg';
@@ -116,6 +118,7 @@ const svgs = {
'octicon-file-code': octiconFileCode,
'octicon-file-directory-fill': octiconFileDirectoryFill,
'octicon-file-directory-open-fill': octiconFileDirectoryOpenFill,
'octicon-file-removed': octiconFileRemoved,
'octicon-file-submodule': octiconFileSubmodule,
'octicon-file-symlink-file': octiconFileSymlinkFile,
'octicon-filter': octiconFilter,
@@ -129,6 +132,7 @@ const svgs = {
'octicon-grabber': octiconGrabber,
'octicon-heading': octiconHeading,
'octicon-horizontal-rule': octiconHorizontalRule,
'octicon-home': octiconHome,
'octicon-image': octiconImage,
'octicon-issue-closed': octiconIssueClosed,
'octicon-issue-opened': octiconIssueOpened,