Actions list enhancements (#25601)

Various small enhancements to the actions list. Before and after:

<img width="1264" alt="Screenshot 2023-06-30 at 00 11 40"
src="https://github.com/go-gitea/gitea/assets/115237/bb4162ee-cdcf-4a73-b05e-f9521562edbb">
<img width="1264" alt="Screenshot 2023-06-30 at 00 09 51"
src="https://github.com/go-gitea/gitea/assets/115237/52a70ea9-4bb3-406e-904b-0fdaafde9582">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-07-04 11:59:47 +02:00 committed by GitHub
parent 9958642502
commit 0006169f38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 50 additions and 35 deletions

View file

@ -3463,7 +3463,7 @@ runners.reset_registration_token_success = Runner registration token reset succe
runs.all_workflows = All Workflows runs.all_workflows = All Workflows
runs.commit = Commit runs.commit = Commit
runs.pushed_by = Pushed by runs.pushed_by = pushed by
runs.invalid_workflow_helper = Workflow config file is invalid. Please check your config file: %s runs.invalid_workflow_helper = Workflow config file is invalid. Please check your config file: %s
runs.no_matching_runner_helper = No matching runner: %s runs.no_matching_runner_helper = No matching runner: %s
runs.actor = Actor runs.actor = Actor

View file

@ -16,12 +16,12 @@
<div class="ui {{if .PackageDescriptors}}issue list{{end}}"> <div class="ui {{if .PackageDescriptors}}issue list{{end}}">
{{range .PackageDescriptors}} {{range .PackageDescriptors}}
<li class="item gt-df gt-py-3"> <li class="item gt-df gt-py-3">
<div class="issue-item-main gt-f1 gt-fc gt-df"> <div class="issue-item-main">
<div class="issue-item-top-row"> <div class="issue-item-top-row">
<a class="title" href="{{.FullWebLink}}">{{.Package.Name}}</a> <a class="title" href="{{.FullWebLink}}">{{.Package.Name}}</a>
<span class="ui label">{{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}</span> <span class="ui label">{{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}</span>
</div> </div>
<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1"> <div class="desc issue-item-bottom-row">
{{$timeStr := TimeSinceUnix .Version.CreatedUnix $.locale}} {{$timeStr := TimeSinceUnix .Version.CreatedUnix $.locale}}
{{$hasRepositoryAccess := false}} {{$hasRepositoryAccess := false}}
{{if .Repository}} {{if .Repository}}

View file

@ -22,11 +22,11 @@
<div class="ui {{if .PackageDescriptors}}issue list{{end}}"> <div class="ui {{if .PackageDescriptors}}issue list{{end}}">
{{range .PackageDescriptors}} {{range .PackageDescriptors}}
<li class="item gt-df gt-py-3"> <li class="item gt-df gt-py-3">
<div class="issue-item-main gt-f1 gt-fc gt-df"> <div class="issue-item-main">
<div class="issue-item-top-row"> <div class="issue-item-top-row">
<a class="title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a> <a class="title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a>
</div> </div>
<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1"> <div class="desc issue-item-bottom-row">
{{$.locale.Tr "packages.published_by" (TimeSinceUnix .Version.CreatedUnix $.locale) .Creator.HomeLink (.Creator.GetDisplayName | Escape) | Safe}} {{$.locale.Tr "packages.published_by" (TimeSinceUnix .Version.CreatedUnix $.locale) .Creator.HomeLink (.Creator.GetDisplayName | Escape) | Safe}}
</div> </div>
</div> </div>

View file

@ -6,7 +6,6 @@
<div class="four wide column"> <div class="four wide column">
<div class="ui fluid vertical menu"> <div class="ui fluid vertical menu">
<a class="item{{if not $.CurWorkflow}} active{{end}}" href="{{$.Link}}?actor={{$.CurActor}}&status={{$.CurStatus}}">{{.locale.Tr "actions.runs.all_workflows"}}</a> <a class="item{{if not $.CurWorkflow}} active{{end}}" href="{{$.Link}}?actor={{$.CurActor}}&status={{$.CurStatus}}">{{.locale.Tr "actions.runs.all_workflows"}}</a>
<div class="divider"></div>
{{range .workflows}} {{range .workflows}}
<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="{{$.Link}}?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}} <a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="{{$.Link}}?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
{{if .ErrMsg}} {{if .ErrMsg}}

View file

@ -6,31 +6,34 @@
</div> </div>
{{end}} {{end}}
{{range .Runs}} {{range .Runs}}
<li class="item gt-df gt-py-4"> <li class="item gt-df gt-py-3">
<div class="issue-item-left issue-item-icon gt-df gt-items-start"> <div class="issue-item-left issue-item-icon gt-df gt-items-start">
{{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}} {{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}}
</div> </div>
<div class="issue-item-main action-item-main gt-f1 gt-fc gt-df gt-mr-3"> <div class="issue-item-main action-item-main">
<div class="issue-item-top-row gt-mb-2"> <div class="issue-item-top-row">
<a class="index gt-no-underline title action-item-title" title="{{.Title}}" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> <a class="index gt-no-underline title action-item-title" title="{{.Title}}" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{- .Title -}} {{- .Title -}}
</a> </a>
</div> </div>
<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw"> <div class="desc issue-item-bottom-row">
<b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b>: {{$.locale.Tr "actions.runs.commit"}} <b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b>
<a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a>{{$.locale.Tr "actions.runs.pushed_by"}} {{.TriggerUser.GetDisplayName}} : {{$.locale.Tr "actions.runs.commit"}}
<span class="ui label"> <a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a>
{{$.locale.Tr "actions.runs.pushed_by"}}
<a href="{{.TriggerUser.HomeLink}}">{{.TriggerUser.GetDisplayName}}</a>
</div>
</div>
<div class="action-item-center">
{{if .RefLink}} {{if .RefLink}}
<a href="{{.RefLink}}">{{.PrettyRef}}</a> <a class="ui label gt-px-2 gt-mx-0" href="{{.RefLink}}">{{.PrettyRef}}</a>
{{else}} {{else}}
{{.PrettyRef}} <span class="ui label gt-px-2 gt-mx-0">{{.PrettyRef}}</span>
{{end}} {{end}}
</span>
</div> </div>
</div> <div class="action-item-right">
<div class="issue-item-right"> <div>{{svg "octicon-calendar" 16 "gt-mr-2"}}{{TimeSinceUnix .Updated $.locale}}</div>
<div>{{TimeSinceUnix .Updated $.locale}}</div> <div>{{svg "octicon-stopwatch" 16 "gt-mr-2"}}{{.Duration}}</div>
<div>{{.Duration}}</div>
</div> </div>
</li> </li>
{{end}} {{end}}

View file

@ -10,7 +10,7 @@
{{template "shared/issueicon" .}} {{template "shared/issueicon" .}}
</div> </div>
</div> </div>
<div class="issue-item-main gt-f1 gt-fc gt-df"> <div class="issue-item-main">
<div class="issue-item-top-row"> <div class="issue-item-top-row">
<a class="title gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a> <a class="title gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
{{if .IsPull}} {{if .IsPull}}
@ -24,7 +24,7 @@
{{end}} {{end}}
</span> </span>
</div> </div>
<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1"> <div class="desc issue-item-bottom-row">
<a class="index gt-ml-0 gt-mr-2" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> <a class="index gt-ml-0 gt-mr-2" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{if eq $.listType "dashboard"}} {{if eq $.listType "dashboard"}}
{{.Repo.FullName}}#{{.Index}} {{.Repo.FullName}}#{{.Index}}

View file

@ -1633,6 +1633,7 @@ i.icon.centerlock {
.ui.label { .ui.label {
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
transition: none;
} }
.ui.label, .ui.label,

View file

@ -17,15 +17,24 @@
} }
.issue.list > .item .issue-item-main { .issue.list > .item .issue-item-main {
width: 100%; flex: 1;
display: flex;
flex-direction: column;
} }
.issue.list > .item .action-item-main { .issue.list > .item .action-item-center {
width: 80%; display: flex;
align-items: center;
padding-left: 4px;
padding-right: 12px;
} }
.issue.list > .item .issue-item-right { .issue.list > .item .action-item-right {
width: 15%; flex: 0 0 15%;
display: flex;
flex-direction: column;
gap: 3px;
color: var(--color-text-light);
} }
.issue.list > .item .issue-item-top-row { .issue.list > .item .issue-item-top-row {
@ -52,6 +61,10 @@
.issue.list > .item .issue-item-bottom-row { .issue.list > .item .issue-item-bottom-row {
font-size: 13px; font-size: 13px;
display: flex;
align-items: center;
flex-wrap: wrap;
margin: .125rem 0;
} }
.issue.list > .item .title { .issue.list > .item .title {

View file

@ -20,12 +20,12 @@
</div> </div>
<div class="action-commit-summary"> <div class="action-commit-summary">
{{ run.commit.localeCommit }} {{ run.commit.localeCommit }}
<a :href="run.commit.link">{{ run.commit.shortSHA }}</a> <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a>
{{ run.commit.localePushedBy }}
<a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
<span class="ui label" v-if="run.commit.shortSHA"> <span class="ui label" v-if="run.commit.shortSHA">
<a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a> <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
</span> </span>
{{ run.commit.localePushedBy }}
<a :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
</div> </div>
</div> </div>
<div class="action-view-body"> <div class="action-view-body">
@ -507,7 +507,6 @@ export function initRepositoryActionView() {
.action-view-header { .action-view-header {
margin-top: 8px; margin-top: 8px;
margin-bottom: 4px;
} }
.action-info-summary { .action-info-summary {
@ -522,14 +521,14 @@ export function initRepositoryActionView() {
.action-info-summary-title-text { .action-info-summary-title-text {
font-size: 20px; font-size: 20px;
margin: 0 0 0 5px; margin: 0 0 0 8px;
flex: 1; flex: 1;
} }
.action-commit-summary { .action-commit-summary {
display: flex; display: flex;
gap: 5px; gap: 5px;
margin: 5px 0 0 25px; margin: 0 0 0 28px;
} }
.action-view-left, .action-view-right { .action-view-left, .action-view-right {