Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wxiaoguang merged 12 commits into from
Feb 22, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7801036
init
Feb 17, 2026
67c5761
Add status-button-<icon|text> wrappers
Feb 18, 2026
2fc4155
Merge branch 'main' into feature/add-icon-to-close-comment-issue-btn
silverwind Feb 22, 2026
b25786b
Use neutral button style with colored icons for close/reopen buttons
silverwind Feb 22, 2026
081be8f
Use specific reopen text for issues and pull requests
silverwind Feb 22, 2026
a00e0e6
use Iif and ternary
silverwind Feb 22, 2026
d09d751
use !
silverwind Feb 22, 2026
c52d2da
Increase button gap and remove redundant margin classes
silverwind Feb 22, 2026
1d1ff2d
fix
wxiaoguang Feb 22, 2026
cf25e4f
fix
wxiaoguang Feb 22, 2026
3ce4867
add comment
wxiaoguang Feb 22, 2026
5aa1e23
fix
wxiaoguang Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion options/locale/locale_en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions templates/repo/graph.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
25 changes: 15 additions & 10 deletions templates/repo/issue/view_content.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/view_content.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/user/settings/applications.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions templates/user/settings/applications_oauth2_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
1 change: 0 additions & 1 deletion web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1095,7 +1095,6 @@ table th[data-sortt-desc] .svg {
}

.btn,
.ui.ui.button,
.ui.ui.dropdown,
.flex-text-inline,
.flex-text-inline > a,
Expand Down
6 changes: 6 additions & 0 deletions web_src/css/modules/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand Down
3 changes: 2 additions & 1 deletion web_src/js/features/repo-issue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down