From 46e97986f5ad3385bf6d731f19974fceac39ea20 Mon Sep 17 00:00:00 2001 From: Yarden Shoham <git@yardenshoham.com> Date: Tue, 9 May 2023 02:59:59 +0300 Subject: [PATCH] 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> --- options/locale/locale_en-US.ini | 1 + templates/repo/actions/view.tmpl | 10 +++++++++- web_src/js/components/RepoActionView.vue | 12 +++++++++--- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 573ddcf6f0..9bfc0033b4 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -79,6 +79,7 @@ milestones = Milestones ok = OK cancel = Cancel +rerun = Re-run save = Save add = Add add_all = Add All diff --git a/templates/repo/actions/view.tmpl b/templates/repo/actions/view.tmpl index 0c04671153..85e6f736d8 100644 --- a/templates/repo/actions/view.tmpl +++ b/templates/repo/actions/view.tmpl @@ -2,7 +2,15 @@ <div class="page-content repository"> {{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> {{template "base/footer" .}} diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 7389cfe114..3d44f3ef47 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -6,13 +6,13 @@ <div class="action-title"> {{ run.title }} </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"/> </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"/> </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"/> </button> </div> @@ -93,6 +93,7 @@ const sfc = { runIndex: String, jobIndex: String, actionsURL: String, + locale: Object, }, data() { @@ -314,6 +315,11 @@ export function initRepositoryActionView() { runIndex: el.getAttribute('data-run-index'), jobIndex: el.getAttribute('data-job-index'), 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); }