Attach a tooltip to the action control button (#24595)

The first time I saw the big red X button I thought something failed but
apparently, it was just a "Cancel" button

# Before

![image](https://user-images.githubusercontent.com/20454870/236889564-3729926a-cfb3-4e47-a8ed-51389c4f193f.png)

![image](https://user-images.githubusercontent.com/20454870/236886259-b0ab0d55-28c3-41f5-8709-8cfc6819423f.png)

![image](https://user-images.githubusercontent.com/20454870/236886081-b7a97f01-6108-4c18-9adb-11cbafd8c19c.png)

# After

![image](https://user-images.githubusercontent.com/20454870/236889690-d1dfd74d-ad7d-4571-b712-69f0dc630c6e.png)

![image](https://user-images.githubusercontent.com/20454870/236885823-0734216d-b450-4a43-bfe3-e88525a8822a.png)

![image](https://user-images.githubusercontent.com/20454870/236903320-3b415619-8aff-4e5d-994e-6faa671990db.png)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Yarden Shoham 2023-05-09 02:59:59 +03:00 committed by GitHub
parent def4956122
commit 46e97986f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 4 deletions

View file

@ -79,6 +79,7 @@ milestones = Milestones
ok = OK ok = OK
cancel = Cancel cancel = Cancel
rerun = Re-run
save = Save save = Save
add = Add add = Add
add_all = Add All add_all = Add All

View file

@ -2,7 +2,15 @@
<div class="page-content repository"> <div class="page-content repository">
{{template "repo/header" .}} {{template "repo/header" .}}
<div id="repo-action-view" data-run-index="{{.RunIndex}}" data-job-index="{{.JobIndex}}" data-actions-url="{{.ActionsURL}}"></div> <div id="repo-action-view"
data-run-index="{{.RunIndex}}"
data-job-index="{{.JobIndex}}"
data-actions-url="{{.ActionsURL}}"
data-locale-approve="{{.locale.Tr "repo.diff.review.approve"}}"
data-locale-cancel="{{.locale.Tr "cancel"}}"
data-locale-rerun="{{.locale.Tr "rerun"}}"
>
</div>
</div> </div>
{{template "base/footer" .}} {{template "base/footer" .}}

View file

@ -6,13 +6,13 @@
<div class="action-title"> <div class="action-title">
{{ run.title }} {{ run.title }}
</div> </div>
<button class="action-control-button text green" @click="approveRun()" v-if="run.canApprove"> <button :data-tooltip-content="locale.approve" class="action-control-button text green" @click="approveRun()" v-if="run.canApprove">
<SvgIcon name="octicon-play" :size="20"/> <SvgIcon name="octicon-play" :size="20"/>
</button> </button>
<button class="action-control-button text red" @click="cancelRun()" v-else-if="run.canCancel"> <button :data-tooltip-content="locale.cancel" class="action-control-button text red" @click="cancelRun()" v-else-if="run.canCancel">
<SvgIcon name="octicon-x-circle-fill" :size="20"/> <SvgIcon name="octicon-x-circle-fill" :size="20"/>
</button> </button>
<button class="action-control-button text green" @click="rerun()" v-else-if="run.canRerun"> <button :data-tooltip-content="locale.rerun" class="action-control-button text green" @click="rerun()" v-else-if="run.canRerun">
<SvgIcon name="octicon-sync" :size="20"/> <SvgIcon name="octicon-sync" :size="20"/>
</button> </button>
</div> </div>
@ -93,6 +93,7 @@ const sfc = {
runIndex: String, runIndex: String,
jobIndex: String, jobIndex: String,
actionsURL: String, actionsURL: String,
locale: Object,
}, },
data() { data() {
@ -314,6 +315,11 @@ export function initRepositoryActionView() {
runIndex: el.getAttribute('data-run-index'), runIndex: el.getAttribute('data-run-index'),
jobIndex: el.getAttribute('data-job-index'), jobIndex: el.getAttribute('data-job-index'),
actionsURL: el.getAttribute('data-actions-url'), actionsURL: el.getAttribute('data-actions-url'),
locale: {
approve: el.getAttribute('data-locale-approve'),
cancel: el.getAttribute('data-locale-cancel'),
rerun: el.getAttribute('data-locale-rerun'),
}
}); });
view.mount(el); view.mount(el);
} }