thepaperpilot/forgejo
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fix style of actions rerun button (#22835)

Browse source 
Authored by @a1012112796 at
https://github.com/go-gitea/gitea/pull/22798#issuecomment-1421820001

Avoid putting `button` in `a`.

A patch for #22798 .

Now it looks like:

<img width="393" alt="image"
src="https://user-images.githubusercontent.com/9418365/217791913-b491fc86-ee9b-4672-80ea-7286eef2d11f.png">
<img width="389" alt="image"
src="https://user-images.githubusercontent.com/9418365/217791967-d8c09c8b-4cea-4011-b01e-db0d1333e7f6.png">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
Jason Song 2023-02-12 19:19:50 +08:00 committed by GitHub
parent 34399cfd7a
commit a354636966
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
web_src/js/components/RepoActionView.vue
View file

@ -12,19 +12,20 @@
<div class="action-view-left"> <div class="action-view-left">
<div class="job-group-section"> <div class="job-group-section">
<div class="job-brief-list"> <div class="job-brief-list">
<a class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id" :href="run.link+'/jobs/'+index"> <div class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id">
<a class="job-brief-link" :href="run.link+'/jobs/'+index">
<SvgIcon name="octicon-check-circle-fill" class="green" v-if="job.status === 'success'"/> <SvgIcon name="octicon-check-circle-fill" class="green" v-if="job.status === 'success'"/>
<SvgIcon name="octicon-skip" class="ui text grey" v-else-if="job.status === 'skipped'"/> <SvgIcon name="octicon-skip" class="ui text grey" v-else-if="job.status === 'skipped'"/>
<SvgIcon name="octicon-clock" class="ui text yellow" v-else-if="job.status === 'waiting'"/> <SvgIcon name="octicon-clock" class="ui text yellow" v-else-if="job.status === 'waiting'"/>
<SvgIcon name="octicon-blocked" class="ui text yellow" v-else-if="job.status === 'blocked'"/> <SvgIcon name="octicon-blocked" class="ui text yellow" v-else-if="job.status === 'blocked'"/>
<SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/> <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/>
<SvgIcon name="octicon-x-circle-fill" class="red" v-else/> <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
{{ job.name }} <span class="ui text">{{ job.name }}</span>
<!-- TODO: it will be a better idea to move "button" out from "a", and the ".prevent" will not be needed. But it needs some work with CSS --> </a>
<button class="job-brief-rerun" @click.prevent="rerunJob(index)" v-if="job.canRerun"> <button class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun">
<SvgIcon name="octicon-sync" class="ui text black"/> <SvgIcon name="octicon-sync" class="ui text black"/>
</button> </button>
</a> </div>
</div> </div>
</div> </div>
</div> </div>
@ -291,7 +292,7 @@ export function initRepositoryActionView() {
.action-view-header { .action-view-header {
margin: 0 20px 20px 20px; margin: 0 20px 20px 20px;
button.run_cancel { .run_cancel {
border: none; border: none;
color: var(--color-red); color: var(--color-red);
background-color: transparent; background-color: transparent;
@ -299,7 +300,7 @@ export function initRepositoryActionView() {
cursor: pointer; cursor: pointer;
transition:transform 0.2s; transition:transform 0.2s;
}; };
button.run_cancel:hover{ .run_cancel:hover{
transform:scale(130%); transform:scale(130%);
}; };
} }
@ -327,14 +328,16 @@ export function initRepositoryActionView() {
} }
.job-brief-list { .job-brief-list {
a.job-brief-item { .job-brief-item {
display: block;
margin: 5px 0; margin: 5px 0;
padding: 10px; padding: 10px;
background: var(--color-info-bg); background: var(--color-info-bg);
border-radius: 5px; border-radius: 5px;
text-decoration: none; text-decoration: none;
button.job-brief-rerun { display: flex;
justify-items: center;
flex-wrap: nowrap;
.job-brief-rerun {
float: right; float: right;
border: none; border: none;
background-color: transparent; background-color: transparent;
@ -342,11 +345,20 @@ export function initRepositoryActionView() {
cursor: pointer; cursor: pointer;
transition:transform 0.2s; transition:transform 0.2s;
}; };
button.job-brief-rerun:hover{ .job-brief-rerun:hover{
transform:scale(130%); transform:scale(130%);
}; };
.job-brief-link {
flex-grow: 1;
display: flex;
span {
margin-right: 8px;
display: flex;
align-items: center;
} }
a.job-brief-item:hover { }
}
.job-brief-item:hover {
background-color: var(--color-secondary); background-color: var(--color-secondary);
} }
} }