Improve ellipsis buttons (#17773)

* Improve ellipsis buttons

- Remove icon font usage
- Add aria-expanded attribute

* rename function to match

Co-authored-by: Lunny Xiao <[email protected]>
Co-authored-by: wxiaoguang <[email protected]>
Co-authored-by: techknowlogick <[email protected]>

Author: 4 people

templates/repo/commits_list.tmpl

@@ -67,7 +67,7 @@
 							{{end}}
 							</span>
 							{{if IsMultilineCommitMessage .Message}}
-							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+							<button class="ui button ellipsis-button" aria-expanded="false">...</button>
 							{{end}}
 							{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}}
 							{{if IsMultilineCommitMessage .Message}}

templates/repo/commits_list_small.tmpl

@@ -49,7 +49,7 @@
 		{{ $commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String) }}
 		<span class="mono commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $commitLink $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</span>
 		{{if IsMultilineCommitMessage .Message}}
-			<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+			<button class="ui button ellipsis-button" aria-expanded="false">...</button>
 		{{end}}
 		{{if IsMultilineCommitMessage .Message}}
 			<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</pre>

templates/repo/view_list.tmpl

@@ -28,7 +28,7 @@
 					{{ $commitLink:= printf "%s/commit/%s" .RepoLink (PathEscape .LatestCommit.ID.String) }}
 					<span class="grey commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{RenderCommitMessageLinkSubject .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span>
 						{{if IsMultilineCommitMessage .LatestCommit.Message}}
-							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+							<button class="ui button ellipsis-button" aria-expanded="false">...</button>
 							<pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 						{{end}}
 					</span>

web_src/js/features/repo-commit.js

@@ -1,9 +1,11 @@
 const {csrfToken} = window.config;
 
-export function initRepoCommitButton() {
-  $('.commit-button').on('click', function (e) {
+export function initRepoEllipsisButton() {
+  $('.ellipsis-button').on('click', function (e) {
     e.preventDefault();
+    const expanded = $(this).attr('aria-expanded') === 'true';
     $(this).parent().find('.commit-body').toggle();
+    $(this).attr('aria-expanded', String(!expanded));
   });
 }
 

web_src/js/index.js

@@ -36,7 +36,7 @@ import {
   initRepoPullRequestMergeInstruction,
   initRepoPullRequestReview,
 } from './features/repo-issue.js';
-import {initRepoCommitButton, initRepoCommitLastCommitLoader} from './features/repo-commit.js';
+import {initRepoEllipsisButton, initRepoCommitLastCommitLoader} from './features/repo-commit.js';
 import {
   initFootLanguageMenu,
   initGlobalButtonClickOnEnter,
@@ -132,7 +132,7 @@ $(document).ready(() => {
   initRepoBranchButton();
   initRepoCodeView();
   initRepoCommentForm();
-  initRepoCommitButton();
+  initRepoEllipsisButton();
   initRepoCommitLastCommitLoader();
   initRepoDiffConversationForm();
   initRepoDiffFileViewToggle();

web_src/less/_base.less

@@ -2104,6 +2104,15 @@ table th[data-sortt-desc] {
   display: flex !important;
 }
 
+.ellipsis-button {
+  padding: 0 5px 8px !important;
+  display: inline-block !important;
+  user-select: none !important;
+  font-weight: 600 !important;
+  line-height: 6px !important;
+  vertical-align: middle !important;
+}
+
 .truncated-item-name {
   line-height: 2em;
   white-space: nowrap;