public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-23 05:42:33 +09:00
Code Issues Packages Projects Releases Wiki Activity

style: misc UI fixes (#37691)

Browse Source 
- Action view sidebar: rename `job-brief-item` to
`action-view-sidebar-item`, fix trash icon overflow on long artifact
names, align artifact and workflow hover styles with the jobs list
- Branches: expand new PR button cell to three wide so the button is not
clipped on narrow viewports
- Dashboard feed: add `tw-max-w-full` so long issue titles truncate
- Reactions: tighten label padding

<img width="261" height="65" alt="Screenshot 2026-05-13 at 16 18 33"
src="https://github.com/user-attachments/assets/ecfe8f37-4a65-4839-b8c0-defccc85482c"
/>
<img width="154" height="126" alt="Screenshot 2026-05-13 at 16 19 25"
src="https://github.com/user-attachments/assets/41302134-d1b7-401a-be2d-79173adb6d17"
/>
<img width="405" height="378" alt="Screenshot 2026-05-13 at 16 47 18"
src="https://github.com/user-attachments/assets/e2c5cdd4-f11d-498c-b17e-c74c80c0ddf7"
/>
<img width="206" height="149" alt="Screenshot 2026-05-13 at 16 55 53"
src="https://github.com/user-attachments/assets/7787125d-04b1-4500-b9b8-2637845509d6"
/>
<img width="858" height="135" alt="Screenshot 2026-05-13 at 16 58 41"
src="https://github.com/user-attachments/assets/cb5bdf56-3891-469d-aa77-ea38855958c1"
/>
<img width="434" height="128" alt="Screenshot 2026-05-13 at 17 00 43"
src="https://github.com/user-attachments/assets/60f2c34d-b345-4813-8f6d-a95bf51021b4"
/>



---
This PR was written with the help of Claude Opus 4.7

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
2026-05-21 09:02:05 +02:00
committed by GitHub
parent 93b8fdcd68
commit 2e96e8227f
17 changed files with 154 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web_src/js/components/ActionRunJobView.vue
View File

@@ -411,7 +411,7 @@ async function hashChangeListener() {
</div>
<div class="job-info-header-right">
<div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
<button class="ui button tw-px-3">
<button class="btn interact-bg tw-p-2">
<SvgIcon name="octicon-gear" :size="18"/>
</button>
<div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
@@ -463,8 +463,9 @@ async function hashChangeListener() {
/>
<SvgIcon
v-else
:name="currentJobStepsStates[stepIdx].expanded ? 'octicon-chevron-down' : 'octicon-chevron-right'"
:class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"
name="octicon-chevron-right"
class="tw-mr-2 step-summary-chevron"
:class="{'tw-invisible': !isExpandable(jobStep.status)}"
/>
<ActionStatusIcon :status="jobStep.status" icon-variant="circle-fill" class="tw-mr-2"/>
<span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
@@ -564,6 +565,14 @@ async function hashChangeListener() {
background: var(--color-console-hover-bg);
}
.job-step-container .job-step-summary .step-summary-chevron {
transition: transform 0.1s ease;
}
.job-step-container .job-step-summary.selected .step-summary-chevron {
transform: rotate(90deg);
}
.job-step-container .job-step-summary .step-summary-msg {
flex: 1;
}
@@ -707,13 +716,25 @@ async function hashChangeListener() {
}
.job-log-group-summary {
cursor: pointer;
position: relative;
display: list-item;
list-style: disclosure-closed inside;
padding-left: 58px; /* line-num gutter (48px) + log-msg margin (10px), so the marker sits in the content column */
}
.job-log-group[open] > .job-log-group-summary {
list-style-type: disclosure-open;
}
.job-log-group-summary > .job-log-line {
position: absolute;
inset: 0;
z-index: -1; /* to avoid hiding the triangle of the "details" element */
z-index: -1; /* sit behind the disclosure marker */
overflow: hidden;
}
.job-log-group-summary > .job-log-line .log-msg {
margin-left: 21px;
}
</style>

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

@@ -142,35 +142,36 @@ async function deleteArtifact(name: string) {
<div class="action-view-body">
<div class="action-view-left">
<!-- summary -->
<a class="job-brief-item silenced" :href="run.viewLink" :class="!props.jobId ? 'selected' : ''">
<SvgIcon name="octicon-home"/>
<span class="gt-ellipsis">{{ locale.summary }}</span>
</a>
<div class="flex-items-block action-view-sidebar-list">
<a class="item silenced" :href="run.viewLink" :class="!props.jobId ? 'selected' : ''">
<SvgIcon name="octicon-home"/>
<span class="gt-ellipsis">{{ locale.summary }}</span>
</a>
</div>
<!-- jobs list -->
<div class="ui divider"/>
<div class="left-list-header">{{ locale.allJobs }}</div>
<!-- unlike other lists, the items have paddings already -->
<ul class="ui relaxed list flex-items-block tw-p-0">
<li class="item job-brief-item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
<a class="tw-contents silenced" :href="job.link">
<div class="flex-items-block action-view-sidebar-list">
<div class="item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
<a class="flex-text-block tw-flex-1 silenced" :href="job.link">
<ActionStatusIcon :locale-status="locale.status[job.status]" :status="job.status" icon-variant="circle-fill"/>
<span class="tw-flex-1 gt-ellipsis">{{ job.name }}</span>
<SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
<span>{{ job.duration }}</span>
<SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-rerun-button tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
<span class="job-duration">{{ job.duration }}</span>
</a>
</li>
</ul>
</div>
</div>
<!-- artifacts list -->
<template v-if="artifacts.length > 0">
<div class="ui divider"/>
<div class="left-list-header">{{ locale.artifactsTitle }} ({{ artifacts.length }})</div>
<ul class="ui relaxed list flex-items-block">
<li class="item" v-for="artifact in artifacts" :key="artifact.name">
<div class="flex-items-block action-view-sidebar-list">
<div class="item" v-for="artifact in artifacts" :key="artifact.name">
<template v-if="artifact.status !== 'expired'">
<a
class="tw-flex-1 flex-text-block muted" target="_blank"
class="tw-flex-1 tw-min-w-0 flex-text-block silenced" target="_blank"
:href="buildArtifactLink(artifact.name)"
:data-tooltip-content="buildArtifactTooltipHtml(artifact, locale.artifactExpiresAt)"
data-tooltip-render="html"
@@ -179,7 +180,7 @@ async function deleteArtifact(name: string) {
<SvgIcon name="octicon-file" class="tw-text-text-light"/>
<span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
</a>
<a v-if="run.canDeleteArtifact" class="muted" @click="deleteArtifact(artifact.name)">
<a v-if="run.canDeleteArtifact" class="silenced" @click="deleteArtifact(artifact.name)">
<SvgIcon name="octicon-trash"/>
</a>
</template>
@@ -188,21 +189,21 @@ async function deleteArtifact(name: string) {
<span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
<span class="ui label tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
</span>
</li>
</ul>
</div>
</div>
</template>
<!-- run details -->
<div class="ui divider"/>
<div class="left-list-header">{{ locale.runDetails }}</div>
<ul class="ui relaxed list">
<li class="item">
<a class="flex-text-block" :href="`${run.link}/workflow`">
<div class="flex-items-block action-view-sidebar-list">
<div class="item">
<a class="flex-text-block silenced" :href="`${run.link}/workflow`">
<SvgIcon name="octicon-file-code" class="tw-text-text"/>
<span class="gt-ellipsis">{{ locale.workflowFile }}</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="action-view-right">
@@ -309,29 +310,44 @@ async function deleteArtifact(name: string) {
color: var(--color-text-light-2);
}
.action-view-left .ui.relaxed.list {
.action-view-sidebar-list {
margin: var(--gap-block) 0;
padding-left: 10px;
}
.job-brief-item {
.action-view-sidebar-list:first-child {
margin-top: 0;
}
.action-view-sidebar-list > .item {
padding: 6px 10px;
border-radius: var(--border-radius);
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--gap-block);
}
.job-brief-item:hover {
.action-view-sidebar-list > .item:hover {
background-color: var(--color-hover);
}
.job-brief-item.selected {
.action-view-sidebar-list > .item.selected {
font-weight: var(--font-weight-bold);
background-color: var(--color-active);
}
/* the re-run button replaces the duration on hover/focus */
.action-view-sidebar-list > .item .job-rerun-button {
display: none;
}
.action-view-sidebar-list > .item:hover .job-rerun-button,
.action-view-sidebar-list > .item:focus-within .job-rerun-button {
display: inline-flex;
}
/* only swap out the duration when a re-run button exists to take its place */
.action-view-sidebar-list > .item:hover .job-rerun-button ~ .job-duration,
.action-view-sidebar-list > .item:focus-within .job-rerun-button ~ .job-duration {
display: none;
}
/* ================ */
/* action view right */