Add icon to buttons "Close with Comment", "Close Pull Request", "Close Issue" (#36654)

Newbies often use the "Close with Comments" button instead of deleting
their comment. Icon should prevent mis-clicks.

---------

Co-authored-by: Yuriy.Khlynovskiy <yuriy.khlynovskiy@incomsystem.ru>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Yuriy Khlynovskiy
2026-02-22 16:12:07 +03:00
committed by GitHub
parent eb59b1a24a
commit d9ac0636d0
9 changed files with 31 additions and 19 deletions

View File

@@ -1533,7 +1533,7 @@
"repo.issues.comment_pull_merged_at": "merged commit %[1]s into %[2]s %[3]s",
"repo.issues.comment_manually_pull_merged_at": "manually merged commit %[1]s into %[2]s %[3]s",
"repo.issues.close_comment_issue": "Close with Comment",
"repo.issues.reopen_issue": "Reopen",
"repo.issues.reopen_issue": "Reopen Issue",
"repo.issues.reopen_comment_issue": "Reopen with Comment",
"repo.issues.create_comment": "Comment",
"repo.issues.comment.blocked_user": "Cannot create or edit comment because you are blocked by the poster or repository owner.",
@@ -1877,6 +1877,7 @@
"repo.pulls.update_not_allowed": "You are not allowed to update branch",
"repo.pulls.outdated_with_base_branch": "This branch is out-of-date with the base branch",
"repo.pulls.close": "Close Pull Request",
"repo.pulls.reopen": "Reopen Pull Request",
"repo.pulls.closed_at": "closed this pull request <a id=\"%[1]s\" href=\"#%[1]s\">%[2]s</a>",
"repo.pulls.reopened_at": "reopened this pull request <a id=\"%[1]s\" href=\"#%[1]s\">%[2]s</a>",
"repo.pulls.cmd_instruction_hint": "View command line instructions",

View File

@@ -40,8 +40,8 @@
{{end}}
</div>
</div>
<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
</div>
</h2>
<div id="git-graph-body">

View File

@@ -84,19 +84,24 @@
<div class="field footer">
<div class="flex-text-block tw-justify-end">
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
{{$btnIconColor := ""}}{{$btnIcon := ""}}{{$btnTextNoComment := ""}}{{$btnTextWithComment := ""}}{{$btnValue := ""}}
{{if .Issue.IsClosed}}
<button id="status-button" class="ui primary basic button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen">
{{ctx.Locale.Tr "repo.issues.reopen_issue"}}
</button>
{{$btnValue = "reopen"}}
{{$btnIconColor = "tw-text-green"}}
{{$btnIcon = Iif .Issue.IsPull "octicon-git-pull-request" "octicon-issue-reopened"}}
{{$btnTextNoComment = ctx.Locale.Tr (Iif .Issue.IsPull "repo.pulls.reopen" "repo.issues.reopen_issue")}}
{{$btnTextWithComment = ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}{{/* general: Reopen with Comment */}}
{{else}}
{{$closeTranslationKey := "repo.issues.close"}}
{{if .Issue.IsPull}}
{{$closeTranslationKey = "repo.pulls.close"}}
{{end}}
<button id="status-button" class="ui red basic button" data-status="{{ctx.Locale.Tr $closeTranslationKey}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.close_comment_issue"}}" name="status" value="close">
{{ctx.Locale.Tr $closeTranslationKey}}
</button>
{{$btnValue = "close"}}
{{$btnIconColor = "tw-text-red"}}
{{$btnIcon = Iif .Issue.IsPull "octicon-git-pull-request-closed" "octicon-issue-closed"}}
{{$btnTextNoComment = ctx.Locale.Tr (Iif .Issue.IsPull "repo.pulls.close" "repo.issues.close")}}
{{$btnTextWithComment = ctx.Locale.Tr "repo.issues.close_comment_issue"}}{{/* general: Close with Comment */}}
{{end}}
<button id="status-button" class="ui button" data-status="{{$btnTextNoComment}}" data-status-and-comment="{{$btnTextWithComment}}" name="status" value="{{$btnValue}}">
<span class="status-button-icon {{$btnIconColor}}">{{svg $btnIcon}}</span>
<span class="status-button-text">{{$btnTextNoComment}}</span>
</button>
{{end}}
<button id="comment-button" class="ui primary button">
{{ctx.Locale.Tr "repo.issues.create_comment"}}

View File

@@ -116,7 +116,7 @@
{{end}}
{{if and (not $isTreePathRoot) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
<a class="ui compact button" href="{{.RepoLink}}/commits/{{.RefTypeNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
{{svg "octicon-history"}}{{ctx.Locale.Tr "repo.file_history"}}
</a>
{{end}}
</div>

View File

@@ -41,7 +41,7 @@
</div>
<div class="flex-item-trailing">
<button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
{{svg "octicon-trash" 16 "tw-mr-1"}}
{{svg "octicon-trash"}}
{{ctx.Locale.Tr "settings.delete_token"}}
</button>
</div>

View File

@@ -21,12 +21,12 @@
<span class="ui basic label" data-tooltip-content="{{ctx.Locale.Tr "settings.oauth2_application_locked"}}">{{ctx.Locale.Tr "locked"}}</span>
{{else}}
<a href="{{$.Link}}/oauth2/{{.ID}}" class="ui primary tiny button">
{{svg "octicon-pencil" 16 "tw-mr-1"}}
{{svg "octicon-pencil"}}
{{ctx.Locale.Tr "settings.oauth2_application_edit"}}
</a>
<button class="ui red tiny button delete-button" data-modal-id="remove-gitea-oauth2-application"
data-url="{{$.Link}}/oauth2/{{.ID}}/delete">
{{svg "octicon-trash" 16 "tw-mr-1"}}
{{svg "octicon-trash"}}
{{ctx.Locale.Tr "settings.delete_key"}}
</button>
{{end}}

View File

@@ -1095,7 +1095,6 @@ table th[data-sortt-desc] .svg {
}
.btn,
.ui.ui.button,
.ui.ui.dropdown,
.flex-text-inline,
.flex-text-inline > a,

View File

@@ -1,6 +1,8 @@
.ui.button {
cursor: pointer;
display: inline-flex;
align-items: center;
min-width: 0;
outline: none;
font-family: var(--fonts-regular);
margin: 0 0.25em 0 0;
@@ -100,11 +102,13 @@
/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
.ui.button { /* stylelint-disable-line no-duplicate-selectors */
gap: var(--gap-block);
min-height: 38px;
padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
}
.ui.compact.buttons .button,
.ui.compact.button {
gap: var(--gap-inline);
padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
min-height: 32px;
}
@@ -118,6 +122,7 @@
.ui.mini.buttons .dropdown .menu > .item,
.ui.mini.buttons .button,
.ui.ui.ui.ui.mini.button {
gap: var(--gap-inline);
font-size: 11px;
min-height: 30px;
}
@@ -130,6 +135,7 @@
.ui.tiny.buttons .dropdown .menu > .item,
.ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {
gap: var(--gap-inline);
font-size: 12px;
min-height: 32px;
}

View File

@@ -513,7 +513,8 @@ async function initSingleCommentEditor(commentForm: HTMLFormElement) {
const syncUiState = () => {
const editorText = editor.value().trim(), isUploading = editor.isUploading();
if (statusButton) {
statusButton.textContent = statusButton.getAttribute(editorText ? 'data-status-and-comment' : 'data-status');
const statusText = statusButton.getAttribute(editorText ? 'data-status-and-comment' : 'data-status');
statusButton.querySelector<HTMLElement>('.status-button-text')!.textContent = statusText;
statusButton.disabled = isUploading;
}
if (commentButton) {